:root{--ink:#3b2a2a;--paper:#fff8ee;--red:#c8322f;--green:#2f6b4f;--gold:#e9b44c}
*{box-sizing:border-box}
html,body{margin:0;font-family:Georgia,"Trebuchet MS",serif;color:var(--ink);background:#dfeaf3}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:100}
.topbar{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;padding:8px 14px;background:rgba(255,248,238,.93);border-bottom:3px solid var(--red)}
.brand{font-weight:bold;color:var(--red);text-decoration:none;font-size:1.1rem}.brand small{color:#888;font-weight:normal;font-size:.7rem}
#nav{display:flex;flex-wrap:wrap;gap:4px 14px;list-style:none;margin:0;padding:0}
#nav a{color:var(--ink);text-decoration:none;padding:4px 6px;border-radius:6px}
#nav a:hover,#nav a:focus-visible,#nav a[aria-current=page]{background:var(--gold)}
.tools{margin-left:auto;display:flex;gap:6px}
button,.btn{font:inherit;cursor:pointer;background:var(--green);color:#fff;border:0;border-radius:8px;padding:8px 14px;text-decoration:none;display:inline-block}
:focus-visible{outline:3px solid #1b5cff;outline-offset:2px}
#stage{position:fixed;inset:0;z-index:1}
#c{width:100%;height:100%;display:block;touch-action:none}
#pins{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.pin{position:absolute;transform:translate(-50%,-100%);pointer-events:auto;background:var(--paper);color:var(--ink);border:2px solid var(--red);padding:3px 9px;font-size:.8rem;border-radius:14px;white-space:nowrap}
.pin:hover,.pin:focus-visible,.pin.on{background:var(--gold)}
#tip{position:absolute;pointer-events:none;background:#2b1d1d;color:#fff;padding:8px 12px;border-radius:8px;max-width:240px;font-size:.9rem;transform:translate(14px,14px);z-index:5}
#tip b{display:block;color:var(--gold)}
.help{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);margin:0;background:rgba(255,248,238,.85);padding:4px 10px;border-radius:10px;font-size:.78rem;max-width:94vw;text-align:center}
#fade{position:absolute;inset:0;background:#fff8ee;opacity:0;pointer-events:none;transition:opacity .35s}
#fade.on{opacity:1}
#loading{position:absolute;inset:0;display:grid;place-items:center;background:#dfeaf3;font-size:1.3rem}
#loading.done{display:none}
/* page panels */
#content{position:relative;z-index:10;pointer-events:none}
.page{display:none}
.mode-3d .page.open{display:block;position:fixed;top:60px;right:16px;width:min(440px,calc(100vw - 32px));max-height:calc(100vh - 110px);overflow:auto;pointer-events:auto}
.card{background:var(--paper);border:3px solid var(--red);border-radius:14px;padding:16px 18px;box-shadow:0 8px 24px rgba(0,0,0,.25);position:relative}
.card h1{font-size:1.35rem;margin:0 28px 8px 0;color:var(--red)}
.close{position:absolute;right:8px;top:8px;padding:2px 10px;font-size:1.2rem;background:var(--red)}
.mode-classic .close{display:none}
.product{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}.product img{max-width:100%;height:auto;border-radius:10px;border:2px solid var(--gold)}
.product h2{margin:0 0 4px;font-size:1.1rem}.tag{background:var(--gold);font-size:.7rem;padding:1px 6px;border-radius:8px}
.price{font-weight:bold}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;list-style:none;padding:0}.grid li{background:#fff;padding:8px;border-radius:8px;border:1px solid #e0d2bd}
form label{display:block;margin:6px 0}input{font:inherit;padding:6px;width:100%;border:1px solid #aaa;border-radius:6px}
.foot{position:relative;z-index:10;text-align:center;font-size:.8rem;padding:10px;pointer-events:none}.mode-3d .foot{position:fixed;bottom:34px;right:10px;text-align:right;display:none}
/* classic mode */
.mode-classic #stage{display:none}
.mode-classic body,body.mode-classic{background:var(--paper)}
.mode-classic #content{pointer-events:auto;max-width:760px;margin:0 auto;padding:90px 16px 20px}
.mode-classic .page{display:block;margin-bottom:20px}
.mode-classic .foot{pointer-events:auto}
.noscript{position:relative;z-index:30;background:#fff;padding:8px}
@media (max-width:720px){
 #nav{display:none}.tools{margin-left:auto}
 .mode-3d .page.open{top:auto;bottom:0;right:0;left:0;width:100%;max-height:52vh;border-radius:0}
 .mode-3d .page.open .card{border-radius:14px 14px 0 0}
 .help{display:none}
 .pin{font-size:.7rem;padding:2px 6px}
 .mode-classic #nav{display:flex}
}
@media (prefers-reduced-motion:reduce){#fade{transition:none}}
[hidden]{display:none!important}