:root{--bg-desk:#050505;--dot-desk:#1c1c1c;--bg:#1a1a1a;--bg-raised:#212121;--border:#454545;--shadow:#2c2c2c;--rule:#363636;--fg:#e8e8e6;--fg-dim:#959592;--accent:#5fbf9b;--danger:#e07a6f;--mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace}*,:before,:after{box-sizing:border-box;margin:0}html{background:var(--bg-desk);-webkit-font-smoothing:antialiased}body{font:1rem/1.65 var(--mono);color:var(--fg);background-color:var(--bg-desk);background-image:radial-gradient(var(--dot-desk) 1px, transparent 1px);background-size:18px 18px;min-height:100vh;padding:32px 16px}a{color:var(--accent);text-decoration:none}a:hover{text-underline-offset:3px;text-decoration:underline}a:focus-visible,button:focus-visible{outline:1px solid var(--accent);outline-offset:3px}.frame{background:var(--bg);border:1px solid var(--border);max-width:1200px;box-shadow:8px 8px 0 var(--shadow);margin:0 auto}.titlebar{border-bottom:1px solid var(--border);color:var(--fg-dim);justify-content:space-between;gap:16px;padding:8px 20px;font-size:.8125rem;display:flex}.titlebar a{color:var(--fg-dim)}.titlebar a:hover{color:var(--fg)}h1{letter-spacing:.02em;font-size:1.125rem;font-weight:400;line-height:1.3}.dim{color:var(--fg-dim);max-width:64ch;margin-top:12px}@media (width<=600px){body{padding:16px 10px}.frame{box-shadow:5px 5px 0 var(--shadow)}}.workspace{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);min-height:70vh;display:grid}.pane{flex-direction:column;min-width:0;display:flex}.pane+.pane{border-left:1px solid var(--border)}.pane-head{border-bottom:1px dashed var(--rule);color:var(--fg-dim);justify-content:space-between;align-items:center;gap:12px;padding:6px 16px;font-size:.8125rem;display:flex}.pane-head select{font:inherit;color:var(--fg);background:var(--bg-raised);border:1px solid var(--border);padding:2px 6px}.editor{flex:1;min-height:420px;overflow:auto}.preview{background:#f4f4f2;border:0;flex:1;width:100%;min-height:320px;display:block}.badge{color:var(--accent);font-size:.75rem}.badge:before{content:"● "}.badge-error{color:var(--danger)}.error-panel{border-top:1px solid var(--danger);background:#231b1a;padding:12px 16px;font-size:.8125rem}.error-panel strong{color:var(--danger);font-weight:400}.error-panel pre{white-space:pre-wrap;font-family:var(--mono);margin-top:6px}.error-panel .dim{margin-top:6px}@media (width<=800px){.workspace{grid-template-columns:1fr}.pane+.pane{border-left:0;border-top:1px solid var(--border)}.editor{min-height:320px}}.props-editor{border-top:1px solid var(--border);padding:8px 16px 12px}.props-head{color:var(--fg-dim);align-items:baseline;gap:12px;margin-bottom:6px;font-size:.8125rem;display:flex}.props-head label{color:var(--fg)}.props-head .dim{margin:0}.link-button{font:inherit;color:var(--accent);cursor:pointer;background:0 0;border:0;margin-left:auto;padding:0;font-size:.8125rem}.link-button:hover{text-underline-offset:3px;text-decoration:underline}.props-editor textarea{resize:vertical;width:100%;font:.8125rem/1.5 var(--mono);color:var(--fg);background:var(--bg-raised);border:1px solid var(--rule);padding:8px}.props-editor textarea:focus-visible{outline:1px solid var(--accent)}.props-editor textarea::placeholder{color:#5c5c5a}.explains{color:var(--fg-dim);border-bottom:1px dashed var(--rule);padding:6px 16px;font-size:.75rem}.explains:before{content:"// ";color:var(--accent)}