:root{color-scheme:dark;font-family:'DM Sans',system-ui,sans-serif;color:#e6eadb;background:#111c22}
*{box-sizing:border-box}
body{margin:0}
header{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid #ffffff12}
.identity{display:flex;gap:20px;align-items:baseline}
.kanji{white-space:nowrap;font:20px 'Noto Serif JP','Hiragino Mincho ProN','Yu Mincho',serif;letter-spacing:4px;color:#e2e6d2}
h1{font-size:13px;letter-spacing:1.2px;font-weight:400;color:#a7b7af;margin:0}
.live{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:1.4px;color:#afc0aa}
.live i{width:6px;height:6px;border-radius:50%;background:#b7cf98;box-shadow:0 0 9px #b7cf9860}
main{width:100%;margin:auto}
.station{width:100%}
.canvas-wrap{position:relative;width:100%;max-width:calc((100svh - 146px)*5/3);margin:0 auto;overflow:hidden;background:#1c343c;aspect-ratio:5/3}
canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}
.scene-clock{position:absolute;right:3%;top:5%;text-align:right;color:#f3edda;text-shadow:0 1px 3px #0e202c,0 0 12px #0e202c99;font-variant-numeric:tabular-nums;pointer-events:none}
.scene-clock>span{font-size:clamp(15px,1.5vw,22px);letter-spacing:2px}
.scene-clock small{display:block;margin-top:6px;font-size:11px;letter-spacing:2px}
.spark{color:#eed59d;font-size:16px}
.caption{max-width:1600px;margin:12px auto 0;padding:0 28px;display:flex;align-items:baseline;gap:10px;color:#e6e0c8;font:italic 15px/1.4 Georgia,serif}
.caption .spark{font-style:normal;font-size:14px}
.status{max-width:1600px;margin:auto;min-height:44px;display:flex;justify-content:space-between;align-items:center;padding:12px 28px;gap:20px;font-size:13px;color:#a3b3ad}
.departure{font-size:11px;letter-spacing:1.3px}
.departure strong{font-size:13px;letter-spacing:.3px;font-weight:400;color:#d8dcc2;margin-left:8px}
.when{font-size:11px;letter-spacing:1px}
footer{display:flex;justify-content:space-between;max-width:1600px;margin:auto;padding:12px 28px;color:#7b908a;font:italic 13px Georgia,serif;border-top:1px solid #ffffff08}
/* Preview panel, opened with #preview on the URL */
.preview{position:fixed;right:16px;bottom:16px;z-index:10;width:min(440px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;padding:14px 16px;border:1px solid #ffffff1f;border-radius:10px;background:#0f1b21ee;box-shadow:0 10px 40px #0009;font-size:12px;color:#d8dcc2}
.preview-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.preview-title strong{font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:#eed59d}
.preview-title span{flex:1;color:#8ea19b;font-size:11px}
.preview.folded{width:auto}
.preview.folded .preview-row,.preview.folded .preview-title span{display:none}
.preview.folded .preview-title{margin:0}
.preview-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 0;border-top:1px solid #ffffff0d}
.preview-row>span{width:62px;color:#8ea19b;font-size:11px;letter-spacing:.5px}
.preview button{font:inherit;color:#e6eadb;background:#1f3238;border:1px solid #ffffff1c;border-radius:6px;padding:5px 9px;cursor:pointer}
.preview button:hover{background:#2a434a}
.preview button:focus-visible{outline:2px solid #eed59d;outline-offset:1px}
.preview-close{justify-content:flex-end;padding-top:10px}
@media(max-width:700px){
 header{padding:0 14px}
 header{height:60px}
 .identity{flex-direction:column;gap:3px}
 .kanji{font-size:16px;letter-spacing:2px}
 h1{font-size:11px;letter-spacing:.3px;white-space:nowrap}
 .live{font-size:10px;letter-spacing:.5px}
 .live span{max-width:80px;text-align:right}
 .canvas-wrap{max-width:none}
 .scene-clock>span{font-size:13px}
 .scene-clock small{font-size:10px;margin-top:3px}
   .caption{padding:0 16px;font-size:13px}
   .status{flex-wrap:wrap;gap:10px 20px;padding:14px 16px;font-size:12px}
 .status>span{flex-basis:42%}
 footer{padding:14px 16px;font-size:12px}
}
/* Full screen: the scene keeps its 5:3 shape, centred and letterboxed, with its clock and caption on top. */
.fullscreen,.sound{position:absolute;right:2%;bottom:3%;z-index:2;width:34px;height:34px;padding:7px;border:1px solid #ffffff2e;border-radius:7px;background:#0e202c99;color:#f3edda;cursor:pointer;opacity:.75;transition:opacity .2s}
.sound{right:calc(2% + 42px)}
.sound.waiting{opacity:.45}
.fullscreen:hover,.fullscreen:focus-visible,.sound:hover,.sound:focus-visible{opacity:1}
.fullscreen:focus-visible,.sound:focus-visible{outline:2px solid #eed59d;outline-offset:2px}
.fullscreen svg,.sound svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.viewport:fullscreen{display:flex;align-items:center;justify-content:center;background:#0e1a20}
.viewport:fullscreen .canvas-wrap{width:min(100vw,calc(100vh*5/3));max-width:none}
/* Installed as an app, or a phone held sideways: just the scene, edge to edge, clear of notches. */
@media (display-mode:fullscreen),(display-mode:standalone),(orientation:landscape) and (max-height:520px){
 html,body{height:100%;background:#0e1a20;overflow:hidden}
 header,.caption,.status,footer{display:none}
 main,.station{height:100%}
 .viewport{height:100%;display:flex;align-items:center;justify-content:center;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);box-sizing:border-box}
 .canvas-wrap{width:min(100%,calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom))*5/3));max-width:none}
 }
@media (display-mode:fullscreen),(display-mode:standalone){.fullscreen{display:none}.sound{right:2%}}
.home-tip{position:absolute;right:2%;bottom:calc(3% + 44px);z-index:3;max-width:min(320px,80%);padding:10px 12px;border-radius:8px;background:#0e202cee;border:1px solid #ffffff26;color:#f3edda;font-size:13px;line-height:1.4;box-shadow:0 6px 20px #0008}