/* Fuse: the board. Written from scratch for this project.
   Room comes from his HUD reference (art/ref/reference-hud.jpg), objects and heat from his X kit. */

@font-face{font-family:"Chakra";src:url("/font/chakra-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Chakra";src:url("/font/chakra-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Chakra";src:url("/font/chakra-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Departure";src:url("/font/departure.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  --ink:#010101;
  --field:#0b0b0b;
  --field2:#131313;
  --hair:#1d3c25;
  --hair2:#122a18;
  --green:#27f957;
  --green-mid:#59d977;
  --green-dim:#298a3b;
  --cream:#e8ece8;
  --mute:#7d8a7f;
  --amber:#fba748;
  --orange:#f48743;
  --hot:#ed7544;
  --rose:#b73b58;
  --d:"Chakra","Trebuchet MS",sans-serif;
  --m:"Departure","Courier New",monospace;
  --rail:30px;
  --strip:40px;
  font-synthesis:none;
}

*{box-sizing:border-box}
html{background:var(--ink)}
body{
  margin:0;padding:0 var(--rail);
  background:var(--ink);
  color:var(--cream);
  font-family:var(--d);font-weight:500;font-size:19px;line-height:1.5;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:-6%;z-index:-2;
  background:#000 url("/img/wallpaper.webp") center/cover no-repeat;
  filter:blur(26px) saturate(.5) brightness(.5);
  opacity:.5;
  animation:drift 240s linear infinite;
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(130% 90% at 50% 0%,rgba(0,0,0,.25),rgba(0,0,0,.92) 78%);
}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1.04)}50%{transform:translate3d(-2.2%,1.6%,0) scale(1.1)}100%{transform:translate3d(0,0,0) scale(1.04)}}

/* ---- the side rails, the reference's dotted LED edges ------------------- */
.rail{position:fixed;top:0;bottom:0;width:var(--rail);z-index:3;pointer-events:none}
.rail-l{left:0;border-right:1px solid var(--hair2)}
.rail-r{right:0;border-left:1px solid var(--hair2)}
.rail::before{
  content:"";position:absolute;top:28px;bottom:28px;left:50%;width:5px;margin-left:-2.5px;
  background:repeating-linear-gradient(180deg,var(--green-dim) 0 5px,transparent 5px 26px);
  opacity:.5;
}
.rail-l::after,.rail-r::after{
  content:"";position:absolute;left:50%;width:7px;height:7px;margin-left:-3.5px;top:44px;
  background:var(--green);box-shadow:0 0 10px var(--green);
  animation:blink 3.6s steps(1) infinite;
}
.rail-r::after{top:auto;bottom:44px;animation-delay:1.8s}
@keyframes blink{0%,60%{opacity:1}61%,100%{opacity:.18}}

/* ---- the grid ---------------------------------------------------------- */
.board{
  display:grid;grid-template-columns:repeat(12,1fr);
  border-left:1px solid var(--hair2);border-top:1px solid var(--hair2);
  max-width:2100px;margin:0 auto;
}
/* the spans live here, never inline: an inline custom property beats every media query */
.mod-head{--span:7}
.mod-subject{--span:2}
.mod-clock{--span:3}
.mod-forecast{--span:5}
.mod-gauges{--span:4}
.mod-pot{--span:3}
.mod-slots{--span:8}
.mod-path{--span:4}
.mod-nav{--span:12}
.mod-ident{--span:6}
.mod-rack{--span:6}
.mod-light{--span:12}
.mod-spent{--span:12}
.mod-claim{--span:12}
.mod-manual{--span:12}
.mod{
  grid-column:span var(--span,12);
  position:relative;
  background:var(--field);
  border-right:1px solid var(--hair2);
  border-bottom:1px solid var(--hair2);
  min-width:0;
}
.mod.cut{background:transparent;border-right:0;border-bottom:0}
.mod.cut::before,.mod.cut::after{
  content:"";position:absolute;inset:0;
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%);
}
.mod.cut::before{background:var(--hair2)}
.mod.cut::after{inset:1px;background:var(--field)}
.mod.cut>*{position:relative;z-index:1}

