@font-face{font-family:Broadway;src:url("/fonts/broadway/Broadway.ttf") format("truetype");font-display:swap}
:root{color-scheme:dark;--bg:#101014;--panel:#191a21;--edge:#363948;--accent:#80bcff;--muted:#b8bbc7}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:#f8f8fa;font:1rem/1.5 system-ui,sans-serif}
.bar,main{width:min(1140px,calc(100% - 2rem));margin:auto}
.bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--edge)}
.bar a{font:1.8rem Broadway,Georgia,serif;color:inherit;text-decoration:none}
.bar span{font-size:.72rem;letter-spacing:.14em;color:var(--accent)}
main{padding:1.8rem 0 3rem}
.intro{margin-bottom:1.8rem}
h1{font:clamp(3rem,11vw,6.5rem)/1 Broadway,Georgia,serif;margin:0}
p{color:var(--muted)}
.intro p{margin:.5rem 0}
#gallery{display:grid;grid-template-columns:minmax(170px,1fr) minmax(0,3fr);gap:1rem;align-items:start}
#model-list{list-style:none;padding:0;margin:0;display:grid;gap:.45rem}
button{color:inherit;font:inherit;cursor:pointer;background:#222530;border:1px solid var(--edge);border-radius:.4rem;padding:.55rem .8rem}
#model-list button{width:100%;text-align:left;overflow-wrap:anywhere}
button:hover,button[aria-pressed="true"]{background:#303a4c;border-color:var(--accent)}
a:focus-visible,button:focus-visible,canvas:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.showcase{min-width:0;background:var(--panel);border:1px solid var(--edge);border-radius:.6rem;overflow:hidden}
.model-copy,.viewer-actions{padding:.8rem 1rem;overflow-wrap:anywhere}
.model-copy h2,.model-copy p,.viewer-actions p{margin:0}
.model-copy p{white-space:pre-wrap}
.stage{width:100%;height:clamp(230px,53vh,540px);background:radial-gradient(ellipse at center,#3a4352,#151820)}
.viewer-actions{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.viewer-actions:has(p:empty):has(button[hidden]){display:none}
[data-state="error"]{color:#ffc9ba}
@media(max-width:640px){
  #gallery{grid-template-columns:minmax(0,1fr)}
  #model-list{grid-template-columns:repeat(auto-fit,minmax(min(8rem,100%),1fr))}
  main{padding-top:1.4rem}
  .stage{height:clamp(220px,45vh,400px)}
}