:root{color-scheme:dark;--ink:#d1dce6;--muted:#849bad;--line:#344957;--blue:#298cff;--bg:#0c1720}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:12px Arial,sans-serif;color:inherit;letter-spacing:.19em;cursor:pointer;background:none;border:0;min-height:44px}button:focus-visible,a:focus-visible{outline:1px solid #79b4ff;outline-offset:5px}button:hover{color:#fff}#shell{min-height:100svh;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(ellipse at 53% 46%,#20313e55,transparent 64%)}header{height:126px;display:flex;align-items:center;gap:30px;padding:0 3.5%;border-bottom:1px solid var(--line);position:relative;z-index:2}.brand{width:285px;color:var(--ink);display:block}.brand svg{width:100%;height:110px;display:block}.header-code{font:10px/2 monospace;letter-spacing:.22em;border-left:1px solid var(--line);padding-left:25px;color:var(--muted)}h1{font-size:16px;font-weight:400;letter-spacing:.4em;margin-left:auto}h1 i{font-style:normal;color:#607584;padding:0 15px}.matrix{margin-left:25px;font-size:26px;line-height:.6;color:#9eafbe}.arena{position:relative;flex:1;min-height:530px;height:calc(100svh - 224px);isolation:isolate}#field{position:absolute;inset:0;width:100%;height:100%;z-index:-1}.overscale{position:absolute;top:11%;left:14%;right:6%;font-size:clamp(130px,23vw,340px);font-weight:300;color:#9fb7d509;letter-spacing:-.1em;pointer-events:none;display:flex;justify-content:space-between;z-index:-2}nav{position:absolute;left:3.5%;top:12%;display:flex;flex-direction:column;gap:10px;width:176px;z-index:2}.chapter{text-align:left;display:flex;align-items:center;gap:14px;min-height:51px;position:relative;transition:color .25s,transform .35s}.chapter .num{font:11px monospace;color:#7991a4}.chapter:before{content:'';position:absolute;left:-16px;width:5px;height:5px;background:transparent;border-radius:50%}.chapter[aria-pressed=true]{color:#f2f7ff;transform:translateX(7px)}.chapter[aria-pressed=true]:before{background:var(--blue);box-shadow:0 0 14px #298cff}.chapter .edge{color:#536c80}.chapter[aria-pressed=true] .edge{color:var(--blue)}#core{position:absolute;left:55%;top:57%;transform:translate(-50%,-50%);padding:12px 26px;min-width:140px;z-index:2;color:#e6eff7;background:#0b172180;backdrop-filter:blur(3px);display:flex;gap:20px;justify-content:center;transition:opacity .35s,letter-spacing .3s}#core:hover{letter-spacing:.3em;background:#142a3cbb}.bracket{color:var(--blue)}.rail{position:absolute;right:3.5%;top:9%;bottom:10%;display:flex;flex-direction:column;justify-content:space-between;font:12px/1.8 monospace;text-align:center;color:#8aa2b7}.rail b{font-size:32px;font-weight:400}.corner{position:absolute;bottom:30px;left:3.5%;display:flex;flex-direction:column;gap:9px;font:11px monospace;letter-spacing:.23em;color:#a6bccb}.corner span:last-child{color:#627b8e}footer{min-height:98px;display:flex;align-items:center;gap:28px;border-top:1px solid var(--line);padding:14px 3.5%;position:relative}footer:before{content:'';width:15%;height:1px;background:#76a9cb;position:absolute;top:-1px;left:35%}#eq{width:160px;height:44px;border-right:1px solid var(--line);padding-right:20px}#counter{font:11px monospace;color:#7892a7}#tiles{display:flex;gap:8px;flex:1}#tiles button{width:50px;height:48px;border:1px solid #344959;color:#7191a7;font:16px monospace;clip-path:polygon(0 0,80% 0,100% 20%,100% 100%,0 100%);transition:background .3s}#tiles button[aria-pressed=true]{border-color:var(--blue);color:#a7d2ff;background:#237ee31a}.footer-controls{display:flex;gap:22px}.footer-controls button{font-size:10px;color:#9ab0c0}#screen{position:absolute;inset:6% 13% 8% 22%;z-index:5;background:#0a141eef;border:1px solid #648198;box-shadow:0 30px 100px #0009;clip-path:polygon(0 0,96% 0,100% 6%,100% 100%,0 100%);display:flex;flex-direction:column;animation:screen-in .65s cubic-bezier(.16,1,.3,1) both}#screen[hidden]{display:none}.screen-head,.screen-foot{display:flex;align-items:center;gap:20px;padding:10px 22px;min-height:62px;font:12px monospace;letter-spacing:.16em}.screen-head{border-bottom:1px solid var(--line)}#film-kind{font-size:10px;color:#819bae;margin-left:auto}#close{font-size:10px}.film-surface{position:relative;flex:1;min-height:220px;overflow:hidden}#film,#video{width:100%;height:100%;position:absolute;inset:0;object-fit:contain}.screen-foot{border-top:1px solid var(--line)}.screen-foot button{font-size:10px}.progress{height:1px;background:#304655;flex:1}.progress span{height:1px;background:#6caeff;display:block;width:0}#time{color:#8fa6b7;font-size:11px}#error{position:absolute;inset:0;display:grid;place-items:center;font:12px monospace;color:#c9dcea}#error[hidden],#video[hidden],#film[hidden]{display:none}.opened #core{opacity:0;pointer-events:none}.opened nav{opacity:.5}@keyframes screen-in{from{opacity:0;transform:perspective(1000px) rotateY(-13deg) scale(.86);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}@media(min-width:1700px){.arena{min-height:680px}}@media(max-width:850px){header{height:100px;gap:15px}.brand{width:215px}.brand svg{height:90px}.header-code,.matrix,#counter{display:none}h1{font-size:12px;letter-spacing:.2em}.arena{height:calc(100svh - 204px);min-height:560px}nav{top:auto;bottom:74px;left:5%;right:5%;width:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:0 12px}.chapter{font-size:11px;gap:7px}.chapter[aria-pressed=true]{transform:none}.chapter:before{left:-6px;width:3px;height:3px}.chapter .num{font-size:9px}.corner{bottom:20px}.rail{right:5%;bottom:45%;font-size:10px}.rail b{display:none}#core{left:50%;top:43%}#screen{inset:4% 4% 25%}footer{gap:15px;flex-wrap:wrap}#eq{width:105px}#tiles{gap:5px;justify-content:flex-end}#tiles button{width:34px;height:44px}.footer-controls{width:100%;justify-content:space-between}.overscale{left:4%;top:12%}.screen-head,.screen-foot{padding:8px 12px;gap:10px}#film-kind{font-size:8px;letter-spacing:0}.screen-head{font-size:11px}#close{letter-spacing:0}.screen-foot button{font-size:9px}}@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important}}
