/* Cable Bench: the bench look. A repair desk seen from above. Ported from the approved redesign canvas. */
:root{
  --mat0:#0C211E;--mat1:#143530;--mat2:#1D4A42;
  --line:rgba(140,215,195,.09);
  --inkm:#EAF5F1;--mutedm:#A3C7BC;
  --alloyA:#EEF3F1;--alloyB:#BCCAC6;--alloyEdge:#7C908B;
  --ink:#10302A;--muted:#3A5A52;
  --brassA:#FFE79A;--brassB:#E8B54C;--brassC:#C48F2E;--brassD:#8F6218;--brassInk:#3B2706;
  --ledG:#3DE58F;--ledA:#FFB020;--ledR:#FF5A4D;
  --paper:#F4F7F5;--paperInk:#1B2B27;--paperMuted:#4A625B;
  --cb-a:#22B08A;--cb-b:#119474;--cb-c:#0A6F58;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;background:var(--mat0)}
body{margin:0;color:var(--inkm);font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;line-height:1.4;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;min-height:100dvh}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
h1,h2,p{margin:0}
h1:focus{outline:none}
.bench{position:relative;min-height:100vh;min-height:100dvh;overflow-x:hidden;
  background:radial-gradient(120% 60% at 15% -5%,rgba(255,205,125,.26),rgba(255,205,125,0) 60%),radial-gradient(100% 55% at 110% 105%,rgba(0,0,0,.45),rgba(0,0,0,0) 70%),linear-gradient(170deg,var(--mat1),var(--mat0));background-attachment:fixed}
.bench::before{content:'';position:fixed;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:26px 26px}
/* The ruler edge of the bench mat */
.bench::after{content:'';position:fixed;left:0;top:0;bottom:0;width:14px;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(200,240,228,.55) 0 1.5px,transparent 1.5px 40px),repeating-linear-gradient(to bottom,rgba(200,240,228,.3) 0 1px,transparent 1px 8px);background-size:14px 100%,8px 100%;background-repeat:no-repeat;background-color:rgba(0,0,0,.18)}
.col{position:relative;z-index:1;width:100%;max-width:430px;margin:0 auto;min-height:100vh;min-height:100dvh;
  padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(30px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:14px}
.display{font-family:'Chakra Petch',system-ui,sans-serif;font-weight:600}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:500;font-variant-numeric:tabular-nums}
.row-flex{display:flex;align-items:center;gap:14px}
.grow{flex:1 1 0;min-width:0}
.spacer{flex:1 1 0}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.round{display:flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;border:0;border-radius:999px;color:var(--ink);cursor:pointer;position:relative;
  background:linear-gradient(var(--alloyA),var(--alloyB));box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(16,48,42,.18),0 3px 8px rgba(0,0,0,.4);
  transition-property:transform,box-shadow;transition-duration:120ms;transition-timing-function:ease-out}
