:root {color-scheme:dark; --night:#101329; --teal:#6DDACB; --paper:#F1EAD8; --gold:#F6CF78; font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;}
* {box-sizing:border-box;}
body {margin:0; min-height:100vh; background:radial-gradient(ellipse at 52% 25%,#202741 0,#101329 70%); color:var(--paper); display:flex; justify-content:center; align-items:center; padding:20px;}
.app {width:min(1100px,calc(100vw - 40px),calc((100svh - 150px)*1.6));}
.page-head {display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; gap:16px;}
.eyebrow {font-size:10px; color:var(--teal); letter-spacing:.2em; margin:0 0 7px;}
h1 {font-weight:500; font-size:18px; margin:4px 0 0; letter-spacing:.18em;}
.stage {position:relative; width:100%; aspect-ratio:8/5; overflow:hidden; border:1px solid #6ddacb2c; border-radius:16px; box-shadow:0 22px 80px #0005; background:var(--night);}
canvas {width:100%; height:100%; display:block; outline:none;}
canvas:focus-visible {outline:2px solid var(--teal); outline-offset:-4px;}
button {font:inherit; cursor:pointer; border:1px solid #6ddacb50; background:transparent; color:var(--paper); border-radius:100px; padding:10px 17px;}
button:hover {background:#6ddacb16;}
button:focus-visible {outline:2px solid var(--gold); outline-offset:4px;}
.quiet {font-size:11px; padding:8px 14px;}
.hud {position:absolute; top:18px; left:20px; right:20px; display:flex; gap:12px; pointer-events:none;}
.metric {padding:9px 16px; min-width:108px; background:#101329dc; border:1px solid #6ddacb30; border-radius:10px; display:flex; flex-direction:column; gap:3px;}
.metric span {font-size:9px; letter-spacing:.13em; color:#bfc9d3;}
.metric strong {font-size:21px; font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:.05em;}
.dream-meter {margin-left:auto; width:152px; position:relative;}
.dream-meter strong {font-size:17px; color:var(--teal);}
.bar {height:3px; width:100%; background:#3c4b5b; border-radius:2px;}
.bar i {display:block; height:100%; background:var(--teal); width:100%; border-radius:2px;}
.message {position:absolute; top:101px; left:50%; transform:translateX(-50%); margin:0; max-width:90%; width:max-content; font-size:11px; line-height:1.7; text-align:center; padding:6px 13px; border-radius:8px; background:#101329d8; color:var(--paper); pointer-events:none;}
.message:empty {display:none;}
.prompt {position:absolute; left:50%; bottom:24px; transform:translateX(-50%); padding:9px 18px; border-radius:99px; background:var(--paper); color:var(--night); font-size:12px; white-space:nowrap; pointer-events:none;}
.panel {position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:26px; background:linear-gradient(90deg,#101329a8,#101329d9 35%,#101329dc 65%,#101329a8);}
.panel-inner {text-align:center; max-width:540px;}
.paper-mark {font-size:47px; color:var(--gold); line-height:1.3; margin-bottom:16px;}
h2 {font-family:"Hiragino Mincho ProN","Yu Mincho",serif; font-weight:500; font-size:clamp(24px,3.7vw,42px); letter-spacing:.14em; margin:14px 0 20px;}
.lead {font-size:15px; line-height:1.8; margin:0 0 18px; color:var(--paper);}
.panel-body {font-size:12px; line-height:2; color:#c4ccd7; white-space:pre-line; margin:0 0 18px;}
.keys-note {font-size:11px; line-height:1.9; color:var(--teal); white-space:pre-line; margin:0 0 24px;}
.primary {padding:13px 32px; background:var(--paper); color:var(--night); border:0; font-size:14px; font-weight:600; box-shadow:0 4px 24px #f1ead812;}
.primary:hover {background:var(--gold);}
.hint {text-align:center; font-size:11px; color:#bdc9d2; margin:12px 0 8px; line-height:1.5;}
footer p {margin:0; font-size:10px; text-align:center; line-height:1.8; color:#8495aa;}
.pc-note {display:none;}
.dev {position:absolute; right:12px; bottom:12px; font:10px monospace; background:#101329e8; padding:5px; pointer-events:none;}
[hidden] {display:none!important;}
@media (max-width:700px) {body{padding:12px;align-items:flex-start;} .app{width:100%;} h1{font-size:14px;} .hud{top:10px;left:10px;right:10px;gap:6px;} .metric{min-width:72px;padding:6px 8px;} .metric strong{font-size:16px;} .dream-meter{width:105px;} .panel{padding:14px;} .paper-mark{font-size:25px;margin:0;} h2{font-size:23px;margin:8px 0;} .lead{font-size:11px;margin:0 0 8px;} .panel-body{font-size:10px;line-height:1.7;margin:0 0 8px;} .keys-note{font-size:9px;line-height:1.6;margin:0 0 9px;} .primary{padding:9px 20px;font-size:11px;} .message{top:76px;font-size:9px;} .pc-note{display:block;} .hint{font-size:10px;} footer p{font-size:9px;}}
@media (max-width:700px) {
  .stage:has(> .panel:not([hidden])) {min-height:300px;}
  .stage:has(> .panel:not([hidden])) canvas {object-fit:contain;}
  .panel-inner {max-height:100%; overflow-y:auto; padding-bottom:6px;}
}
@media (prefers-reduced-motion:reduce) {*,*::before,*::after{scroll-behavior:auto;}}