@font-face{font-family:Bricolage Grotesque Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/bricolage-grotesque-vietnamese-wght-normal-BUzh504Q.woff2) format("woff2-variations");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Bricolage Grotesque Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/bricolage-grotesque-latin-ext-wght-normal-CcLUaPy7.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Bricolage Grotesque Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/bricolage-grotesque-latin-wght-normal-DLoelf7F.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Manrope Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(data:font/woff2;base64,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) format("woff2-variations");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Manrope Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/manrope-cyrillic-wght-normal-Dvxsihut.woff2) format("woff2-variations");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Manrope Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/manrope-greek-wght-normal-DL7QRZyv.woff2) format("woff2-variations");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:Manrope Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/manrope-vietnamese-wght-normal-usUDDRr7.woff2) format("woff2-variations");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Manrope Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/manrope-latin-ext-wght-normal-Ch3YOpNY.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Manrope Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/manrope-latin-wght-normal-DHIcAJRg.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{font-family:Manrope Variable,sans-serif;color:#f2f1eb;background:#101114;font-synthesis:none;text-rendering:optimizeLegibility}:root[data-theme=light]{color:#252522;background:#f1f0ea}.app-shell{--paper: #17181b;--ground: #101114;--ink: #f2f1eb;--muted: #96979d;--line: #303239;--blue: #7c8cff;--blue-dark: #6979ee;--blue-soft: #272c4d;--green: #58c995;--topbar: rgba(16, 17, 20, .88);--toolbar: rgba(16, 17, 20, .92);--surface: #1d1f24;--surface-hover: #25272d;--surface-focus: #22242a;--segment: #0c0d10;--subtle: #73757d;--dot: #2d2f35;--canvas-border: #34363d;--row-line: #292b31;--code: #0b0c0f;--code-text: #dfe3ed;--toast-bg: #f2f1eb;--toast-ink: #17181b;--shadow: rgba(0, 0, 0, .35);color-scheme:dark}.app-shell[data-theme=light]{--paper: #fbfaf6;--ground: #f1f0ea;--ink: #252522;--muted: #77766e;--line: #d9d7cf;--blue: #4657d9;--blue-dark: #3544bf;--blue-soft: #eceeff;--green: #2a9b68;--topbar: rgba(251, 250, 246, .86);--toolbar: rgba(241, 240, 234, .92);--surface: #f7f6f1;--surface-hover: #ffffff;--surface-focus: #ffffff;--segment: #e9e7e0;--subtle: #99978e;--dot: #cfcdc4;--canvas-border: #d3d1c8;--row-line: #e6e4dc;--code: #292a2e;--code-text: #e5e2d9;--toast-bg: #252522;--toast-ink: #ffffff;--shadow: rgba(47, 46, 41, .09);color-scheme:light}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh}button,textarea{font:inherit}button{color:inherit}button:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid rgba(70,87,217,.28);outline-offset:2px}.app-shell{min-height:100vh;color:var(--ink);background:var(--ground);transition:color .2s ease,background-color .2s ease}.topbar{height:66px;padding:0 28px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;background:var(--topbar);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-family:Bricolage Grotesque Variable,sans-serif;font-weight:680;letter-spacing:-.035em;font-size:18px}.brand em{font:700 9px/1 Manrope Variable,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);background:var(--blue-soft);padding:5px 6px;border-radius:4px}.brand-mark{width:25px;height:25px;background:var(--ink);border-radius:7px;display:flex;align-items:flex-end;justify-content:center;gap:2px;padding:6px;transform:rotate(-2deg)}.brand-mark span{width:3px;background:var(--paper);border-radius:2px 2px 0 0}.brand-mark span:nth-child(1){height:6px}.brand-mark span:nth-child(2){height:12px}.brand-mark span:nth-child(3){height:9px}.topbar-actions{display:flex;align-items:center;gap:8px}.button{border:1px solid transparent;height:36px;padding:0 13px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:8px;cursor:pointer;font-size:12px;font-weight:650;transition:transform .16s ease,background .16s ease,border-color .16s ease}.button:active{transform:translateY(1px)}.button--primary{color:#fff;background:var(--blue);box-shadow:0 2px #1820672e}.button--primary:hover{background:var(--blue-dark)}.button--outline{background:var(--paper);border-color:var(--line)}.button--outline:hover{border-color:var(--muted);background:var(--surface-hover)}.button--ghost{background:transparent;color:var(--muted)}.button--ghost:hover{color:var(--ink);background:var(--surface-hover)}.theme-toggle{min-width:103px}.workspace{min-height:calc(100vh - 66px);display:grid;grid-template-columns:minmax(350px,430px) minmax(0,1fr)}.controls-panel{position:sticky;top:66px;z-index:5;align-self:start;height:calc(100vh - 66px);overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:44px 36px 60px;border-right:1px solid var(--line);background:var(--paper)}.controls-panel{scrollbar-width:thin;scrollbar-color:var(--line) transparent}.controls-panel::-webkit-scrollbar{width:8px}.controls-panel::-webkit-scrollbar-track{background:transparent}.controls-panel::-webkit-scrollbar-thumb{background:var(--line);border:2px solid var(--paper);border-radius:999px}.intro{margin-bottom:38px}.eyebrow{color:var(--blue);display:flex;align-items:center;gap:7px;text-transform:uppercase;letter-spacing:.1em;font-size:10px;font-weight:750;margin-bottom:14px}.intro h1{font-family:Bricolage Grotesque Variable,sans-serif;font-size:clamp(32px,3vw,44px);line-height:.98;letter-spacing:-.055em;margin:0 0 17px;max-width:370px;font-weight:590}.intro p{color:var(--muted);font-size:13px;line-height:1.65;margin:0;max-width:360px}.input-stack{display:grid;gap:25px}.field-group{display:grid;gap:11px}.field-header{display:flex;align-items:flex-start;gap:10px}.field-icon{width:31px;height:31px;flex:0 0 auto;border:1px solid var(--line);border-radius:8px;display:grid;place-items:center;color:var(--blue);background:var(--surface)}.field-header label,.mode-control label{display:block;font-size:12px;font-weight:720;margin:1px 0 3px}.field-header p,.mode-control p{margin:0;color:var(--muted);font-size:10px;line-height:1.45}.textarea{resize:vertical;width:100%;min-height:70px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);padding:12px 13px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;line-height:1.65;box-shadow:inset 0 1px 2px #00000014;transition:border-color .15s,background .15s}.textarea:hover{border-color:var(--muted)}.textarea:focus{background:var(--surface-focus);border-color:var(--blue)}.compact-field .textarea{min-height:52px;resize:none}.field-meta{color:var(--subtle);font-size:9px;display:flex;justify-content:space-between;margin-top:-7px}.source-colors{display:flex;flex-wrap:wrap;gap:6px;margin-top:-3px}.source-colors span{border:1px solid var(--line);background:var(--surface);height:26px;padding:0 7px 0 5px;display:inline-flex;align-items:center;gap:5px;border-radius:6px;text-transform:capitalize;font-size:9px;font-weight:650}.source-colors i{width:15px;height:15px;border-radius:4px}.source-colors b{font:500 8px/1 ui-monospace,monospace;color:var(--muted)}.mode-control{border-top:1px solid var(--line);padding-top:22px;display:grid;gap:12px}.segmented{padding:3px;background:var(--segment);border:1px solid var(--line);border-radius:8px;display:grid;grid-template-columns:repeat(3,1fr)}.segmented button,.view-switch button{border:0;background:transparent;cursor:pointer;text-transform:capitalize;border-radius:6px;font-size:10px;font-weight:650;padding:7px 5px;color:var(--muted)}.segmented button.active{background:var(--surface-hover);color:var(--ink);box-shadow:0 1px 4px #0000002e}.preview-panel{min-width:0;background-color:var(--ground);background-image:radial-gradient(var(--dot) .65px,transparent .65px);background-size:14px 14px}.preview-toolbar{height:54px;padding:0 28px;border-bottom:1px solid var(--line);background:var(--toolbar);display:flex;align-items:center;justify-content:space-between;position:sticky;top:66px;z-index:10;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.preview-toolbar>div:first-child{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.preview-toolbar strong{color:var(--muted);font-size:9px;font-weight:550;padding-left:7px;border-left:1px solid var(--line)}.status-dot{width:7px;height:7px;background:var(--green);border-radius:50%;box-shadow:0 0 0 3px #2a9b681f}.view-switch{display:flex;gap:2px;background:var(--segment);border:1px solid var(--line);padding:3px;border-radius:8px}.view-switch button{padding:6px 10px;text-transform:none}.view-switch button.active{background:var(--surface-hover);color:var(--ink);box-shadow:0 1px 3px #0000002e}.specimen-canvas{width:min(1080px,calc(100% - 64px));margin:32px auto 70px;background:var(--paper);border:1px solid var(--canvas-border);box-shadow:0 18px 50px var(--shadow);animation:reveal .5s ease both}.preview-section{padding:42px 48px 50px}.preview-section+.preview-section{border-top:1px solid var(--line)}.section-heading{display:flex;align-items:end;justify-content:space-between;border-bottom:1px solid var(--ink);padding-bottom:14px;margin-bottom:7px}.section-heading>div{display:flex;align-items:center;gap:11px}.section-heading span{color:var(--blue);font:700 10px/1 ui-monospace,monospace}.section-heading h2{font:610 16px/1 Bricolage Grotesque Variable,sans-serif;letter-spacing:-.025em;margin:0}.section-heading p{margin:0;color:var(--muted);font-size:9px}.type-row{display:grid;grid-template-columns:135px minmax(0,1fr);gap:20px;align-items:baseline;padding:19px 0;border-bottom:1px solid var(--row-line);overflow:hidden}.token-meta{align-self:start;padding-top:5px;display:grid;gap:6px}.token-meta>span{font-size:11px;line-height:1.25;font-weight:750;text-transform:uppercase;letter-spacing:.065em}.token-meta button{padding:0;border:0;width:max-content;background:none;cursor:pointer;color:var(--muted);font:550 10px/1.35 ui-monospace,monospace}.token-meta button:hover{color:var(--blue)}.type-row p{font-family:Bricolage Grotesque Variable,sans-serif;letter-spacing:-.035em;margin:0;white-space:nowrap}.type-row:nth-last-child(-n+4) p{font-family:Manrope Variable,sans-serif;letter-spacing:-.015em}.type-row p.label-sample{letter-spacing:.08em}.color-section{padding-bottom:56px}.palette-list{display:grid;gap:33px;padding-top:23px}.palette-title{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:9px}.palette-title h3{text-transform:capitalize;font:600 13px/1 Bricolage Grotesque Variable,sans-serif;margin:0}.palette-title span{color:var(--muted);font:500 8px/1 ui-monospace,monospace;text-transform:uppercase}.swatch-row{display:grid;grid-template-columns:repeat(11,minmax(48px,1fr))}.swatch{border:0;min-width:0;aspect-ratio:.78;padding:8px 7px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.swatch:first-child{border-radius:7px 0 0 7px}.swatch:last-child{border-radius:0 7px 7px 0}.swatch:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 8px 18px #0000004d;z-index:2;border-radius:5px}.swatch span{font:700 9px/1 ui-monospace,monospace}.swatch small{font:600 7px/1 ui-monospace,monospace;writing-mode:vertical-rl;transform:rotate(180deg)}.empty-state{padding:35px;margin-top:22px;color:var(--muted);display:grid;place-items:center;gap:7px;border:1px dashed var(--line);border-radius:8px}.empty-state p{margin:0;font-size:11px}.code-view{width:min(980px,calc(100% - 64px));margin:32px auto 70px;border:1px solid var(--canvas-border);background:var(--paper);box-shadow:0 18px 50px var(--shadow);animation:reveal .35s ease both}.code-heading{height:52px;padding:0 16px 0 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.code-heading>div{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700}.code-view pre{margin:0;padding:28px;overflow:auto;max-height:calc(100vh - 220px);background:var(--code);color:var(--code-text);font:500 11px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace;-moz-tab-size:2;tab-size:2}.code-view code{white-space:pre}.toast{position:fixed;z-index:50;bottom:22px;left:50%;transform:translate(-50%,15px);display:flex;align-items:center;gap:7px;background:var(--toast-bg);color:var(--toast-ink);padding:9px 13px;border-radius:8px;opacity:0;pointer-events:none;font-size:10px;font-weight:650;transition:opacity .2s,transform .2s}.toast--visible{opacity:1;transform:translate(-50%)}.card{background:var(--paper)}@keyframes reveal{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media(max-width:1060px){.workspace{grid-template-columns:350px minmax(0,1fr)}.controls-panel{padding:36px 26px 50px}.preview-section{padding:36px 30px 44px}.type-row{grid-template-columns:115px minmax(0,1fr)}.swatch-row{grid-template-columns:repeat(6,1fr)}.swatch{aspect-ratio:1}.swatch:nth-child(6){border-radius:0 7px 7px 0}.swatch:nth-child(7){border-radius:7px 0 0 7px}}@media(max-width:760px){.topbar{height:58px;padding:0 16px}.topbar-actions .button--ghost{display:none}.topbar-actions .theme-toggle{display:inline-flex;min-width:36px}.topbar-actions .button{padding:0 9px}.workspace{display:block}.controls-panel{position:static;height:auto;overflow:visible;scrollbar-gutter:auto;border-right:0;border-bottom:1px solid var(--line);padding:34px 20px 40px}.intro{margin-bottom:30px}.intro h1{font-size:38px;max-width:420px}.preview-toolbar{top:58px;padding:0 16px}.specimen-canvas,.code-view{width:calc(100% - 24px);margin-top:12px}.preview-section{padding:30px 20px 38px}.section-heading p{display:none}.type-row{grid-template-columns:96px minmax(0,1fr);gap:14px;padding:16px 0}.swatch-row{grid-template-columns:repeat(4,1fr);gap:1px}.swatch,.swatch:first-child,.swatch:last-child,.swatch:nth-child(6),.swatch:nth-child(7){border-radius:4px;aspect-ratio:1}}@media(max-width:460px){.brand em,.topbar-actions .button span{display:none}.topbar-actions .theme-toggle{min-width:34px}.topbar-actions{gap:5px}.button{height:34px}.preview-toolbar>div:first-child strong{display:none}.type-row{display:block}.token-meta{display:flex;justify-content:space-between;margin-bottom:10px}.type-row p{overflow:hidden}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}