@font-face{font-family:Display;src:url('./fonts/display.woff2') format('woff2');font-weight:100 900}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#010806;color:#eafff4;font-family:Display,Arial,sans-serif}
#viewport{position:fixed;inset:0;display:grid;place-items:center;overflow:hidden}
#stage{position:absolute;width:1920px;height:1080px;transform:scale(var(--scale,1));transform-origin:center;overflow:hidden;isolation:isolate}
#scene{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.brand{position:absolute;left:54px;top:38px;font-size:24px;font-weight:800;letter-spacing:.14em;z-index:3}.brand:before{content:'';display:inline-block;width:7px;height:24px;margin-right:14px;background:#4aff91;vertical-align:-3px}
.art-mark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:35px;margin:0;font-size:270px;font-weight:850;letter-spacing:-.065em;line-height:1;pointer-events:none}
.plus{font-size:.6em;font-weight:400;color:#81ffbc;letter-spacing:0}.x{color:#53ffa0}
[data-theme=matrix-cascade] .art-mark{background:radial-gradient(ellipse 475px 185px at center,#00170ced 32%,#00150a99 65%,transparent 100%);text-shadow:0 0 2px #fff,0 0 30px #32ff6d35}
[data-theme=matrix-cascade] .x{color:transparent;-webkit-text-stroke:3px #67ffad;text-shadow:none}
.bracket{position:absolute;top:365px;left:520px;width:880px;height:350px;border-left:2px solid #56ffb4;border-right:2px solid #56ffb4;pointer-events:none}
.bracket:before,.bracket:after{content:'';position:absolute;inset:0;border-top:2px solid #56ffb4;border-bottom:2px solid #56ffb4;clip-path:polygon(0 0,5% 0,5% 100%,0 100%,0 0,95% 0,100% 0,100% 100%,95% 100%,95% 0)}
[data-theme=code-grid]{background:#040b12}
[data-theme=code-grid] .art-mark{top:458px;bottom:auto;height:206px;font-size:172px;gap:28px;background:linear-gradient(90deg,transparent,#02130ee8 28%,#02130ee8 72%,transparent)}
[data-theme=code-grid] .x{color:#7dffb2}
.terminals{position:absolute;inset:102px 54px 60px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:320px 320px;column-gap:36px;align-content:space-between}
.terminal{--ink:#6dffac;position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--ink) 50%,transparent);background:#020c10ed;box-shadow:inset 3px 0 var(--ink)}
.terminal:nth-child(2){--ink:#63e6ff}.terminal:nth-child(3){--ink:#b79bff}.terminal:nth-child(4){--ink:#9eff70}
.terminal-head{display:flex;justify-content:space-between;align-items:center;height:40px;padding:0 22px;border-bottom:1px solid #ffffff16;font:13px ui-monospace,monospace;letter-spacing:.07em;color:var(--ink)}
.terminal-head i{height:6px;width:6px;background:var(--ink);box-shadow:12px 0 var(--ink),24px 0 var(--ink);margin-right:25px}
.code-window{position:absolute;inset:54px 0 14px;overflow:hidden}
.code-rows{font:21px/35px ui-monospace,Consolas,monospace;padding:0 22px}
.code-row{height:35px;white-space:pre;display:flex;align-items:baseline;color:#d8efe6}
.number{width:40px;flex-shrink:0;color:#749786;font-size:12px}
.token-key{color:#cba5ff}.token-string{color:#99ffae}.token-number{color:#ffda89}.token-fn{color:#63e6ff}.token-comment{color:#7aa89c}
.current{background:linear-gradient(90deg,#6dffac10,transparent)}
.caret{display:inline-block;width:10px;height:22px;background:var(--ink);vertical-align:-3px;flex-shrink:0}
.fullscreen-hint{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);padding:10px 16px;background:#030c13ed;border:1px solid #ffffff35;border-radius:6px;font:12px Arial,sans-serif;color:#fff;opacity:0;transition:opacity .3s;pointer-events:none;z-index:10}
.show-hint .fullscreen-hint{opacity:1;pointer-events:auto}.fullscreen{font:inherit;color:inherit;background:none;border:0;cursor:pointer}body:not(.show-hint){cursor:none}.fullscreen:focus-visible{outline:2px solid #67ffb1;outline-offset:4px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}