:root{--bg:#eef1f5;--bg-2:#e1e5ec;--card:#f9fafc;--ink:#0a0d14;--muted:#54575f;--line:#d3d8e0;--accent:#1768b8;--accent-ink:#fff;--accent-soft:#1768b81f;--dot:#c5ccd7;--danger:#c2412f;--sans:"Epilogue", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;--mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;--r:8px;--publik-bg:var(--bg);--publik-card:var(--card);--publik-ink:var(--ink);--publik-muted:var(--muted);--publik-line:var(--line);--publik-accent:var(--accent);--publik-accent-ink:var(--accent-ink);--publik-hover:var(--bg-2);--publik-display-font:var(--sans);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#0a0d14;--bg-2:#161c29;--card:#10141d;--ink:#e9edf3;--muted:#8891a1;--line:#232a38;--accent:#5ab9fc;--accent-ink:#0a0d14;--accent-soft:#5ab9fc24;--dot:#222a38;--danger:#ff8a73}}html,body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;margin:0}a{color:inherit}button{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}html,body{overscroll-behavior:none;height:100%;overflow:hidden}.sc-app{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;flex-direction:column;height:100dvh;display:flex}.sc-top{min-height:56px;padding:8px 16px;padding-top:max(10px, env(safe-area-inset-top));border-bottom:1px solid var(--line);background:var(--card);align-items:center;gap:12px;display:flex}.sc-brand{letter-spacing:-.025em;align-items:center;gap:8px;font-size:17px;font-weight:600;text-decoration:none;display:inline-flex}.sc-brand .sc-mark{color:var(--accent)}.sc-mark{fill:none;stroke:currentColor;stroke-width:2.4px;stroke-linecap:round;stroke-linejoin:round;width:22px;height:22px}.sc-project{color:var(--muted);border-left:1px solid var(--line);white-space:nowrap;text-overflow:ellipsis;min-width:0;padding-left:12px;font-size:13.5px;overflow:hidden}.sc-example-bar{border-radius:var(--r);background:var(--accent-soft);white-space:nowrap;padding:4px 10px;font-size:13px}.sc-top-actions{align-items:center;gap:8px;margin-left:auto;display:flex}.sc-primary,.sc-secondary,.sc-ghost{border-radius:var(--r);cursor:pointer;white-space:nowrap;border:1px solid #0000;align-items:center;gap:8px;min-height:40px;padding:0 16px;font-size:14px;font-weight:500;transition:background-color .15s,transform .1s;display:inline-flex}.sc-primary{background:var(--accent);color:var(--accent-ink)}.sc-primary:hover:not(:disabled){background:color-mix(in oklab, var(--accent) 88%, var(--ink))}.sc-primary:active:not(:disabled),.sc-secondary:active:not(:disabled){transform:translateY(1px)}.sc-primary:disabled{opacity:.45;cursor:default}.sc-secondary{background:var(--card);border-color:var(--line)}.sc-secondary:disabled{opacity:.5;cursor:default}.sc-ghost{color:var(--muted);background:0 0;padding:0 12px}.sc-ghost:hover{color:var(--ink)}.sc-ghost:hover,.sc-secondary:hover:not(:disabled){background:var(--bg-2)}.sc-link{min-height:32px;color:var(--accent);cursor:pointer;text-underline-offset:3px;background:0 0;border:0;padding:0;font-weight:500;text-decoration:underline}.sc-spin{vertical-align:-2px;border:2px solid;border-right-color:#0000;border-radius:50%;width:13px;height:13px;animation:.8s linear infinite sc-spin;display:inline-block}@keyframes sc-spin{to{transform:rotate(360deg)}}.sc-body{flex:1;min-height:0;display:flex}.sc-board-wrap{flex:1;min-width:0;position:relative}.sc-stage{touch-action:none;background-color:var(--bg);background-image:radial-gradient(var(--dot) 1px, transparent 1.2px);cursor:crosshair;background-size:22px 22px;position:absolute;inset:0;overflow:hidden}.tool-select .sc-stage{cursor:default}.tool-erase .sc-stage{cursor:cell}.sc-canvas{pointer-events:none;position:absolute;inset:0}.sc-screen{border:1.5px solid var(--ink);background:var(--card);border-radius:22px;position:absolute;box-shadow:0 1px #0000000a,0 18px 40px -28px #0006}@media (prefers-color-scheme:dark){.sc-screen{box-shadow:0 18px 40px -24px #000c}}.sc-screen-name{font-size:11.5px;font-family:var(--mono);color:var(--muted);white-space:nowrap;position:absolute;top:-22px;left:4px}.sc-part{border-radius:6px;align-items:center;display:flex;position:absolute;overflow:hidden}.sc-part-text{text-overflow:ellipsis;padding:0 6px;position:relative;overflow:hidden}.t-title .sc-part-text{letter-spacing:-.025em;white-space:nowrap;font-size:clamp(16px,2.2vw,24px);font-weight:600}.t-text{align-items:flex-start;min-height:36px}.t-text .sc-part-text{color:var(--muted);font-size:13px;line-height:1.45}.t-button{background:var(--accent);color:var(--accent-ink);border-radius:999px;justify-content:center;font-size:14px;font-weight:600}.t-button .sc-part-text{white-space:nowrap}.t-image{background:var(--bg-2);border:1px solid var(--line);color:var(--muted);font:11.5px var(--mono);border-radius:12px;justify-content:center}.sc-x{width:100%;height:100%;stroke:var(--line);stroke-width:1.2px;fill:none;position:absolute;inset:0}.tool-pen .sc-screen,.tool-pen .sc-part{pointer-events:none}.tool-select .sc-part,.tool-select .sc-screen{cursor:grab}.tool-erase .sc-part:hover,.tool-erase .sc-screen:hover{outline:2px dashed var(--danger)}.is-sel{outline:2px solid var(--accent);outline-offset:2px}.sc-handle{background:var(--card);border:2px solid var(--accent);cursor:nwse-resize;z-index:2;border-radius:50%;width:16px;height:16px;position:absolute;bottom:-7px;right:-7px}.sc-handle:after{content:"";position:absolute;inset:-12px}.is-new{box-shadow:0 0 0 4px var(--accent-soft);animation:.22s cubic-bezier(.2,.9,.3,1.2) sc-snap}@keyframes sc-snap{0%{opacity:.3;filter:blur(1px);transform:scale(.94)}to{opacity:1;filter:none;transform:none}}@media (prefers-reduced-motion:reduce){.is-new{animation:none}}.sc-edit{z-index:5;border:2px solid var(--accent);border-radius:var(--r);background:var(--card);height:40px;color:var(--ink);font:15px var(--sans);padding:0 10px;position:absolute}.sc-chips{z-index:5;background:var(--card);border:1px solid var(--line);border-radius:10px;flex-wrap:wrap;align-items:center;gap:6px;max-width:min(92vw,420px);padding:6px;font-size:13px;display:flex;position:absolute;box-shadow:0 10px 30px -18px #00000080}.sc-chips>span{color:var(--muted);padding:0 4px}.sc-chips button{border-radius:var(--r);border:1px solid var(--line);background:var(--bg);cursor:pointer;min-height:36px;padding:0 12px;font-weight:500}.sc-chips button:hover{border-color:var(--muted)}.sc-chips button:first-of-type{border-color:var(--accent);color:var(--accent)}.sc-chips .sc-chip-keep{color:var(--muted);font-weight:500}.sc-ghost-hint{text-align:center;color:var(--muted);pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.sc-ghost-rect{border:2px dashed var(--dot);border-radius:22px;width:180px;height:300px;margin:0 auto 12px;animation:2.4s ease-in-out infinite sc-breathe}@keyframes sc-breathe{50%{border-color:var(--muted)}}@media (prefers-reduced-motion:reduce){.sc-ghost-rect{animation:none}}.sc-ghost-hint p{margin:0;font-size:15px}.sc-ghost-hint small{font:11.5px var(--mono);color:var(--muted);opacity:.8;margin-top:6px;display:block}.sc-tools{left:50%;bottom:max(16px, env(safe-area-inset-bottom));background:var(--card);border:1px solid var(--line);z-index:4;border-radius:12px;align-items:center;gap:2px;max-width:calc(100% - 24px);padding:4px;display:flex;position:absolute;overflow-x:auto;transform:translate(-50%);box-shadow:0 12px 30px -20px #00000080}.sc-tool{border-radius:var(--r);cursor:pointer;min-width:52px;min-height:48px;color:var(--muted);background:0 0;border:0;flex-direction:column;justify-content:center;align-items:center;gap:2px;font-size:10.5px;transition:background-color .15s,color .15s;display:flex}.sc-tool svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:20px;height:20px}.sc-tool.is-on{background:var(--ink);color:var(--bg)}.sc-tool:disabled{opacity:.35;cursor:default}.sc-tool:hover:not(:disabled):not(.is-on){background:var(--bg-2);color:var(--ink)}.sc-tool-text{cursor:pointer;border-radius:var(--r);white-space:nowrap;background:0 0;border:0;min-height:44px;padding:0 12px;font-size:13px;font-weight:600}.sc-tool-text:hover{background:var(--bg-2)}.sc-sep{background:var(--line);flex:none;width:1px;height:28px;margin:0 4px}.sc-steps{background:var(--card);border:1px solid var(--line);pointer-events:none;z-index:3;border-radius:10px;max-width:280px;margin:0;padding:4px 14px;font-size:12.5px;line-height:1.4;list-style:none;position:absolute;top:16px;right:16px}.sc-steps li{color:var(--ink);gap:10px;padding:9px 0;display:flex}.sc-steps li+li{border-top:1px solid var(--line)}.sc-steps li span{width:18px;height:18px;font:500 10.5px var(--mono);border:1px solid var(--line);border-radius:5px;flex:none;place-items:center;display:grid}.sc-steps li.is-done{color:var(--muted);text-decoration:line-through;-webkit-text-decoration-color:var(--line);text-decoration-color:var(--line)}.sc-steps li.is-done span{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.sc-panel{border-left:1px solid var(--line);background:var(--card);flex-direction:column;flex:none;width:380px;min-height:0;display:flex}.sc-sheet-toggle{display:none}.sc-tabs{background:var(--bg);border:1px solid var(--line);border-radius:10px;gap:2px;margin:12px 14px 0;padding:3px;display:flex}.sc-tabs button{min-height:36px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:7px;flex:1;padding:0 12px;font-size:13.5px;font-weight:500}.sc-tabs button:hover{color:var(--ink)}.sc-tabs button[aria-selected=true]{color:var(--ink);background:var(--card);box-shadow:0 0 0 1px var(--line)}.sc-tabpanel{-webkit-user-select:text;user-select:text;flex:1;min-height:0;padding:14px;overflow:auto}.sc-foot{padding:10px 14px;padding-bottom:max(10px, env(safe-area-inset-bottom));font:11px var(--mono);color:var(--muted);border-top:1px solid var(--line);margin:0}.sc-empty{color:var(--muted);margin:8px 0;font-size:14px;line-height:1.5}.sc-muted{color:var(--muted);margin:6px 0;font-size:13px;line-height:1.5}.sc-layers,.sc-layers ul{margin:0;padding:0;list-style:none}.sc-layers>li{margin-bottom:12px}.sc-layers ul{border-left:1px solid var(--line);margin-left:8px;padding-left:14px}.sc-layer{text-align:left;cursor:pointer;white-space:nowrap;text-overflow:ellipsis;background:0 0;border:0;border-radius:6px;width:100%;padding:7px 8px;font-size:13.5px;display:block;overflow:hidden}.sc-layer:hover{background:var(--bg-2)}.sc-layer.is-sel{background:var(--accent-soft);outline:none}.sc-layer em{font-style:normal;font:500 11px var(--mono);color:var(--muted);margin-right:6px}.sc-layer.is-screen input{font:600 14px var(--sans);color:var(--ink);background:0 0;border:0;width:100%;padding:0}.sc-row{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px;display:flex}.sc-row-end{justify-content:flex-end;gap:16px;margin:18px 0 0}.sc-code pre{border-radius:var(--r);background:var(--bg);border:1px solid var(--line);font:12px/1.55 var(--mono);white-space:pre;max-height:100%;margin:0;padding:12px;overflow:auto}.sc-frame{border:1px solid var(--line);background:#fff;border-radius:10px;width:100%;height:560px}.sc-badge{font:500 11px var(--mono);background:var(--accent-soft);color:var(--accent);border-radius:6px;margin-right:auto;padding:4px 8px}.sc-error{border-radius:var(--r);border:1px solid color-mix(in srgb, var(--danger) 40%, transparent);background:color-mix(in srgb, var(--danger) 10%, transparent);margin:0 0 10px;padding:10px 12px;font-size:13.5px;line-height:1.45}.sc-error a{font-weight:600}.sc-legend{z-index:20;background:var(--card);border:1px solid var(--line);border-radius:12px;width:300px;padding:14px;position:fixed;top:64px;right:16px;box-shadow:0 20px 50px -24px #00000080}.sc-legend-list{gap:6px;margin:0 0 10px;padding:0;list-style:none;display:grid}.sc-legend-list li{align-items:center;gap:10px;font-size:14px;display:flex}.sc-legend-list svg{background:var(--bg-2);fill:none;width:26px;height:26px;stroke:var(--ink);stroke-width:1.7px;stroke-linecap:round;stroke-linejoin:round;border-radius:6px;flex:none;padding:3px}.sc-modal{z-index:30;background:#0a0c106b;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.sc-card{background:var(--card);border:1px solid var(--line);-webkit-user-select:text;user-select:text;border-radius:14px;width:100%;max-width:440px;max-height:calc(100dvh - 32px);padding:24px;overflow:auto;box-shadow:0 30px 80px -30px #0009}.sc-card h2{letter-spacing:-.03em;margin:0 0 6px;font-size:22px;font-weight:500}.sc-card .sc-legend-list{margin-top:16px}.sc-input{border:1px solid var(--line);border-radius:var(--r);background:var(--bg);width:100%;min-height:44px;color:var(--ink);font:15px var(--sans);margin:10px 0 0;padding:0 12px}.sc-keys{gap:10px;margin-top:16px;display:grid}.sc-keys label{font-size:13px;font-weight:500}.sc-file{position:relative;overflow:hidden}.sc-file input{opacity:0;cursor:pointer;position:absolute;inset:0}.sc-card .sc-row{margin-top:16px}.sc-toasts{z-index:40;pointer-events:none;gap:8px;display:grid;position:fixed;bottom:92px;left:50%;transform:translate(-50%)}.sc-toast{pointer-events:auto;background:var(--ink);color:var(--bg);border-radius:10px;align-items:center;gap:12px;padding:10px 14px;font-size:14px;display:flex;box-shadow:0 12px 30px -16px #0009}.sc-toast button{color:inherit;cursor:pointer;background:0 0;border:0;font-weight:600;text-decoration:underline}.sc-unsupported{text-align:center;height:100dvh;color:var(--muted);place-items:center;padding:24px;display:grid}@media (max-width:760px){.sc-body{position:relative}.sc-panel{border-left:0;border-top:1px solid var(--line);z-index:10;border-radius:16px 16px 0 0;width:auto;height:56px;transition:height .25s;position:absolute;bottom:0;left:0;right:0;box-shadow:0 -12px 30px -24px #00000080}.sc-panel.is-open{height:72%}.sc-sheet-toggle{cursor:pointer;background:0 0;border:0;padding:16px;font-size:14px;font-weight:500;display:block}.sc-panel:not(.is-open) .sc-tabs,.sc-panel:not(.is-open) .sc-tabpanel,.sc-panel:not(.is-open) .sc-foot{display:none}.sc-tools{bottom:68px}.sc-toasts{bottom:140px}.sc-steps{max-width:none;font-size:12px;inset:8px 8px auto}.sc-top-actions .sc-ghost:first-child,.sc-project{display:none}.sc-top{flex-wrap:wrap;row-gap:8px}.sc-example-bar{flex:1 0 100%;order:3;justify-content:space-between;align-items:center;gap:8px;display:flex}.sc-legend{width:auto;left:16px;right:16px}}.sc-app input,.sc-app textarea{-webkit-user-select:text;user-select:text}@media (max-width:760px){.sc-steps li.is-done{display:none}}.sc-stage.is-drawing .sc-ghost-hint{display:none}