:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#14161a;--panel:#1b1e24;--panel-2:#21252c;--line:#2c313a;--text:#e7eaef;--muted:#9aa2ae;--accent:#f0603c;--accent-soft:#f0603c29;--ok:#4bb98a;--radius:10px;--font:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);font-family:var(--font);margin:0;font-size:14px;overflow:hidden}#app{grid-template:"top top top"56px"left stage right"1fr/264px 1fr 320px;height:100%;display:grid}#topbar{background:var(--panel);border-bottom:1px solid var(--line);grid-area:top;justify-content:space-between;align-items:center;padding:0 16px;display:flex}.brand{align-items:center;gap:10px;display:flex}.brand .mark{background:linear-gradient(135deg, var(--accent), #f0a03c);border-radius:6px;flex:none;width:22px;height:22px}.brand strong{letter-spacing:.01em;font-size:14px;display:block}.brand .sub{color:var(--muted);font-size:12px;display:block}.tools{align-items:center;gap:8px;display:flex}.author{color:var(--muted);align-items:center;gap:6px;font-size:12px;display:flex}.author input{border:1px solid var(--line);background:var(--panel-2);width:110px;color:var(--text);font:inherit;border-radius:8px;padding:6px 8px;font-size:12px}.btn{border:1px solid var(--line);background:var(--panel-2);color:var(--text);font:inherit;cursor:pointer;border-radius:8px;align-items:center;gap:7px;padding:7px 12px;font-size:13px;transition:background .12s,border-color .12s;display:inline-flex}.btn:hover{background:#272c34}.btn .dot{background:var(--muted);border-radius:50%;width:8px;height:8px}.btn[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft)}.btn[aria-pressed=true] .dot{background:var(--accent)}.btn.primary{background:var(--accent);border-color:var(--accent);color:#14161a;font-weight:600}.btn.primary:hover{background:#f4714f}#left,#right{background:var(--panel);overflow-y:auto}#left{border-right:1px solid var(--line);grid-area:left;padding:16px}#right{border-left:1px solid var(--line);flex-direction:column;grid-area:right;display:flex}h2{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;font-size:11px;font-weight:600}#left section+section{margin-top:22px}.chips{flex-wrap:wrap;gap:6px;display:flex}.chip{border:1px solid var(--line);background:var(--panel-2);color:var(--text);font:inherit;cursor:pointer;border-radius:999px;padding:6px 10px;font-size:12px}.chip[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft);color:var(--text)}.props{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);padding:12px;font-size:13px}.props.empty{color:var(--muted);font-size:12px}.props .name{margin-bottom:8px;font-weight:600}.props dl{grid-template-columns:74px 1fr;gap:5px 8px;margin:0;font-size:12px;display:grid}.props dt{color:var(--muted)}.props dd{margin:0}.hint p{color:var(--muted);margin:0 0 10px;font-size:12px;line-height:1.55}.hint strong{color:var(--text);font-weight:600}#stage{grid-area:stage;position:relative;overflow:hidden}#canvas{width:100%;height:100%;display:block}#stage.commenting{cursor:crosshair}#mode-banner{background:var(--accent-soft);border:1px solid var(--accent);color:var(--text);pointer-events:none;border-radius:999px;padding:8px 14px;font-size:12px;position:absolute;bottom:18px;left:50%;transform:translate(-50%)}#pins{pointer-events:none;position:absolute;inset:0}.pin{pointer-events:auto;cursor:pointer;background:var(--panel);border:1px solid var(--line);color:var(--text);white-space:nowrap;border-radius:999px;align-items:center;gap:6px;padding:4px 9px 4px 5px;font-size:12px;line-height:1;transition:opacity .12s,transform .12s;display:flex;position:absolute;transform:translate(-50%,-100%);box-shadow:0 6px 18px #00000073}.pin .num{background:var(--accent);color:#14161a;border-radius:50%;place-items:center;width:18px;height:18px;font-size:11px;font-weight:700;display:grid}.pin.resolved .num{background:var(--ok)}.pin.occluded{opacity:.32}.pin.active{border-color:var(--accent);transform:translate(-50%,-100%)scale(1.04)}.right-head{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:16px 16px 10px;display:flex}.right-head h2{margin:0}.toggle{color:var(--muted);cursor:pointer;align-items:center;gap:6px;font-size:12px;display:flex}.threads{flex-direction:column;flex:1;gap:10px;padding:12px;display:flex;overflow-y:auto}.thread{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel-2);cursor:pointer;padding:12px}.thread.active{border-color:var(--accent)}.thread-head{align-items:center;gap:8px;margin-bottom:8px;display:flex}.thread-head .num{background:var(--accent);color:#14161a;border-radius:50%;flex:none;place-items:center;width:18px;height:18px;font-size:11px;font-weight:700;display:grid}.thread.resolved .thread-head .num{background:var(--ok)}.thread-head .el{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.comment{border-top:1px solid var(--line);padding:8px 0;font-size:13px;line-height:1.5}.comment:first-of-type{border-top:none;padding-top:0}.comment .meta{color:var(--muted);gap:8px;margin-bottom:3px;font-size:11px;display:flex}.comment .meta .who{color:var(--text);font-weight:600}.thread form{gap:6px;margin-top:10px;display:flex}.thread textarea{resize:none;border:1px solid var(--line);background:var(--panel);min-height:34px;color:var(--text);font:inherit;border-radius:8px;flex:1;padding:8px;font-size:12px}.thread-actions{gap:6px;margin-top:8px;display:flex}.mini{border:1px solid var(--line);background:var(--panel);color:var(--muted);cursor:pointer;border-radius:7px;padding:5px 9px;font-family:inherit;font-size:12px}.mini:hover{color:var(--text)}.threads .empty{color:var(--muted);padding:8px;font-size:12px;line-height:1.5}#toast{background:var(--panel);border:1px solid var(--line);opacity:0;pointer-events:none;border-radius:8px;padding:10px 14px;font-size:13px;transition:opacity .18s,transform .18s;position:fixed;bottom:20px;right:20px;transform:translateY(6px)}#toast.show{opacity:1;transform:translateY(0)}@media (max-width:1100px){#app{grid-template-columns:1fr 300px;grid-template-areas:"top top""stage right"}#left{display:none}}