/* Hidden in the first paint, before the game or its controls are initialized. */
body:not(.debug-open) [data-debug-ui], body:not(.debug-open) #walk-controls,
body:not(.debug-open) #camera-target { display:none !important; }
#close-debug { position:fixed;right:28px;top:92px;z-index:10; }
#close-debug[hidden] { display:none; }
#demo-version { position:fixed;left:24px;top:20px;color:#dfdace;font:11px/1.5 system-ui,sans-serif;letter-spacing:1px;text-shadow:0 1px 6px #000;pointer-events:none;z-index:9; }
.debug-open #demo-version { display:none; }
body:not(.debug-open).cinematic:after { border-top:0;border-bottom:0; }
body:not(.debug-open) #subtitle { bottom:9%;font-size:clamp(14px,1.35vw,21px);z-index:2; }
body:not(.debug-open) #encounter { top:52px;left:24px;width:230px;background:linear-gradient(90deg,#10191bc9,transparent);padding:10px 12px;border:0;pointer-events:none; }
body:not(.debug-open) #encounter button { display:none; }
body:not(.debug-open) #encounter p { font-size:11px;line-height:1.6;margin:6px 0 0; }
#demo-ui[hidden], #demo-ui [hidden] { display:none !important; }
#demo-actions { position:fixed;right:24px;top:14px;display:flex;gap:10px;z-index:5; }
#demo-actions button { background:#111a2077;border-color:#ede4ce30;padding:7px 10px;font-size:11px; }
#demo-actions kbd { margin-left:5px;font-size:10px; }
/* Borderless story ink lives in the lower third; the central action stays clear. */
#demo-tutorial { position:fixed;left:clamp(26px,6vw,110px);bottom:clamp(42px,10vh,130px);width:min(760px,85vw);padding:0;border:0;background:none;pointer-events:none;z-index:3;opacity:0;isolation:isolate;transform:translateY(var(--story-drift,0px));text-shadow:0 2px 9px #050909,0 0 28px #020608; }
#demo-story-light { position:absolute;left:-12%;top:-42%;width:124%;height:180%;z-index:-1;opacity:.9; }
#demo-story-echo { position:absolute;left:56%;top:-.43em;font:clamp(140px,14vw,225px)/1 'DFKai-SB','KaiTi',serif;color:#dfb16b;opacity:.09;filter:blur(.5px);z-index:-1; }
#demo-tutorial small { display:block;color:#d8d3c7;font-size:clamp(13px,1.15vw,18px);letter-spacing:.15em;line-height:1.7; }
#demo-tutorial h2 { font-family:'DFKai-SB','KaiTi','Noto Serif TC',serif;font-size:clamp(28px,3.3vw,52px);font-weight:500;letter-spacing:.13em;line-height:1.35;margin:13px 0 25px;white-space:nowrap; }
#demo-tutorial h2 span { display:inline-block;color:#ffe6b3;background:linear-gradient(165deg,#fff8e5 20%,#f6d290 62%,#b77732);background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 18px #efb74766,0 2px 4px #000; }
#demo-tutorial p { font-size:clamp(12px,1.1vw,16px);line-height:1.8;color:#deddd2;letter-spacing:.06em;margin:12px 0 0;opacity:var(--story-keys,1); }
#demo-tutorial #demo-tutorial-note { color:#aebbb3;font-size:11px;letter-spacing:.12em;margin-top:10px; }
#demo-keys { display:flex;gap:clamp(14px,2vw,30px);flex-wrap:wrap;opacity:var(--story-keys,1); }
#demo-keys>span { display:flex;align-items:center;gap:10px;font-size:clamp(13px,1.2vw,18px);color:#ebe4d1;letter-spacing:.12em; }
#demo-ui kbd { display:inline-block;padding:4px 7px;border:1px solid #e3e8db66;border-bottom-width:2px;border-radius:3px;font:12px/1.2 ui-monospace,monospace;color:#fff9e9;background:#1b272b80; }
#demo-ui kbd.pressed { background:#cee0d0;color:#172522; }
#demo-keys kbd { padding:0;border:0;border-radius:0;background:none;color:#ffe5ae;font:500 clamp(19px,1.7vw,28px)/1.2 ui-monospace,monospace;letter-spacing:.08em;text-shadow:0 0 16px #ffc45e55,0 2px 8px #000; }
#demo-keys kbd.pressed { background:none;color:#fff;transform:translateY(-3px);text-shadow:0 0 6px #fff,0 0 20px #ffc14d,0 0 35px #ffc14d; }
#demo-menu { position:fixed;inset:0;display:grid;place-items:center;background:#080f15a8;backdrop-filter:blur(5px);z-index:8;padding:20px; }
.demo-menu-card { width:min(510px,100%);max-height:90vh;overflow:auto;padding:32px;background:#152024ed;border:1px solid #c6d9cc40;border-radius:8px; }
.demo-menu-card>small { font-size:10px;letter-spacing:2px;color:#b4cdbf; }
.demo-menu-card h2 { font-weight:500;font-size:24px;line-height:1.4;margin:16px 0 22px; }
.demo-guide { font-size:13px;line-height:1.9;color:#d7dfd6; }
.demo-guide p { margin:12px 0; }
.demo-menu-buttons { display:flex;flex-wrap:wrap;gap:8px;margin-top:24px; }
.demo-menu-buttons button { padding:10px 14px; }
#demo-resume { background:#c8dccd;color:#16231f; }
@media(max-width:600px){#demo-version{left:16px;top:13px;font-size:10px}#demo-actions{top:38px;right:12px;gap:5px}#demo-actions button{font-size:10px}#demo-tutorial{left:7vw;bottom:12vh;width:86vw}#demo-tutorial h2{font-size:clamp(24px,6vw,34px);letter-spacing:.05em;margin:12px 0 20px}#demo-tutorial small{font-size:12px;letter-spacing:.05em}#demo-keys{gap:18px}#demo-keys>span{font-size:12px;gap:7px}#demo-tutorial p{font-size:11px}body:not(.debug-open) #encounter{top:80px;left:12px;width:205px}.demo-menu-card{padding:22px}.demo-menu-card h2{font-size:21px}}
@media(max-height:550px){#demo-tutorial{bottom:30px;left:6vw;width:min(620px,85vw)}#demo-tutorial h2{margin:6px 0 12px;font-size:29px}#demo-tutorial small{font-size:12px}#demo-tutorial p{margin:7px 0 0;font-size:11px}#demo-tutorial #demo-tutorial-note{margin-top:4px;font-size:10px}#demo-keys kbd{font-size:20px}#demo-keys>span{font-size:12px}.demo-menu-card{padding:18px}.demo-menu-card h2{margin:8px 0;font-size:20px}.demo-guide p{margin:6px 0}.demo-menu-buttons{margin-top:14px}}
@media(prefers-reduced-motion:reduce){#demo-story-light{opacity:.4}#demo-tutorial h2 span{filter:none!important;transform:none!important}}
/* A single, unmistakable launch action above the loading artwork. */
#studio-loader #ls-enter { position:relative;isolation:isolate;display:block;width:min(100%,370px);margin-top:26px;padding:19px 28px;border:1px solid #a9fff0;border-radius:7px;color:#ecfff9;background:linear-gradient(115deg,#087e76,#105852);font:700 clamp(17px,1.5vw,22px)/1.4 system-ui,sans-serif;letter-spacing:.08em;box-shadow:0 0 22px #43efcf75,0 0 65px #23cab047,inset 0 1px 1px #d8fff7aa;text-shadow:0 0 14px #b2ffe5aa;transition:transform .2s,box-shadow .2s; }
#studio-loader #ls-enter[hidden] { display:none; }
#studio-loader #ls-enter:before { content:'';position:absolute;inset:-15px;z-index:-1;background:radial-gradient(ellipse,#37e6c46b,transparent 70%);filter:blur(12px);animation:entry-breath 2.4s ease-in-out infinite;pointer-events:none; }
#studio-loader #ls-enter:hover,#studio-loader #ls-enter:focus-visible { transform:translateY(-2px);box-shadow:0 0 30px #76ffe3aa,0 0 90px #24ddb568,inset 0 1px 1px #fff;outline:2px solid #c3fff2;outline-offset:5px; }
@keyframes entry-breath { 50% { opacity:.45;transform:scale(1.07); } }
@media(prefers-reduced-motion:reduce){#studio-loader #ls-enter:before{animation:none}}
#demo-tutorial[data-lesson="thanks"] { left:50%;bottom:7vh;width:min(620px,88vw);text-align:center;transform:translate(-50%,var(--story-drift,0px)); }
#demo-tutorial[data-lesson="thanks"] h2 { font-size:clamp(30px,3vw,46px);margin:8px 0 12px; }
#demo-tutorial[data-lesson="thanks"] small { font-size:12px;letter-spacing:.4em; }
#demo-tutorial[data-lesson="thanks"] p { font-size:13px;letter-spacing:.2em; }