:root{--bar: clamp(22px, 6vh, 60px);--ink: #f4efe2;--night: #0b0e14}[hidden]{display:none!important}html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:pinch-zoom;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;background:#111;color:var(--ink);font:16px/1.4 Georgia,Times New Roman,serif}#c{display:block;width:100vw;height:100vh;height:100dvh;touch-action:pinch-zoom}button,a{font:inherit;color:inherit}:focus-visible{outline:2px solid #ffd08a;outline-offset:3px}#bars div{position:fixed;left:0;right:0;background:#000;z-index:2}#bars div:first-child{top:0;height:calc(var(--bar) + env(safe-area-inset-top))}#bars div:last-child{bottom:0;height:calc(var(--bar) + env(safe-area-inset-bottom))}#fade{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .6s;z-index:5}#cine-title{position:fixed;left:env(safe-area-inset-left);right:env(safe-area-inset-right);top:50%;transform:translateY(-50%);text-align:center;pointer-events:none;z-index:3;opacity:0;transition:opacity 1s;text-shadow:0 1px 10px #000c;padding:0 1em}#cine-title.on{opacity:1}#cine-title .tr{font-size:clamp(22px,4vw,46px);letter-spacing:.08em}#cine-title .en{margin-top:.3em;font-style:italic;font-size:clamp(13px,1.8vw,19px);opacity:.8}#caption{position:fixed;left:0;right:0;bottom:calc(var(--bar) + env(safe-area-inset-bottom) + 14px);display:flex;justify-content:center;padding:0 16px;pointer-events:none;z-index:3;opacity:0;transition:opacity .35s}#caption.on{opacity:1;transition-duration:.8s}#caption .box{max-width:30em;padding:.45em 1.1em .55em;border-radius:14px;text-align:center;font-size:clamp(18px,2.1vw,25px);line-height:1.4;background:#06090e6b;box-shadow:0 0 28px 16px #06090e6b;text-shadow:0 1px 4px #0009}#caption .tr{margin-top:.25em;font-size:max(15px,.72em);font-style:italic}#caption .tr:empty{display:none}#more{position:fixed;z-index:3;right:calc(env(safe-area-inset-right) + 10px);bottom:env(safe-area-inset-bottom);height:var(--bar);min-width:44px;padding:0 10px;display:flex;align-items:center;justify-content:center;border:0;background:none;color:var(--ink);font-size:clamp(24px,4.5vh,40px);line-height:1;opacity:.75;cursor:pointer;animation:more-in 1s ease both}#more.pulse{animation:more-pulse 1.6s ease 1}@keyframes more-in{0%{opacity:0}to{opacity:.75}}@keyframes more-pulse{0%,to{opacity:.75}50%{opacity:1;text-shadow:0 0 14px #f4efe2cc}}#pause-btn{position:fixed;z-index:3;top:env(safe-area-inset-top);right:calc(env(safe-area-inset-right) + 6px);width:44px;height:max(var(--bar),36px);padding:0;display:flex;align-items:center;justify-content:center;border:0;background:none;color:var(--ink);opacity:.35;cursor:pointer}#pause-btn svg{width:18px;height:18px;fill:currentColor}#pause-btn:hover,#pause-btn:focus-visible{opacity:.9}#mute-mark{position:fixed;z-index:6;top:env(safe-area-inset-top);right:calc(env(safe-area-inset-right) + 50px);width:44px;height:max(var(--bar),36px);padding:0;display:flex;align-items:center;justify-content:center;border:0;background:none;color:var(--ink);opacity:.45;cursor:pointer}#mute-mark svg{width:20px;height:20px;fill:currentColor}#mute-mark:hover,#mute-mark:focus-visible{opacity:.9}#toast{position:fixed;z-index:6;top:env(safe-area-inset-top);right:calc(env(safe-area-inset-right) + 96px);height:max(var(--bar),36px);margin:0;display:flex;align-items:center;font:15px system-ui,sans-serif;color:var(--ink);opacity:0;pointer-events:none;transition:opacity .3s}#toast.on{opacity:.8}.actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.actions button,.actions a,#begin{min-height:44px;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #f4efe266;border-radius:22px;background:#ffffff0d;color:var(--ink);font-size:17px;text-decoration:none;cursor:pointer}.actions button:hover,.actions a:hover,#begin:hover{background:#ffffff1f;border-color:var(--ink)}#title{position:fixed;inset:0;z-index:6;box-sizing:border-box;padding:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:var(--night);transition:opacity 1.2s;cursor:pointer}#title h1{font-weight:400;text-transform:uppercase;letter-spacing:.6em;font-size:clamp(40px,8vw,96px);margin:0 0 0 .6em}#title p{margin:.3em 0;font-size:clamp(15px,2vw,18px);opacity:.75}#title #status{margin-top:2em;min-height:44px;display:flex;align-items:center;font:15px system-ui,sans-serif;opacity:.6}#begin{margin-top:2em}#title .hint{margin-top:1.4em;font:clamp(14px,1.6vw,16px)/1.4 system-ui,sans-serif;opacity:.65}#title.gone{opacity:0;pointer-events:none}#pause{position:fixed;inset:0;z-index:7;box-sizing:border-box;padding:calc(16px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));display:flex;align-items:center;justify-content:center;overflow-y:auto;touch-action:pan-y pinch-zoom;background:#0b0e14eb}#pause .sheet{width:min(420px,100%);margin:auto;text-align:center}#pause h2{font-weight:400;letter-spacing:.3em;text-transform:uppercase;font-size:22px;margin:0 0 1em .3em}#pause h3{font:13px system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;opacity:.6;margin:2em 0 .6em}#pause .chapters{list-style:none;margin:0;padding:0;display:grid;gap:4px;text-align:left}#pause .chapters button{width:100%;min-height:44px;padding:0 14px;display:flex;align-items:center;gap:12px;border:1px solid transparent;border-radius:10px;background:none;cursor:pointer;font-size:17px}#pause .chapters button:hover{background:#ffffff12}#pause .chapters button[aria-current]{border-color:#f4efe244;background:#ffffff0d}#pause .chapters b{font:13px system-ui,sans-serif;opacity:.6;min-width:1.2em}#end{position:fixed;inset:0;z-index:4;box-sizing:border-box;padding:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1em;text-align:center;background:#0b0e14f2}#end h2{font-weight:400;text-transform:uppercase;letter-spacing:.4em;font-size:clamp(28px,5vw,48px);margin:0 0 0 .4em}#end p{margin:0 0 .8em;opacity:.85;font-size:18px}#end p span{display:block;margin-top:.3em;font-size:max(15px,.85em);font-style:italic}#end-title:focus{outline:none}#end .small{min-height:44px;padding:0 12px;border:0;background:none;font:15px system-ui,sans-serif;text-decoration:underline;text-underline-offset:3px;opacity:.7;cursor:pointer}#end .small:hover{opacity:1}#dev-btn{position:fixed;z-index:9;top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));padding:3px 7px;border:1px solid #f4efe255;border-radius:6px;background:#0005;color:var(--ink);font:10px/1.2 system-ui,sans-serif;letter-spacing:.08em;opacity:.4;cursor:pointer;touch-action:manipulation}#dev-btn:hover,#dev-btn.on{opacity:.95}#dev-menu{position:fixed;z-index:9;top:calc(max(8px,env(safe-area-inset-top)) + 30px);left:max(8px,env(safe-area-inset-left));width:min(360px,calc(100vw - 16px));max-height:calc(100dvh - 60px);overflow-y:auto;box-sizing:border-box;padding:10px;border-radius:10px;background:#0b0e14e8;color:var(--ink);font:13px/1.3 system-ui,sans-serif;touch-action:pan-y;user-select:none}#dev-menu .row{margin-bottom:8px}#dev-menu .row>span{display:block;opacity:.6;font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}#dev-menu .row>div{display:flex;flex-wrap:wrap;gap:5px}#dev-menu button{min-height:32px;padding:4px 9px;border:1px solid #f4efe244;border-radius:6px;background:#ffffff10;color:inherit;font:inherit;cursor:pointer;touch-action:manipulation}#dev-menu button.sel{background:#e8662a;border-color:#e8662a}#dev-menu button small{opacity:.7}#dev-menu .foot{display:flex;align-items:center;justify-content:space-between;gap:8px}#dev-menu .status{opacity:.6;font-size:11px}@media (prefers-reduced-motion: reduce){#title,#fade,#caption,#caption.on,#toast{transition-duration:.3s}#more{animation-duration:.3s}}
