:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

/* Layout: full-bleed WebGL stage, quiet overlay chrome at the edges. Single dark gallery look. */
:root{
  --ink:#0d0c0b; --panel:rgba(16,15,13,.72); --line:rgba(236,228,214,.18);
  --paper:#ece4d6; --muted:#a49b8c; --brass:#c9a86a;
  --display:"Bodoni Moda","Didot","Times New Roman",serif;
  --body:"Noto Sans KR","Helvetica Neue",Arial,sans-serif;
  color-scheme:dark;
}
html,body{height:100%}
body{background:var(--ink);color:var(--paper);font-family:var(--body);overflow:hidden}
#stage{position:fixed;inset:0}
#stage canvas{display:block;width:100%;height:100%}
.hud{position:fixed;left:0;right:0;pointer-events:none;padding-inline:20px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.top{top:0;padding-top:calc(env(safe-area-inset-top,0px) + 18px)}
.brand{font-family:var(--display);font-weight:700;font-size:clamp(20px,3vw,30px);letter-spacing:.18em;line-height:1}
.sub{margin-top:6px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.scene{text-align:right;min-width:0}
.scene .k{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass)}
.scene .n{font-family:var(--display);font-size:clamp(16px,2.2vw,22px);margin-top:4px;transition:opacity .5s}
.bottom{bottom:0;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 16px);align-items:center}
.bar{pointer-events:auto;display:flex;align-items:center;gap:12px;width:100%;max-width:720px;margin-inline:auto;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:8px 14px 8px 8px;backdrop-filter:blur(8px)}
button{font:inherit;color:var(--ink);background:var(--paper);border:0;border-radius:999px;height:34px;min-width:34px;padding:0 12px;cursor:pointer;font-size:12px;letter-spacing:.08em;font-weight:500}
button.ghost{background:transparent;color:var(--paper);border:1px solid var(--line)}
button:focus-visible,input:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
input[type=range]{flex:1;min-width:0;accent-color:var(--brass)}
.time{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.note{position:fixed;left:20px;bottom:calc(env(safe-area-inset-bottom,0px) + 70px);font-size:10px;letter-spacing:.12em;color:var(--muted);pointer-events:none}
@media (max-width:520px){.sub{letter-spacing:.14em}.time{display:none}.note{display:none}}

.tour-loading{position:fixed;inset:0;display:grid;place-items:center;background:#0d0c0b;color:#ece4d6;z-index:3;font-size:14px;letter-spacing:.04em}
.tour-error{position:fixed;inset:0;z-index:4;background:#0d0c0bf5;color:#ece4d6;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;padding:25px;text-align:center;line-height:1.8}
.tour-error a{color:#ece4d6;text-underline-offset:4px}.tour-error p{max-width:480px;margin:0}.tour-error h1{font-size:24px;margin:0}
.home-link{position:fixed;left:20px;bottom:105px;z-index:2;font-size:11px;color:#c9a86a;text-decoration:none}.embedded .home-link{display:none}
@media(max-width:520px){.hud.top{padding-inline:14px;gap:10px}.brand{font-size:19px;letter-spacing:.12em}.sub{font-size:8px;letter-spacing:.05em}.scene .k{font-size:8px}.scene .n{font-size:14px;max-width:130px}.hud.bottom{padding-inline:10px}.bar{gap:8px}.home-link{left:14px;bottom:80px}}