:root{color-scheme:dark;--mint:#b7ded6;--ink:#102527;--text:#edece3}*{box-sizing:border-box}body{margin:0;background:#101c1e;color:var(--text);font:13px/1.6 "Malgun Gothic",sans-serif}button,input,a{-webkit-tap-highlight-color:transparent}button{border:1px solid #ffffff25;border-radius:8px;background:#ffffff0a;color:inherit;padding:11px 17px;font:inherit;cursor:pointer}button:disabled{opacity:.45;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--mint);outline-offset:4px}button[aria-pressed=true]{background:#b7ded633;border-color:#b7ded6}header{height:64px;display:flex;align-items:center;gap:24px;padding:0 5%;font-size:11px;color:#b8c9c3}.brand{color:var(--text);font-size:22px;font-weight:bold;text-decoration:none}.engine{margin-left:auto;letter-spacing:2px;font-size:9px}main{max-width:1400px;margin:auto}.stage{position:relative;aspect-ratio:16/9;width:min(100%,calc((100svh - 250px)*16/9));min-width:min(100%,500px);margin:0 auto;background:#03090a;overflow:hidden;border-radius:10px;border:1px solid #ffffff20}#source,#render{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}#source{z-index:0}#render{z-index:1;pointer-events:none}#render canvas{width:100%;height:100%;display:block}.scene-top{position:absolute;inset:0 0 auto;display:flex;justify-content:space-between;gap:15px;padding:14px 18px;background:linear-gradient(#0008,transparent);z-index:2;font-size:10px;color:#fff8}.gate{position:absolute;inset:0;background:#09191a66;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:3;text-align:center;padding:25px}.gate p{font-size:12px;letter-spacing:.8px;color:#e8e9dfcc}.gate h1{font:clamp(22px,3.5vw,46px) "Batang",serif;margin:10px 0}.gate button{background:var(--mint);color:var(--ink);border:0;margin-top:20px;padding:15px 28px;font-weight:bold}.playing-state{position:absolute;bottom:16px;left:18px;z-index:2;font-size:10px;color:#e9eee3;background:#102526a8;border:1px solid #ffffff25;border-radius:22px;padding:5px 12px}.panel{width:min(1100px,92%);margin:17px auto 0}.timeline{display:flex;justify-content:space-between;font-size:10px;color:#b5cac2}#readout{font-variant-numeric:tabular-nums}#timeline{width:100%;accent-color:var(--mint);height:17px;margin:8px 0 13px;cursor:pointer}.actions{display:flex;gap:8px;flex-wrap:wrap}.primary{background:var(--mint);color:var(--ink);font-weight:bold;border-color:var(--mint);min-width:125px}#hold{touch-action:none;user-select:none;-webkit-user-select:none}#help{font-size:11px;color:#9db4ab;margin:12px 0 5px}.truth{color:#8b9d97;font-size:10px;margin:0}.notes{width:min(1100px,92%);margin:28px auto 20px;color:#9bafa6;font-size:11px}.notes p{margin:8px 0}.notes strong{color:#d1e1d8;margin-right:10px;font-weight:400}a{color:var(--mint)}footer{text-align:center;font-size:9px;color:#6c847b;padding:10px 20px 22px}.arrival{position:absolute;z-index:4;right:3%;bottom:8%;padding:20px;background:#102526e8;border:1px solid #ffffff30;border-radius:14px;font-size:12px}.arrival button{padding:8px 15px;margin-right:5px}.speech{position:absolute;z-index:4;left:50%;bottom:49%;transform:translateX(-50%);padding:8px 15px;background:#ecebdc;color:#1d3533;border-radius:18px;font-size:11px;white-space:nowrap}#error{color:#ffba9b;font-size:12px}body.compare #render{visibility:hidden}body.compare .stage{border-color:#e1ae74}body.compare #sceneLabel{color:#f5cc92}[hidden]{display:none!important}@media(max-width:700px){header{height:60px;padding:0 4%;gap:12px}.engine{display:none}header>span{font-size:10px}.stage{width:100%;min-width:0;border-radius:0}.scene-top{padding:9px;font-size:8px}.gate{padding:12px}.gate p{font-size:10px;margin:4px}.gate h1{font-size:22px;margin:7px}.gate button{margin-top:10px;padding:10px 19px;font-size:11px}.actions{gap:6px}.actions button{font-size:11px;padding:10px 12px}.primary{min-width:100px}.playing-state{bottom:8px;left:9px;font-size:8px;padding:3px 8px}.notes{margin-top:22px}.notes p{margin-bottom:13px}.arrival{right:2%;bottom:4%;padding:12px}.arrival p{margin:0 0 8px;font-size:10px}.arrival button{font-size:10px;padding:7px 10px}.speech{font-size:9px;padding:5px 10px}}
:root{--forest-ratio:1.33333333}
#travelerChoices{display:flex;align-items:center;gap:8px;margin:0 0 14px;flex-wrap:wrap}#travelerChoices span{font-size:11px;color:#aac0b4;margin-right:8px}#travelerChoices button{font-size:11px;padding:7px 15px}#travelerChoices button[aria-pressed=true]{background:#cce0cf;color:#173c31}
#forest,#hammockFront{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
#forest{z-index:0}#hammockFront{z-index:2}
/* Keep decoding the source, but present footage and avatar in one WebGL surface. */
body.webgl-video #source{opacity:0}
body.webgl-video.compare #render{visibility:visible}
.media-notice{position:absolute;z-index:6;left:50%;top:50%;transform:translate(-50%,-50%);width:max-content;max-width:90%;padding:14px 18px;background:#102526f5;border:1px solid #b7ded680;border-radius:12px;text-align:center;font-size:12px}
.media-notice p{margin:0 0 10px}.media-notice button{background:var(--mint);color:var(--ink);font-size:11px;padding:8px 13px}
.forest-mode .stage{aspect-ratio:4/3;width:min(100%,calc((100svh - 235px)*var(--forest-ratio)));min-width:0}
.forest-mode .scene-top{z-index:4}.forest-mode .playing-state{z-index:4}
.forest-mode #render{visibility:visible}.forest-mode .speech{z-index:5;left:28%;bottom:47%}
#forestSpots{position:absolute;inset:0;z-index:3;pointer-events:none}
.spot{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);pointer-events:auto;padding:4px 9px;border:1px solid #d8eed09c;background:#163529c9;border-radius:20px;font-size:9px;color:#edf5de;box-shadow:0 2px 12px #001b0c66}
.spot::before{content:'＋';margin-right:3px}.spot[aria-pressed=true]{background:#d3e0ad;color:#183229;border-color:#edf5d7}.spot[aria-pressed=true]::before{content:'✓'}
.forest-mode .panel{margin-top:12px}.forest-mode .timeline{margin-bottom:12px}
@media(max-width:700px){.forest-mode .stage{width:100%}.spot{font-size:8px;padding:4px 7px}.forest-mode .speech{left:30%;font-size:9px}.forest-mode .panel{margin-top:14px}}
:root{--path-marker:#f4d072}
#footMarker{position:absolute;z-index:5;width:14px;height:14px;border:2px solid var(--path-marker);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
#pathDebug{width:min(1100px,92%);margin:20px auto;font-size:11px;color:#a2b4a8}#pathDebug input[type=number]{width:75px;padding:6px;background:#1b332c;color:white;border:1px solid #ffffff30;margin:8px}#pathDebug button{font-size:11px;padding:7px}#pathDebug label{margin-left:10px}
#seaScenes{display:flex;gap:7px;margin:0 0 14px;padding:5px;background:#ffffff06;border:1px solid #ffffff20;border-radius:10px;width:fit-content}
#seaScenes button{padding:8px 23px;border-color:transparent;font-size:12px;border-radius:7px;background:transparent}
#seaScenes button[aria-pressed=true]{background:#cce0cf;color:#173c31}
@media(max-width:700px){#seaScenes{margin-bottom:12px;width:100%}#seaScenes button{flex:1;font-size:11px;padding:8px 12px}}