:root {
  color-scheme: dark;
  --blood: #410000;
  --ink: #170000;
  --text: #ead0bc;
  --scene-image: url('assets/optimized/panorama.be9f9fb937.webp');
  --picture-size: cover;
  --picture-position: center center;
  --px: 0px;
  --py: 0px;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; }
/* Continue the scene into Safari's exposed canvas instead of a flat red band. */
html { background: var(--ink) var(--scene-image) center / cover no-repeat fixed; }
body { min-height: 100svh; min-height: 100dvh; background: transparent; overflow-x: hidden; }
body { color: var(--text); font: 12px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button, a { color: inherit; }
button:focus-visible, a:focus-visible { outline: 1px solid var(--text); outline-offset: 5px; }
button { cursor: pointer; }
.room { position: relative; width: 100%; height: 100svh; height: 100dvh; min-height: min(380px, 100svh); overflow: hidden; isolation: isolate; background: var(--ink); }
.scene { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #260000; }
.scene-half { position: absolute; inset: 0; transition: transform 1500ms cubic-bezier(.22,.65,.23,1), filter 1500ms; }
.scene-half--left { clip-path: none; }
.scene-half--right { visibility: hidden; clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%, 49.7% 62%, 50.5% 51%, 49.2% 45%, 50% 36%); }
.room.is-split .scene-half--left { clip-path: polygon(0 0, 50% 0, 50% 36%, 49.2% 45%, 50.5% 51%, 49.7% 62%, 50% 100%, 0 100%); }
.room.is-split .scene-half--right { visibility: visible; }
.picture { position: absolute; inset: -1%; background-color: var(--blood); background-image: var(--scene-image); background-repeat: no-repeat; background-size: var(--picture-size); background-position: var(--picture-position); transform: translate(var(--px), var(--py)) scale(1.025); transition: transform 900ms cubic-bezier(.2,.6,.2,1); }
.shade { position: absolute; inset: 0; z-index: 4; background: linear-gradient(180deg, #17000045 0%, transparent 26%, transparent 60%, #17000065 100%); pointer-events: none; }
.motion-player, .motion-bridge { position: absolute; inset: -1%; width: 102%; height: 102%; object-fit: cover; transform: scale(1.025); pointer-events: none; opacity: 0; }
.motion-player { transition: opacity 220ms; }
.motion-player.is-playing { opacity: 1; filter: blur(0); }
.continuous-player { position: absolute; inset: -1%; width: 102%; height: 102%; object-fit: cover; transform: scale(1.025); z-index: 2; opacity: 0; pointer-events: none; transition: opacity 220ms; }
.continuous-player.is-playing { opacity: 1; filter: none; }
.continuous-foreground { position: absolute; inset: -1%; width: 102%; height: 102%; object-fit: cover; transform: scale(1.025); z-index: 5; pointer-events: none; }
.entry-actions { position: absolute; z-index: 2; left: 50%; bottom: 26%; transform: translateX(-50%); display: flex; gap: 32px; }
.entry-actions button { font: 13px Georgia, serif; letter-spacing: .04em; white-space: nowrap; }
.room:has(dialog[open]) .entry-actions { opacity: 0; }
.room[data-motion^="continuous-"] #talk-button { visibility: hidden; }
.room.is-entering-shop .entry-actions, .room.is-entering-shop .topbar, .room.is-entering-shop .phrase { visibility: hidden; opacity: 0; pointer-events: none; }
.motion-player--action { z-index: 1; }
.motion-bridge { z-index: 3; visibility: hidden; filter: blur(0); transition: opacity var(--bridge-duration, 220ms); }
.motion-bridge.is-visible { visibility: visible; opacity: 1; }
.motion-bridge.is-fading { opacity: 0; filter: none; }
.topbar, .bottombar { position: absolute; z-index: 2; left: max(30px, env(safe-area-inset-left)); right: max(30px, env(safe-area-inset-right)); display: flex; align-items: center; justify-content: space-between; }
.topbar { top: max(20px, env(safe-area-inset-top)); }
.bottombar { bottom: max(20px, env(safe-area-inset-bottom)); }
.wordmark { display: block; width: 140px; padding: 0; line-height: 0; text-decoration: none; }
.wordmark img { display: block; width: 100%; height: auto; }
.quiet-link, .destination { font-family: Georgia, 'Times New Roman', serif; }
.quiet-link { min-height: 44px; padding: 10px 0 10px 12px; border: 0; background: none; text-decoration: none; font-weight: 400; font-size: 12px; }
.quiet-link:hover, .destination:hover { text-decoration: underline; text-underline-offset: 5px; }
.hint { font-size: 11px; opacity: .85; }
.character { position: absolute; z-index: 1; top: 14%; bottom: 20%; left: 32%; width: 36%; padding: 0; border: none; background: transparent; border-radius: 45% 45% 15% 15%; }
.character, .character:focus, .character:focus-visible { outline: none; border: none; box-shadow: none; }
.character:focus-visible::after { content: ''; position: absolute; width: 6px; height: 6px; bottom: 0; left: calc(50% - 3px); border: 1px solid #ead0bc99; border-radius: 50%; }
.phrase { position: absolute; z-index: 1; left: 15%; right: 15%; bottom: 17%; margin: 0; text-align: center; font-size: clamp(13px, 1.1vw, 16px); font-weight: 400; line-height: 1.7; text-wrap: balance; text-shadow: 0 1px 12px #170000; pointer-events: none; opacity: 0; transform: translateY(3px); transition: opacity 550ms, transform 550ms; }
.phrase.is-visible { opacity: 1; transform: translateY(0); }
.room.is-split .scene-half--left { transform: translateX(-29%) rotate(-2deg); filter: brightness(.55); }
.room.is-split .scene-half--right { transform: translateX(29%) rotate(2deg); filter: brightness(.55); }
.room:has(dialog[open]) .topbar, .room:has(dialog[open]) .bottombar, .room:has(dialog[open]) .phrase { opacity: 0; }
.overlay { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; padding: 0; margin: 0; border: 0; color: var(--text); background: transparent; }
.overlay::backdrop { background: transparent; }
.overlay--clip { background: #170000d9; }
.close { position: absolute; top: max(20px, env(safe-area-inset-top)); right: max(30px, env(safe-area-inset-right)); }
.overlay-content { height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 26px; padding: 72px 28px; }
.overlay-content h1 { margin: 0; font-size: 11px; font-weight: 400; letter-spacing: .04em; }
.destination { padding: 13px 4px; font-size: 14px; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.empty-message { margin: 0; font-size: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
@media (max-width: 600px) {
  .wordmark { width: 95px; }
  .topbar, .bottombar { left: max(20px, env(safe-area-inset-left)); right: max(20px, env(safe-area-inset-right)); }
  .close { right: max(20px, env(safe-area-inset-right)); }
  .character { left: 12%; width: 76%; }
  .phrase { left: 10%; right: 10%; bottom: 18%; }
  .room.is-split .scene-half--left { transform: translateX(-44%) rotate(-2deg); }
  .room.is-split .scene-half--right { transform: translateX(44%) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .picture { transform: none; }
}

.sound-toggle{padding-left:0;font-size:11px;min-width:108px;text-align:left}.bottombar .hint{margin-right:auto;margin-left:20px}
#shop-dialog{background:#1800009c}#shop-dialog .overlay-content{height:auto;min-height:100%;gap:20px;padding-top:90px}.merch-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;width:min(100%,1100px)}.merch-grid figure{margin:0;min-width:0}.merch-grid img{display:block;width:100%;height:280px;object-fit:contain}.close{z-index:3}
#shop-dialog::before { content: ''; position: fixed; pointer-events: none; left: 12%; right: 12%; bottom: 4%; height: 16%; opacity: .6; background: radial-gradient(ellipse at 50% 50%, #b5000766 0%, #57000088 38%, transparent 70%); filter: blur(6px); }
.merch-grid.is-etching { visibility: hidden; }
.merch-etching { display: none; position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.merch-etching.is-active { display: block; }
@media(max-width:600px){.bottombar .hint{margin-left:10px;font-size:10px;max-width:120px}.merch-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.merch-grid img{height:210px}}
.answer-dialog { width: min(460px, calc(100% - 36px)); max-height: calc(100svh - 36px); padding: 28px; border: 0; background: transparent; color: var(--text); overflow: visible; text-shadow: 0 2px 16px #100000; }
.answer-dialog::backdrop { background: radial-gradient(ellipse at center, #21000088 0%, #21000055 35%, #10000015 75%); backdrop-filter: blur(.7px); }
@keyframes answer-breath { from { backdrop-filter: blur(.5px); opacity: .85; } to { backdrop-filter: blur(1px); opacity: 1; } }
.answer-dialog h2 { margin: 0 0 24px; font: 20px/1.4 Georgia, serif; font-weight: normal; }
.answer-dialog textarea { width: 100%; resize: none; min-height: 112px; max-height: 32svh; padding: 12px 0; border: 0; border-bottom: 1px solid #ead0bc33; border-radius: 0; background: transparent; color: var(--text); font: 16px/1.5 Georgia, serif; text-shadow: 0 2px 16px #100000; }
.answer-dialog textarea::placeholder { color: #bc9180; }
.answer-dialog textarea:focus { outline: 0; border-bottom-color: #ead0bc88; }
.answer-dialog p { min-height: 32px; margin: 12px 0 20px; font-size: 11px; color: #d2a393; }
.answer-actions { display: flex; justify-content: space-between; gap: 24px; }
.answer-actions button { border: 0; padding: 8px 0; background: transparent; font: 13px Georgia, serif; }
.answer-actions button:disabled { opacity: .45; cursor: wait; }
@media(max-width:600px) { .answer-dialog { padding: 22px; } .answer-dialog h2 { font-size: 18px; } }
.sound-toggle { display: grid; place-items: center; min-width: 36px; width: 36px; height: 36px; padding: 0; }
.sound-toggle .sound-off { display: none; }
.sound-toggle.is-muted .sound-off { display: inline; }
.sound-toggle.is-muted .sound-on { display: none; }
.sound-toggle.is-switching svg { animation: sound-frames 240ms steps(4,end); }
@keyframes sound-frames { 0% { opacity: .25; transform: translateY(1px); } 50% { opacity: .65; transform: translateY(-1px); } 100% { opacity: 1; transform: none; } }

.motion-seam { position: absolute; inset: -5%; z-index: 4; pointer-events: none; opacity: 0; background: url("assets/optimized/seam-fog.1c1a483dd2.webp") center/cover; mix-blend-mode: screen; }
.room.is-shop-seam .motion-seam { animation: seam-fog-pass 620ms ease-out both; }
@keyframes seam-fog-pass { 0% { opacity: .06; transform: translateX(-4%) scale(1.06); } 32% { opacity: .22; } 100% { opacity: 0; transform: translateX(4%) scale(1); } }

/* JDFLAG tape: red coarse pixels and intermittent line loss. UI stays clear. */
.tape-signal { position:absolute; inset:0; z-index:6; pointer-events:none; overflow:hidden; opacity:.82; }
.tape-signal::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg,#09000038 0 1px,transparent 1px 4px); opacity:.52; }
.tape-signal::after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 12vw 3vw #0b00005c; background:linear-gradient(90deg,#ae000007,transparent 45%,#4800000c); }
.tape-grain { position:absolute; inset:-12px; background:url('assets/optimized/tape-grain.3b5ee6eaf6.png') repeat; background-size:256px 256px; image-rendering:pixelated; opacity:.30; animation:tape-grain-shift 1.1s steps(6,end) infinite; }
.tape-tracking { position:absolute; left:-2%; width:104%; height:8%; top:63%; opacity:0; background:repeating-linear-gradient(0deg,transparent 0 3px,#e43a2826 3px 4px,#15000055 4px 6px); animation:tape-tracking-slip 13s steps(1,end) infinite; }
@keyframes tape-grain-shift { 0%,100%{transform:translate(0,0)} 17%{transform:translate(-7px,3px)} 34%{transform:translate(4px,-9px)} 51%{transform:translate(-3px,-5px)} 68%{transform:translate(8px,7px)} 85%{transform:translate(2px,-2px)} }
@keyframes tape-tracking-slip { 0%,91%,95%,100%{opacity:0;transform:translateY(0)} 92%{opacity:.3;transform:translateY(-21vh)} 93%{opacity:.18;transform:translateY(9vh)} 94%{opacity:.24;transform:translateY(2vh)} }
.room:has(.answer-dialog[open]) .tape-signal { opacity:.5; }
@media (prefers-reduced-motion:reduce) { .tape-grain,.tape-tracking { animation:none; } .tape-grain { opacity:.18; } }
.signal-collapse { position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; opacity:0; image-rendering:pixelated; }
.signal-collapse.is-active { opacity:1; }
@media (prefers-reduced-motion:reduce) { .signal-collapse { display:none; } }

.sound-toggle { min-width:44px; width:44px; height:44px; }
.answer-actions button { min-height:44px; }

.room-tools { display:flex; gap:8px; margin-left:auto; }
.room-tool { width:44px; height:44px; padding:0; display:grid; place-items:center; }
.room-tool svg { pointer-events:none; }
.room-tool:hover svg { opacity:.7; }
.room.is-extra-mode .topbar,.room.is-extra-mode .bottombar,.room.is-extra-mode .entry-actions { visibility:hidden; }
.room.is-extra-mode .tape-grain,.room.is-extra-mode .tape-tracking { animation-play-state:paused; }
.room-extra { position:fixed; inset:0; width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;color:var(--text);background:#170000ed; }
.room-extra::backdrop { background:#170000aa; }
.extra-close { position:absolute;z-index:3;top:max(20px,env(safe-area-inset-top));right:max(24px,env(safe-area-inset-right)); }
.music-releases { min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:80px 26px; }
.music-releases a { padding:12px 4px;font:clamp(18px,3vw,30px) Georgia,serif;text-decoration:none;text-align:center; }
.music-releases a:hover { text-decoration:underline;text-underline-offset:8px; }
.merch-inspect { width:100%;padding:0;border:0;background:none; }
.garment-stage { position:absolute;inset:80px 64px 90px;overflow:auto;display:grid;place-items:center; }
.garment-zoom { display:block;padding:0;border:0;background:none;cursor:zoom-in;width:100%;height:100%; }
.garment-zoom img { display:block;width:100%;height:100%;object-fit:contain; }
.garment-view.is-zoomed .garment-zoom { width:160%;height:160%;cursor:zoom-out; }
.garment-prev,.garment-next { position:absolute;top:calc(50% - 22px);width:44px;height:44px;display:grid;place-items:center;background:none;border:0;padding:0;z-index:2; }
.garment-prev{left:12px}.garment-next{right:12px}
.garment-name { position:absolute;left:20px;right:20px;bottom:max(28px,env(safe-area-inset-bottom));text-align:center;font:14px/1.5 Georgia,serif;margin:0; }
@media(max-width:600px) { .garment-stage{inset:80px 40px 100px}.merch-grid{gap:20px}.merch-grid img{height:230px} }

.garment-view.is-zoomed .garment-stage {display:block;place-items:normal;}
.garment-stage {scrollbar-width:none;}
.garment-stage::-webkit-scrollbar {display:none;}

@media (max-height:440px) and (orientation:landscape) {
  .topbar {top:max(8px,env(safe-area-inset-top));}
  .bottombar {bottom:max(8px,env(safe-area-inset-bottom));}
  .wordmark {width:100px;}
  .entry-actions {bottom:22%;}
  .motion-player,.continuous-player,.motion-bridge,.continuous-foreground {object-position:center top;}
  .picture {background-position:center top;}
  .answer-dialog {padding:16px 24px;overflow:auto;}
  .answer-dialog h2 {font-size:16px;margin-bottom:12px;}
  .answer-dialog textarea {min-height:64px;max-height:22svh;padding:8px 0;}
  .answer-actions {gap:20px;}
  .garment-stage {inset:60px 64px 55px;}
  .garment-name {bottom:12px;font-size:12px;}
  .extra-close {top:max(6px,env(safe-area-inset-top));}
}

.answer-privacy{font-size:11px;opacity:.65;margin:8px 0}.answer-privacy a{color:inherit;text-decoration:none}

/* Background effects must not keep painting behind a dialog or hidden tab. */
.page-hidden .tape-grain, .page-hidden .tape-tracking,
.room:has(dialog[open]) .tape-grain, .room:has(dialog[open]) .tape-tracking { animation-play-state: paused; }
@media (hover: none) and (pointer: coarse) {
  .tape-grain { animation-duration: 2.4s; }
  .motion-player, .continuous-player { transform: none; }
}

.merch-grid.is-catalog-pending { visibility: hidden; }

.memory-consent{display:flex;align-items:flex-start;gap:10px;font:13px/1.5 Georgia,serif;color:#d1aaa0;margin:14px 0 0}.memory-consent input{accent-color:#a33229;flex:none;margin-top:3px}.memory-consent-note{font:11px/1.5 Georgia,serif;color:#b0887e;margin:5px 0 10px 23px}

.player-entry { width:auto; padding-inline:8px; font-size:14px; text-decoration:none; }