:root{color-scheme:light;--paper:#f4f0e7;--ink:#20242c;--muted:#666b72;--violet:#6651a8;--green:#2f735d;--red:#a33f48;--line:#d9d1c3;--white:#fffdf8;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--paper);color:var(--ink)}*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(circle at 82% -10%,#ded4f3 0,transparent 34rem),var(--paper)}button,textarea,select{font:inherit}.site-head{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,4vw,64px);border-bottom:1px solid var(--line);background:rgba(244,240,231,.9);backdrop-filter:blur(12px);position:sticky;top:0;z-index:5}.brand{font-weight:800;color:var(--ink);text-decoration:none}.save-state{font-size:.85rem;color:var(--muted)}main{width:min(1440px,100%);margin:auto;padding:clamp(24px,4vw,56px)}.intro{max-width:720px}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font:700 .72rem ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--violet);margin:0 0 10px}.intro h1{font:700 clamp(2.5rem,7vw,5.4rem)/.92 Georgia,serif;margin:0}.intro>p:last-child{font-size:clamp(1rem,2vw,1.3rem);line-height:1.55;color:var(--muted);margin:18px 0 28px}.empty{border:1px solid var(--line);border-radius:22px;padding:clamp(22px,4vw,46px);background:rgba(255,253,248,.68);max-width:760px}.empty p{color:var(--muted);margin:16px 0 0}.empty .text-button{margin-left:8px}button{min-height:44px;border:1px solid var(--line);border-radius:12px;padding:10px 15px;background:var(--white);color:var(--ink);font-weight:700;cursor:pointer}button:hover{border-color:var(--violet)}button:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid #aa91ed;outline-offset:3px}.primary{background:var(--violet);border-color:var(--violet);color:white}.text-button{background:transparent}.error{margin:0 0 18px;padding:14px 16px;border:1px solid var(--red);border-radius:12px;background:#fff0ef;color:#782b33}.workspace{margin-top:28px}.toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.toolbar-gap{flex:1}.desk{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:14px}.canvas-shell{min-width:0;aspect-ratio:1280/760;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--white);box-shadow:0 18px 60px rgba(45,38,28,.08)}#canvas{display:block;width:100%;height:100%;touch-action:none;color:var(--ink)}.grid{fill:url(#grid)}.block{cursor:grab}.block:active{cursor:grabbing}.block-rect{fill:#fffdf8;stroke-width:3}.block.selected .block-rect{stroke-width:5;filter:drop-shadow(0 7px 8px rgba(32,36,44,.14))}.block-label{fill:var(--ink);font:700 20px Inter,system-ui,sans-serif;pointer-events:none}.block-kind{font:700 13px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;pointer-events:none}.resize{fill:var(--white);stroke-width:4;cursor:nwse-resize}.inspector{border:1px solid var(--line);border-radius:18px;padding:18px;background:rgba(255,253,248,.82);align-self:start}.inspector label{display:grid;gap:7px;font-weight:700;margin-bottom:16px}.inspector label span{float:right;color:var(--muted);font-weight:400;font-size:.8rem}textarea,select{width:100%;border:1px solid var(--line);border-radius:10px;background:white;color:var(--ink);padding:11px;min-height:44px;resize:vertical}.danger{color:var(--red);border-color:#d9aeb1}.hint{font-size:.82rem;line-height:1.5;color:var(--muted)}.handoff{margin-top:18px;padding:22px;border-top:1px solid var(--line)}.handoff h2{font:700 1.55rem Georgia,serif;margin:0 0 14px}.handoff-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.handoff-actions p{width:100%;color:var(--muted);margin:4px 0 0}.file-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}dialog{width:min(580px,calc(100% - 28px));border:1px solid var(--line);border-radius:18px;padding:24px;background:var(--paper);color:var(--ink);box-shadow:0 24px 80px #0004}dialog::backdrop{background:#20242c99}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:22px}.preview-dialog{width:min(1000px,calc(100% - 28px))}.preview-dialog img{display:block;width:100%;max-height:65vh;object-fit:contain;border:1px solid var(--line);background:white}
@media(max-width:820px){.site-head{height:56px}.save-state{font-size:.76rem}main{padding:20px 14px 36px}.intro h1{font-size:3.25rem}.intro>p:last-child{margin-bottom:18px}.empty{padding:20px}.empty .text-button{margin-left:0;margin-top:8px}.desk{grid-template-columns:1fr}.canvas-shell{width:100%;min-height:280px}.inspector{padding:14px}.toolbar{display:grid;grid-template-columns:1fr 1fr}.toolbar-gap{display:none}.toolbar button{width:100%}.handoff{padding:18px 0}.handoff-actions button{width:100%}.file-actions button{flex:1 1 220px}.dialog-actions{display:grid}.dialog-actions button{width:100%}}
@media(prefers-reduced-motion:no-preference){button,.block-rect{transition:border-color .15s,transform .15s,filter .15s}.block:hover .block-rect{transform:translateY(-2px)}}
.brand{display:inline-flex;align-items:center;min-height:44px}