:root{color-scheme:dark;font-family:'DM Sans',system-ui,sans-serif;color:#e6eadb;background:#16141c;--scene-width:calc((100vh - 170px)*5/3);--scene-width:calc((100svh - 170px)*5/3)}
*{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:calc(100% - 48px);max-width:var(--scene-width);margin:20px auto 0}
.canvas-wrap{position:relative;width:100%;margin:0 auto;overflow:hidden;background:#1a1820;aspect-ratio:5/3}
canvas{display:block;width:100%;height:auto;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 #0e0c12,0 0 12px #0e0c1299;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:#f0a070;font-size:16px}
.caption{margin:18px 0 14px;padding:0;display:flex;align-items:baseline;gap:10px;color:#e6e0c8;font:italic 18px/1.5 Georgia,serif}
.caption .spark{font-style:normal;font-size:14px}
.status{margin:0;display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;padding:0;gap:12px 24px;font-size:12px;color:#a3b3ad}
.status #weather{order:1}
.status .departure{order:2;justify-self:center}
.status .when{order:3;text-align:right}
.status #cat{order:4;grid-column:1/-1;border-top:1px solid #ffffff12;padding-top:12px;color:#99aaa1;font:italic 13px/1.5 Georgia,serif}
.departure{font-size:11px;letter-spacing:1.3px}
.departure strong{font-size:13px;letter-spacing:.3px;font-weight:400;color:#f0d8b0}
#sign{margin-left:8px;color:#a3b3ad}
.when{font-size:10px;letter-spacing:.7px;line-height:1.6}
.about{max-width:760px;margin:28px auto 8px;padding:0 28px;color:#a3b3ad;font:15px/1.65 Georgia,serif}
.about h2{margin:0 0 10px;font:500 12px DM Sans,sans-serif;letter-spacing:1.5px;text-transform:uppercase;color:#c9b98e}
.about p{margin:0 0 12px}
footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 20px;max-width:var(--scene-width);width:calc(100% - 48px);margin:28px auto 0;padding:16px 0 24px;color:#7b908a;font:italic 13px Georgia,serif;border-top:1px solid #ffffff08}
footer a{color:#c9b98e;text-decoration:none;border-bottom:1px solid #c9b98e55}
footer a:hover,footer a:focus-visible{color:#eed59d;border-bottom-color:#eed59d}
/* 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:#14121aee;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}
.log{position:fixed;left:16px;top:16px;bottom:16px;z-index:10;width:min(560px,calc(100vw - 32px));display:flex;flex-direction:column;padding:14px 16px;border:1px solid #ffffff1f;border-radius:10px;background:#14121afc;box-shadow:0 10px 40px #0009;color:#d7ddd0;font:13px/1.45 'DM Sans',sans-serif}
.log-title{display:flex;align-items:baseline;gap:12px}
.log-title strong{font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:#eed59d}
.log-date{color:#8ea19b;font-size:12px}
.log-nav{display:flex;flex-wrap:wrap;gap:6px;padding:10px 0;border-bottom:1px solid #ffffff12}
.log-nav button{font:inherit;font-size:12px;color:#e6eadb;background:#1f3238;border:1px solid #ffffff1c;border-radius:6px;padding:4px 10px;cursor:pointer}
.log-nav button:hover{background:#2a434a}
.log-nav [data-go]{min-width:34px;font-size:15px;line-height:1}
.log-nav button:disabled{opacity:.35;cursor:default}
.log-nav button:focus-visible{outline:2px solid #eed59d;outline-offset:1px}
.log-body{flex:1;overflow:auto;padding-top:8px}
.log-line{display:grid;grid-template-columns:44px 62px 1fr;gap:8px;padding:3px 0;border-bottom:1px solid #ffffff08}
.log-line time{font:12px ui-monospace,Menlo,Consolas,monospace;color:#8ea19b}
.log-kind{font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:#6f837d;padding-top:2px}
.log-story .log-text{font-family:Georgia,serif;font-style:italic;color:#e6e0c8}
.log-shop .log-kind,.log-delivery .log-kind{color:#c9b98e}
.log-menu .log-kind,.log-shelf .log-kind,.log-cast .log-kind{color:#e0a87a}
.log-handover .log-kind,.log-handover .log-text{color:#f0c27a}
.log-weather .log-kind{color:#8fb3c9}
.log-people .log-kind{color:#a8c6b8}
.log-yokai .log-kind,.log-yokai .log-text{color:#b9a4e0}
.log-mystery .log-kind,.log-mystery .log-text{color:#e89a8a}
.log-event .log-kind,.log-animal .log-kind,.log-sky .log-kind,.log-calendar .log-kind{color:#c6d49a}
.log-empty,.log-absent{color:#8ea19b;font-style:italic}
.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}
 .station{width:100%;max-width:none;margin-top:12px}
 .canvas-wrap{max-width:none}
 .scene-clock>span{font-size:13px}
 .scene-clock small{font-size:10px;margin-top:3px}
 .caption{margin:16px 16px 12px;padding:0;font-size:16px}
 .status{grid-template-columns:1fr 1fr;gap:12px 16px;padding:0 16px;font-size:12px}
 .status .departure{justify-self:end}
 .status .when{grid-column:1/-1;text-align:left}
 .about{margin-top:20px;padding:0 16px;font-size:14px}
 footer{max-width:none;width:calc(100% - 32px);padding:14px 0;font-size:12px}
 footer .letters{order:3;flex-basis:100%}
}
/* 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:#0e0c1299;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:#0e0c12}
.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:#0e0c12;overflow:hidden}
 header,.caption,.status,.about,footer{display:none}
 main,.station{height:100%;width:100%;max-width:none;margin:0}
 .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:#0e0c12ee;border:1px solid #ffffff26;color:#f3edda;font-size:13px;line-height:1.4;box-shadow:0 6px 20px #0008}