.app{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#04101a;--panel:#0a1b29;--panel-2:#0f2536;--line:#1c3a50;--text:#d6e7f2;--muted:#7f9fb3;--accent:#ffc857;--accent-2:#5ad1e6;--danger:#ff6b6b;--radius:10px;--font:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;font-family:var(--font);accent-color:var(--accent-2);background:var(--bg);color:var(--text)}.app,.app *{box-sizing:border-box}.app :where(header,aside,section,main,div,span,p,h1,h2,h3,ul,ol,li,dl,dt,dd,figure,canvas,code,label,output){background:0 0;border:0;margin:0;padding:0;font-family:inherit}html:has(>body>.app){height:100%;margin:0}html:has(>body>.app)>body{height:100%;margin:0}.app button,.app .button{font:inherit;color:var(--text);background:var(--panel-2);border:1px solid var(--line);cursor:pointer;border-radius:7px;padding:.4rem .75rem;font-size:.85rem;transition:background .15s,border-color .15s}.app button:hover,.app .button:hover{background:#163449;border-color:#2a5572}.app button:focus-visible,.app .button:focus-visible,.app input:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}.app button[aria-pressed=true]{background:#28506a}.app button.primary{color:#1b1405;background:#d9a93c;border-color:#f0c35c;font-weight:600}.app button.primary:hover{background:#e8b84a}.app button.danger{color:#ffb3b3;border-color:#6b2c2c}.app button:disabled{opacity:.5;cursor:not-allowed}.app .muted{color:var(--muted)}.app{grid-template:"top top""side stage"1fr/minmax(260px,320px) 1fr;height:100dvh;display:grid}.app .topbar{border-bottom:1px solid var(--line);background:linear-gradient(90deg,#06182a,#041019);grid-area:top;align-items:baseline;gap:1rem;padding:.6rem 1rem;display:flex}.app .topbar h1{letter-spacing:.02em;margin:0;font-size:1.1rem}.app .tagline{color:var(--muted);flex:1;margin:0;font-size:.85rem}.app .badge{font-family:var(--mono);border:1px solid var(--line);color:var(--accent-2);border-radius:99px;padding:.15rem .5rem;font-size:.75rem}.app .sidebar{background:var(--panel);border-right:1px solid var(--line);flex-direction:column;grid-area:side;min-height:0;display:flex}.app .tabs{border-bottom:1px solid var(--line);display:flex}.app .tabs button{color:var(--muted);background:0 0;border:none;border-bottom:2px solid #0000;border-radius:0;flex:1;padding:.7rem}.app .tabs button[aria-selected=true]{color:var(--text);border-bottom-color:var(--accent)}.app .panel{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.app .panel[hidden]{display:none}.app .panel-actions{border-top:1px solid var(--line);flex-wrap:wrap;gap:.4rem;padding:.75rem;display:flex}.app .creature-list{flex:1;margin:0;padding:.5rem;list-style:none;overflow-y:auto}.app .creature-list li+li{margin-top:.35rem}.app .creature-list button{text-align:left;background:0 0;border-color:#0000;grid-template-columns:1fr auto;gap:.15rem .5rem;width:100%;padding:.55rem .7rem;display:grid}.app .creature-list button:hover{background:var(--panel-2)}.app .creature-list button[aria-current=true]{background:#13334a;border-color:#2f6a8c}.app .creature-list .name{font-weight:600}.app .creature-list .fit{font-family:var(--mono);color:var(--accent);align-self:center;font-size:.75rem}.app .creature-list .edited{color:var(--accent-2);margin-left:.4rem;font-size:.68rem;font-weight:400}.app .creature-list .meta{color:var(--muted);grid-column:1/-1;font-size:.75rem}.app .creature-list .section{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:.6rem .4rem .2rem;font-size:.7rem}.app .list-empty{border-top:1px solid var(--line);margin:0;padding:.75rem;line-height:1.5}.app .list-empty code{font-family:var(--mono)}.app .stage{grid-area:stage;min-width:0;min-height:0;position:relative;overflow:hidden}.app #view{cursor:crosshair;touch-action:none;width:100%;height:100%;display:block}.app #view.over-target{cursor:grab}.app #view.dragging-target{cursor:grabbing}.app .hud{border:1px solid var(--line);border-radius:var(--radius);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer;background:#04101ab8;padding:.3rem .5rem;position:absolute;top:.75rem;left:.75rem}.app .hud.open{min-width:15rem;max-width:min(20rem,100% - 1.5rem);padding:.7rem .9rem}.app .hud-body{display:none}.app .hud.open .hud-body{display:block}.app .hud h2{min-width:0;color:var(--muted);flex:1;margin:0;font-size:.85rem;font-weight:700}.app .hud-title{align-items:center;gap:.5rem;display:flex}.app .hud:not(.open) .look-button{display:none}.app .hud:not(.open) h2{flex:0 auto}.app .hud:not(.open) .name-input{field-sizing:content;width:auto;min-inline-size:4ch;max-inline-size:18ch}.app .hud-toggle{color:var(--muted);background:0 0;border-color:#0000;padding:.25rem;display:flex}.app .hud-toggle:hover{background:var(--panel-2);border-color:var(--line)}.app .hud.open .hud-toggle svg{rotate:180deg}.app .name-input{font:inherit;color:var(--muted);text-overflow:ellipsis;cursor:text;background:0 0;border:1px solid #0000;border-radius:5px;width:100%;min-width:8rem;margin:-.1rem -.3rem;padding:.1rem .3rem;font-weight:700}.app .name-input:hover{border-color:var(--line)}.app .name-input:focus{background:var(--panel-2);border-color:#2a5572}.app .look-button{align-items:center;gap:.35rem;padding:.25rem .55rem;font-size:.78rem;display:inline-flex}.app .look-panel{width:min(18rem,100vw - 16px);color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);margin:0;padding:.8rem .9rem;position:fixed;inset:auto;box-shadow:0 10px 30px #00000073}.app .look-panel h3{margin:0 0 .5rem;font-size:.95rem}.app .look-panel fieldset{border:0;grid-template-columns:1fr 1fr;gap:.3rem .8rem;margin:0 0 .7rem;padding:0;display:grid}.app .look-panel legend{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:.35rem;padding:0;font-size:.68rem}.app .look-panel fieldset label{cursor:pointer;align-items:center;gap:.3rem;font-size:.85rem;display:flex}.app .look-size{grid-template-columns:auto 1fr 3.2em;align-items:center;gap:.5rem;font-size:.85rem;display:grid}.app .look-size output{font-family:var(--mono);text-align:right;font-size:.78rem}.app .look-panel p{margin:.6rem 0}.app .look-actions{justify-content:space-between;gap:.5rem;display:flex}.app .hud p{margin:.15rem 0 .5rem;font-size:.78rem}.app .stats{grid-template-columns:1fr 1fr;gap:.35rem 1rem;margin:0;display:grid}.app .stats dt{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-size:.68rem}.app .stats dd{font-family:var(--mono);margin:0;font-size:.95rem}.app .toolbar{border:1px solid var(--line);border-radius:var(--radius);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#04101ac7;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;max-width:calc(100% - 1.5rem);padding:.5rem .7rem;display:flex;position:absolute;bottom:2.4rem;left:50%;translate:-50%}.app .toolbar label{align-items:center;gap:.4rem;font-size:.85rem;display:inline-flex}.app .toolbar output{font-family:var(--mono);min-width:2.5em}.app .hint{text-align:center;color:var(--muted);pointer-events:none;margin:0;font-size:.75rem;position:absolute;bottom:.6rem;left:0;right:0}.app dialog{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:var(--radius);max-width:32rem}.app dialog::backdrop{background:#0009}@media not (min-width:760px){.app{grid-template:"top""stage"55dvh"side"1fr/1fr}.app .tagline{display:none}.app .hud,.app .hud.open{min-width:0;font-size:.8rem}.app .hint{display:none}.app .toolbar{bottom:.5rem}}.app .small{font-size:.78rem}.app .check{align-items:center;gap:.35rem;display:inline-flex}.app.embed{border:1px solid var(--line);border-radius:var(--radius);grid-template:"top""stage""side"/minmax(0,1fr);height:auto;margin:20px 0;overflow:hidden}.app.embed .topbar{justify-content:flex-end;padding:.4rem .6rem}.app.embed .topbar h1,.app.embed .tagline{display:none}.app.embed .stage{height:min(60vh,480px);min-height:300px}.app.embed .hint{display:none}.app.embed .toolbar{gap:.35rem .5rem;max-width:none;padding:.4rem .55rem;bottom:.7rem;left:.6rem;right:.6rem;translate:none}.app.embed .toolbar button{padding:.35rem .6rem}.app.embed .toolbar input[type=range]{width:6rem}.app.embed .sidebar,.app.embed .panel{border-right:0;min-width:0}.app.embed .sidebar{border-top:1px solid var(--line)}.app.embed .creature-list{flex-wrap:wrap;gap:.35rem;max-height:7.5rem;display:flex}.app.embed .creature-list li+li{margin-top:0}.app.embed .creature-list button{border-color:var(--line);align-items:baseline;gap:.45rem;width:auto;padding:.35rem .6rem;display:flex}.app.embed .creature-list .meta{display:none}@media not (min-width:760px){.app.embed .stage{height:min(65vh,430px)}.app.embed .creature-list{flex-wrap:nowrap;overflow-x:auto}.app.embed .creature-list button{white-space:nowrap}}