:root{color:#e8ebf6;font-synthesis:none;text-rendering:optimizelegibility;background:#090b11;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{min-width:320px;min-height:100%;margin:0}body{background:radial-gradient(circle at 20% -10%,#695bff2b,#0000 34rem),#090b11;min-height:100vh}button,input,select{font:inherit}button{color:inherit}.app{min-height:100vh;padding:20px}.app-header{justify-content:space-between;align-items:center;max-width:1800px;height:64px;margin:0 auto 16px;display:flex}.app-header>div{align-items:center;gap:12px;display:flex}.logo-mark{color:#10121a;background:#9ef5c8;border-radius:12px;place-items:center;width:42px;height:42px;font-size:12px;font-weight:900;display:grid}.app-header h1{letter-spacing:-.02em;margin:0;font-size:18px}.app-header p{color:#7f879c;margin:3px 0 0;font-size:12px}.local-badge{color:#9ef5c8;background:#9ef5c80f;border:1px solid #9ef5c838;border-radius:999px;padding:7px 10px;font-size:11px;font-weight:700}.header-actions{align-items:center;gap:10px;display:flex}.ghost-link{color:#cbd2e5;background:#ffffff08;border:1px solid #ffffff1a;border-radius:999px;align-items:center;min-height:34px;padding:0 12px;font-size:12px;font-weight:800;text-decoration:none;display:inline-flex}.ghost-link:hover{color:#fff;background:#ffffff12}.workspace{grid-template-columns:minmax(360px,.86fr) minmax(520px,1.14fr);gap:14px;max-width:1800px;height:calc(100vh - 120px);min-height:650px;margin:auto;display:grid}.pane{background:#10131c;border:1px solid #ffffff17;border-radius:16px;flex-direction:column;min-width:0;display:flex;overflow:hidden;box-shadow:0 24px 60px #00000040}.pane-toolbar{border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;min-height:54px;padding:8px 10px;display:flex}.tabs{gap:3px;display:flex}.tabs button,.ghost-button{color:#8991a6;cursor:pointer;background:0 0;border:0;border-radius:8px;font-size:12px;font-weight:700}.tabs button{padding:9px 12px}.tabs button.active{color:#f6f7fb;background:#242938}.ghost-button{border:1px solid #ffffff1a;padding:9px 12px}.ghost-button:hover:not(:disabled){color:#fff;background:#ffffff0d}button:disabled{cursor:not-allowed;opacity:.42}.editor-host{background:#0d1017;flex:1;min-height:0}.editor-host .cm-editor{background:#0d1017;height:100%;font-size:13px}.editor-host .cm-scroller{font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;overflow:auto}.controls{border-top:1px solid #ffffff14;grid-template-columns:1fr 1fr auto;align-items:end;gap:10px;min-height:86px;padding:13px;display:grid}.controls label>span{color:#798196;letter-spacing:.08em;text-transform:uppercase;margin:0 0 6px;font-size:10px;font-weight:800;display:block}.controls input,.controls select{color:#e9ebf4;background:#181c27;border:1px solid #ffffff1a;border-radius:8px;outline:none;width:100%;height:38px;padding:0 10px;font-size:12px}.controls input:focus,.controls select:focus{border-color:#7166f4}.size-inputs{grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;display:grid}.size-inputs b{color:#596075;font-weight:400}.primary-button{color:#10131b;cursor:pointer;background:#9ef5c8;border:0;border-radius:8px;min-height:38px;padding:0 16px;font-size:12px;font-weight:850}.output-toolbar{gap:8px}.status{color:#7f8799;text-overflow:ellipsis;white-space:nowrap;font-size:11px;overflow:hidden}.error-banner{color:#ffb3b3;background:#ff4c4c14;border:1px solid #ff717140;border-radius:8px;margin:10px 10px 0;padding:10px 12px;font-size:12px}.code-output{flex:1;min-height:0;margin:0;display:none}.code-output.visible{display:block}.preview-panel{background-color:#11141c;background-image:linear-gradient(45deg,#161a24 25%,#0000 25%),linear-gradient(-45deg,#161a24 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#161a24 75%),linear-gradient(-45deg,#0000 75%,#161a24 75%),none;background-position:0 0,0 8px,8px -8px,-8px 0;background-repeat:repeat,repeat,repeat,repeat,repeat;background-size:16px 16px;background-attachment:scroll,scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box,border-box;flex:1;min-height:0;margin:0;padding:18px;display:none;overflow:auto}.preview-panel.visible{display:block}.preview-stage{background:#fff;border:1px solid #ffffff21;border-radius:8px;width:100%;position:relative;overflow:hidden}.preview-stage iframe{transform:scale(var(--preview-scale,1));transform-origin:0 0;border:0;position:absolute;top:0;left:0}.code-output{color:#cbd2e5;white-space:pre;background:#0c0f16;padding:18px;font:12px/1.65 SFMono-Regular,Consolas,Liberation Mono,monospace;overflow:auto}.output-actions{border-top:1px solid #ffffff14;justify-content:flex-end;align-items:center;gap:8px;min-height:62px;padding:11px;display:flex}.todo-app{background:radial-gradient(circle at 70% 0,#9ef5c829,#0000 30rem),radial-gradient(circle at 10% 20%,#695bff2e,#0000 34rem),#090b11;min-height:100vh;padding:20px}.todo-header{justify-content:space-between;align-items:center;max-width:760px;margin:0 auto 24px;display:flex}.todo-shell{background:#10131ceb;border:1px solid #ffffff17;border-radius:22px;width:min(760px,100%);margin:0 auto;padding:24px;box-shadow:0 24px 70px #00000052}.todo-hero{gap:6px;margin-bottom:22px;display:grid}.todo-hero p,.todo-hero h1{margin:0}.todo-hero p{color:#9ef5c8;letter-spacing:.1em;text-transform:uppercase;font-size:12px;font-weight:850}.todo-hero h1{color:#fff;letter-spacing:-.06em;font-size:clamp(34px,7vw,64px);line-height:.95}.todo-hero span{color:#8a92a8;font-size:13px}.todo-form{grid-template-columns:1fr auto;gap:10px;margin-bottom:14px;display:grid}.todo-form input{color:#f3f5fb;background:#181c27;border:1px solid #ffffff1a;border-radius:12px;outline:none;min-width:0;height:46px;padding:0 14px}.todo-form input:focus{border-color:#9ef5c8}.todo-list{gap:8px;display:grid}.todo-empty,.todo-item{background:#ffffff09;border:1px solid #ffffff14;border-radius:14px}.todo-empty{color:#7f8799;text-align:center;padding:22px}.todo-item{justify-content:space-between;align-items:center;gap:12px;min-height:58px;padding:10px;display:flex}.todo-item label{cursor:pointer;align-items:center;gap:12px;min-width:0;display:flex}.todo-item input{accent-color:#9ef5c8;width:18px;height:18px}.todo-item span{overflow-wrap:anywhere}.todo-item.done span{color:#717a90;text-decoration:line-through}.todo-footer{justify-content:flex-end;margin-top:16px;display:flex}@media (width<=980px){.workspace{grid-template-columns:1fr;height:auto;min-height:0}.pane{min-height:660px}}@media (width<=600px){.app{padding:10px}.local-badge{display:none}.controls{grid-template-columns:1fr 1fr}.controls .primary-button{grid-column:1/-1}.output-toolbar{flex-direction:column;align-items:flex-start}}@media (width<=560px){.todo-app{padding:12px}.todo-shell{padding:16px}.todo-form,.todo-item{grid-template-columns:1fr}.todo-form{display:grid}.todo-form .primary-button{width:100%}}