@font-face{font-family:Mona Sans Variable;font-style:normal;font-display:swap;font-weight:200 900;src:url(/_next/static/media/mona-sans-vietnamese-wght-normal.f158c274.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:Mona Sans Variable;font-style:normal;font-display:swap;font-weight:200 900;src:url(/_next/static/media/mona-sans-latin-ext-wght-normal.d365451d.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:Mona Sans Variable;font-style:normal;font-display:swap;font-weight:200 900;src:url(/_next/static/media/mona-sans-latin-wght-normal.01d3f3a6.woff2) format("woff2-variations");unicode-range:u+00??,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{--bg:oklch(1 0 0);--surface:oklch(0.972 0.004 230);--surface-strong:oklch(0.94 0.008 230);--surface-selected:oklch(0.935 0.035 230);--ink:oklch(0.2 0.018 245);--muted:oklch(0.46 0.02 245);--line:oklch(0.87 0.012 235);--line-strong:oklch(0.72 0.02 235);--primary:oklch(0.5 0.17 230);--primary-deep:oklch(0.44 0.16 230);--primary-wash:oklch(0.935 0.045 230);--violet:oklch(0.52 0.16 305);--violet-wash:oklch(0.94 0.04 305);--amber:oklch(0.62 0.15 72);--amber-wash:oklch(0.95 0.04 72);--danger:oklch(0.56 0.2 27);--success:oklch(0.52 0.14 150);--warning:oklch(0.69 0.16 75);--white:oklch(1 0 0);--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--topbar:58px;--rail:58px;--panel:330px;--inspector:290px;--z-sticky:20;--z-backdrop:40;--z-modal:50;--z-toast:60;color-scheme:light}*{box-sizing:border-box}body,html{margin:0;min-height:100%;background:var(--bg);color:var(--ink)}body{font-family:Mona Sans,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:1rem;line-height:1.45;font-feature-settings:"kern";font-kerning:normal;font-optical-sizing:auto;-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}button{color:inherit}button,select{cursor:pointer}button:disabled,select:disabled{cursor:not-allowed}:focus-visible{outline:3px solid color-mix(in oklch,var(--primary) 65%,white);outline-offset:2px}.app-shell{height:100dvh;min-height:0;overflow:hidden;background:var(--surface)}.topbar{height:var(--topbar);justify-content:space-between;gap:20px;padding:0 12px 0 18px;background:var(--bg);border-bottom:1px solid var(--line);position:relative;z-index:var(--z-sticky)}.topbar,.topbar-actions,.topbar-start,.viewport-switcher{display:flex;align-items:center}.topbar-start{min-width:0;gap:14px}.topbar-actions{gap:8px;justify-content:flex-end}.viewport-switcher{gap:3px;background:var(--surface);padding:3px;border:1px solid var(--line);border-radius:var(--radius-md)}.topbar-divider{height:24px;width:1px;background:var(--line)}.wordmark{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:transparent;padding:5px 0;display:inline-flex;align-items:center;gap:8px;font-size:1.08rem;font-weight:760;letter-spacing:-.035em}.wordmark-symbol{width:25px;height:25px;display:grid;place-items:center;border-radius:7px;background:var(--primary);color:var(--white)}.wordmark-symbol svg{width:15px;height:15px;stroke-width:2}.project-identity{min-width:0;display:flex;flex-direction:column;line-height:1.18}.project-picker-trigger{min-width:0;display:inline-flex;align-items:center;gap:5px;border:0;padding:0;background:transparent;text-align:left}.project-mobile-picker{display:none}.project-picker-trigger:focus-visible .project-name,.project-picker-trigger:hover .project-name{color:var(--primary-deep)}.project-picker-trigger svg{width:14px;height:14px;flex:0 0 auto;color:var(--muted)}.project-name{font-size:.84rem;font-weight:690;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:260px}.save-state{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.71rem}.status-dot{width:6px;height:6px;border-radius:50%;background:var(--success)}.status-dot[data-busy=true]{background:var(--primary);animation:pulse 1.2s ease-in-out infinite}.button{min-height:38px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:var(--radius-sm);padding:8px 13px;font-size:.84rem;font-weight:690;transition:background-color .16s cubic-bezier(.22,1,.36,1),color .16s,transform .16s}.button svg{width:16px;height:16px;stroke-width:1.9}.button:hover:not(:disabled){transform:translateY(-1px)}.button:active:not(:disabled){transform:translateY(0)}.button:disabled{opacity:.47}.button.primary{background:var(--primary);color:var(--white)}.button.primary:hover:not(:disabled){background:var(--primary-deep)}.button.secondary{background:var(--surface);color:var(--ink)}.button.secondary:hover:not(:disabled){background:var(--surface-strong)}.button.full{width:100%}.icon-button{width:40px;height:40px;display:inline-grid;place-items:center;flex:0 0 auto;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--muted);transition:background-color .15s,color .15s}.icon-button:hover:not(:disabled),.icon-button[data-active=true]{background:var(--surface-strong);color:var(--ink)}.icon-button[data-active=true]{color:var(--primary-deep)}.icon-button svg{width:18px;height:18px;stroke-width:1.8}.icon-button.compact{width:34px;height:34px}.mobile-only{display:none}.workspace{height:calc(100dvh - var(--topbar));display:grid;grid-template-columns:var(--rail) var(--panel) minmax(420px,1fr);min-width:0}.workspace[data-sidebar=false]{grid-template-columns:var(--rail) minmax(380px,1fr)}.workspace[data-sidebar=false] .left-panel{display:none}.mode-rail{min-width:0;justify-content:space-between;align-items:stretch;padding:8px 6px;background:var(--bg);border-right:1px solid var(--line);z-index:3}.mode-group,.mode-rail{display:flex;flex-direction:column}.mode-group{gap:4px}.mode-button{width:46px;min-height:44px;border:0;border-radius:var(--radius-sm);background:transparent;display:grid;place-items:center;color:var(--muted);position:relative;transition:background-color .15s,color .15s}.mode-button:hover,.mode-button[data-active=true]{color:var(--ink);background:var(--surface)}.mode-button[data-active=true]{color:var(--primary-deep)}.mode-button[data-active=true]:before{content:"";position:absolute;left:-6px;width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--primary)}.mode-button svg{width:19px;height:19px;stroke-width:1.75}.mode-button span{display:none;position:absolute;left:50px;background:var(--ink);color:white;padding:5px 8px;border-radius:5px;font-size:.72rem;pointer-events:none;white-space:nowrap;z-index:10}.mode-button:focus-visible span,.mode-button:hover span{display:block}.inspector,.left-panel{min-width:0;background:var(--bg);overflow:hidden;display:flex;flex-direction:column}.left-panel{border-right:1px solid var(--line)}.inspector{position:fixed;top:var(--topbar);right:0;bottom:0;width:var(--inspector);z-index:var(--z-sticky);border-left:1px solid var(--line);transform:translateX(100%);transition:transform .18s cubic-bezier(.22,1,.36,1);box-shadow:-4px 0 8px oklch(.2 .02 245/.1)}.inspector[data-visible=true]{transform:translateX(0)}.export-head,.inspector-head,.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.panel-heading{padding:20px 20px 16px;border-bottom:1px solid var(--line)}.export-head h2,.inspector-head h2,.panel-heading h1{margin:3px 0 0;font-size:1.06rem;line-height:1.25;letter-spacing:-.018em;text-wrap:balance}.panel-kicker{font-size:.7rem;color:var(--muted);font-weight:620}.panel-content{padding:18px 20px 28px;overflow-y:auto;min-height:0;flex:1 1;scrollbar-gutter:stable}.inspector-content label,.panel-content label{display:block;margin:0 0 7px;font-size:.76rem;font-weight:690}input,select,textarea{width:100%;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--bg);color:var(--ink)}input,textarea{padding:11px 12px}textarea{resize:vertical;min-height:88px;line-height:1.5}input{min-height:43px}select{height:38px;padding:0 32px 0 10px}input::placeholder,textarea::placeholder{color:color-mix(in oklch,var(--ink) 62%,white);opacity:1}input:focus,select:focus,textarea:focus{border-color:var(--primary);outline:2px solid color-mix(in oklch,var(--primary) 20%,white);outline-offset:0}.prompt-panel{display:flex;flex-direction:column;gap:18px}.brief-intro{display:grid;grid-gap:18px;gap:18px;padding:2px 0}.brief-heading>span,.empty-canvas-status,.next-step>div>span,.suggestion-heading>span{color:var(--primary-deep);font-size:.72rem;font-weight:720}.brief-heading h2{max-width:18ch;margin:6px 0 9px;font-size:1.36rem;line-height:1.16;letter-spacing:-.03em;text-wrap:balance}.brief-heading p{margin:0;color:var(--muted);font-size:.82rem;line-height:1.55;text-wrap:pretty}.brief-signal{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border-radius:var(--radius-md);background:var(--primary-wash);color:oklch(.32 .09 230)}.brief-signal-mark{width:27px;height:27px;display:grid;place-items:center;flex:0 0 auto;border-radius:var(--radius-sm);background:var(--primary);color:var(--white)}.brief-signal-mark svg{width:14px;height:14px}.brief-signal b,.brief-signal small{display:block}.brief-signal b{font-size:.72rem}.brief-signal small{margin-top:2px;font-size:.68rem;line-height:1.35}.suggestion-section{border-top:1px solid var(--line)}.suggestion-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:13px 0 9px}.suggestion-heading b{font-size:.77rem}.suggestion-heading>span{color:var(--muted);font-size:.64rem;font-weight:560}.suggestion-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}.suggestion-list button{--suggestion-color:var(--primary);--suggestion-wash:var(--primary-wash);width:100%;display:grid;grid-template-columns:28px minmax(0,1fr) 16px;align-items:center;grid-gap:10px;gap:10px;border:0;border-bottom:1px solid var(--line);background:transparent;padding:12px 2px;text-align:left;transition:background-color .15s,padding .15s}.suggestion-list button[data-tone=violet]{--suggestion-color:var(--violet);--suggestion-wash:var(--violet-wash)}.suggestion-list button[data-tone=amber]{--suggestion-color:var(--amber);--suggestion-wash:var(--amber-wash)}.suggestion-list button:hover{background:var(--suggestion-wash);padding-inline:8px}.suggestion-icon{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--suggestion-wash);color:var(--suggestion-color)}.suggestion-icon svg{width:14px;height:14px}.suggestion-copy{min-width:0}.suggestion-copy b,.suggestion-copy small{display:block}.suggestion-copy b{font-size:.74rem;line-height:1.3}.suggestion-copy small{margin-top:2px;color:var(--muted);font-size:.67rem;line-height:1.35}.suggestion-list>button>svg{width:15px;height:15px;color:var(--suggestion-color);transform:rotate(180deg)}.composer-block{margin-top:0}.composer-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.composer-heading label{margin-bottom:7px}.composer-heading span{color:var(--muted);font-size:.65rem}.composer-block textarea{min-height:104px}.composer-block[data-project=true] textarea{min-height:118px}.composer-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:10px}.composer-footer>span{color:var(--muted);font-size:.7rem}.history-summary{padding:14px;border-radius:var(--radius-md);background:var(--primary-wash);color:oklch(.31 .08 230)}.current-direction-head{display:flex;align-items:center;gap:8px;margin-bottom:12px;color:var(--primary-deep);font-size:.69rem;font-weight:730}.history-summary>b{display:block;font-size:.83rem;line-height:1.35}.history-summary p{display:-webkit-box;margin:5px 0 0;overflow:hidden;color:oklch(.36 .055 230);font-size:.73rem;line-height:1.45;-webkit-box-orient:vertical;-webkit-line-clamp:4}.activity-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:var(--radius-sm);background:var(--surface-selected);color:var(--primary-deep);flex:0 0 auto}.current-direction-head .activity-icon{width:25px;height:25px;background:var(--primary);color:var(--white)}.current-direction-head .activity-icon svg{width:13px}.activity-icon svg{width:16px}.next-step{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px;background:var(--surface);border-radius:var(--radius-md)}.next-step b{display:block;margin-top:3px;font-size:.77rem}.next-step p{margin:3px 0 0;color:var(--muted);font-size:.68rem;line-height:1.4}.next-step .button{flex:0 0 auto;min-height:34px;padding-inline:10px;font-size:.72rem}.next-step .button svg{width:14px}.brand-context{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.brand-context summary{min-height:46px;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;color:var(--ink);font-size:.78rem;font-weight:690}.brand-context summary::-webkit-details-marker{display:none}.brand-context summary:after{content:"+";color:var(--muted);font-size:1rem;font-weight:400}.brand-context[open] summary:after{content:"–"}.brand-context summary span{display:inline-flex;align-items:center;gap:8px}.brand-context summary svg{width:15px;color:var(--primary-deep)}.brand-context summary small{color:var(--muted);font-size:.68rem;font-weight:400}.brand-context-content{padding:0 0 16px}.brand-context-content>p{margin:0 0 14px;color:var(--muted);font-size:.75rem;line-height:1.5}.brand-context-content .button{margin-top:9px}.design-system-context{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.design-system-context summary{min-height:50px;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;font-size:.76rem}.design-system-context summary::-webkit-details-marker{display:none}.design-system-context summary:after{content:"+";color:var(--muted);font-size:1rem;font-weight:400}.design-system-context[open] summary:after{content:"–"}.design-system-context summary>span{display:inline-flex;align-items:center;gap:8px}.design-system-context summary svg{width:15px;color:var(--primary-deep)}.design-system-context summary small{margin-left:auto;color:var(--muted);font-size:.67rem}.design-system-context-content{padding:0 0 16px}.design-system-context-content>p{margin:0 0 13px;color:var(--muted);font-size:.73rem;line-height:1.5}.design-source-tabs{display:flex;gap:16px;border-bottom:1px solid var(--line);margin-bottom:12px}.design-source-tabs button{position:relative;border:0;background:transparent;color:var(--muted);padding:0 0 8px;font-size:.72rem;font-weight:690}.design-source-tabs button.active{color:var(--primary-deep)}.design-source-tabs button.active:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--primary)}.design-source-content .button{margin-top:9px}.screenshot-dropzone{min-height:74px;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:1px dashed var(--line-strong);border-radius:var(--radius-sm);text-align:center;cursor:pointer;color:var(--ink);padding:10px}.screenshot-dropzone:hover{background:var(--surface);border-color:var(--primary)}.screenshot-dropzone svg{width:17px;color:var(--primary-deep)}.screenshot-dropzone span{font-size:.72rem;font-weight:690;overflow-wrap:anywhere}.screenshot-dropzone small{color:var(--muted);font-size:.65rem}.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.design-system-review{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}.design-system-meta{margin:10px 0;font-size:.69rem}.design-system-meta div{display:grid;grid-template-columns:54px 1fr;grid-gap:8px;gap:8px;padding:5px 0}.design-system-meta dt{color:var(--muted)}.design-system-meta dd{margin:0;overflow-wrap:anywhere}.review-group{padding:9px 0;border-top:1px solid var(--line);font-size:.69rem}.review-group>b{display:block;font-size:.7rem}.review-group p{margin:5px 0 0;color:var(--muted)}.review-group .swatches{margin:8px 0 0;gap:5px}.review-group .swatches span{width:22px;height:22px}.review-shape{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.review-shape>b{width:100%}.review-shape span{color:var(--muted)}.review-shape i{width:25px;height:18px;border:1px solid var(--line-strong);background:var(--surface)}.component-specimens{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:6px;gap:6px;border-top:1px solid var(--line);padding:10px 0}.component-specimens>span{min-width:0;display:grid;grid-gap:6px;gap:6px;padding:7px;border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--muted);font-size:.62rem}.component-specimens i{display:block;min-height:17px}.mini-button{border-radius:4px;background:var(--primary)}.mini-input{border:1px solid var(--line-strong);border-radius:3px}.mini-card{border:1px solid var(--line);border-radius:4px;background:var(--surface)}.review-note{margin:0 0 10px;color:var(--muted);font-size:.67rem;line-height:1.45}.review-actions{display:flex;align-items:center;gap:10px}.review-actions .button{min-height:34px;padding:7px 10px;font-size:.72rem}.active-design-system{margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}.active-design-system>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.72rem}.active-design-system>div:first-child span{color:var(--muted);font-size:.64rem}.active-design-system p{margin:6px 0 9px;color:var(--muted);font-size:.7rem;line-height:1.45}.active-design-system-actions{display:flex;align-items:center;gap:10px}.active-design-system-actions .button{min-height:34px;padding:7px 10px;font-size:.7rem}.compact-token-result{margin-top:16px;padding-top:14px}.compact-token-result .swatches{margin-bottom:10px}.compact-token-result>p{margin:0}.panel-empty{min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px}.panel-empty>svg{width:24px;height:24px;color:var(--muted)}.panel-empty h2{font-size:.92rem;margin:14px 0 5px}.panel-empty p{margin:0;max-width:28ch;color:var(--muted);font-size:.78rem}.version-list{margin:0;padding:0;list-style:none}.version-list li+li{border-top:1px solid var(--line)}.version-list button{width:100%;display:flex;align-items:flex-start;gap:12px;border:0;border-radius:var(--radius-sm);background:transparent;text-align:left;padding:14px 0;transition:background-color .15s,padding .15s}.version-list button:hover{background:var(--surface);padding-inline:10px}.version-list li[data-newest=true] button{margin-inline:-10px;padding-inline:10px;background:var(--primary-wash)}.version-list button:hover b{color:var(--primary-deep)}.version-list b{display:block;font-size:.78rem}.version-list small{color:var(--muted);font-size:.66rem}.version-list p{margin:5px 0 0;color:var(--muted);font-size:.73rem;line-height:1.4}.version-marker{width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:var(--surface);color:var(--muted);flex:0 0 auto}.version-list li[data-newest=true] .version-marker{background:var(--primary);color:var(--white)}.version-marker svg{width:13px}.compare-intro{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:20px}.compare-intro>div>span{display:block;margin-bottom:5px;color:var(--primary-deep);font-size:.68rem;font-weight:700}.compare-intro p{margin:0;color:var(--muted);font-size:.78rem;line-height:1.5}.compare-count{flex:0 0 auto;padding:5px 8px;border-radius:5px;background:var(--primary-wash);color:var(--primary-deep);font-size:.66rem;font-weight:690}.variant-panel>label{margin-top:0}.variant-controls{display:grid;grid-template-columns:1fr 68px auto;grid-gap:8px;gap:8px;align-items:end;margin:12px 0 20px}.variant-controls label{grid-column:1;margin:0 0 4px}.variant-controls select{grid-column:2;grid-row:1/span 2;align-self:end}.variant-controls button{grid-column:3;grid-row:1/span 2;align-self:end}.compare-empty-hint{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:.75rem;line-height:1.5}.text-button{display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;padding:0;color:var(--primary-deep);font-size:.7rem;font-weight:700}.text-button svg{width:12px}.brand-panel{display:flex;flex-direction:column}.brand-panel .button{margin-top:10px}.token-result{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}.token-result-head{display:flex;align-items:center;justify-content:space-between;font-size:.76rem}.token-result-head span{border-radius:999px;padding:3px 8px;background:var(--surface);color:var(--muted);font-size:.67rem}.token-result-head span[data-confidence=high]{background:color-mix(in oklch,var(--success) 14%,white);color:oklch(.38 .12 150)}.swatches{display:flex;gap:7px;margin:14px 0}.swatches span{width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--ink) 16%,transparent)}.token-result dl{margin:0;font-size:.71rem}.token-result dl div{display:grid;grid-template-columns:70px 1fr;grid-gap:8px;gap:8px;padding:7px 0;border-top:1px solid var(--line)}.token-result dt{color:var(--muted)}.token-result dd{margin:0;overflow-wrap:anywhere}.token-result>p{color:var(--muted);font-size:.7rem;line-height:1.45}.canvas-column{min-width:0;min-height:0;overflow:hidden;background:var(--surface);position:relative}.empty-canvas{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px;background:var(--surface)}.empty-mark{width:54px;height:54px;display:grid;place-items:center;border-radius:var(--radius-md);background:var(--primary);color:var(--white)}.empty-mark svg{width:25px;height:25px}.empty-canvas-status{margin-top:17px}.empty-canvas h2{max-width:17ch;margin:6px 0 9px;font-size:1.52rem;line-height:1.18;letter-spacing:-.03em;text-wrap:balance}.empty-canvas p{max-width:48ch;margin:0;color:var(--muted);line-height:1.6;text-wrap:pretty}.empty-canvas-steps{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;margin-top:23px;color:var(--muted);font-size:.7rem}.empty-canvas-steps span{display:inline-flex;align-items:center;gap:6px}.empty-canvas-steps b{width:17px;height:17px;display:grid;place-items:center;border-radius:50%;background:var(--bg);color:var(--primary-deep);font-size:.62rem}.empty-canvas .button{margin-top:20px}.canvas-stage{height:100%;overflow:auto;padding:46px 36px 80px;display:flex;justify-content:center;align-items:flex-start;position:relative}.canvas-ruler{position:absolute;top:14px;left:50%;transform:translateX(-50%);color:var(--muted);font-size:.68rem;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.canvas-controls{position:absolute;top:12px;right:16px;z-index:2;display:flex;align-items:center;gap:3px;padding:3px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-md)}.canvas-zoom-label{min-height:34px;display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;padding:0 7px;color:var(--muted);font-size:.68rem;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.canvas-zoom-label:hover{color:var(--primary-deep);background:var(--primary-wash);border-radius:4px}.canvas-zoom-label svg{width:13px;height:13px}.canvas-sheet{flex:0 0 auto;position:relative;transition:width .22s cubic-bezier(.22,1,.36,1),height .22s cubic-bezier(.22,1,.36,1)}.canvas-iframe{display:block;position:absolute;inset:0 auto auto 0;max-width:none;border:0;background:var(--bg);box-shadow:0 4px 8px oklch(.2 .02 245/.12);transform-origin:top left;transition:transform .22s cubic-bezier(.22,1,.36,1)}.compare-stage{height:100%;overflow:auto;padding:30px 34px 64px;background:var(--surface)}.compare-stage-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;max-width:1440px;margin:0 auto 24px}.compare-stage-head>div{max-width:64ch}.compare-stage-head h2{max-width:29ch;margin:3px 0 8px;font-size:1.28rem;line-height:1.18;letter-spacing:-.026em;text-wrap:balance}.compare-stage-head p{margin:0;color:var(--muted);font-size:.77rem;line-height:1.5;text-wrap:pretty}.compare-stage-head>span{flex:0 0 auto;padding:5px 8px;border-radius:var(--radius-sm);background:var(--primary-wash);color:var(--primary-deep);font-size:.68rem;font-weight:700}.compare-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));grid-gap:18px;gap:18px;max-width:1440px;margin:0 auto;align-items:start}.compare-card{min-width:0;overflow:hidden;background:var(--bg);border-radius:var(--radius-md)}.compare-card-head{min-height:82px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:15px 16px 13px}.compare-card-head>div{min-width:0}.compare-card-head>div>span{display:block;margin-bottom:5px;color:var(--primary-deep);font-size:.64rem;font-weight:720}.compare-card-head b{display:-webkit-box;overflow:hidden;font-size:.78rem;line-height:1.35;-webkit-box-orient:vertical;-webkit-line-clamp:2}.compare-card-head>svg{width:17px;height:17px;margin-top:2px;color:var(--muted);flex:0 0 auto}.compare-preview{aspect-ratio:4/3;overflow:hidden;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.compare-preview iframe{width:100%;height:100%;display:block;border:0;pointer-events:none;background:var(--bg)}.compare-card-footer{padding:14px 16px 16px}.compare-card-footer p{min-height:39px;margin:0 0 13px;color:var(--muted);font-size:.7rem;line-height:1.45}.compare-card-footer .button{width:100%}.inspector-head{min-height:76px;padding:20px 17px 16px;border-bottom:1px solid var(--line)}.inspector-content{padding:18px 17px 28px;overflow-y:auto}.selection-meta{display:flex;align-items:flex-start;gap:10px;padding:12px;margin-bottom:22px;background:var(--primary-wash);border-radius:var(--radius-sm)}.selection-meta>svg{width:16px;color:var(--primary-deep);flex:0 0 auto;margin-top:2px}.selection-meta span{display:block;margin-bottom:3px;color:var(--primary-deep);font-size:.62rem;font-weight:720}.selection-meta b{display:block;font-size:.75rem;overflow-wrap:anywhere}.selection-meta p{margin:3px 0 0;color:oklch(.36 .055 230);font-size:.7rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.inspector-content .button{margin-top:10px}.inspector-hint{color:var(--muted);font-size:.7rem;line-height:1.5;margin:12px 2px 0}.inspector-empty{flex:1 1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;color:var(--muted)}.inspector-empty svg{width:22px}.inspector-empty p{max-width:25ch;font-size:.76rem;line-height:1.5}.error-banner{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:var(--z-toast);max-width:min(640px,calc(100vw - 32px));display:flex;align-items:center;gap:14px;padding:10px 10px 10px 14px;border-radius:var(--radius-sm);background:oklch(.36 .15 27);color:white;font-size:.8rem}.error-banner span{flex:1 1}.error-banner .icon-button{color:white}.notice-banner{position:fixed;right:18px;bottom:18px;z-index:var(--z-toast);display:flex;align-items:center;gap:10px;max-width:min(430px,calc(100vw - 36px));padding:9px 9px 9px 12px;border-radius:var(--radius-sm);background:var(--bg);color:var(--ink);font-size:.76rem;box-shadow:0 4px 8px oklch(.2 .02 245/.12)}.notice-banner>svg{width:16px;color:var(--success);flex:0 0 auto}.notice-banner span{flex:1 1}.live-region{position:fixed;width:1px;height:1px;overflow:hidden;-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}.account-controls{display:flex;align-items:center;gap:8px}.account-trigger{white-space:nowrap}.account-trigger svg{width:16px;height:16px}.account-panel{padding:20px 20px 28px}.account-auth-card{padding:4px 0 10px}.account-auth-card h2{margin:10px 0 8px;font-size:1.25rem;letter-spacing:-.025em}.account-auth-card p{margin:0;color:var(--muted);font-size:.76rem;line-height:1.55}.account-icon{width:38px;height:38px;display:grid;place-items:center;margin-bottom:16px;border-radius:var(--radius-md);background:var(--primary-wash);color:var(--primary-deep)}.account-icon svg{width:18px}.account-auth-actions{display:flex;gap:8px;margin-top:20px}.setup-list{display:grid;grid-gap:10px;gap:10px;margin-top:22px;padding:16px 0 0;border-top:1px solid var(--line);color:var(--muted);font-size:.72rem}.setup-list span{display:flex;align-items:center;gap:8px}.setup-list svg{width:14px;color:var(--success)}.account-dashboard{display:grid;grid-gap:18px;gap:18px}.account-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.account-header h2{margin:5px 0;font-size:1.18rem;letter-spacing:-.025em}.account-header p{margin:0;color:var(--muted);font-size:.72rem;line-height:1.45}.credit-balance{display:flex;align-items:center;justify-content:space-between;padding:17px;background:var(--ink);color:white;border-radius:var(--radius-md)}.credit-balance strong{display:block;margin-top:5px;font-size:2rem;line-height:1;letter-spacing:-.05em}.credit-balance small{display:block;margin-top:7px;color:oklch(1 0 0/.68);font-size:.68rem}.credit-balance>svg{width:24px;color:oklch(1 0 0/.68)}.account-cost-note{margin:-7px 0 0;color:var(--muted);font-size:.66rem;line-height:1.4}.account-notice{padding:11px 12px;background:var(--surface);color:var(--muted);font-size:.7rem;line-height:1.45}.account-notice p{margin:0}.billing-products{display:grid;grid-gap:10px;gap:10px}.billing-product{position:relative;padding:15px;background:var(--surface);border-radius:var(--radius-md)}.billing-product[data-featured=true]{background:var(--primary-wash)}.billing-product h3{margin:7px 0 5px;font-size:.86rem}.billing-product>strong{display:block;font-size:1.05rem;letter-spacing:-.025em}.billing-product p{margin:5px 0 12px;color:var(--muted);font-size:.69rem;line-height:1.4}.billing-product .button{font-size:.72rem}.product-badge{position:absolute;top:12px;right:12px;padding:3px 6px;background:var(--primary);color:white;border-radius:4px;font-size:.58rem;font-weight:700}.account-footer-actions{display:flex;flex-wrap:wrap;gap:8px;padding-top:2px}.account-footer-actions .button{font-size:.7rem}.popover-backdrop{position:fixed;inset:0;z-index:var(--z-backdrop);display:flex;align-items:flex-start;justify-content:flex-end;padding:66px 14px 14px;background:oklch(.15 .01 245/.22)}.export-popover{width:min(460px,calc(100vw - 28px));max-height:calc(100dvh - 80px);overflow-y:auto;background:var(--bg);border-radius:var(--radius-lg);padding:22px;box-shadow:0 4px 8px oklch(.15 .02 245/.18)}.export-popover>p{margin:12px 0 20px;color:var(--muted);font-size:.8rem;line-height:1.55}.target-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}.target-list>button{display:grid;grid-template-columns:38px 1fr 20px;grid-gap:10px;gap:10px;align-items:center;text-align:left;min-height:64px;padding:9px 4px;border:0;border-bottom:1px solid var(--line);background:transparent}.target-list>button:hover{background:var(--surface)}.target-list>button[data-selected=true]{background:var(--primary-wash);color:var(--primary-deep)}.target-list>button>svg{width:16px;justify-self:center}.target-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:var(--radius-sm);background:var(--surface);color:var(--ink)}.target-list>button[data-selected=true] .target-icon{background:var(--primary);color:var(--white)}.target-icon svg{width:16px}.target-list b{display:block;font-size:.8rem}.target-list small{display:block;color:var(--muted);font-size:.68rem}.export-footer{display:flex;justify-content:flex-end;gap:8px;padding-top:18px}.project-picker{width:min(580px,calc(100vw - 28px));max-height:min(680px,calc(100dvh - 28px));padding:22px;border:0;border-radius:var(--radius-lg);background:var(--bg);color:var(--ink);box-shadow:0 4px 8px oklch(.15 .02 245/.18)}.project-picker::-webkit-backdrop{background:oklch(.15 .01 245/.22)}.project-picker::backdrop{background:oklch(.15 .01 245/.22)}.project-picker-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.project-picker-head h2{margin:3px 0 0;font-size:1.06rem;line-height:1.25;letter-spacing:-.018em}.project-picker-copy{margin:12px 0 18px;color:var(--muted);font-size:.8rem;line-height:1.5}.project-picker-state{min-height:150px;display:grid;place-content:center;grid-gap:10px;gap:10px;text-align:center;color:var(--muted);font-size:.78rem}.project-picker-state p{margin:0;max-width:36ch}.project-picker-state svg{width:20px;height:20px;margin:0 auto}.project-picker-list{margin:0;padding:0;list-style:none;overflow-y:auto}.project-picker-list,.project-picker-list li+li{border-top:1px solid var(--line)}.project-picker-list button{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;border:0;background:transparent;padding:14px 2px;text-align:left}.project-picker-list button:hover:not(:disabled) b{color:var(--primary-deep)}.project-picker-list button>svg{width:15px;height:15px;margin-top:3px;color:var(--muted);flex:0 0 auto}.project-picker-list b,.project-picker-list small{display:block}.project-picker-list b{font-size:.82rem}.project-picker-list p,.project-picker-list small{color:var(--muted);font-size:.68rem}.project-picker-list p{margin:4px 0 0;line-height:1.4}.captcha-dialog{width:min(420px,calc(100vw - 28px));border:0;border-radius:var(--radius-lg);padding:20px;background:var(--bg);color:var(--ink);box-shadow:0 4px 8px oklch(.15 .02 245/.18)}.captcha-dialog::-webkit-backdrop{background:oklch(.15 .01 245/.22)}.captcha-dialog::backdrop{background:oklch(.15 .01 245/.22)}.captcha-head{display:flex;align-items:flex-start;gap:12px}.captcha-head>svg{width:20px;height:20px;margin-top:2px;color:var(--primary-deep)}.captcha-head>div{flex:1 1}.captcha-head h2{margin:0;font-size:.96rem}.captcha-head p{margin:4px 0 0;color:var(--muted);font-size:.75rem;line-height:1.45}.captcha-widget{min-height:65px;margin-top:18px}.captcha-error{margin:8px 0 0;color:var(--danger);font-size:.72rem}.spin{animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}@keyframes pulse{50%{opacity:.35}}@media (max-width:1240px){:root{--panel:300px}}@media (max-width:1080px) and (min-width:821px){.workspace{grid-template-columns:var(--rail) minmax(0,1fr)}.left-panel{position:fixed;top:var(--topbar);bottom:0;left:var(--rail);width:min(330px,calc(100vw - var(--rail) - 20px));z-index:var(--z-sticky);box-shadow:4px 0 8px oklch(.2 .02 245/.1)}.canvas-stage{padding-inline:28px}.compare-stage{padding-inline:22px}}@media (max-width:820px){:root{--topbar:56px}.mobile-only,.project-mobile-picker{display:inline-grid}.desktop-action,.project-identity,.topbar-divider{display:none}.topbar{padding-inline:8px;gap:8px}.topbar-start{gap:8px}.topbar-actions{gap:2px}.topbar-actions .button{padding-inline:10px}.viewport-switcher{position:absolute;left:50%;transform:translateX(-50%)}.workspace,.workspace[data-sidebar=false]{grid-template-columns:1fr;padding-bottom:58px}.mode-rail{position:fixed;left:0;right:0;bottom:0;height:58px;z-index:var(--z-sticky);flex-direction:row;padding:6px 10px;border-right:0;border-top:1px solid var(--line)}.mode-group{flex:1 1;flex-direction:row;justify-content:space-around}.mode-button{width:72px;min-height:46px;grid-template-rows:20px auto;gap:2px}.mode-button[data-active=true]:before{left:50%;top:-6px;width:20px;height:3px;transform:translateX(-50%);border-radius:0 0 3px 3px}.mode-button span{position:static;display:block;padding:0;background:transparent;color:inherit;opacity:1;visibility:visible;transform:none;pointer-events:auto;font-size:.59rem;line-height:1}.mode-rail>.mode-button:last-child{display:none}.left-panel{position:fixed;top:var(--topbar);bottom:58px;left:0;width:min(370px,92vw);z-index:var(--z-sticky);box-shadow:4px 0 8px oklch(.2 .02 245/.1)}.workspace[data-sidebar=false] .left-panel{display:none}.canvas-stage{padding:38px 22px 60px;justify-content:flex-start}.empty-canvas{padding:36px 24px}.inspector{bottom:58px}.compare-stage{padding:22px 18px 58px}.error-banner{bottom:70px}}@media (max-width:520px){.wordmark{font-size:.95rem}.topbar-actions .button svg{margin:0}.topbar-actions .button{font-size:0;width:40px;padding:0}.topbar-actions .button svg{width:18px;height:18px}.topbar-actions .new-project-button{display:none}.viewport-switcher .icon-button{width:31px;height:31px}.canvas-stage{padding-inline:14px}.inspector{width:min(320px,90vw)}.popover-backdrop{align-items:flex-end;padding:12px}.export-popover{width:100%;max-height:calc(100dvh - 24px)}.project-picker{width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:18px}.account-auth-actions,.account-footer-actions{flex-direction:column}.account-auth-actions .button,.account-footer-actions .button{width:100%}.notice-banner{right:12px;bottom:70px;max-width:calc(100vw - 24px)}.compare-stage{padding-inline:14px}.compare-stage-head{display:block}.compare-stage-head>span{display:block;margin-top:7px}}@media (prefers-reduced-motion:reduce){*,:after,:before{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}