@font-face{font-family:Inter;src:url('../assets/fonts/inter-400.ttf') format('truetype');font-display:swap}
:root{--paper:#fcf9f8;--ink:#1c1b1b;--muted:#615b58;--accent:#b61723;--line:#d6d0cc}
*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--paper);color:var(--ink);font:14px Inter,Arial,sans-serif}body{display:grid;grid-template-rows:auto 1fr auto}button,a{font:inherit;color:inherit}button{background:transparent;border:0;cursor:pointer}button,a{touch-action:manipulation}button:disabled{opacity:.42;cursor:default}a{text-decoration:none;text-underline-offset:4px}a:hover{text-decoration:underline}button:focus-visible,a:focus-visible,#stage:focus-visible{outline:2px solid var(--accent);outline-offset:3px}::selection{background:var(--accent);color:white}.explore-header{z-index:2;padding:28px;background:var(--ink);color:var(--paper)}.toolbar{display:grid;grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr));gap:24px;width:100%}.control-group{min-width:0}.segmented-control{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);overflow:hidden;border:1px solid rgba(252,249,248,.46);border-radius:6px;background:transparent}.segmented-control button{min-width:0;min-height:42px;padding:9px 12px;border-right:1px solid rgba(252,249,248,.46);color:var(--paper);white-space:nowrap}.segmented-control button:last-child{border-right:0}.segmented-control button:hover:not(:disabled):not([aria-pressed=true]){background:rgba(252,249,248,.12)}.segmented-control button:focus-visible{position:relative;z-index:1;outline-color:var(--paper);outline-offset:-3px}.segmented-control [aria-pressed=true],.segmented-control [aria-pressed=true]:hover:not(:disabled){background:var(--paper);color:var(--ink)}#stage{min-height:0;min-width:0;position:relative;overflow:hidden;touch-action:none}canvas{display:block;width:100%;height:100%}#loading,#failure{position:absolute;inset:0;display:grid;place-content:center;text-align:center;background:var(--paper);z-index:1;color:var(--muted)}#failure button,#failure a{padding:12px;margin:5px}#loading[hidden],#failure[hidden],#movement[hidden]{display:none}.statusbar{padding:13px 28px;display:flex;align-items:center;border-top:1px solid var(--line);color:var(--muted);font-size:12px;background:var(--paper)}#movement{position:fixed;bottom:84px;left:26px;display:grid;grid-template-columns:repeat(3,46px);grid-template-rows:repeat(2,46px);gap:5px;z-index:3}#movement button{background:var(--paper);border:1px solid var(--line);border-radius:5px;touch-action:none}#movement button:first-child{grid-column:2}#movement button:nth-child(2){grid-column:1}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;vertical-align:middle}dialog{padding:0;border:0;background:var(--paper);max-width:min(1200px,94vw);max-height:94dvh}dialog::backdrop{background:rgba(28,27,27,.8)}dialog img{display:block;max-width:100%;max-height:80dvh;object-fit:contain}dialog button{float:right;padding:14px 20px}dialog p{font-size:12px;color:var(--muted);padding:0 20px 12px}dialog::-webkit-scrollbar{width:7px}dialog::-webkit-scrollbar-thumb{background:var(--line)}
@media(max-width:900px){.explore-header{padding:22px 18px}.toolbar{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.control-group:first-child{grid-column:1/-1}.statusbar{padding:10px 18px}}
@media(max-width:560px){.explore-header{padding:16px 12px}.toolbar{grid-template-columns:1fr;gap:10px}.control-group:first-child{grid-column:auto}.view-mode-control{display:none}.segmented-control button{min-height:40px;padding:7px 8px;font-size:12px}.statusbar{font-size:10px}#hint{display:none}#movement{bottom:72px;left:18px}dialog{max-width:96vw}}
.statusbar[hidden]{display:none}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

.model-zoom{position:absolute;top:20px;left:20px;z-index:2;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:5px;background:var(--paper)}.model-zoom[hidden]{display:none}.model-zoom button{display:grid;place-items:center;width:44px;height:44px}.model-zoom button+button{border-top:1px solid var(--line)}.model-zoom button:hover{background:#eee9e5}.model-zoom button:active{background:#e5ded9}.model-zoom button:focus-visible{position:relative;z-index:1;outline-offset:-3px}
@media(max-width:560px){.model-zoom{top:14px;left:14px}}
