@charset "UTF-8";
:root{color-scheme:dark;--ink:#171d1b;--paper:#e8e3d5;--muted:#a8ada0;--accent:#d4c7a3;--sans:"Apple SD Gothic Neo","Malgun Gothic",sans-serif;--serif:"Iowan Old Style","AppleMyungjo","Noto Serif KR",serif;--mono:"SFMono-Regular",Consolas,monospace}
*{box-sizing:border-box}html,body{margin:0;min-width:320px;width:100%;height:100%;overflow:hidden}body{background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:16px;font-weight:400;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #e5d1a1;outline-offset:6px}button:disabled{cursor:wait;opacity:.55}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}[hidden]{display:none!important}#world{position:fixed;inset:0;width:100%;height:100%;display:block}.vignette{position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(17,23,20,.95),rgba(17,23,20,.76) 35%,rgba(17,23,20,.12) 70%),linear-gradient(0deg,rgba(15,20,17,.72),transparent 28%);transition:opacity 1s}.masthead{position:fixed;z-index:2;left:4.5vw;right:4.5vw;top:36px;display:flex;justify-content:space-between;font:10px var(--mono);letter-spacing:.17em;color:#c9cabc}.masthead i{font-style:normal;color:var(--muted);margin-left:18px}.intro{position:relative;width:min(690px,58vw);padding:clamp(135px,20vh,220px) 0 0 8.5vw}.edition{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.12em;color:var(--muted)}.rule{display:block;width:25px;height:1px;background:var(--accent)}h1{font-family:var(--serif);font-size:clamp(48px,5.7vw,88px);font-weight:400;line-height:1.23;letter-spacing:-.07em;margin:28px 0 26px;word-break:keep-all}.period{color:var(--accent)}.intro-copy{font-size:15px;font-weight:300;line-height:1.95;color:#c8cdc0;margin:0 0 32px;word-break:keep-all}.primary{display:flex;align-items:center;justify-content:space-between;gap:38px;min-height:53px;padding:0 22px;border:1px solid #d4d1bd;background:var(--paper);color:#232921;font-size:14px;font-weight:600;transition:background .2s,transform .2s}.primary:hover{background:#fffbee;transform:translateY(-2px)}.primary span{font-size:22px;font-weight:300}.entry-meta{font-size:11px;letter-spacing:.015em;color:#b3b9ab;margin:14px 0 0}.privacy{font-size:11px;line-height:1.8;color:#909b8e;margin-top:30px}.colophon{position:fixed;bottom:30px;left:4.5vw;right:4.5vw;display:flex;justify-content:space-between;font:9px var(--mono);letter-spacing:.13em;color:#98a08f}.colophon span:last-child{font:11px var(--sans);letter-spacing:.04em}.setup{position:fixed;inset:0;z-index:4;background:#1c231e}.setup-heading{text-align:center;position:absolute;top:6.5vh;width:100%;pointer-events:none}.eyebrow{font:10px var(--mono);letter-spacing:.18em;color:var(--accent)}h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.2vw,46px);letter-spacing:-.055em;line-height:1.4;margin:16px 0}.setup-heading h2{font-family:var(--sans);font-size:21px;font-weight:400;letter-spacing:-.035em;margin:14px 0 8px}.setup-heading p{color:#b3bbad;font-size:13px;line-height:1.65;margin:0}.setup-footer{position:absolute;bottom:4vh;width:100%;text-align:center;color:#b3bbad;font-size:13px;min-height:50px}.setup-footer #step-count{font:11px var(--mono);letter-spacing:.15em;color:var(--accent)}.setup-footer p{margin:14px 0 0}.target{--progress:0;position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%);border-radius:50%;background:conic-gradient(#dfd4ac calc(var(--progress)*360deg),#3a4439 0);box-shadow:0 0 0 16px #e7d7ab05;display:grid;place-items:center}.target:before{content:"";position:absolute;inset:2px;background:#1c231e;border-radius:50%}.target span{position:relative;width:8px;height:8px;border-radius:50%;background:#f5eacb;box-shadow:0 0 20px #e7d7ab44}.target[data-waiting="true"]{opacity:.4}.message,.ending{position:fixed;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,calc(100% - 48px));padding:42px 46px;background:rgba(23,30,25,.96);border-top:1px solid #b5b69d44;box-shadow:0 24px 100px #0005}.message p,.ending-copy{font-size:14px;line-height:1.9;color:#b7c0b0;white-space:pre-line;word-break:keep-all;margin:0 0 28px}.message .primary,.ending .primary{width:100%}.text-button{display:block;margin:18px auto 0;border:0;background:none;color:#aeb7a4;text-decoration:underline;text-underline-offset:5px;padding:8px;font-size:12px}.ending h2{margin-top:22px}.ending #work-title{font-size:17px;color:var(--paper);margin:24px 0 12px}.ending .ending-copy{font-size:12px}.leave{position:fixed;right:4.5vw;top:30px;background:#1b241dbb;color:#b7c2ad;border:1px solid #a8b39b33;padding:10px 12px;font-size:11px;z-index:8}.leave span{margin-left:15px;font-size:17px}.pause-notice{position:fixed;z-index:6;left:50%;bottom:36px;transform:translateX(-50%);max-width:calc(100% - 40px);padding:15px 19px;background:#18221cef;color:#d5ddcc;display:flex;align-items:center;gap:12px;font-size:12px;line-height:1.5;border:1px solid #aeb89c33}.pause-notice button{white-space:nowrap;border:0;border-bottom:1px solid #9aa88c;color:#c8d0be;background:none;padding:4px 0;margin-left:10px;font-size:11px}.status-dot{flex:0 0 5px;width:5px;height:5px;border-radius:50%;background:#d9c5a0}body:not([data-phase="idle"]) .masthead,body:not([data-phase="idle"]) .colophon{display:none}body[data-phase="walking"] .vignette,body[data-phase="aligning"] .vignette,body[data-phase="playing"] .vignette{opacity:0}body[data-phase="walking"] #world{cursor:none}noscript{position:fixed;inset:30%;z-index:20;background:var(--ink);padding:24px;font-size:18px;line-height:1.7}
@media(max-height:760px){.intro{padding-top:110px}h1{font-size:clamp(44px,5.2vw,66px);margin:20px 0}.intro-copy{font-size:14px;margin-bottom:24px}.privacy{margin-top:20px}.masthead{top:25px}.colophon{bottom:20px}.setup-heading{top:4vh}}
@media(max-width:700px){.intro{width:100%;padding:125px 8vw 0}.vignette{background:linear-gradient(90deg,#111714ee,#11171499),linear-gradient(0deg,#111714cc,transparent)}h1{font-size:56px}.intro-copy{font-size:14px}.colophon span:last-child{display:none}.message,.ending{padding:30px}.pause-notice{width:calc(100% - 40px);font-size:11px;gap:8px}.setup-heading p{max-width:80%;margin:auto}.setup-heading h2{font-size:19px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}.primary:hover{transform:none}}
.motion-toggle{position:fixed;right:calc(4.5vw + 118px);top:30px;z-index:8;min-height:40px;padding:10px 12px;border:0;background:#1b241d99;color:#b7c2ad;font-size:11px}
.setup-heading{top:28px}
@media(max-height:760px){.setup-heading{top:16px}.setup-heading h2{font-size:16px;margin:8px 0 0}.setup-heading p{display:none}}
@media(max-height:650px){body[data-phase="idle"]{height:auto;min-height:100vh;overflow-y:auto}body[data-phase="idle"] .intro{padding-bottom:50px}body[data-phase="idle"] .colophon{display:none}}
#gaze-particles{position:fixed;left:0;top:0;width:128px;height:128px;z-index:7;pointer-events:none;contain:strict}
.gaze-toggle{position:fixed;right:calc(4.5vw + 226px);top:30px;z-index:8;min-height:40px;padding:10px 12px;border:0;background:#1b241d99;color:#d9ceb3;font-size:11px}
body:not([data-phase="walking"]) .gaze-toggle{right:calc(4.5vw + 118px)}
.gaze-toggle[aria-pressed="false"]{color:#9da794}
:root{--ink:#15202a;--paper:#f0e4cc;--muted:#c0b29b;--accent:#d1b47e}
.vignette{background:linear-gradient(90deg,rgba(13,24,33,.94),rgba(16,29,38,.75) 32%,rgba(17,29,38,.12) 72%),linear-gradient(0deg,rgba(15,24,30,.76),transparent 35%)}
.intro-copy{color:#ddd1bb}.privacy{color:#b5b0a0}.entry-meta{color:#c9bda5}
.journey-status{position:fixed;top:32px;left:4.5vw;z-index:6;display:flex;align-items:center;gap:16px;padding:11px 15px;background:#142431bf;color:#ead8b5;border:1px solid #c1a46e44;font-size:12px}
.journey-status span:first-child{font:12px var(--mono);letter-spacing:.14em;color:#e3c791}
.journey-status span:last-child{border-left:1px solid #c1a46e55;padding-left:16px}
#boarding-veil{position:fixed;inset:0;z-index:3;background:#271c1b;pointer-events:none;opacity:0}
body[data-phase="boarding"] .vignette{opacity:0}
@media(max-width:1000px){.journey-status{top:86px;padding:9px 12px;font-size:11px}}
.masthead>span,.masthead>span i{color:#624d42}

body[data-phase="objects"] .vignette,body[data-phase="car-transition"] .vignette{opacity:0}

.visual-entry{display:flex;align-items:center;gap:18px;margin-top:15px;padding:11px 0;background:none;border:0;border-bottom:1px solid #d1b47e55;color:var(--paper);font-size:13px}.visual-entry span{font-size:11px;color:#c0b29b}.visual-entry:hover{border-color:var(--accent)}
body[data-phase="visual"] .vignette{opacity:0}body[data-phase="visual"] #world{cursor:grab;touch-action:none}body[data-phase="visual"] #world:active{cursor:grabbing}body[data-phase="visual"] #world:focus-visible{outline:0}
.visual-badge{position:fixed;left:28px;top:30px;z-index:6;display:grid;gap:7px;padding:14px 18px;background:#101b23e8;border-left:2px solid var(--accent);pointer-events:none}.visual-badge>span{font:9px var(--mono);letter-spacing:.18em;color:var(--accent)}.visual-badge strong{font-size:14px;font-weight:400}.visual-badge small{font-size:10px;color:var(--muted)}
.visual-panel{position:fixed;left:28px;bottom:24px;z-index:9;width:min(920px,calc(100% - 56px));max-height:46vh;overflow:auto;background:#101b23f2;border:1px solid #c1a46e55;padding:20px 22px;color:var(--paper);box-shadow:0 10px 40px #0004}
.visual-controls{display:grid;grid-template-columns:1.1fr 1.15fr 1fr auto;gap:18px;align-items:end}.visual-panel label,.visual-views>span{display:grid;gap:8px;font-size:10px;letter-spacing:.04em;color:var(--muted)}.visual-panel select{min-width:0;width:100%;height:36px;padding:0 10px;color:var(--paper);background:#1b2932;border:1px solid #8a8b7955;border-radius:0;font:12px var(--sans)}.visual-panel button{min-height:36px;padding:8px 11px;color:var(--paper);background:#26343c;border:1px solid #8a8b7955;font-size:11px;white-space:nowrap}.visual-panel button:hover{border-color:var(--accent);background:#35424a}.visual-panel button:disabled{cursor:default;opacity:.35}.visual-panel button:focus-visible,.visual-panel select:focus-visible,.visual-panel input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.visual-views>div,.visual-actions{display:flex;gap:5px}.visual-views>div{margin-top:8px}.visual-adjustments{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid #c1a46e22}.visual-adjustments label{display:flex;gap:8px}.visual-adjustments output{font:11px var(--mono);color:var(--paper);min-width:36px}.visual-adjustments input{width:130px;accent-color:var(--accent)}.visual-adjustments button{min-height:30px;padding:5px 10px}.visual-help{font-size:11px;line-height:1.8;color:#c2c5b7;margin:14px 0 0}.visual-status{font-size:11px;line-height:1.7;color:var(--accent);margin:5px 0 0;min-height:19px}
@media(max-width:1050px){.visual-controls{grid-template-columns:1fr 1fr;gap:14px}.visual-panel{width:min(640px,calc(100% - 40px));left:20px;padding:16px}.visual-actions{align-self:end}.visual-badge{left:20px;top:24px}}
@media(max-width:600px){.visual-badge{top:80px;padding:9px 12px}.visual-badge small{display:none}.visual-panel{bottom:12px;max-height:42vh}.visual-controls{gap:10px}.visual-panel button{padding:8px}.visual-entry{flex-wrap:wrap;gap:8px}.visual-adjustments input{width:100px}}

body[data-phase="finale"] .vignette{opacity:0}
.finale-controls{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);z-index:8;display:flex;gap:26px}
.finale-controls button{padding:10px 0;background:none;border:0;border-bottom:1px solid #b6ab9255;color:#c9bda5;font-size:12px}
.finale-controls button:hover{color:#f0e4cc;border-color:#c9bda5}
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

#demo-switch{position:fixed;right:4.5vw;bottom:28px;z-index:10;display:flex;align-items:center;gap:18px;padding:13px 16px;background:#142431ed;border:1px solid #c1a46e66;color:#ead8b5;font-size:12px}#demo-switch span{font-size:10px;color:#b6b5a5}#demo-switch:hover{border-color:#d1b47e}

#demo-blink{position:fixed;inset:0;z-index:3;background:#050505;opacity:0;pointer-events:none}
body[data-mode="demo"] #world{cursor:default}
@media(max-width:700px){body[data-mode="demo"] .journey-status{top:140px}#demo-switch{left:20px;right:20px;bottom:18px;justify-content:space-between}}

#prologue-layer{position:fixed;inset:0;z-index:2;overflow:hidden;background:#030a12;pointer-events:none;will-change:opacity}
#prologue-video,#prologue-still{display:block;width:100%;height:100%;object-fit:cover;transform-origin:50% 72%}
#prologue-light{position:fixed;inset:0;z-index:3;background:#f0cbb7;opacity:0;pointer-events:none}
body[data-phase="prologue"] .vignette{opacity:0}

/* Shared controls keep exit, playback and gaze actions on the same baseline. */
.experience-controls {
  --control-surface: #15202aeb;
  --control-hover: #293844;
  --control-border: #d1b47e55;
  position: fixed;
  top: max(24px, env(safe-area-inset-top));
  right: max(4.5vw, env(safe-area-inset-right));
  left: 20px;
  z-index: 8;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  pointer-events: none;
}
.experience-controls > button,
#demo-controls button {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--control-border);
  border-radius: 6px;
  background: var(--control-surface);
  color: var(--paper);
  font: 500 13px/1 var(--sans);
  white-space: nowrap;
  pointer-events: auto;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.experience-controls > button:hover,
#demo-controls button:hover {
  background: var(--control-hover);
  border-color: var(--accent);
}
.experience-controls > button:active,
#demo-controls button:active {
  background: var(--ink);
  border-color: var(--paper);
}
.experience-controls button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.experience-controls .leave span { margin: 0; font-size: 18px; line-height: 1; color: var(--accent); }
#demo-controls { display: flex; align-items: center; gap: 8px; }
#demo-label { margin-right: 8px; color: var(--accent); font: 12px/1 var(--sans); }
#demo-pause[aria-pressed="true"] { background: var(--paper); border-color: var(--paper); color: var(--ink); }
@media (max-width: 700px) {
  .experience-controls { top: max(16px, env(safe-area-inset-top)); right: 16px; left: 16px; gap: 6px; }
  .experience-controls > button, #demo-controls button { padding: 0 12px; font-size: 14px; }
  #demo-controls { gap: 6px; }
  #demo-label { display: none; }
}

/* Keep the film clear; the padded hover area makes playback controls easy to find. */
@media (hover: hover) and (pointer: fine) {
  body[data-mode="demo"] .experience-controls {
    left: auto;
    width: max-content;
    max-width: calc(100% - 40px);
    opacity: 0;
    pointer-events: auto;
    transition: opacity .2s ease;
  }
  body[data-mode="demo"] .experience-controls::before {
    content: "";
    position: absolute;
    inset: -24px -20px;
    z-index: -1;
  }
  body[data-mode="demo"] .experience-controls:hover,
  body[data-mode="demo"] .experience-controls:has(:focus-visible) {
    opacity: 1;
  }
}

#demo-controls { min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
.fullscreen-status {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  max-width: min(320px, calc(100vw - 40px));
  padding: 10px 14px;
  border: 1px solid var(--control-border);
  border-radius: 6px;
  background: var(--control-surface);
  color: var(--paper);
  font: 12px/1.6 var(--sans);
}

.experience-controls button:disabled { cursor: default; opacity: .4; }
.experience-controls button:disabled:hover { background: var(--control-surface); border-color: var(--control-border); }

#incense-film-layer { position: fixed; inset: 0; z-index: 4; overflow: hidden; background: #000; pointer-events: none; opacity: 0; }
#incense-film, #incense-film-still { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Compact touch presentation: leave the artwork clear and keep every action reachable. */
.mobile-view-note { display: none; }
@media (max-width: 700px), (hover: none) and (max-height: 500px) {
  body[data-phase="idle"] { overflow-y: auto; min-height: 100svh; height: auto; }
  .intro { width: 100%; padding: max(96px, calc(env(safe-area-inset-top) + 72px)) 24px max(32px, env(safe-area-inset-bottom)); }
  .intro h1 { font-size: clamp(38px, 10vw, 56px); margin: 16px 0 24px; }
  .intro .primary, .visual-entry { width: 100%; min-height: 48px; }
  .visual-entry { justify-content: space-between; flex-wrap: wrap; }
  .mobile-view-note { display: block; margin: 20px 0 0; color: var(--paper); font-size: 13px; line-height: 1.6; }
  .privacy { font-size: 12px; margin-top: 12px; }
  .masthead { top: max(24px, env(safe-area-inset-top)); left: max(24px, env(safe-area-inset-left)); }
  body[data-mode="demo"] .experience-controls {
    top: auto; bottom: max(12px, env(safe-area-inset-bottom));
    left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
    width: auto; max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px; opacity: 1; padding: 8px; border-radius: 10px; background: #15202ad9;
  }
  body[data-mode="demo"] .experience-controls::before { display: none; }
  body[data-mode="demo"] #demo-controls { display: contents; }
  body[data-mode="demo"] #demo-label { display: none; }
  body[data-mode="demo"] .experience-controls button { min-width: 0; min-height: 44px; padding: 0 8px; font-size: 13px; gap: 6px; }
  body[data-mode="demo"] .journey-status { top: max(16px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); }
  body[data-mode="demo"] .finale-controls { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 124px); }
  .finale-controls button, .text-button { min-height: 44px; }
  .message, .ending { max-height: calc(100svh - 40px); overflow-y: auto; padding: 24px; }
  .fullscreen-status { top: auto; bottom: calc(100% + 8px); }
}
@media (hover: none) and (min-width: 701px) and (max-height: 500px) {
  body[data-mode="demo"] .experience-controls { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  body[data-mode="demo"] .finale-controls { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 72px); }
  .intro { padding-top: 65px; }
  .intro h1 { font-size: 38px; }
}

#mobile-controls-toggle { display: none; }
@media (max-width: 700px), (hover: none) and (max-height: 500px) {
  body[data-mode="demo"] #mobile-controls-toggle {
    display: inline-flex; position: fixed; z-index: 11;
    right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom));
    min-height: 44px; padding: 0 18px; align-items: center; justify-content: center;
    border: 1px solid #d1b47e55; border-radius: 8px; background: #15202aeb; color: var(--paper); font: 14px var(--sans);
  }
  body[data-mode="demo"] .experience-controls { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 52px); }
  body[data-mode="demo"]:not([data-controls-open="true"]) .experience-controls { display: none; }
  body[data-mode="demo"] .finale-controls { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 56px); }
  body[data-mode="demo"][data-controls-open="true"] .finale-controls { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 180px); }
}
@media (hover: none) and (min-width: 701px) and (max-height: 500px) {
  body[data-mode="demo"][data-controls-open="true"] .finale-controls { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 126px); }
}

#car-loading { position:fixed; z-index:7; left:50%; top:50%; transform:translate(-50%,-50%); padding:16px 24px; background:#15202aeb; color:var(--paper); border:1px solid #d1b47e55; border-radius:8px; font-size:14px; }