:root { color-scheme:light; --paper:#efede5; --ink:#11110f; --line:rgba(17,17,15,.15); }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:#171715; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body { min-height:100vh; overflow:auto; }
[hidden] { display:none !important; }
.display-gate { min-height:100vh; display:grid; place-content:center; justify-items:start; gap:14px; padding:8vw; color:var(--paper); }
.display-gate p { margin:16px 0 0; color:#c9ff48; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.display-gate h1 { max-width:16ch; margin:0; font:400 clamp(38px,6vw,76px)/.98 Georgia,serif; }
.display-gate a { color:var(--paper); }
#displayShell { min-height:100vh; padding:10px; }
.display-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-auto-rows:minmax(56px,7.25vw); gap:10px; min-height:calc(100vh - 20px); }
.display-tile { position:relative; min-width:0; overflow:hidden; border-radius:12px; background:var(--paper); box-shadow:0 12px 40px rgba(0,0,0,.16); }
.display-tile iframe { width:100%; height:100%; border:0; background:#fff; }
.display-tile.is-static::after { content:""; position:absolute; inset:0; z-index:2; }
.rotation-state { position:absolute; right:8px; bottom:8px; z-index:3; padding:5px 8px; border-radius:999px; color:#fff; background:rgba(17,17,15,.72); font-size:10px; font-weight:750; letter-spacing:.05em; backdrop-filter:blur(8px); }
.rotation-progress { position:absolute; z-index:3; left:0; bottom:0; height:3px; background:#c9ff48; animation:countdown linear forwards; }
@keyframes countdown { from { width:0; } to { width:100%; } }
.display-status { position:fixed; z-index:5; right:16px; top:16px; display:flex; align-items:center; gap:8px; max-width:calc(100vw - 32px); padding:7px 10px; border-radius:999px; color:#fff; background:rgba(17,17,15,.76); font-size:10px; backdrop-filter:blur(12px); opacity:.35; transition:opacity .2s; }
.display-status:hover { opacity:1; }
.display-status span { color:#c9ff48; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.display-status strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.display-empty { min-height:calc(100vh - 20px); display:grid; place-content:center; justify-items:center; gap:10px; color:var(--paper); text-align:center; }
.display-empty strong { margin-top:8px; font:400 clamp(24px,4vw,46px)/1 Georgia,serif; }
.display-empty span { color:#aaa79f; }
@media(max-width:800px){ .display-grid { display:flex; flex-direction:column; } .display-tile { min-height:55vh; } }