:root { color-scheme: dark; font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif; color: #e4e8df; background: #0d1520; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; background: radial-gradient(ellipse at 50% 40%, #1d2b39, #0d1520 72%); }
main { width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 34px 0 24px; }
.masthead { text-align: center; margin-bottom: 25px; }
.small-label { color: #a0adad; font-size: 9px; letter-spacing: .3em; }
h1 { font-family: "Yu Mincho", serif; font-size: 30px; font-weight: 500; letter-spacing: .2em; margin: 10px 0 5px; }
.masthead p { font-size: 11px; letter-spacing: .15em; margin: 0; color: #b8c3c7; }
#stage { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; background: #080e16; box-shadow: 0 22px 70px #0007; outline: 1px solid #65748250; container-type: inline-size; touch-action: none; }
#stage:focus-visible { outline: 2px solid #bdc7bb; }
canvas { display: block; width: 100%; height: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
.scene-tag { position: absolute; left: 3%; top: 5%; display: flex; align-items: center; gap: 12px; font-size: clamp(11px, 1.45cqw, 17px); letter-spacing: .16em; text-shadow: 0 2px 5px #000; pointer-events: none; }
#scene-number { color: #d9c79d; font: 11px monospace; border-bottom: 1px solid #d9c79d80; padding: 4px 0; }
.destination { position: absolute; left: 77%; top: 87%; font-size: clamp(9px, 1.3cqw, 15px); color: #e0d2ae; text-shadow: 0 1px 5px #000; pointer-events: none; }
#interact { position: absolute; left: 31%; top: 45%; transform: translate(-50%, -100%); background: #15212de8; border: 1px solid #d7c7a7; padding: .55em .8em; border-radius: 3px; font-size: clamp(10px, 1.5cqw, 17px); box-shadow: 0 3px 16px #0005; }
kbd { font: .9em monospace; border: 1px solid #68788780; border-radius: 3px; padding: 2px 5px; white-space: nowrap; }
.dialogue { position: absolute; inset: auto 4% 5%; min-height: 27%; padding: 2% 3%; text-align: left; background: #101c2bf2; border: 1px solid #c5cabb; outline: 3px solid #101c2bc9; box-shadow: inset 0 0 0 4px #9faeae12, 0 8px 25px #0005; }
.speaker { display: block; color: #e4d2a3; font-size: clamp(11px, 1.6cqw, 18px); letter-spacing: .14em; }
.speaker span { font-size: .75em; margin-left: 1em; color: #aebfcc; border-left: 1px solid #70818c; padding-left: 1em; }
#dialogue-text { display: block; margin: .8em 0 1.3em; font-family: "Yu Mincho", serif; font-size: clamp(13px, 2.1cqw, 24px); letter-spacing: .07em; }
#dialogue-text { white-space: pre-line; }
.next { position: absolute; right: 3%; bottom: 12%; font-size: clamp(9px, 1.2cqw, 13px); color: #afbdc9; }
#loading { position: absolute; inset: 0; background: #101925; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; letter-spacing: .12em; }
#loading small { color: #a1afb9; font-size: 11px; }
footer { padding-top: 18px; font-size: 12px; color: #abb9c1; }
#objective { margin: 0 0 15px; color: #d0d4c7; letter-spacing: .08em; }
.controls { display: flex; flex-wrap: wrap; gap: 12px 22px; font-size: 10px; margin: 0; color: #91a2af; }
@media (min-width: 800px) and (min-height: 551px) { main { width: min(1120px, calc(100% - 48px), calc((100svh - 250px) * 16 / 9)); } }
@media (max-width: 600px) { main { width: calc(100% - 20px); padding-top: 24px; } h1 { font-size: 24px; } .masthead { margin-bottom: 20px; } footer { line-height: 1.8; } .small-label { font-size: 7px; } }
@media (max-height: 550px) and (orientation: landscape) { main { width: min(900px, calc((100svh - 36px) * 16 / 9)); padding: 10px 0; } .masthead, footer { display: none; } }

.development-controls { margin-top: 16px; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; text-align:center; }
.development-controls button, .development-controls a { position: static; padding: 8px 16px; border: 1px solid #536573; background: #111e2a; color: #e1dfd1; font: inherit; cursor: pointer; text-decoration:none; }
.development-controls button:disabled { opacity:.5; cursor:wait; }

#pc-overlay { position:absolute; inset:5% 6% 31%; z-index:4; background:#16212e; color:#c4d3df; border:3px solid #546575; border-radius:7px; overflow:hidden; font:clamp(8px,1.2vw,14px) monospace; }
#pc-overlay header {padding:8px;background:#263646;display:flex;justify-content:space-between} .pc-columns{display:grid;grid-template-columns:1.2fr 1fr;height:85%;} #pc-code{white-space:pre-wrap;padding:12px;color:#a9d9c2;margin:0;overflow:hidden;} .pc-preview{background:#f6f8fa;color:#243748;padding:12px;} .pc-preview div{border-bottom:1px solid #ccd4db;padding:10px 0} #pc-cursor{position:absolute;color:white;left:20%;top:35%;font-size:20px;transition:left 1s,top 1s;} #pc-overlay.selecting #pc-code{background:#254c71;} 

#catch-label{position:absolute;top:6%;left:0;width:100%;text-align:center;color:#fff4d8;font-size:clamp(14px,2.4vw,25px);text-shadow:0 2px 4px #000;pointer-events:none} #conversion-demo span,#conversion-demo strong{display:block;padding:3px 0} #conversion-enter{color:#718399;font-size:.85em} #conversion-after{color:#7948a3} #conversion-demo{background:#e7edf4;padding:8px!important;border-radius:4px} [hidden]{display:none!important}
#pc-dev-features{font-size:.8em;background:#e8edf2;border-radius:5px;padding:6px!important} #pc-dev-features button{float:right;color:#fff;background:#47677c;border:0;border-radius:3px} #pc-dev-features .draft-input{padding:4px!important;background:white;margin-bottom:5px}
#pepu-phone{position:absolute;z-index:15;inset:3% auto 3% 50%;transform:translateX(-50%);width:min(76%,340px);border:8px solid #18222d;border-radius:24px;background:#f5f7fa;color:#273c4e;overflow:auto;font-family:sans-serif;box-shadow:0 10px 35px #0007;font-size:clamp(11px,1.5cqw,16px)}
#pepu-phone header{padding:16px;background:#e8edf3;font-weight:bold} #pepu-phone header span{float:right} .pepu-tabs{padding:8px 16px;border-bottom:1px solid #ccd7df} #pepu-form{padding:12px;display:grid;gap:7px} #pepu-form textarea{font:inherit;resize:vertical;width:100%;box-sizing:border-box;border:1px solid #bacbd7;border-radius:6px;padding:8px;color:#273c4e;background:white} #pepu-form button{justify-self:end;background:#47677c;color:white;border:0;border-radius:18px;padding:7px 18px;cursor:pointer} .pepu-post{padding:14px;border-top:1px solid #d6e0e7} .pepu-post p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6;margin:8px 0}
#discovery-phone{position:absolute;top:3%;left:50%;transform:translateX(-50%);height:59%;width:32%;padding:1.2% 1.5%;border:5px solid #1b222a;border-radius:18px;background:#f6fbff;color:#506587;display:flex;flex-direction:column;gap:4px;pointer-events:none;box-shadow:0 7px 25px #0006;font-size:clamp(8px,1.35cqw,15px)}
#discovery-phone header{text-align:center;font-weight:bold;padding:0;font-size:inherit}
#discovery-phone p{margin:3px 0;line-height:1.5}
#discovery-phone img{width:100%;min-height:0;flex:1;object-fit:contain;border-radius:8px}
/* Read-only reproduction of Kokomi's app post inside the game phone. */
#discovery-phone{width:48%;padding:1%;background:linear-gradient(140deg,#fff,#f3faff);font-size:clamp(8px,1.3cqw,15px)}
#discovery-phone header{color:#75a8df;border-bottom:1px solid #e1effb;padding-bottom:4px}
#discovery-phone .discovery-post{display:grid;grid-template-columns:18% minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:5px 8px;min-height:0;flex:1}
#discovery-phone #discovery-avatar{grid-column:1;grid-row:1;width:100%;height:auto;border-radius:0;align-self:center}
#discovery-phone p{grid-column:2;margin:0;padding:6px 8px;border:1px solid #e1effb;border-radius:15px 15px 15px 4px;background:#f5faff;line-height:1.5}
#discovery-phone .discovery-photo{grid-column:2;grid-row:2;width:100%;height:100%;min-height:0;object-fit:contain;border-radius:10px}