:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#eef3f9;--surface:#ffffffc2;--surface-solid:#fff;--surface-muted:#f4f7fbeb;--surface-dark:#0c1222;--text:#0f172a;--text-soft:#52607a;--text-faint:#708099;--line:#0f172a1a;--line-strong:#0f172a29;--accent:#2563eb;--accent-soft:#2563eb24;--danger:#b42318;--success:#2fbf71;--code-ink:#edf4ff;--shadow:0 28px 70px #0f172a1f, 0 10px 24px #0f172a0f}*{box-sizing:border-box}html{font-size:14px}body{background:radial-gradient(circle at top left, #2563eb29, transparent 28%), radial-gradient(circle at 85% 12%, #14b8a621, transparent 24%), linear-gradient(180deg, #f7faff 0%, var(--bg) 46%, #e8eef6 100%);min-height:100vh;color:var(--text);margin:0;padding:28px 18px 40px;font-family:Avenir Next,Circular Std,Segoe UI,sans-serif}body:before{content:"";pointer-events:none;background-image:linear-gradient(#0f172a09 1px,#0000 1px),linear-gradient(90deg,#0f172a09 1px,#0000 1px);background-size:32px 32px;position:fixed;inset:0;-webkit-mask-image:linear-gradient(#000000b3,#0000 84%);mask-image:linear-gradient(#000000b3,#0000 84%)}#root{min-height:100vh}main{gap:24px;width:min(1120px,100%);margin:0 auto;display:grid}.hero,.workbench{border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:32px;position:relative;overflow:hidden}.hero:after,.workbench:after{content:"";border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,#ffffff5c,#0000 42%);position:absolute;inset:0}.hero{background:radial-gradient(circle at 100% 0,#2563eb2e,#0000 32%),linear-gradient(135deg,#ffffffd6,#ffffff94);grid-template-columns:1fr;gap:24px;padding:32px;animation:.44s both rise;display:grid}.hero-copy,.hero-card{z-index:1;position:relative}.hero-copy{align-content:start;gap:18px;display:grid}.eyebrow{width:fit-content;color:var(--text-soft);letter-spacing:.14em;text-transform:uppercase;background:#ffffffbd;border:1px solid #0f172a14;border-radius:999px;align-items:center;margin:0;padding:8px 12px;font-family:IBM Plex Mono,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.74rem;display:inline-flex}h1{letter-spacing:-.07em;max-width:none;margin:0;font-size:clamp(2.9rem,6vw,5.2rem);line-height:.92}.subtitle{max-width:46rem;color:var(--text-soft);margin:0;font-size:1.05rem;line-height:1.72}.hero-meta{flex-wrap:wrap;gap:10px;display:flex}.hero-chip{color:var(--text);background:#ffffffad;border:1px solid #0f172a14;border-radius:999px;align-items:center;gap:8px;padding:10px 14px;font-size:.93rem;font-weight:600;display:inline-flex}.hero-chip:before{content:"";background:linear-gradient(135deg,#2563eb,#22c55e);border-radius:999px;width:8px;height:8px}.hero-card{color:var(--code-ink);background:radial-gradient(circle at 100% 0,#3b82f62e,#0000 36%),linear-gradient(#0a111ffa,#10182bf2);border:1px solid #0f172a14;border-radius:28px;gap:16px;padding:22px;display:grid}.hero-card-label,.flow-card-label,.field-label,.swatch-card-label,.result-label,.preview-card-label{color:inherit;letter-spacing:.13em;text-transform:uppercase;margin:0;font-family:IBM Plex Mono,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.74rem}.hero-card-label{color:#edf4ffb3}.flow-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.flow-card{background:#ffffff0b;border:1px solid #ffffff14;border-radius:22px;gap:10px;min-height:148px;padding:16px;display:grid}.flow-card-label{color:#edf4ff94}.flow-swatch,.swatch-preview,.preview-swatch{background:#000;border:1px solid #0f172a14;border-radius:18px;width:56px;height:56px;transition:background .18s,filter .18s,opacity .18s,transform .18s;box-shadow:inset 0 1px #ffffff29}.flow-card strong{font-size:1rem;font-weight:700;line-height:1.3}.flow-card p,.hero-card-note{color:#edf4ffb3;margin:0;font-size:.92rem;line-height:1.55}.flow-card.is-filtered .flow-swatch{filter:invert(52%)sepia(73%)saturate(1842%)hue-rotate(187deg)brightness(95%)contrast(94%)}.flow-card.is-target .flow-swatch{background:#3b82f6}.workbench{padding:26px;animation:.52s 60ms both rise}.panel-header{z-index:1;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:22px;display:flex;position:relative}.panel-title{letter-spacing:-.04em;margin:0 0 8px;font-size:1.72rem}.panel-note{max-width:44rem;color:var(--text-soft);margin:0;font-size:.98rem;line-height:1.6}.panel-badge{width:fit-content;color:var(--text-soft);letter-spacing:.12em;text-transform:uppercase;background:#ffffffb8;border:1px solid #0f172a14;border-radius:999px;margin:0;padding:10px 14px;font-family:IBM Plex Mono,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.76rem}form{z-index:1;gap:18px;display:grid;position:relative}.app-shell{grid-template-columns:1fr;align-items:start;gap:18px;display:grid}.control-card,.result-shell{border:1px solid var(--line);border-radius:28px}.control-card{background:linear-gradient(180deg, #ffffffeb, var(--surface-muted));gap:18px;padding:22px;display:grid}.swatch-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.swatch-card{border:1px solid var(--line);background:var(--surface-solid);border-radius:22px;gap:12px;min-height:156px;padding:16px;display:grid}.swatch-card-label{color:var(--text-faint)}.swatch-value{letter-spacing:-.03em;margin:0;font-size:1.06rem;font-weight:700}.swatch-copy{color:var(--text-soft);margin:0;font-size:.92rem;line-height:1.55}.swatch-preview.is-empty,.preview-swatch.is-empty{background:linear-gradient(135deg,#cbd5e1e0,#f1f5f9eb),linear-gradient(135deg,#fff3,#0000)}.input-wrap{gap:10px;display:grid}.field-label{color:var(--text-faint)}input{border:1px solid var(--line-strong);background:var(--surface-solid);width:100%;color:var(--text);border-radius:20px;padding:18px 20px;font-family:IBM Plex Mono,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:1rem;transition:border-color .16s,box-shadow .16s,transform .16s;box-shadow:0 1px #ffffffb3,0 8px 24px #0f172a0d}input::placeholder{color:#708099d9}input:focus{box-shadow:0 0 0 4px var(--accent-soft), 0 16px 30px #2563eb1f;border-color:#2563eb7a;outline:none;transform:translateY(-1px)}input[aria-invalid=true]{border-color:#b4231870;box-shadow:0 0 0 4px #b4231817}.field-help{color:var(--text-soft);margin:-4px 0 0;font-size:.92rem;line-height:1.5}.actions{flex-wrap:wrap;gap:12px;display:flex}button{appearance:none;font:inherit;letter-spacing:-.01em;cursor:pointer;border:0;border-radius:18px;padding:15px 18px;font-weight:700;transition:transform .16s,box-shadow .16s,opacity .16s}button:hover:enabled,button:focus-visible:enabled{transform:translateY(-1px)}button:focus-visible{box-shadow:0 0 0 4px var(--accent-soft);outline:2px solid #0000}.primary-button{color:#f8fbff;background:linear-gradient(135deg,#0f172a,#1d4ed8);box-shadow:0 18px 26px #1d4ed83d}.secondary-button{border:1px solid var(--line-strong);color:var(--text);background:#ffffffd1}button:disabled{cursor:not-allowed;opacity:.46;box-shadow:none}.message{min-height:1.35rem;color:var(--danger);margin:0;font-size:.95rem}.result-shell{color:var(--code-ink);background:radial-gradient(circle at 100% 0,#2563eb3d,#0000 34%),linear-gradient(#0a111ffa,#10182bf2);gap:16px;padding:22px;display:grid}.result-head{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.result-label{color:#edf4ff9e}.result-title{letter-spacing:-.03em;margin:8px 0 0;font-size:1.32rem}.copy-status{min-height:1rem;color:var(--success);margin:0;font-size:.9rem}.preview-strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.preview-card{background:linear-gradient(#ffffff0f,#ffffff08);border:1px solid #ffffff14;border-radius:20px;gap:10px;padding:14px;display:grid}.preview-card-label{color:#edf4ff9e}.preview-swatch{border-color:#ffffff14}.preview-swatch.is-idle{opacity:.38}.preview-value{margin:0;font-size:.98rem;font-weight:700}pre{background:radial-gradient(circle at top right, #3b82f62e, transparent 38%), var(--surface-dark);color:var(--code-ink);white-space:pre-wrap;word-break:break-word;border:1px solid #ffffff14;border-radius:22px;margin:0;padding:20px;font-family:IBM Plex Mono,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.98rem;line-height:1.65;overflow-x:auto}.result-placeholder{color:#edf4ff8a}.quality-status{color:#dbe6f7e6;min-height:1rem;margin:0;font-size:.94rem;line-height:1.6}.footer-note{color:var(--text-soft);margin:0;font-size:.94rem;line-height:1.65}code{background:#0f172a0f;border-radius:999px;padding:2px 6px;font-family:IBM Plex Mono,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.9em}@keyframes rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media (width<=980px){.hero,.app-shell{grid-template-columns:1fr}h1{max-width:none}.panel-header{flex-direction:column;align-items:start}}@media (width<=720px){.flow-grid,.preview-strip,.swatch-grid{grid-template-columns:1fr}}@media (width<=640px){body{padding:18px 14px 28px}.hero,.workbench{border-radius:26px;padding:20px}.actions,.result-head{display:grid}button{width:100%}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}