.round svg{width:24px;height:24px}
.round:active{transform:scale(.95)}
.round[disabled]{opacity:.5;cursor:default}
.badge{position:absolute;right:-4px;top:-5px;min-width:22px;height:22px;padding:0 5px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  font:600 12px 'IBM Plex Mono',monospace;color:var(--brassInk);background:linear-gradient(var(--brassA),var(--brassB));box-shadow:0 0 0 2px var(--mat1),0 0 8px rgba(255,176,32,.6)}
.badge[hidden]{display:none}
.plate{position:relative;border-radius:20px;color:var(--ink);background:linear-gradient(165deg,var(--alloyA),var(--alloyB));
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.35),0 10px 22px rgba(0,0,0,.42),0 2px 0 var(--alloyEdge)}
.screw{position:absolute;width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#9EB0AB 60%,#5F746F);box-shadow:0 1px 1px rgba(0,0,0,.5)}
.screw::after{content:'';position:absolute;left:2px;right:2px;top:5px;height:1.5px;background:#44564F;transform:rotate(-30deg)}
.brass,.alloy-btn{display:flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:999px;cursor:pointer;font-weight:600;font-size:17px;min-height:48px;padding:0 20px;
  transition-property:transform,box-shadow,opacity;transition-duration:120ms;transition-timing-function:ease-out}
.brass{color:var(--brassInk);font-family:'Chakra Petch',system-ui,sans-serif;
  background:linear-gradient(var(--brassA),var(--brassB) 48%,var(--brassC));box-shadow:inset 0 2px 0 rgba(255,255,255,.65),0 5px 0 var(--brassD),0 12px 20px rgba(0,0,0,.45)}
.brass:active{transform:translateY(3px) scale(.985);box-shadow:inset 0 2px 0 rgba(255,255,255,.65),0 2px 0 var(--brassD),0 6px 12px rgba(0,0,0,.45)}
.brass svg{width:26px;height:26px;flex:none}
.alloy-btn{color:var(--ink);background:linear-gradient(var(--alloyA),var(--alloyB));box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(16,48,42,.16),0 3px 8px rgba(0,0,0,.4)}
.alloy-btn:active{transform:scale(.97)}
.alloy-btn svg{width:22px;height:22px;flex:none}
.brass[disabled],.alloy-btn[disabled]{opacity:.45;cursor:default;transform:none}
.big{height:68px;font-size:22px}
.paper{position:relative;display:block;border-radius:18px;color:var(--paperInk);background:linear-gradient(var(--paper),#E6ECE9);
  box-shadow:inset 0 1px 0 #fff,0 10px 20px rgba(0,0,0,.4)}
.notch{position:absolute;width:16px;height:16px;border-radius:50%;background:var(--mat1);box-shadow:inset 0 2px 3px rgba(0,0,0,.5)}
.perf{border-left:2px dashed rgba(16,48,42,.3)}
.led{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none;transition-property:background-color,box-shadow;transition-duration:160ms}
.led.g{background:var(--ledG);box-shadow:0 0 0 2px rgba(0,0,0,.35),0 0 10px var(--ledG)}
.led.a{background:var(--ledA);box-shadow:0 0 0 2px rgba(0,0,0,.35),0 0 10px var(--ledA)}
.led.r{background:var(--ledR);box-shadow:0 0 0 2px rgba(0,0,0,.35),0 0 10px var(--ledR)}
.led.off{background:#2A3F3A;box-shadow:0 0 0 2px rgba(0,0,0,.35)}
.led.big{width:16px;height:16px}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:80px;border:0;border-radius:18px;cursor:pointer;color:var(--ink);font-weight:600;font-size:15px;
  background:linear-gradient(165deg,var(--alloyA),var(--alloyB));box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(16,48,42,.16),0 6px 14px rgba(0,0,0,.4);transition:transform 120ms ease-out}
.tile:active{transform:scale(.97)}
.tile svg{width:26px;height:26px}
.readout{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:10px;background:#07120F;color:var(--ledG);box-shadow:inset 0 2px 5px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.25);text-shadow:0 0 8px rgba(61,229,143,.7)}
.readout.amber{color:var(--ledA);text-shadow:0 0 8px rgba(255,176,32,.7)}
.readout .mono{font-size:15px}
.readout{white-space:nowrap}
:focus-visible{outline:3px solid var(--brassB);outline-offset:3px}
.paper:focus-visible,.plate:focus-visible{outline-offset:4px}
.title{font-size:30px;line-height:1.1;text-wrap:balance}
.lede{font-size:14px;color:var(--mutedm);text-wrap:pretty}
.small{font-size:13px;color:var(--mutedm)}
.stamp{display:inline-block;transform:rotate(-8deg);border:2px solid #0E7A5E;color:#0E7A5E;border-radius:6px;padding:1px 8px;font:600 12px 'Chakra Petch',sans-serif}
.dash{border-top:2px dashed rgba(16,48,42,.25)}
.k{font-size:13px;font-weight:600;color:var(--paperMuted)}

/* Home */
.wordmark{margin:0;font-size:58px;line-height:.95;letter-spacing:.01em;text-align:center;color:#FFE79A;background:linear-gradient(#FFF3C4,#E8B54C 55%,#B8841F);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 3px 0 #6F4C12) drop-shadow(0 8px 14px rgba(0,0,0,.5))}
.hero{position:relative;border-radius:22px;box-shadow:0 14px 28px rgba(0,0,0,.5)}
.hero svg{display:block;width:100%;height:auto;border-radius:22px}
.hero .pill{position:absolute;left:14px;bottom:-12px;display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:#07120F;box-shadow:inset 0 2px 4px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.3),0 6px 10px rgba(0,0,0,.4)}
.hero .pill .mono{font-size:12px}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ticket-row{display:flex;align-items:stretch;min-height:92px}
.ticket-row .lead{width:72px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#0E7A5E}
.ticket-row .body{flex:1 1 0;min-width:0;padding:10px 12px;display:flex;flex-direction:column;justify-content:center;gap:3px}
.ticket-row .name{font-size:18px;line-height:1.15}
.ticket-row .sub{font-size:13px;color:var(--paperMuted);line-height:1.3}
.ticket-row[aria-disabled="true"]{filter:saturate(.3) brightness(.78)}
.ticket-row.now{box-shadow:0 0 0 3px #E8B54C,0 0 22px rgba(255,176,32,.55),0 10px 20px rgba(0,0,0,.4)}
.ticket-row .stamp{position:absolute;right:12px;bottom:12px}
.pips{display:flex;align-items:center;gap:5px}
button.ticket-row{width:100%;border:0;text-align:left;font:inherit;cursor:pointer}

/* Game */
.hud{display:flex;align-items:center;gap:12px}
.hud .mid{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;line-height:1.2;text-align:center}
.hud .mid .display{font-size:17px;line-height:1.15;max-width:100%;text-wrap:balance}
.meters{display:flex;align-items:center;gap:10px}
.cellsbar{flex:1 1 0;height:10px;border-radius:3px;background:#1B3A32;position:relative;overflow:hidden}
.cellsbar i{position:absolute;left:0;top:0;bottom:0;width:0;background:repeating-linear-gradient(90deg,#3DE58F 0 5px,transparent 5px 7px);box-shadow:0 0 8px rgba(61,229,143,.5);transition:width 140ms ease-out}
.boardwrap{padding:14px;border-radius:24px;align-self:center;width:100%;max-width:392px;transition:box-shadow 300ms ease-out}
.boardwrap svg#board{display:block;width:100%;height:auto;border-radius:16px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.3);touch-action:none;user-select:none;-webkit-user-select:none}
.boardwrap svg#board:focus-visible{outline:3px solid var(--brassB);outline-offset:4px}
.boardwrap.powered{box-shadow:inset 0 1px 0 #fff,0 0 0 3px var(--ledG),0 0 36px rgba(61,229,143,.65),0 10px 22px rgba(0,0,0,.42)}
.chips{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.chipc{display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:rgba(0,0,0,.35);box-shadow:inset 0 1px 3px rgba(0,0,0,.6)}
.hint{text-align:center;font-size:14px;min-height:21px;color:var(--mutedm)}
.hint b{color:var(--ledA);font-weight:600}
.actions{display:flex;gap:12px;margin-top:auto}
.actions>*{flex:1 1 0;height:56px;font-size:16px;white-space:nowrap;padding:0 12px;gap:8px}
.brass.pulse:not([disabled]){animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:inset 0 2px 0 rgba(255,255,255,.65),0 4px 0 var(--brassD),0 10px 16px rgba(0,0,0,.45)}50%{box-shadow:inset 0 2px 0 rgba(255,255,255,.65),0 4px 0 var(--brassD),0 0 28px rgba(255,176,32,.85)}}

/* Power on */
.glow{position:relative;display:flex;justify-content:center;margin-top:6px}
.glow::before{content:'';position:absolute;left:50%;top:48%;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;background:radial-gradient(circle,rgba(61,229,143,.38),rgba(61,229,143,0) 68%);pointer-events:none}
.glow svg{position:relative;display:block;width:100%;max-width:326px;height:auto}
.rate{padding:14px 16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;border-radius:20px}
.rate div{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.rate b{font-size:14px;line-height:1.2}
.rate span{font-size:12px;color:var(--muted)}
.rise{animation:rise 420ms cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.slam{animation:slam 520ms cubic-bezier(.2,1.4,.4,1) both;animation-delay:240ms}
@keyframes slam{from{opacity:0;transform:rotate(-24deg) scale(1.9)}to{opacity:1;transform:rotate(-9deg) scale(1)}}

/* Lists and forms */
.card{padding:6px 0;border-radius:20px}
.line{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 16px;color:var(--ink);width:100%;border:0;background:none;font:inherit;text-align:left;cursor:pointer}
.line+.line{border-top:1px solid rgba(16,48,42,.15)}
.line .t{flex:1 1 0;font-size:16px;font-weight:600}
.line small{display:block;font-size:13px;font-weight:400;color:var(--muted)}
.line .v{font-size:14px;color:var(--muted)}
.line svg{width:20px;height:20px;flex:none}
.sw2{width:56px;height:32px;border-radius:16px;border:0;padding:3px;display:flex;align-items:center;background:#6F837E;cursor:pointer;flex:none;position:relative}
.sw2 i{display:block;width:26px;height:26px;border-radius:50%;background:#F4F7F6;box-shadow:0 2px 4px rgba(0,0,0,.4);transition:transform 160ms ease-out}
.sw2[aria-checked="true"]{background:#0E7A5E}
.sw2[aria-checked="true"] i{transform:translateX(24px)}
.sw2::after{content:'';position:absolute;inset:-8px -2px}
.swgrid{padding:14px;border-radius:20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sw{display:flex;flex-direction:column;gap:8px;align-items:stretch;padding:10px;border-radius:18px;border:0;font:inherit;color:var(--ink);text-align:left;min-height:44px;cursor:pointer;background:rgba(16,48,42,.07)}
.sw svg{width:100%;height:70px;display:block}
.sw b{font-size:15px}
.sw small{font-size:13px;color:var(--muted)}
.sw[aria-pressed="true"]{box-shadow:0 0 0 3px #0E7A5E;background:rgba(14,122,94,.12)}
.sw[aria-disabled="true"]{opacity:.75;cursor:default}

/* Bottom sheet (the one modal) */
.sheet-back{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center}
.sheet{width:100%;max-width:430px;padding:14px 16px max(24px,env(safe-area-inset-bottom));border-radius:26px 26px 0 0;display:flex;flex-direction:column;gap:12px;color:var(--ink);
  background:linear-gradient(165deg,var(--alloyA),var(--alloyB));box-shadow:inset 0 1px 0 #fff,0 -10px 30px rgba(0,0,0,.45);animation:sheetUp 220ms ease-out both}
.sheet::before{content:'';width:44px;height:5px;border-radius:3px;background:rgba(16,48,42,.3);align-self:center}
.sheet h2{font:600 26px/1.1 'Chakra Petch',system-ui,sans-serif}
.sheet p{font-size:15px;color:var(--muted)}
.sheet button{display:flex;align-items:center;justify-content:center;min-height:52px;border:0;border-radius:999px;font:600 17px 'Hanken Grotesk',sans-serif;cursor:pointer;color:var(--ink);padding:0 20px;
  background:linear-gradient(#FFFFFF,#D9E3E0);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(16,48,42,.16),0 3px 8px rgba(0,0,0,.25)}
.sheet button.primary{min-height:60px;font:600 20px 'Chakra Petch',sans-serif;color:var(--brassInk);background:linear-gradient(var(--brassA),var(--brassB) 48%,var(--brassC));box-shadow:inset 0 2px 0 rgba(255,255,255,.65),0 4px 0 var(--brassD)}
@keyframes sheetUp{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}

/* Splash and how-to demo */
#splash{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--mat0);color:var(--inkm);font:600 26px 'Chakra Petch',system-ui,sans-serif;transition:opacity 300ms ease-out}
#splash img{border-radius:22px;box-shadow:0 10px 24px rgba(0,0,0,.5)}
#splash[data-done]{opacity:0;pointer-events:none}
.demo{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.4s ease-in-out infinite}
@keyframes draw{0%{stroke-dashoffset:1}55%,100%{stroke-dashoffset:0}}

/* Motion off: the Settings switch or the phone's own setting */
:root[data-reduce] *,:root[data-reduce] *::before,:root[data-reduce] *::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
  .demo{stroke-dashoffset:0}
}
@media (hover:hover){
  .round:hover,.tile:hover,.alloy-btn:hover{filter:brightness(1.05)}
  .brass:hover{filter:brightness(1.04)}
}
@media (max-width:359px){.wordmark{font-size:50px}.col{padding-left:26px}}