@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Space+Grotesk:wght@400;500;600;700&display=swap";:root{font-family:DM Sans,sans-serif;color:#d8dedd;background:#141719;font-synthesis:none;font-size:13px;--panel: #1b1f21;--line: #303638;--muted: #899390;--lime: #c8ef82;--mono: ui-monospace, SFMono-Regular, Consolas, monospace}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select{outline-offset:4px}button{display:inline-flex;align-items:center;justify-content:center;gap:7px;color:#bec7c4;background:transparent;border:1px solid var(--line);border-radius:5px;padding:8px 11px;cursor:pointer;white-space:nowrap;font-weight:500;transition:background .12s,border .12s}button:hover:not(:disabled){background:#30383a;border-color:#56615c}button:disabled{opacity:.35;cursor:default}.accent{background:var(--lime);border-color:var(--lime);color:#1f2b16;font-weight:650}.accent:hover:not(:disabled){background:#daf7a8;border-color:#daf7a8}button.selected{background:#303b2c;color:var(--lime);border-color:#647945}a{color:inherit;text-decoration:none}a:hover{color:var(--lime)}input,select,textarea{background:#15191b;color:#dce2df;border:1px solid var(--line);border-radius:5px;padding:9px 10px;min-width:0}input:focus,select:focus,textarea:focus{outline:1px solid #96b85f;border-color:#96b85f}input:disabled{opacity:.45}h1,h2,h3,p{margin:0}h1,h2,h3,.brand{font-family:Space Grotesk,sans-serif}p{color:var(--muted);line-height:1.7}small{display:block}.muted,.subtle{color:var(--muted)}.topbar{height:70px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 24px;gap:20px;background:#191d1f}.brand{display:flex;gap:12px;align-items:center;font-size:18px;white-space:nowrap;letter-spacing:-.6px;font-weight:600}.brand-mark{width:33px;height:33px;display:grid;place-items:center;background:var(--lime);color:#27331d;border-radius:6px}.badge{font-family:var(--mono);font-size:9px;letter-spacing:.8px;padding:3px 5px;border:1px solid #434c43;border-radius:3px;margin-left:10px;color:#9caa95;vertical-align:middle}.header-actions{display:flex;gap:8px;align-items:center}.status{color:var(--muted);font-family:var(--mono);font-size:10px;display:flex;gap:7px;align-items:center;margin-right:15px}.status i{width:5px;height:5px;background:#d6a554;border-radius:50%}.status.connected i{background:var(--lime)}.eyebrow,.section-label{font-family:var(--mono);font-size:10px;letter-spacing:1.4px;color:#a3afaa}.tiny-square{height:6px;width:6px;background:var(--lime);display:inline-block}.welcome{max-width:1120px;margin:0 auto;padding:85px 40px 25px}.welcome>.eyebrow{display:flex;align-items:center;gap:11px;color:var(--lime)}.welcome h1{font-size:clamp(38px,5vw,68px);font-weight:500;line-height:1.08;letter-spacing:-3px;margin:26px 0}.welcome h1 span{color:var(--lime)}.welcome>p{font-size:16px}.welcome-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.large{padding:13px 17px}.feature-strip{display:flex;gap:38px;margin:48px 0 62px;color:#99a59f}.feature-strip>span{display:flex;gap:9px;align-items:center}.feature-strip svg{color:var(--lime)}.recent h2{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:1px;border-bottom:1px solid var(--line);padding-bottom:16px}.recent h2 span{float:right;color:#78837d;letter-spacing:0;font-size:10px}.recent-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}.recent-grid button{justify-content:start;text-align:left;padding:18px;background:#1c2222;overflow:hidden}.recent-grid button>span{flex:1;overflow:hidden;text-overflow:ellipsis}.recent-grid small{font-weight:400;color:var(--muted);font-size:11px;margin-top:5px}.recent-grid svg:first-child{color:var(--lime)}.welcome-bottom{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:60px;padding-top:22px;font-family:var(--mono);font-size:9px;letter-spacing:1.2px;color:#707d76}.workspace{display:grid;grid-template-columns:236px minmax(300px,1fr) 260px;min-height:calc(100dvh - 70px)}.left-panel,.right-panel{background:var(--panel);display:flex;flex-direction:column;min-width:0}.left-panel{border-right:1px solid var(--line)}.right-panel{border-left:1px solid var(--line)}.left-panel section,.right-panel section{padding:22px 20px;border-bottom:1px solid var(--line)}.project-info .eyebrow{color:#74817a;font-size:9px}.title-input{background:none;border:1px solid transparent;padding:0;margin:12px 0 8px;width:100%;font-family:Space Grotesk,sans-serif;font-weight:600;font-size:16px;text-overflow:ellipsis}.title-input:focus{padding:4px}.metadata{color:var(--muted);font-family:var(--mono);font-size:10px}.metadata span{padding:0 6px}.read-only{margin-top:12px;background:#333325;color:#d8cb91;font-size:10px;padding:7px;border-radius:3px}.section-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;font-size:9px;letter-spacing:1px;color:#b4beb9}.section-label>span{display:flex;align-items:center;gap:5px}.section-label>span:last-child{font-size:8px;color:#73817a;letter-spacing:.3px}.tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.tool-grid button{height:39px;padding:8px}.tool-caption{font-size:10px;color:var(--muted);margin-top:13px}.swatches{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}.swatch{min-width:0;min-height:0;width:100%;overflow:hidden;border:0;padding:0;aspect-ratio:1;border-radius:3px;font-size:16px;line-height:1}.swatch.active{outline:2px solid #e0eccd;outline-offset:2px}.swatch:hover:not(:disabled){filter:brightness(1.2)}.swatch span{pointer-events:none}.transparent{background:repeating-conic-gradient(#737875 0 25%,#343c38 0 50%) 0 / 8px 8px}.color-detail{display:flex;align-items:center;gap:9px;margin-top:18px;font-family:var(--mono);font-size:10px}.color-chip{width:26px;height:26px;border:1px solid #798475;border-radius:3px}.color-detail small{color:#69786f;font-size:8px;margin-top:4px}.color-detail input{margin-left:auto;width:24px;height:26px;padding:2px;cursor:pointer}.layers-section{flex:1}.layers-list{display:flex;flex-direction:column;gap:6px}.layer{display:flex;border:1px solid transparent;border-radius:4px;align-items:center;padding:3px}.layer.active{background:#2b342c;border-color:#465540}.layer button{border:0;padding:5px;background:none}.layer .layer-name{display:block;flex:1;text-align:left;font-size:11px;overflow:hidden;text-overflow:ellipsis}.layer-name small{font-family:var(--mono);font-size:8px;color:#73826d;margin-top:2px}.visibility{color:#85957d}.inline-form{display:flex;gap:5px;margin-top:13px}.inline-form input{width:100%;font-size:11px;padding:8px}.inline-form button{padding:7px}.sidebar-footer{display:flex;gap:10px;padding:22px 20px;color:#9cab9f;font-size:10px}.sidebar-footer svg{color:var(--lime)}.sidebar-footer small{font-family:var(--mono);font-size:8px;margin-top:6px;color:#637369;letter-spacing:1px}.center-panel{display:flex;flex-direction:column;min-width:0}.canvas-toolbar{display:flex;justify-content:space-between;gap:8px;padding:12px 17px;border-bottom:1px solid var(--line);min-height:58px;background:#1b1f21}.toolbar-group{display:flex;align-items:center;gap:5px}.toolbar-group button{border-color:transparent;padding:7px;font-size:10px}.toolbar-group select{font-family:var(--mono);font-size:10px;padding:6px;border-color:transparent}.divider{width:1px;height:19px;background:var(--line);margin:0 7px}.canvas-area{background-color:#141719;background-image:radial-gradient(#2f3433 .7px,transparent .7px);background-size:14px 14px;flex:1;min-height:420px;display:flex;flex-direction:column;overflow:auto;padding:24px 30px 17px}.canvas-label,.canvas-meta{display:flex;justify-content:space-between;gap:15px;font-family:var(--mono);font-size:9px;color:#748078;letter-spacing:.5px}.canvas-label>span:first-child{max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.artboard-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:26px 10px;min-width:min-content;min-height:min-content}.pixel-image{image-rendering:pixelated;display:block}.artboard{background:repeating-conic-gradient(#252b2d 0 25%,#202628 0 50%) 0/24px 24px;box-shadow:0 0 0 1px #485148,0 15px 70px #0006;touch-action:none;cursor:crosshair;max-width:none;flex-shrink:0}.artboard.picker{cursor:copy}.canvas-meta{letter-spacing:0;font-size:9px}.timeline{background:#1c2022;border-top:1px solid var(--line);padding:17px 20px 10px;min-width:0}.timeline-heading{display:flex;justify-content:space-between;gap:10px;align-items:center}.timeline-heading>div{display:flex;align-items:center;gap:9px}.timeline-heading>div:first-child{font-family:var(--mono);font-size:9px;letter-spacing:1px}.timeline-heading .subtle{font-size:9px;letter-spacing:0;margin-left:5px}.timeline-heading button{font-size:10px;padding:6px 8px;border-color:transparent}.frame-strip{display:flex;gap:9px;overflow-x:auto;padding:16px 2px 10px}.frame-card{width:82px;min-width:82px;padding:6px 7px 5px;display:block;background:#23282a;border-color:#353e39;text-align:left;border-radius:4px}.frame-card.active{border-color:var(--lime);box-shadow:0 0 0 1px #c8ef8233;background:#2b322b}.frame-number{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9px;color:#97a28e}.frame-number>span{color:var(--lime);font-size:7px}.frame-card canvas{width:64px;height:64px;background:repeating-conic-gradient(#2c3232 0 25%,#272c2c 0 50%) 0/12px 12px;margin:5px 0}.frame-card small{font-family:var(--mono);font-size:8px;color:#8a9789;text-align:center}.timeline-footer{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:9px;color:#778779}.timeline-footer>div{display:flex;align-items:center;gap:8px}.timeline-footer input{width:59px;padding:5px;font-size:10px;margin-left:4px}.timeline-footer button{border:0;padding:5px}.preview-stage{aspect-ratio:1;background:repeating-conic-gradient(#242c2b 0 25%,#202726 0 50%) 0/24px 24px;border:1px solid #354038;border-radius:5px;display:grid;place-items:center}.preview-stage canvas{width:78%;height:78%;object-fit:contain}.play-controls{display:flex;align-items:center;justify-content:space-between;margin:12px 0 22px}.play-controls button{font-size:11px;padding:7px 12px}.play-controls>span{font-family:var(--mono);font-size:10px}.keycap{border:1px solid var(--line);padding:3px;font-size:8px!important;color:#6e7c73;border-radius:3px}.field-label{display:block;font-family:var(--mono);font-size:9px;letter-spacing:1px;color:#91a08f}.field-label select,.field-label input{display:block;width:100%;margin-top:9px;font-family:DM Sans,sans-serif;font-size:12px;letter-spacing:0}.animation-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid #2b342e}.animation-row button{border:0;padding:0;font-size:11px}.animation-row button:first-child{flex:1;justify-content:start}.animation-row small{font-family:var(--mono);font-size:8px;color:#778775;margin-left:auto;padding-right:5px}.animation-dot{width:6px;height:6px;background:var(--lime);border-radius:2px}.help{font-size:11px;line-height:1.6}.help.small{font-size:10px;margin-top:11px}.agent-card{margin:20px;padding:17px!important;border:1px solid #3d4935!important;border-radius:6px;background:linear-gradient(140deg,#293125,#1d2420)}.agent-icon{color:var(--lime)}.agent-card h3{font-size:13px;font-weight:500;margin:13px 0 8px}.agent-card p{font-size:11px;line-height:1.6}.agent-card button{margin-top:15px;font-size:10px;padding:0;border:0;color:var(--lime);width:100%;justify-content:space-between;background:none}.right-bottom{margin-top:auto;padding:20px;font-family:var(--mono);font-size:7px;letter-spacing:1px;color:#6a796c;display:flex;justify-content:space-between}.error{background:#442a2a;border-bottom:1px solid #79514c;padding:12px 24px;color:#ffd0c6;display:flex;align-items:center;justify-content:space-between;gap:15px;overflow-wrap:anywhere}.error button{border:0;padding:0}.modal-backdrop{position:fixed;inset:0;z-index:10;background:#080c0dc9;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:24px;overflow-y:auto}.modal{position:relative;width:440px;max-width:100%;background:#1e2423;border:1px solid #414e42;border-radius:12px;padding:32px;max-height:calc(100dvh - 48px);overflow:auto;box-shadow:0 30px 100px #0006}.modal.wide{width:740px}.modal-close{position:absolute;right:15px;top:15px;border:0;padding:4px}.modal>.eyebrow{color:var(--lime);font-size:9px}.modal h2{font-size:25px;letter-spacing:-.6px;margin:14px 0 10px;font-weight:500}.modal>p{font-size:12px;margin-bottom:22px}.modal form .field-label{margin-top:20px}.modal-note{font-size:11px;color:#91a08e;line-height:1.6;margin:20px 0}.full{width:100%;padding:12px}.agent-prompt{width:100%;height:190px;resize:vertical;font-family:var(--mono);font-size:11px;line-height:1.7;margin-bottom:12px}.modal h3{margin:24px 0 10px;font-size:13px;font-weight:500}.modal pre{font-size:10px;line-height:1.8;background:#151b18;padding:16px;border-radius:5px;border:1px solid #354034;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;color:#b9d498}.modal-links{display:flex;gap:20px;color:var(--lime);font-size:11px;margin-top:20px}.export-options{display:flex;flex-direction:column;gap:10px}.export-options a{display:flex;align-items:center;gap:15px;padding:16px 12px;border:1px solid #3a453b;border-radius:5px;background:#252c27}.export-options a>span{flex:1;font-size:12px}.export-options small{color:var(--muted);font-size:10px;margin-top:5px;line-height:1.5}.export-options svg:first-child{color:var(--lime)}@media(min-width:1600px){.workspace{grid-template-columns:260px minmax(300px,1fr) 285px}.canvas-area{min-height:520px}.left-panel section,.right-panel section{padding:25px}.swatches{gap:7px}}@media(max-width:1100px){.workspace{grid-template-columns:205px minmax(280px,1fr) 220px}.left-panel section,.right-panel section{padding:18px 14px}.header-actions .status{display:none}.brand{font-size:16px}.topbar{padding:0 16px}.timeline-heading .subtle{display:none}.canvas-area{padding:20px 16px}.toolbar-group{gap:1px}.divider{margin:0 3px}.agent-card{margin:14px}.right-bottom{display:none}}@media(max-width:850px){.workspace{grid-template-columns:180px minmax(0,1fr)}.right-panel{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr 1fr}.right-panel section{border-right:1px solid var(--line);border-bottom:0}.right-panel .preview-stage{max-height:180px;max-width:180px;margin:auto}.right-panel .agent-card{align-self:start}.topbar{height:auto;min-height:70px;flex-wrap:wrap;padding:15px;gap:14px}.header-actions{flex-wrap:wrap}.header-actions button{font-size:10px;padding:7px}.canvas-area{min-height:420px}.canvas-toolbar{padding:9px;flex-wrap:wrap}.tool-grid{gap:4px}.swatches{grid-template-columns:repeat(6,1fr)}.tool-caption{line-height:1.6}.recent-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.welcome{padding:60px 25px 25px}.feature-strip{flex-wrap:wrap;gap:20px}.welcome-bottom{gap:20px;line-height:1.7}.welcome h1{letter-spacing:-2px}}@media(max-width:560px){.workspace{grid-template-columns:140px minmax(0,1fr)}.left-panel section{padding:17px 10px}.tool-grid{grid-template-columns:repeat(2,1fr)}.swatches{grid-template-columns:repeat(5,1fr)}.color-detail{flex-wrap:wrap;font-size:8px}.color-detail input{margin-left:0}.title-input{font-size:13px}.metadata,.section-label{font-size:8px}.section-label>span:last-child{font-size:7px}.layers-section .section-label>span:last-child{display:none}.right-panel{grid-template-columns:1fr 1fr}.right-panel .agent-card{grid-column:1/-1}.timeline{padding:12px 9px}.timeline-heading{flex-wrap:wrap}.timeline-heading button{padding:5px;font-size:9px}.timeline-footer{flex-wrap:wrap;gap:10px}.canvas-label{font-size:8px}.canvas-label>span:first-child{display:none}.canvas-meta{font-size:8px;flex-wrap:wrap}.canvas-area{padding:16px 10px}.recent-grid{grid-template-columns:1fr}.recent h2 span{float:none;display:block;margin-top:10px}.welcome h1{font-size:40px}.welcome>p{font-size:14px}.welcome-bottom{flex-direction:column}.desktop{display:none}.sidebar-footer{padding:14px 10px;font-size:8px}.modal{padding:28px 20px}.header-actions{gap:5px}.header-actions button{font-size:9px}.header-actions svg{width:12px}.toolbar-group button{font-size:9px;padding:6px}.feature-strip{font-size:11px}}.dialog-error{color:#ffb9aa!important;background:#442d29;border:1px solid #71483f;border-radius:5px;padding:10px;margin:15px 0!important;font-size:11px;overflow-wrap:anywhere}