/* routes/box.css — #/box THE BOX (mockup v1 03_box, drawn in mockup px: calc(1 * var(--m)) = 1.1483 css px at 1920) */
.box{--m:calc(1.1483px * var(--u));--pl:#1d029c;--pl2:#130278;--vio:#b57bff;--grn:#3AF1BE;--pale:#e8dcff;color:var(--ink);font-family:var(--font-body)}
.box *{box-sizing:border-box}
.box button{background:none;color:inherit;cursor:pointer;padding:0;font:inherit}
.box h2{margin:0;font:500 calc(22 * var(--m))/1.2 var(--font-body);color:#fbf6ff}
.box .lbl{display:block;font:500 calc(16 * var(--m))/1.2 var(--font-body);color:#f3ecff}
.box .code{font-family:var(--font-mono);font-weight:400;font-variant-numeric:tabular-nums}
.box [hidden]{display:none!important}
.box .qr{background:#fff;border-radius:calc(8 * var(--m));padding:calc(5 * var(--m))}
.box .qr svg{display:block;width:100%;height:100%}

/* ---------- screen 1: build ---------- */
.b-one{display:grid;grid-template-columns:calc(932 * var(--m)) 1fr;column-gap:calc(17 * var(--m));padding:calc(24 * var(--m)) 0 0 calc(16 * var(--m));height:calc(714 * var(--m))}
.b-left{display:flex;flex-direction:column}
.b-head{position:relative;height:calc(125 * var(--m))}
.box .b-title{margin:0;font:400 calc(62 * var(--m))/1 var(--font-display);color:#fbf6ff;letter-spacing:0;padding-top:calc(6 * var(--m))}
.b-sub{margin:calc(14 * var(--m)) 0 0 calc(4 * var(--m));font:400 calc(21 * var(--m))/1.2 var(--font-body);color:#f6f0ff}
.b-house{position:absolute;right:calc(8 * var(--m));top:calc(38 * var(--m));margin:0;display:flex;align-items:center;gap:calc(10 * var(--m));font:400 calc(19 * var(--m))/1 var(--font-body);color:#f3ecff}
.b-house svg{width:calc(28 * var(--m));height:calc(28 * var(--m))}
.b-cfg,.b-tracks,.b-prev,.b-stream,.b-inv,.b-code,.b-open{background:var(--pl);position:relative}
.b-cfg{height:calc(170 * var(--m));padding:calc(16 * var(--m)) calc(16 * var(--m)) 0 calc(22 * var(--m))}
.b-cfg-row{display:grid;grid-template-columns:calc(241 * var(--m)) calc(312 * var(--m)) calc(281 * var(--m));column-gap:calc(29 * var(--m));margin-top:calc(22 * var(--m))}
.b-cfg-row .lbl{height:calc(26 * var(--m))}
.b-cfg .two,.b-cfg .three{display:grid;gap:calc(9 * var(--m));height:calc(50 * var(--m))}
.b-cfg .two{grid-template-columns:1fr 1fr}.b-cfg .three{grid-template-columns:repeat(3,1fr)}
.b-cfg .two button,.b-cfg .three button{padding:0;font:500 calc(19 * var(--m))/1 var(--font-body);color:#fff;background:#1a0478;transition:background-color .2s var(--ease-settle),box-shadow .15s var(--ease-settle)}
.b-cfg .three button{font-size:calc(18 * var(--m))}
.b-cfg button:hover{box-shadow:0 0 calc(12 * var(--m)) rgba(199,125,255,.55)}
.b-cfg button.is-on{background:#7d2df0;box-shadow:inset 0 0 0 calc(2 * var(--m)) #eadcff}
.b-cfg .name{display:flex;align-items:center;height:calc(50 * var(--m));padding:0 calc(14 * var(--m)) 0 calc(15 * var(--m));background:#1a0478}
.b-cfg .name input{flex:1;min-width:0;background:none;color:#fff;font:500 calc(19 * var(--m))/1 var(--font-body);padding:0}
.b-cfg .name:focus-within{box-shadow:0 0 calc(12 * var(--m)) rgba(199,125,255,.6)}
.b-cfg .name button{width:calc(22 * var(--m));height:calc(22 * var(--m))}
.b-cfg .name svg{width:100%;height:100%}
.b-tracks{flex:1;margin-top:calc(12 * var(--m));padding:calc(20 * var(--m)) calc(17 * var(--m)) 0 calc(22 * var(--m))}
.b-tracks h2 .cnt{font-size:calc(19 * var(--m));color:var(--grn)}
.b-hint{position:absolute;right:calc(20 * var(--m));top:calc(24 * var(--m));margin:0;font:400 calc(15 * var(--m))/1 var(--font-body);color:var(--muted)}
.b-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:calc(65 * var(--m));gap:calc(12 * var(--m)) calc(10 * var(--m));margin:calc(12 * var(--m)) 0 0 calc(-1 * var(--m))}
.b-grid button{display:grid;grid-template-columns:calc(44 * var(--m)) 1fr auto;align-items:center;text-align:left;padding:0 calc(18 * var(--m)) 0 calc(16 * var(--m));background:#4a10c6;transition:background-color .2s var(--ease-settle),box-shadow .15s var(--ease-settle),transform .15s var(--ease-settle)}
.b-grid button:hover{box-shadow:0 0 calc(14 * var(--m)) rgba(199,125,255,.55)}
.b-grid button.off{background:#26048f}
.b-grid button.lock{background:#22037f;color:#a592d8}
.b-grid button.nudge{transform:translateX(calc(3 * var(--m)))}
.b-grid .ck{width:calc(28 * var(--m));height:calc(28 * var(--m));border-radius:calc(5 * var(--m));background:#8f4bf0;display:grid;place-items:center;box-shadow:inset 0 0 0 calc(1.6 * var(--m)) #eadcff}
.b-grid .off .ck,.b-grid .lock .ck{background:transparent;box-shadow:inset 0 0 0 calc(1.6 * var(--m)) #9d8ad8}
.b-grid .ck svg{width:72%;height:72%}
.b-grid .off .ck svg,.b-grid .lock .ck svg{visibility:hidden}
.b-grid b{display:block;font:500 calc(17 * var(--m))/1.25 var(--font-body);color:#fff}
.b-grid .lock b{color:#c2b3ea}
.b-grid small{display:block;margin-top:calc(3 * var(--m));font:400 calc(14 * var(--m))/1.2 var(--font-body);color:#e4d8ff}
.b-grid .lock small{color:#9d8ad8}
.b-grid .lk{width:calc(22 * var(--m));height:calc(26 * var(--m));visibility:hidden}
.b-grid .lock .lk{visibility:visible}

/* live preview machine (absolute inside a fixed-size stage) */
.b-prev{padding:calc(16 * var(--m)) 0 0 calc(28 * var(--m));height:calc(678 * var(--m))}
.mach{position:absolute;left:0;top:0;width:calc(596 * var(--m));height:calc(678 * var(--m))}
.mach .arch{position:absolute;left:calc(21 * var(--m));top:calc(43 * var(--m));width:calc(532 * var(--m));height:auto;pointer-events:none}
.mach .pil{position:absolute;top:calc(345 * var(--m));height:calc(145 * var(--m));width:calc(64 * var(--m));background:linear-gradient(90deg,#3f13b0 0 8%,#d18cff 8% 28%,#3d0fb0 28% 34%,#79e3a8 34% 56%,#3d0fb0 56% 62%,#c67af5 62% 88%,#3f13b0 88%)}
.mach .pil::after{content:"";position:absolute;left:-12%;right:-12%;bottom:0;height:calc(40 * var(--m));background:repeating-linear-gradient(180deg,#d6c8ff 0 calc(7 * var(--m)),#6c3fd0 calc(7 * var(--m)) calc(11 * var(--m)));border-radius:calc(8 * var(--m))}
.mach .pil.l{left:calc(88 * var(--m))}.mach .pil.r{left:calc(420 * var(--m))}
.mach .arch-svg{position:absolute;left:calc(75 * var(--m));top:calc(43 * var(--m));width:calc(425 * var(--m));height:calc(200 * var(--m));overflow:visible;pointer-events:none}
.mach .nm{font:700 30px var(--font-body);fill:#fff;stroke:#7b35e0;stroke-width:1.2px;paint-order:stroke;letter-spacing:.5px}
.mach .pr{font:500 13px var(--font-body);fill:#e8dcff}
.mach .trace{opacity:0}
.mach .ticks rect{fill:#6fe09a}
.mach .pr .g{fill:#8ff0b4}
.mlist{position:absolute;left:calc(153 * var(--m));top:calc(171 * var(--m));width:calc(272 * var(--m));height:calc(304 * var(--m));margin:0;padding:calc(3 * var(--m)) calc(6 * var(--m));list-style:none;background:#1b0490;display:flex;flex-direction:column}
.mlist li{display:grid;grid-template-columns:calc(34 * var(--m)) 1fr auto;align-items:center;height:calc(33.3 * var(--m));font:500 max(12px,calc(15.5 * var(--m)))/1 var(--font-body);color:#fff;padding-right:calc(10 * var(--m))}
.mlist li .n{width:calc(25 * var(--m));height:calc(25 * var(--m));display:grid;place-items:center;border-radius:calc(4 * var(--m));background:#2d0ab4;box-shadow:inset 0 0 0 calc(1.5 * var(--m)) #cdb4ff;font-size:max(11px,calc(14 * var(--m)))}
.mlist li .t{padding-left:calc(6 * var(--m));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mlist li .d{font-weight:400;font-size:max(11px,calc(14.5 * var(--m)))}
.mlist li.empty{color:#8f7ccf}
.base{position:absolute;left:calc(47 * var(--m));top:calc(488 * var(--m));width:calc(487 * var(--m));height:calc(167 * var(--m));background:linear-gradient(180deg,#b06cf2,#8f45e6 60%,#7a33d8)}
.base .qr{position:absolute;left:calc(35 * var(--m));top:calc(15 * var(--m));width:calc(76 * var(--m));height:calc(74 * var(--m));padding:calc(4 * var(--m))}
.base .fld{position:absolute;left:calc(125 * var(--m));width:calc(326 * var(--m));height:calc(36 * var(--m));display:flex;align-items:center;justify-content:space-between;padding:0 calc(8 * var(--m)) 0 calc(12 * var(--m));background:#1a0478;font:400 calc(16 * var(--m))/1 var(--font-body);color:#fff}
.base .fld:nth-of-type(2){top:calc(10 * var(--m))}.base .fld:nth-of-type(3){top:calc(53 * var(--m))}
.base .fld .code{font-size:calc(17 * var(--m))}
.base .fld em{font-style:normal;font-size:calc(14.5 * var(--m))}
.base .fld button{width:calc(22 * var(--m));height:calc(22 * var(--m))}
.base .fld button svg{width:100%;height:100%}
.base .open{position:absolute;left:calc(34 * var(--m));top:calc(100 * var(--m));width:calc(417 * var(--m));height:calc(50 * var(--m));border-radius:calc(9 * var(--m));background:linear-gradient(180deg,#77e39f,#4fc27f);color:#170567;font:600 calc(23 * var(--m))/1 var(--font-body);transition:box-shadow .15s var(--ease-settle)}
.base .open:hover{box-shadow:0 0 calc(18 * var(--m)) rgba(111,224,154,.7)}
.soon{position:absolute;left:calc(394 * var(--m));top:calc(155 * var(--m));width:calc(221 * var(--m));height:calc(196 * var(--m));background:#1d0395;padding:calc(30 * var(--m)) calc(16 * var(--m)) 0 calc(20 * var(--m));z-index:5;opacity:0;visibility:hidden;transform:scale(.96);transform-origin:20% 80%;transition:opacity .2s var(--ease-settle),transform .2s var(--ease-settle),visibility 0s .2s}
.soon[data-open]{opacity:1;visibility:visible;transform:none;transition:opacity .2s var(--ease-settle),transform .2s var(--ease-settle)}
.soon p{margin:0;font:400 calc(18 * var(--m))/1.5 var(--font-body);color:#fff}
.soon .x{position:absolute;right:calc(12 * var(--m));top:calc(12 * var(--m));width:calc(20 * var(--m));height:calc(20 * var(--m))}
.soon .x svg{width:100%;height:100%}
.soon .cl{position:absolute;left:calc(17 * var(--m));top:calc(127 * var(--m));width:calc(186 * var(--m));height:calc(50 * var(--m));border-radius:calc(8 * var(--m));background:#b77cf6;color:#18056e;font:500 calc(21 * var(--m))/1 var(--font-body)}
.soon .cl:hover{background:#c894ff}
/* stream mode turns the mini machine into a 16:9 overlay frame */
.mach[data-mode="stream"] .arch,.mach[data-mode="stream"] .arch-svg{transform:translateY(calc(-8 * var(--m))) scale(.94);transform-origin:50% 0}
.mach .arch,.mach .arch-svg,.mach .pil{transition:transform .5s var(--ease-settle)}
.mach .ovf{position:absolute;left:calc(40 * var(--m));top:calc(150 * var(--m));width:calc(496 * var(--m));height:calc(279 * var(--m));border-radius:calc(10 * var(--m));box-shadow:0 0 0 calc(2 * var(--m)) #6fe09a,0 0 calc(18 * var(--m)) rgba(111,224,154,.45);opacity:0;pointer-events:none;transition:opacity .3s var(--ease-settle)}
.mach .ovf span{position:absolute;left:calc(10 * var(--m));top:calc(-26 * var(--m));font:600 max(11px,calc(13 * var(--m)))/1 var(--font-body);color:var(--grn);letter-spacing:.06em}
.mach[data-mode="stream"] .ovf{opacity:1}

/* ---------- screen 2: stream mode ---------- */
.b-two{padding:calc(83 * var(--m)) 0 0 calc(16 * var(--m))}
.b-stream{height:calc(300 * var(--m));display:grid;grid-template-columns:calc(672 * var(--m)) 1fr;padding:calc(16 * var(--m)) calc(17 * var(--m)) calc(14 * var(--m)) 0}
.st-l{padding:calc(10 * var(--m)) 0 0 calc(22 * var(--m))}
.box .b-title.st{font-size:calc(60 * var(--m));padding-top:0}
.st-p{margin:calc(12 * var(--m)) 0 0;width:calc(600 * var(--m));font:400 calc(21 * var(--m))/1.35 var(--font-body);color:#f6f0ff}
.st-l .lbl{margin-top:calc(34 * var(--m));font-size:calc(19 * var(--m))}
.st-link{display:flex;gap:calc(14 * var(--m));margin-top:calc(9 * var(--m));height:calc(56 * var(--m))}
.st-link .url{width:calc(463 * var(--m));display:flex;align-items:center;justify-content:space-between;padding:0 0 0 calc(20 * var(--m));background:#150372;font:400 calc(21 * var(--m))/1 var(--font-body);color:#fff;overflow:hidden}
.st-link .url button{width:calc(56 * var(--m));height:100%;display:grid;place-items:center;background:#1e0588}
.st-link .url button svg{width:calc(24 * var(--m));height:calc(24 * var(--m))}
.st-link .copied{--violet:var(--green);width:calc(148 * var(--m));display:flex;align-items:center;justify-content:center;gap:calc(10 * var(--m));padding:0;background:#170579;color:var(--grn);font:500 calc(20 * var(--m))/1 var(--font-body);transition:box-shadow .15s var(--ease-settle)}
.st-link .copied:hover{box-shadow:0 0 calc(14 * var(--m)) rgba(111,224,154,.55)}
.st-link .copied svg{width:calc(24 * var(--m));height:calc(24 * var(--m))}
.ovl{position:relative;background:var(--pl2);overflow:hidden}
.ov-arch{position:absolute;left:0;top:calc(10 * var(--m));width:calc(560 * var(--m));height:calc(260 * var(--m));overflow:hidden}
.ov-arch img{position:absolute;left:calc(-8 * var(--m));top:0;width:calc(590 * var(--m));height:auto}
.ov-arch svg{position:absolute;left:calc(80 * var(--m));top:calc(8 * var(--m));width:calc(425 * var(--m));height:calc(200 * var(--m));overflow:visible}
.ovl .nm,.an .nm{font:700 40px var(--font-body);fill:#fff;stroke:#7b35e0;stroke-width:1.4px;paint-order:stroke}
.ov-now{position:absolute;left:calc(114 * var(--m));top:calc(140 * var(--m));width:calc(357 * var(--m));height:calc(110 * var(--m));padding:calc(12 * var(--m)) calc(22 * var(--m));background:#130266;border-radius:calc(8 * var(--m) ) calc(8 * var(--m)) 0 0}
.ov-now .g{display:block;font:500 calc(17 * var(--m))/1.2 var(--font-body);color:var(--grn)}
.ov-now b{display:block;margin-top:calc(8 * var(--m));font:600 calc(26 * var(--m))/1.1 var(--font-body);color:#fff}
.ov-now small{display:block;margin-top:calc(8 * var(--m));font:400 calc(18 * var(--m))/1.1 var(--font-body);color:#f0e8ff}
.ov-up{position:absolute;left:calc(573 * var(--m));top:calc(22 * var(--m));width:calc(256 * var(--m))}
.ov-up .h{display:block;font:600 calc(19 * var(--m))/1 var(--font-body);color:#fff;margin-bottom:calc(16 * var(--m))}
.ov-up ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:calc(11 * var(--m))}
.ov-up li{display:grid;grid-template-columns:calc(48 * var(--m)) 1fr auto;align-items:center;height:calc(56 * var(--m));padding:0 calc(14 * var(--m)) 0 calc(6 * var(--m));background:#1b0490;font:500 calc(17 * var(--m))/1.2 var(--font-body);color:#fff}
.ov-up li .n{width:calc(36 * var(--m));height:calc(36 * var(--m));display:grid;place-items:center;border-radius:calc(5 * var(--m));background:#2d0ab4;box-shadow:inset 0 0 0 calc(1.6 * var(--m)) #cdb4ff;font:400 calc(18 * var(--m))/1 var(--font-body)}
.ov-up li small{display:block;font-size:calc(15 * var(--m));font-weight:400;color:#e4d8ff}
.ov-up li .d{font-weight:400;font-size:calc(16 * var(--m))}
.ov-up li.empty{color:#9d8ad8}
.b-row3{display:grid;grid-template-columns:calc(618 * var(--m)) calc(471 * var(--m)) 1fr;column-gap:calc(14 * var(--m));margin-top:calc(12 * var(--m));height:calc(467 * var(--m))}
.b-row3 > div{padding:calc(24 * var(--m)) calc(18 * var(--m)) 0 calc(24 * var(--m))}
.b-row3 h2{font-size:calc(27 * var(--m))}
.b-row3 p{margin:calc(10 * var(--m)) 0 0;font:400 calc(17 * var(--m))/1.35 var(--font-body);color:#f3ecff}
.b-inv p{width:calc(470 * var(--m))}
.inv{display:grid;grid-template-columns:calc(184 * var(--m)) calc(183 * var(--m)) calc(197 * var(--m));grid-template-rows:repeat(3,calc(66 * var(--m)));grid-auto-rows:calc(94 * var(--m));gap:calc(12 * var(--m)) calc(11 * var(--m));margin:calc(16 * var(--m)) 0 0 calc(-6 * var(--m))}
.inv > div{display:grid;grid-template-columns:calc(52 * var(--m)) 1fr;align-items:center;padding-left:calc(16 * var(--m));background:#4a10c6;transition:background-color .2s var(--ease-settle)}
.inv .ck{width:calc(30 * var(--m));height:calc(30 * var(--m));border-radius:calc(5 * var(--m));background:#8f4bf0;display:grid;place-items:center;box-shadow:inset 0 0 0 calc(1.6 * var(--m)) #eadcff}
.inv .ck svg{width:72%;height:72%}
.inv b{display:block;white-space:nowrap;letter-spacing:-.01em;font:500 calc(15.5 * var(--m))/1.25 var(--font-body);color:#fff}
.inv small{display:block;margin-top:calc(5 * var(--m));font:400 calc(15 * var(--m))/1.2 var(--font-body);color:#e4d8ff}
.inv > div.lk{background-color:#1c0384;background-image:linear-gradient(90deg,#cdb4ff 55%,transparent 0),linear-gradient(90deg,#cdb4ff 55%,transparent 0),linear-gradient(0deg,#cdb4ff 55%,transparent 0),linear-gradient(0deg,#cdb4ff 55%,transparent 0);background-size:calc(11 * var(--m)) max(1px,calc(1.6 * var(--m))),calc(11 * var(--m)) max(1px,calc(1.6 * var(--m))),max(1px,calc(1.6 * var(--m))) calc(11 * var(--m)),max(1px,calc(1.6 * var(--m))) calc(11 * var(--m));background-position:0 0,0 100%,0 0,100% 0;background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;border-radius:calc(8 * var(--m))}
.inv > div.lk .ck{background:none;box-shadow:none}
.inv > div.lk b{font-weight:400;color:#f0e8ff}
.inv > div.lk small{color:#d8ccff}
.an{position:relative;height:calc(360 * var(--m));margin-top:calc(14 * var(--m))}
.an-qr{position:absolute;left:0;top:calc(103 * var(--m));width:calc(104 * var(--m));text-align:center}
.an-qr .qr{width:calc(103 * var(--m));height:calc(103 * var(--m));padding:calc(6 * var(--m))}
.an-qr span{display:block;margin-top:calc(14 * var(--m));font:400 calc(16 * var(--m))/1.25 var(--font-body);color:#fff}
.an-arrows{position:absolute;left:0;top:0;width:calc(440 * var(--m));height:calc(380 * var(--m));pointer-events:none}
.an-b{position:absolute;left:calc(134 * var(--m));width:calc(282 * var(--m));padding:0!important;background:#15026f;text-align:center}
.an-b > span{display:block;margin-top:calc(9 * var(--m));font:400 calc(16 * var(--m))/1.2 var(--font-body);color:#fff}
.an-b.n{top:0;height:calc(90 * var(--m))}
.an-b.n b{display:block;margin:calc(8 * var(--m)) auto 0;width:calc(252 * var(--m));height:calc(40 * var(--m));padding:0!important;font:600 calc(20 * var(--m))/calc(36 * var(--m)) var(--font-body);color:#fff;background:#1a0478}
.an-b.c{top:calc(115 * var(--m));height:calc(85 * var(--m))}
.an-b.c b{display:block;margin-top:calc(4 * var(--m));font-size:calc(36 * var(--m));line-height:1;color:var(--vio);letter-spacing:.02em}
.an-b.p{top:calc(223 * var(--m));height:calc(137 * var(--m));overflow:hidden}
.an .mini{position:absolute;left:0;right:0;bottom:0;height:calc(100 * var(--m));overflow:hidden}
.an .mini img{position:absolute;left:calc(-2 * var(--m));top:calc(6 * var(--m));width:calc(342 * var(--m));height:auto;margin-left:calc(-28 * var(--m))}
.an .mini svg{position:absolute;left:calc(20 * var(--m));top:calc(-2 * var(--m));width:calc(242 * var(--m));height:calc(114 * var(--m));overflow:visible}
.an-b + .dn{position:absolute;left:calc(268 * var(--m));width:calc(14 * var(--m));height:calc(14 * var(--m));background:#c490ff;clip-path:polygon(25% 0,75% 0,75% 45%,100% 45%,50% 100%,0 45%,25% 45%)}
.an-b.n + .dn{top:calc(96 * var(--m))}.an-b.c + .dn{top:calc(205 * var(--m))}
.b-open .card{position:relative;margin:calc(28 * var(--m)) 0 0 calc(63 * var(--m));width:calc(256 * var(--m));height:calc(155 * var(--m));padding:calc(22 * var(--m)) calc(22 * var(--m)) 0!important;background:#1d0395;text-align:center}
.b-open .card .xx{position:absolute;right:calc(12 * var(--m));top:calc(4 * var(--m));font:300 calc(28 * var(--m))/1 var(--font-body);color:#e8dcff}
.b-open .card .t{display:block;font:400 calc(17 * var(--m))/1.3 var(--font-body);color:#fff}
.b-open .card .bt{position:absolute;left:calc(15 * var(--m));bottom:calc(14 * var(--m));width:calc(226 * var(--m));height:calc(40 * var(--m));border-radius:calc(7 * var(--m));background:#b77cf6;color:#18056e;font:500 calc(21 * var(--m))/calc(40 * var(--m)) var(--font-body)}
.b-open .hr{margin:calc(16 * var(--m)) 0 0 calc(-1 * var(--m));width:calc(373 * var(--m))}
.b-open .lbl2{display:block;margin-top:calc(13 * var(--m));font:400 calc(16 * var(--m))/1.2 var(--font-body);color:#e4d8ff}
.b-open .card.e{margin-top:calc(8 * var(--m));height:calc(148 * var(--m));padding-top:calc(18 * var(--m))!important;transition:box-shadow .2s var(--ease-settle)}
.b-open .card.e b{display:block;font:600 calc(19 * var(--m))/1.2 var(--font-body);color:#fff;margin-bottom:calc(8 * var(--m))}
.b-open .card.e .t{font-size:calc(14.5 * var(--m))}
.b-open .card.e.live{box-shadow:0 0 calc(18 * var(--m)) rgba(111,224,154,.55)}
.box .b-cfg:hover,.box .b-tracks:hover,.box .b-inv:hover,.box .b-code:hover,.box .b-open:hover,.box .b-prev:hover,.box .b-stream:hover{box-shadow:0 0 calc(22 * var(--m)) rgba(58,241,190,.3)}
.box .b-cfg,.box .b-tracks,.box .b-inv,.box .b-code,.box .b-open,.box .b-prev,.box .b-stream{transition:box-shadow .15s var(--ease-settle)}

/* ---------- below 1024: one column ---------- */
@media (max-width:1023px){
  .box{--m:1px}
  .b-one,.b-two{display:block;height:auto;padding:16px 0 0}
  .b-head{height:auto;padding-bottom:12px}
  .b-title{font-size:40px}.b-title.st{font-size:34px}
  .b-house{position:static;margin-top:10px;font-size:15px}
  .b-cfg,.b-tracks,.b-prev,.b-stream,.b-row3 > div{height:auto;padding:16px;margin-top:12px}
  .b-cfg-row{grid-template-columns:1fr;row-gap:12px}
  .b-grid{grid-template-columns:1fr;margin:12px 0 0}
  .b-hint{position:static;margin-top:6px}
  .b-prev{overflow:hidden}
  .mach{position:relative;left:auto;top:auto;zoom:.54}
  .b-stream{display:block}
  .st-l{padding:0}.st-p{width:auto}
  .st-link{flex-wrap:wrap;height:auto}.st-link .url{width:100%;height:52px}.st-link .copied{height:48px}
  .ovl{height:300px;margin-top:16px}
  .ov-up{left:auto;right:10px;width:48%}.ov-now{left:10px;width:48%}
  .ov-arch{width:100%}
  .b-row3{display:block;height:auto}
  .inv{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:64px;margin:12px 0 0}
    .an{height:380px;zoom:.74}
  .b-open .card{margin-left:0;max-width:100%}
  .b-open .hr{width:100%}
  .b-open{padding-bottom:16px!important}
}