File size: 5,925 Bytes
ce82d17 | 1 2 | @import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap";:root{--bg0: #071820;--bg1: #0b3d4a;--bg2: #125a63;--ink: #f2f7f8;--muted: #a7c2c7;--accent: #2ec4b6;--accent-2: #f4a261;--danger: #e76f51;--panel: rgba(8, 28, 34, .72);--line: rgba(174, 214, 220, .22);--shadow: 0 24px 60px rgba(0, 0, 0, .35);font-family:Manrope,sans-serif;color:var(--ink);background:var(--bg0)}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{min-height:100vh;background:radial-gradient(1200px 600px at 10% -10%,rgba(46,196,182,.18),transparent 60%),radial-gradient(900px 500px at 90% 0%,rgba(244,162,97,.12),transparent 55%),linear-gradient(165deg,#071820,#0b3d4a 48%,#083038);background-attachment:fixed}.app{max-width:1400px;margin:0 auto;padding:2rem 1.25rem 3rem}.hero{margin-bottom:1.5rem}.eyebrow{margin:0 0 .5rem;letter-spacing:.12em;text-transform:uppercase;font-size:.75rem;color:var(--accent);font-weight:700}h1{margin:0;font-size:clamp(2rem,4vw,3.4rem);line-height:1.05;font-weight:800;letter-spacing:-.03em;max-width:16ch}.subtitle{margin:.85rem 0 0;max-width:42rem;color:var(--muted);font-size:1.05rem}.guidance{margin:.65rem 0 0;color:var(--ink);font-weight:600}.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:1.25rem}.btn{border:0;border-radius:999px;padding:.7rem 1.2rem;font:inherit;font-weight:700;cursor:pointer;transition:transform .15s ease,opacity .15s ease}.btn:disabled{opacity:.45;cursor:not-allowed}.btn:not(:disabled):hover{transform:translateY(-1px)}.btn.primary{background:var(--accent);color:#042229}.btn.secondary{background:transparent;color:var(--ink);border:1px solid var(--line)}.btn.danger{background:var(--danger);color:#fff}.model-toggle,.view-toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:#0003}.model-toggle button,.view-toggle button{border:0;background:transparent;color:var(--muted);font:inherit;font-weight:650;padding:.65rem .95rem;cursor:pointer}.model-toggle button.active,.view-toggle button.active{background:#2ec4b633;color:var(--ink)}.prompt-toggle{margin-top:.9rem;background:none;border:0;color:var(--muted);font:inherit;text-decoration:underline;cursor:pointer;padding:0}.prompt-box{display:block;width:min(100%,52rem);margin-top:.65rem;border-radius:12px;border:1px solid var(--line);background:#00000047;color:var(--ink);padding:.85rem 1rem;font:inherit;resize:vertical}.status{margin:.9rem 0 0;color:var(--accent-2);font-weight:600}.workspace{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(320px,1.1fr);gap:1rem;min-height:min(70vh,820px)}.pane{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:hidden;display:flex;flex-direction:column;min-height:520px}.pane-label{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}.preview-pane{padding:1rem}.preview-image{width:100%;max-height:62vh;object-fit:contain;border-radius:12px;background:#00000040;margin-top:.75rem}.preview-fallback{margin-top:.75rem;min-height:280px;display:grid;place-content:center;gap:.4rem;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:12px;padding:1rem}.examples{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto;padding-top:1rem}.example-chip{border:1px solid var(--line);background:#ffffff0a;color:var(--ink);border-radius:999px;padding:.4rem .8rem;font:inherit;font-size:.85rem;cursor:pointer}.example-chip:hover:not(:disabled){border-color:var(--accent)}.result-toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1rem .5rem}.markdown-source,.markdown-render{margin:0;padding:1rem 1.1rem 1.4rem;overflow:auto;flex:1}.markdown-source{font-family:JetBrains Mono,ui-monospace,monospace;font-size:.82rem;line-height:1.55;white-space:pre-wrap;color:#d7ecef}.markdown-render{line-height:1.65}.markdown-render :is(h1,h2,h3){line-height:1.2;margin:1rem 0 .5rem}.markdown-render table{border-collapse:collapse;width:100%;margin:.75rem 0;font-size:.92rem}.markdown-render th,.markdown-render td{border:1px solid var(--line);padding:.4rem .55rem}.markdown-render img{max-width:100%;border-radius:8px;margin:.75rem 0}.markdown-render .visual-placeholder{padding:.75rem;border:1px dashed var(--line);border-radius:8px;color:var(--muted);margin:.75rem 0}.markdown-render .muted{color:var(--muted)}@media(max-width:960px){.workspace{grid-template-columns:1fr}h1{max-width:none}}.api-docs{margin-top:1.1rem}.api-docs-bar{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center}.api-link{color:var(--muted);font-size:.9rem;font-weight:600;text-decoration:underline;text-underline-offset:3px}.api-link:hover{color:var(--accent)}.api-panel{margin-top:.85rem;padding:1rem 1.1rem 1.15rem;border:1px solid var(--line);border-radius:16px;background:#00000047;max-width:52rem}.api-lead{margin:0 0 .75rem;color:var(--muted);line-height:1.55}.api-lead code,.api-meta code,.api-params code{font-family:JetBrains Mono,ui-monospace,monospace;font-size:.85em;color:var(--accent)}.api-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin-bottom:.85rem;color:var(--ink);font-size:.92rem}.api-tabs{margin-bottom:.65rem}.api-code-wrap{position:relative}.api-copy{position:absolute;top:.55rem;right:.55rem;border:1px solid var(--line);background:#071820e6;color:var(--ink);border-radius:999px;padding:.3rem .7rem;font:inherit;font-size:.8rem;font-weight:700;cursor:pointer}.api-code{margin:0;padding:.9rem 1rem 1rem;overflow:auto;border-radius:12px;background:#00000059;border:1px solid var(--line);font-family:JetBrains Mono,ui-monospace,monospace;font-size:.78rem;line-height:1.5;white-space:pre;color:#d7ecef}.api-params{margin:.85rem 0 0;padding-left:1.1rem;color:var(--muted);line-height:1.55}
|