/* ---- the module title strip -------------------------------------------- */
.strip{
  display:flex;align-items:center;gap:12px;overflow:hidden;
  height:var(--strip);padding:0 28px;
  border-bottom:1px solid var(--hair2);
  background:linear-gradient(180deg,#121912,#0a0f0a);
}
.strip b{
  flex:0 1 auto;min-width:0;font-family:var(--m);font-weight:400;font-size:22px;line-height:1.2;padding:3px 0;
  color:var(--green-mid);text-transform:uppercase;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sleeper{flex:0 1 26px;min-width:10px;height:5px;background:var(--green-dim);opacity:.55}
.sleeper:last-child{margin-left:auto}
.dots{flex:0 1 26px;min-width:12px;height:5px;background:radial-gradient(circle at 4px 50%,var(--green-dim) 2px,transparent 2px),radial-gradient(circle at 13px 50%,var(--green-dim) 2px,transparent 2px),radial-gradient(circle at 22px 50%,var(--green-dim) 2px,transparent 2px)}
.body{padding:22px 24px}

/* ---- shared type ------------------------------------------------------- */
.label{
  font-family:var(--m);font-size:22px;line-height:1.1;color:var(--green);
  text-transform:uppercase;margin:0 0 14px;
}
.eyebrow{font-family:var(--m);font-size:22px;color:var(--green-dim);margin:0 0 8px;text-transform:uppercase}
.code{font-family:var(--m);font-size:22px;color:var(--mute);margin:0 0 18px}
.sect{font-family:var(--d);font-weight:700;font-size:40px;line-height:1.05;letter-spacing:-.02em;margin:0 0 14px}
.sect-sub{font-size:20px;color:var(--mute);margin:0 0 30px;max-width:62ch}

.mod-head .body{display:flex;flex-direction:column;justify-content:center;gap:22px;height:100%}
.wordmark{
  font-family:var(--d);font-weight:700;font-size:clamp(54px,4.6vw,80px);line-height:.92;
  letter-spacing:-.045em;margin:0 0 14px;color:var(--cream);
  text-shadow:0 0 42px rgba(251,167,72,.28);
}
.premise{font-size:21px;line-height:1.45;margin:0;max-width:48ch;color:var(--cream)}

/* ---- band A: the forecast ---------------------------------------------- */
.hair{flex:1;height:1px;background:var(--hair2)}
.forecast{display:grid;grid-auto-rows:1fr;gap:0;margin:0;padding:0;list-style:none;height:100%}
.fc{
  display:flex;align-items:center;gap:20px;
  padding:10px 0;border-bottom:1px solid var(--hair2);min-width:0;
}
.fc:last-child{border-bottom:0}
.fc-tick{flex:1;min-width:0;font-family:var(--m);font-size:22px;color:var(--green);text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fc-time{flex:0 0 auto;padding:4px 8px;font-family:var(--d);font-weight:600;font-size:32px;color:var(--cream);font-variant-numeric:tabular-nums}
.fc.empty .fc-tick,.fc.empty .fc-time{color:var(--mute)}
.fc.empty .cart{opacity:.4}

.cart{display:block;flex:0 0 auto;width:72px;height:72px;object-fit:contain}
.cart.big{width:148px;height:148px}
.lit .cart,.cart.lit{filter:drop-shadow(0 0 16px rgba(251,167,72,.5));animation:breathe 3.4s ease-in-out infinite}
@keyframes breathe{0%,100%{filter:drop-shadow(0 0 12px rgba(251,167,72,.38))}50%{filter:drop-shadow(0 0 26px rgba(251,167,72,.62))}}

/* ---- band A right: the subject ----------------------------------------- */
.center{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;height:100%;min-width:0}
.subject-tick{font-family:var(--m);font-size:24px;color:var(--green);margin:0;text-transform:uppercase;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.state-word{font-family:var(--m);font-size:22px;margin:0;color:var(--mute);text-transform:uppercase}
.state-armed{color:var(--green)}
.state-burning{color:var(--amber)}
.state-critical{color:var(--hot)}
.state-spent{color:var(--rose)}

/* ---- band B: the fee path ---------------------------------------------- */
.path-art{margin:0 0 18px;background:#070707;border:1px solid var(--hair2);padding:12px}
.path-art img{display:block;width:100%;height:auto;opacity:.82}
.path-rules{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.path-rules li{display:flex;align-items:baseline;gap:16px}
.path-rules b{
  font-family:var(--d);font-weight:700;font-size:32px;line-height:1.15;padding:2px 0;color:var(--amber);
  flex:0 0 62px;text-align:right;letter-spacing:-.03em;
}
.path-rules span{font-size:17px;color:var(--cream)}

/* ---- band B: the gauges ------------------------------------------------ */
.gauges{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0;padding:0;list-style:none;height:100%;align-content:center}
.gauge{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0}
.g-val,.g-name{font-family:var(--m);font-size:20px;color:var(--green);white-space:nowrap;max-width:100%;overflow:hidden}
.g-tube{
  position:relative;width:100%;max-width:74px;height:168px;
  border:1px solid var(--hair);border-radius:9px;background:#060806;
  background-image:repeating-linear-gradient(180deg,rgba(39,249,87,.16) 0 1px,transparent 1px 8px);
  overflow:hidden;
}
.g-fill{
  position:absolute;left:3px;right:3px;bottom:3px;border-radius:6px;
  background:var(--green);
  background-image:repeating-linear-gradient(180deg,rgba(0,0,0,.42) 0 1px,transparent 1px 8px);
  box-shadow:0 0 16px rgba(39,249,87,.45);transition:height .6s linear;
}
.gauge.burning .g-fill{background-color:var(--amber);box-shadow:0 0 16px rgba(251,167,72,.5)}
.gauge.burning .g-val,.gauge.burning .g-name{color:var(--amber)}
.gauge.critical .g-fill{background-color:var(--hot);box-shadow:0 0 18px rgba(237,117,68,.6)}
.gauge.critical .g-val,.gauge.critical .g-name{color:var(--hot)}
.gauge.empty .g-val,.gauge.empty .g-name{color:var(--mute)}

/* ---- band B right: the LED clock --------------------------------------- */
.led,.led-note{position:relative;z-index:1}
.led{
  font-family:var(--d);font-weight:700;font-size:clamp(72px,6.4vw,122px);line-height:.86;
  margin:0;color:var(--green);letter-spacing:-.03em;
  text-shadow:0 0 34px rgba(39,249,87,.3);font-variant-numeric:tabular-nums;
}
.led.burning{color:var(--amber);text-shadow:0 0 34px rgba(251,167,72,.34)}
.led.critical{color:var(--hot);text-shadow:0 0 38px rgba(237,117,68,.44)}
.led.cold{color:var(--mute);text-shadow:none}
.mod-clock.cold .led{color:#2f6a3d;text-shadow:none}
.mod-clock.cold .dial{opacity:.3}
.led-note{font-family:var(--m);font-size:22px;color:var(--mute);margin:6px 0 0;text-transform:uppercase}
.mod-clock .body{position:relative;overflow:hidden}
.dial{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:.22;pointer-events:none;z-index:0}
.dial img{display:block;width:280px;height:280px;object-fit:contain;animation:sweep 60s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}

/* ---- band C: the slots ------------------------------------------------- */
.slots{list-style:none;margin:0;padding:0}
.slot{
  display:grid;grid-template-columns:64px 18px minmax(0,1fr) 300px;align-items:center;gap:18px;
  padding:13px 0;border-bottom:1px solid var(--hair2);
}
.slot:last-child{border-bottom:0}
.badge{
  display:flex;align-items:center;justify-content:center;padding:4px 8px;
  width:64px;height:50px;border:1px solid var(--green-dim);border-radius:10px;
  font-family:var(--d);font-weight:600;font-size:26px;color:var(--cream);background:#060806;
}
.slot.live .badge{border-color:var(--green);box-shadow:inset 0 0 14px rgba(39,249,87,.14)}
.arrow{font-size:20px;color:var(--green-dim);line-height:1}
.slot-main{min-width:0}
.slot-name{
  font-family:var(--m);font-size:22px;color:var(--green);text-transform:uppercase;
  margin:0 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.slot-sub{font-size:17px;color:var(--mute);margin:0 0 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wick{position:relative;height:9px;border:1px solid var(--hair);border-radius:5px;background:#060806;overflow:hidden}
.wick-fill{position:absolute;left:0;top:0;bottom:0;background:var(--green);box-shadow:0 0 12px rgba(39,249,87,.5);transition:width .9s linear}
.slot.burning .wick-fill{background:var(--amber);box-shadow:0 0 12px rgba(251,167,72,.55)}
.slot.critical .wick-fill{background:var(--hot);box-shadow:0 0 14px rgba(237,117,68,.65)}
.slot-right{display:flex;align-items:center;justify-content:flex-end;gap:14px}
.key.small{min-height:44px;padding:0 18px;font-size:20px;white-space:nowrap}
.key[hidden]{display:none}
.slot-time{font-family:var(--d);font-weight:600;font-size:30px;padding:4px 8px;white-space:nowrap;color:var(--cream);font-variant-numeric:tabular-nums}
.slot.empty .slot-name,.slot.empty .slot-sub,.slot.empty .slot-time{color:var(--mute)}
.slot.empty .badge{border-color:var(--hair);color:var(--mute)}
.slots-note{font-family:var(--m);font-size:20px;color:var(--mute);margin:18px 0 0}

/* ---- band C right: the pot tube ---------------------------------------- */
.tube{
  position:relative;width:84px;height:178px;border:1px solid var(--hair);border-radius:12px;
  background:#060806;overflow:hidden;
}
.tube-fill{
  position:absolute;left:4px;right:4px;bottom:4px;border-radius:9px;
  background:var(--amber);
  background-image:repeating-linear-gradient(180deg,rgba(0,0,0,.4) 0 1px,transparent 1px 9px);
  box-shadow:0 0 22px rgba(251,167,72,.45);transition:height .8s linear;
}
.tube-mark{position:absolute;left:0;right:0;height:1px;background:var(--hair)}
.pot-val{font-family:var(--d);font-weight:700;font-size:48px;line-height:1.1;padding:3px 0;margin:12px 0 0;color:var(--amber);font-variant-numeric:tabular-nums}
.pot-unit{font-family:var(--m);font-size:22px;color:var(--mute);margin:8px 0 0;text-transform:uppercase}

/* ---- band D: the icon grid --------------------------------------------- */
.icons{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin:0;padding:0;list-style:none}
.icons li{border-right:1px solid var(--hair2)}
.icons li:last-child{border-right:0}
.icon{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:16px 18px;text-decoration:none;color:var(--green-mid);
  font-family:var(--m);font-size:22px;text-transform:uppercase;text-align:center;
}
.br{
  position:relative;display:block;width:80px;height:80px;
  --bk:var(--green-dim);
  background:
    linear-gradient(var(--bk),var(--bk)) left    top/24px 2px no-repeat,
    linear-gradient(var(--bk),var(--bk)) left    top/2px 24px no-repeat,
    linear-gradient(var(--bk),var(--bk)) right   top/24px 2px no-repeat,
    linear-gradient(var(--bk),var(--bk)) right   top/2px 24px no-repeat,
    linear-gradient(var(--bk),var(--bk)) left  bottom/24px 2px no-repeat,
    linear-gradient(var(--bk),var(--bk)) left  bottom/2px 24px no-repeat,
    linear-gradient(var(--bk),var(--bk)) right bottom/24px 2px no-repeat,
    linear-gradient(var(--bk),var(--bk)) right bottom/2px 24px no-repeat;
  transition:--bk .15s ease;
}
.br img{position:absolute;inset:14px;width:52px;height:52px;object-fit:contain}
.icon:hover,.icon:focus-visible{color:var(--green)}
.icon:hover .br,.icon:focus-visible .br{--bk:var(--green)}
.icon:hover img{transform:scale(1.06);filter:drop-shadow(0 0 12px rgba(39,249,87,.55))}
.icon img{transition:transform .18s ease,filter .18s ease}

/* ---- band E: ident ------------------------------------------------------ */
.ident{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;align-items:start}
.portrait{border:1px solid var(--hair);background:#060806;padding:16px}
.portrait img{display:block;width:100%;height:auto;image-rendering:pixelated;filter:drop-shadow(0 0 20px rgba(251,167,72,.4))}
.ident-name{font-family:var(--d);font-weight:700;font-size:38px;margin:0 0 22px;letter-spacing:-.02em}
.ident-name span{color:var(--amber);font-size:30px;margin-left:10px}
.mint{
  font-family:var(--m);font-size:22px;line-height:1.45;color:var(--cream);
  margin:0 0 22px;word-break:break-all;overflow-wrap:anywhere;min-width:0;
  background:#060806;border:1px solid var(--hair);padding:18px 20px;
}
.mint.waiting{color:var(--mute)}
.keys{display:flex;flex-wrap:wrap;gap:14px}
.key{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:56px;padding:0 26px;border:1px solid var(--green-dim);background:#071007;
  font-family:var(--m);font-size:22px;color:var(--green);text-transform:uppercase;
  text-decoration:none;cursor:pointer;transition:background .15s ease,border-color .15s ease;
}
.key.mark{width:68px;padding:0;background:var(--cream);border-color:var(--cream)}
.key.mark:hover,.key.mark:focus-visible{background:#fff;border-color:#fff}
.key.wide{min-width:140px}
.key img{width:30px;height:30px;object-fit:contain;border-radius:3px}
.key:hover,.key:focus-visible{background:#0d1c0d;border-color:var(--green)}
.key:active{transform:translateY(1px)}
.key[aria-disabled="true"],.key:disabled{opacity:.42;cursor:not-allowed;border-color:var(--hair);color:var(--mute)}
.key[aria-disabled="true"]:hover{background:#071007;border-color:var(--hair)}
.copy-say{font-family:var(--m);font-size:22px;color:var(--green);margin:18px 0 0;min-height:24px}

/* ---- band E: the rack --------------------------------------------------- */
.rack{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0;padding:0;list-style:none}
.rk{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 12px;border-right:1px solid var(--hair2);min-width:0}
.rk:last-child{border-right:0}
.rk .cart{width:72px;height:72px;opacity:.55}
.rk-tick{font-family:var(--m);font-size:22px;color:var(--rose);text-transform:uppercase;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk-pot{font-family:var(--d);font-weight:600;font-size:26px;color:var(--cream)}
.rk.empty .rk-tick,.rk.empty .rk-pot{color:var(--mute)}

/* ---- light a coin -------------------------------------------------------- */
.light{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.field{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.field>span{
  font-family:var(--m);font-size:22px;color:var(--green);text-transform:uppercase;
  flex:0 0 190px;
}
.field input{
  flex:1;min-width:0;height:58px;padding:0 20px;
  background:#060806;border:1px solid var(--hair);color:var(--cream);
  font-family:var(--m);font-size:22px;
}
.field input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pick{display:flex;align-items:center;gap:16px;flex:1;min-width:0}
.pick .key{flex:0 0 auto}
.pick em{font-style:normal;font-family:var(--m);font-size:20px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.field input:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.field em{font-family:var(--m);font-size:22px;color:var(--mute);font-style:normal;flex:0 0 auto}
.act{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:62px;padding:0 40px;margin-top:10px;
  background:var(--green);color:#041004;border:0;
  font-family:var(--m);font-size:22px;text-transform:uppercase;cursor:pointer;
}
.act:hover,.act:focus-visible{background:#55ff7f}
.act:disabled{background:#132516;color:var(--mute);cursor:not-allowed}
.say{font-family:var(--m);font-size:22px;color:var(--mute);margin:22px 0 0}
.light-steps{list-style:none;margin:0;padding:0;display:grid;gap:22px;counter-reset:s}
.light-steps li{display:flex;gap:22px;align-items:baseline}
.light-steps b{font-family:var(--m);font-size:26px;color:var(--amber);flex:0 0 46px}
.light-steps span{font-size:19px;color:var(--cream)}

/* ---- spent + claim ------------------------------------------------------- */
.spentwall{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0;margin:0;padding:0;list-style:none}
.sp{display:flex;flex-direction:column;align-items:center;gap:12px;padding:26px 18px;border-right:1px solid var(--hair2);border-bottom:1px solid var(--hair2);min-width:0}
.sp .cart{width:84px;height:84px;opacity:.6}
.sp-tick{font-family:var(--m);font-size:22px;color:var(--rose);text-transform:uppercase}
.sp-pot{font-family:var(--d);font-weight:600;font-size:28px;color:var(--cream)}
.sp-note{font-family:var(--m);font-size:22px;color:var(--mute)}
.claim{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.claims{list-style:none;margin:0;padding:0;display:grid;gap:0}
.cl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:center;padding:22px 0;border-bottom:1px solid var(--hair2)}
.cl-tick{font-family:var(--m);font-size:22px;color:var(--green);text-transform:uppercase;margin:0 0 6px}
.cl-sub{font-size:18px;color:var(--mute);margin:0}

/* ---- manual -------------------------------------------------------------- */
.rules{margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
.rules>div{padding:26px 32px 26px 0;border-bottom:1px solid var(--hair2);min-width:0}
.rules>div:nth-child(odd){border-right:1px solid var(--hair2);padding-right:40px}
.rules>div:nth-child(even){padding-left:40px}
.rules dt{font-family:var(--m);font-size:22px;color:var(--green);text-transform:uppercase;margin:0 0 12px}
.rules dd{margin:0;font-size:19px;color:var(--cream)}
.risk{font-family:var(--m);font-size:22px;color:var(--mute);margin:34px 0 0;max-width:72ch}

/* ---- widths -------------------------------------------------------------- */
@media (max-width:1500px){
  .mod-head{--span:7}.mod-subject{--span:2}.mod-clock{--span:3}
  .mod-forecast{--span:5}.mod-gauges{--span:4}.mod-pot{--span:3}
  .mod-slots{--span:8}.mod-path{--span:4}
  .mod-ident{--span:6}.mod-rack{--span:6}
  .slot{grid-template-columns:64px 18px minmax(0,1fr) 260px}
}
@media (max-width:1180px){
  .mod-head,.mod-subject,.mod-forecast,.mod-path,.mod-gauges,.mod-clock,.mod-slots,.mod-pot,.mod-ident,.mod-rack{--span:12}
  .mod-subject{--span:5}.mod-clock{--span:7}
  .mod-gauges{--span:7}.mod-pot{--span:5}
  .light,.claim{grid-template-columns:minmax(0,1fr);gap:40px}
  .rules{grid-template-columns:minmax(0,1fr)}
  .rules>div:nth-child(odd){border-right:0;padding-right:0}
  .rules>div:nth-child(even){padding-left:0}
}
@media (max-width:760px){
  :root{--rail:16px;--strip:42px}
  body{font-size:18px}
  .body{padding:22px}
  .strip{padding:0 18px}
  .strip b{font-size:22px}
  .mod-subject,.mod-clock,.mod-gauges,.mod-pot{--span:12}
  .fc{gap:16px;padding:12px 0}
  .fc .cart{width:62px;height:62px}
  .icons{grid-template-columns:repeat(3,1fr)}
  .icons li{border-bottom:1px solid var(--hair2)}
  .icons li:nth-child(3n){border-right:0}
  .icons li:nth-last-child(-n+2){border-bottom:0}
  .ident{grid-template-columns:1fr;gap:24px}
  .portrait{max-width:200px}
  .rack{grid-template-columns:repeat(2,1fr)}
  .rk:nth-child(2n){border-right:0}
  .rk:nth-child(-n+2){border-bottom:1px solid var(--hair2)}
  .slot{grid-template-columns:62px minmax(0,1fr);grid-template-areas:"badge main" "right right";gap:16px}
  .badge{grid-area:badge;width:62px;height:52px}
  .arrow{display:none}
  .slot-main{grid-area:main}
  .slot-right{grid-area:right;justify-content:space-between}
  .field{flex-wrap:wrap;gap:10px}
  .field>span{flex:0 0 100%}
  .sect{font-size:32px}
  .dial img{width:120px;height:120px}
  .icon{padding:12px 6px;gap:8px}
  .br{width:64px;height:64px}
  .br img{inset:11px;width:42px;height:42px}
  .fc-time{font-size:26px}
  .fc .cart{width:54px;height:54px}
  .g-tube{height:140px}
  .tube{width:72px;height:150px}
  .led{font-size:clamp(64px,22vw,96px)}
  .path-rules b{font-size:28px;flex-basis:54px}
  .light-steps b{flex-basis:36px}
  .field>span{flex:0 0 100%}
}
@media (max-width:360px){
  .body{padding:16px}
  :root{--rail:12px}
  .fc-time{font-size:22px}
  .icons{grid-template-columns:repeat(2,1fr)}
  .icons li:nth-child(3n){border-right:1px solid var(--hair2)}
  .icons li:nth-child(2n){border-right:0}
}

@media (prefers-reduced-motion:reduce){
  body::before,.rail-l::after,.rail-r::after,.dial img,.cart{animation:none!important}
  .g-fill,.wick-fill,.tube-fill{transition:none}
}