/* Workshop spike: painted room, geometry on the worktop */
:root{--ink:#171715;--muted:#77746c;--paper:#f5f2ea;--line:#d8d3c8;--orange:#e9673d}
*{box-sizing:border-box}
body{margin:0;background:#e8dcc0;color:var(--ink);font-family:'DM Sans',system-ui,sans-serif}

.stage{position:fixed;inset:0}
.stage canvas{display:block;width:100%;height:100%}

/* Grain sits over BOTH layers so paint and geometry share one surface */
.grain{position:fixed;inset:0;pointer-events:none;z-index:2;mix-blend-mode:multiply;opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='7'/><feColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .22 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  background-size:180px 180px}
.vignette{position:fixed;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,0) 55%,rgba(58,42,22,.22) 100%)}

/* Hotspots are real anchors, projected from the 3D positions each frame */
.spots{position:fixed;inset:0;z-index:4;pointer-events:none}
.spot{position:absolute;transform:translate(-50%,0);pointer-events:auto;text-align:center;
  font:500 .62rem 'DM Mono',ui-monospace,monospace;letter-spacing:.13em;text-transform:uppercase;
  color:#2f2219;text-decoration:none;opacity:.62;transition:opacity .18s ease,color .18s ease}
.spot:before{content:'';display:block;width:1px;height:16px;margin:0 auto 6px;background:currentColor;opacity:.45}
.spot:hover,.spot:focus-visible,.spot.is-hot{opacity:1;color:var(--orange);outline:none}

.hud{position:fixed;z-index:5;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:1rem;
  padding:.95rem 4vw;background:rgba(245,242,234,.9);border-top:1px solid var(--line);
  font:500 .62rem 'DM Mono',ui-monospace,monospace;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.hud b{color:var(--orange);font-weight:500}
.tilt-btn{position:fixed;z-index:6;right:4vw;bottom:3.6rem;border:1px solid var(--line);background:rgba(245,242,234,.94);
  color:var(--ink);padding:.7rem 1rem;cursor:pointer;
  font:500 .62rem 'DM Mono',ui-monospace,monospace;letter-spacing:.13em;text-transform:uppercase}
.tilt-btn:hover{color:var(--orange);border-color:var(--orange)}
body:not(.webgl) .tilt-btn{display:none}
.back{position:fixed;z-index:5;top:0;left:0;padding:.95rem 4vw;
  font:500 .62rem 'DM Mono',ui-monospace,monospace;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.back:hover{color:var(--orange)}

.fallback{display:block;position:fixed;inset:0;overflow:auto;background:var(--paper);z-index:6}
.fallback img{display:block;width:100%;max-width:1600px;margin:0 auto}
.fallback p{max-width:1600px;margin:0 auto;padding:1rem 4vw;
  font:500 .62rem 'DM Mono',ui-monospace,monospace;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
/* The scene is opt-in: workshop.js adds .webgl once it knows it can render.
   No JS, blocked CDN or no WebGL all leave the drawn bench showing. */
body{overflow:auto}
.stage,.grain,.vignette,.spots,.hud{display:none}
body.webgl{overflow:hidden}
body.webgl .stage,body.webgl .grain,body.webgl .vignette,body.webgl .spots{display:block}
body.webgl .hud{display:flex}
body.webgl .fallback{display:none}

/* Guided tour */
.tour{position:fixed;z-index:7;left:4vw;bottom:3.6rem;display:flex;align-items:center;gap:.5rem;
  background:rgba(245,242,234,.95);border:1px solid var(--line);padding:.45rem .55rem}
.tour button{border:0;background:transparent;cursor:pointer;color:var(--ink);
  font:500 .68rem 'DM Mono',ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;padding:.35rem .5rem}
.tour button:hover{color:var(--orange)}
.tour .tour-play{background:var(--ink);color:var(--paper);padding:.5rem .8rem}
.tour .tour-play:hover{background:var(--orange);color:#fff}
.tour #tour-counter{font:500 .62rem 'DM Mono',ui-monospace,monospace;color:var(--muted);min-width:3.2rem;text-align:center}
/* Once something is selected the controls are useful even before playing */
body.selected .tour #tour-prev,body.selected .tour #tour-next,
body.selected .tour #tour-counter,body.selected .tour #tour-exit{display:inline-block}
body:not(.touring) .tour #tour-prev,
body:not(.touring) .tour #tour-next,
body:not(.touring) .tour #tour-counter,
body:not(.touring) .tour #tour-exit{display:none}
/* Closed captions: bottom of frame, out of the room, never over an object */
.tour-caption{position:fixed;z-index:7;left:50%;transform:translateX(-50%);bottom:5.6rem;margin:0;
  max-width:min(68ch,92vw);background:rgba(23,23,21,.84);color:#f5f2ea;
  padding:.72rem 1.15rem;font-size:.95rem;line-height:1.5;text-align:center;
  text-wrap:balance;text-shadow:0 1px 2px rgba(0,0,0,.5)}
body:not(.webgl) .tour,body:not(.webgl) .tour-caption{display:none}
@media(max-width:800px){
  /* Stack from the bottom: controls, then captions above them, and get the
     HUD out of the way entirely while the tour is running. */
  .tour{left:0;right:0;bottom:0;justify-content:center;border-left:0;border-right:0;border-bottom:0;
    padding:.5rem .4rem;gap:.2rem}
  .tour .tour-play{padding:.5rem .7rem;font-size:.62rem}
  .tour button{padding:.35rem .4rem}
  .tour-caption{left:0;right:0;bottom:3.1rem;transform:none;max-width:none;
    font-size:.8rem;line-height:1.45;padding:.6rem .9rem;text-align:left;
    max-height:30vh;overflow-y:auto}
  body.touring .hud,body.touring .tilt-btn{display:none}
}
}

.spot{cursor:pointer}
body.webgl .stage canvas{cursor:default}