/* Reef Control Pro live demo. Palette and type: products/O04-reef/BRAND_GUIDE.md.
   No orange anywhere; red (--alert) only for real warning states. */

@font-face{font-family:"Space Grotesk";font-weight:500;font-display:swap;src:url(assets/fonts/space-grotesk-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:700;font-display:swap;src:url(assets/fonts/space-grotesk-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url(assets/fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:500;font-display:swap;src:url(assets/fonts/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-display:swap;src:url(assets/fonts/inter-latin-600-normal.woff2) format("woff2")}

:root{
  --abyss:#020B1D; --deep:#071B33; --petrol:#102A3B; --cobalt:#123C89;
  --ice:#F3F8FF; --mist:#C3D8EB; --aqua:#79E8F3; --water:#70C8F3; --violet:#B698E9;
  --alert:#E5484D; --alert-text:#FF7A7E;
  --glass:rgba(3,14,32,.66); --glass-2:rgba(16,42,59,.55); --line:rgba(121,232,243,.16);
  --head:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --px:0; --py:0;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--abyss);color:var(--ice);font-family:var(--body);-webkit-font-smoothing:antialiased}
h1,h2,p{margin:0}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}

/* ---------- The tank (whole viewport) ---------- */
.tank{position:fixed;inset:0;overflow:hidden;z-index:0;contain:strict}
.tank-bg,.tank-bg img{position:absolute;inset:0;width:100%;height:100%}
.tank-bg img{object-fit:cover;object-position:50% 100%;scale:1.04;transform-origin:50% 100%;
  translate:calc(var(--px) * -10px) calc(var(--py) * -6px)}

.rays{position:absolute;inset:-10% -20% 30%;pointer-events:none;mix-blend-mode:screen;opacity:.55;
  background:repeating-linear-gradient(104deg,transparent 0 7%,rgba(170,225,255,.07) 9%,transparent 12%,transparent 16%,rgba(170,225,255,.05) 18%,transparent 22%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.5) 45%,transparent 85%);mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.5) 45%,transparent 85%);
  filter:blur(6px);animation:rays 26s ease-in-out infinite alternate}
@keyframes rays{from{transform:translateX(-3%) skewX(-2deg)}to{transform:translateX(3%) skewX(2deg)}}

.caustics{position:absolute;left:-5%;right:-5%;top:0;height:28%;pointer-events:none;mix-blend-mode:screen;opacity:.5;
  background:
    radial-gradient(ellipse 60px 14px at 30% 40%,rgba(220,250,255,.35),transparent 70%) 0 0/180px 70px,
    radial-gradient(ellipse 90px 18px at 70% 60%,rgba(200,240,255,.25),transparent 70%) 40px 20px/240px 90px;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent);mask-image:linear-gradient(to bottom,#000,transparent);
  animation:caustic 7s ease-in-out infinite alternate}
@keyframes caustic{from{transform:translateX(-24px);opacity:.35}to{transform:translateX(24px);opacity:.6}}

.particles i{position:absolute;top:-4%;width:var(--d,3px);height:var(--d,3px);border-radius:50%;background:rgba(220,240,255,.55);
  filter:blur(.4px);animation:sink var(--t,40s) linear infinite;animation-delay:var(--dl,0s)}
@keyframes sink{from{transform:translate(0,0)}50%{transform:translate(18px,55vh)}to{transform:translate(-10px,112vh)}}

/* Fish: .fish swims (translate), .lift rises at feeding time, .bob drifts, .flip mirrors, img flexes. */
.fish-layer{position:absolute;inset:0;translate:calc(var(--px) * -22px) calc(var(--py) * -10px)}
.fish{--yy:var(--y);position:absolute;left:0;top:var(--yy);width:calc(var(--s) * clamp(90px,10vw,190px));
  animation:var(--dir,swimR) var(--dur) linear infinite;animation-delay:var(--dl)}
.fish .lift{transition:translate 3.5s cubic-bezier(.4,0,.2,1)}
.fish .bob{animation:bob var(--bob,3.4s) ease-in-out infinite;animation-delay:var(--dl)}
.fish img{display:block;width:100%;height:auto;transform-origin:65% 50%;animation:undulate var(--und,.8s) ease-in-out infinite}
.fish.left .flip{transform:scaleX(-1)}
.fish.near .flip{filter:drop-shadow(0 10px 8px rgba(0,16,32,.35)) saturate(.92)}
.fish.far .flip{filter:blur(1.3px) saturate(.5) brightness(.72);opacity:.72}
.fish.far{z-index:0}.fish.near{z-index:1}
@keyframes swimR{from{translate:calc(-100% - 3vw) 0}to{translate:103vw 0}}
@keyframes swimL{from{translate:103vw 0}to{translate:calc(-100% - 3vw) 0}}
@keyframes bob{0%,100%{transform:translateY(-.9vh) rotate(-1.5deg)}50%{transform:translateY(1.1vh) rotate(1.8deg)}}
@keyframes undulate{0%,100%{transform:skewY(-1.6deg) scaleX(1)}50%{transform:skewY(1.6deg) scaleX(.97)}}
.feeding .fish .lift{translate:0 calc((15vh - var(--yy)) * .75)}

.flakes i{position:absolute;top:-2vh;left:var(--x);width:var(--w,6px);height:calc(var(--w,6px) * .6);border-radius:40% 60% 50% 45%;
  background:var(--c,rgba(232,224,206,.9));opacity:0;animation:flake var(--t,11s) ease-in forwards;animation-delay:var(--dl,0s)}
@keyframes flake{0%{opacity:0;transform:translate(0,0) rotate(0)}8%{opacity:.95}50%{transform:translate(14px,24vh) rotate(160deg)}85%{opacity:.9}100%{opacity:0;transform:translate(-8px,48vh) rotate(320deg)}}

/* Main light Off: moonlight blue. On/off only, so no transition. */
.night{position:absolute;inset:0;background:linear-gradient(#0b1f5c,#040d2b);mix-blend-mode:multiply;opacity:0;pointer-events:none}
.light-off .night{opacity:.8}
.light-off .rays,.light-off .caustics{visibility:hidden}
.light-off .tank-bg img{filter:saturate(.7)}

/* Tab hidden: pause everything. */
.is-paused *,.is-paused *::before,.is-paused *::after{animation-play-state:paused!important}

/* ---------- UI layer ---------- */
.ui{position:fixed;inset:0;z-index:2;display:grid;
  grid-template:"head head" auto "spacer panel" 1fr "foot panel" auto / 1fr minmax(340px,420px);
  gap:16px 24px;padding:20px 24px 20px 28px;padding:max(20px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(28px,env(safe-area-inset-left));
  pointer-events:none}
.ui>*{pointer-events:auto}
.spacer{grid-area:spacer;pointer-events:none}

.site-head{grid-area:head;display:flex;align-items:center;gap:20px;min-width:0}
.brand{display:block;flex:none;line-height:0}
.brand img{height:46px;width:auto}
.tagline{font-family:var(--head);font-weight:500;font-size:1.05rem;color:var(--mist);text-shadow:0 1px 10px rgba(2,11,29,.8)}
.beta{margin-left:auto;flex:none;text-decoration:none;font-weight:600;font-size:.95rem;color:var(--abyss);background:var(--aqua);
  padding:10px 18px;border-radius:999px;transition:background .2s}
.beta:hover{background:var(--ice)}

.site-foot{grid-area:foot;align-self:end;justify-self:start;max-width:640px;padding:10px 14px;border-radius:12px;
  background:rgba(2,11,29,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(121,232,243,.1)}
.attrib{font-size:.8rem;font-weight:500;letter-spacing:.04em;color:var(--ice)}
.disclaimer{font-size:.74rem;color:var(--mist);margin-top:3px;line-height:1.4}

/* Panel: midnight-marine glass, built on the demo-template pattern. */
.panel{grid-area:panel;align-self:start;max-height:100%;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(121,232,243,.3) transparent;
  background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15);
  border:1px solid var(--line);border-radius:22px;padding:18px 16px 16px;box-shadow:0 24px 60px rgba(0,6,18,.45)}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.panel-title{font-family:var(--head);font-weight:700;font-size:1.05rem;letter-spacing:.01em;white-space:nowrap}
.chips{display:flex;gap:5px;flex-wrap:nowrap;justify-content:flex-end}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:.62rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  padding:3px 7px;border-radius:999px;border:1px solid rgba(195,216,235,.28);color:var(--mist)}
.chip-local .dot{width:6px;height:6px;border-radius:50%;background:var(--aqua)}
.chip-sim{background:var(--aqua);border-color:var(--aqua);color:var(--abyss)}

.readings{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.tile{grid-column:span 2;display:flex;flex-direction:column;gap:2px;min-width:0;padding:10px 11px;border-radius:14px;background:var(--glass-2);border:1px solid rgba(195,216,235,.08)}
.tile-lg{grid-column:span 3}
.t-label{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mist)}
.t-value{font-family:var(--head);font-weight:700;font-size:1.05rem;font-variant-numeric:tabular-nums;line-height:1.2}
.tile-lg .t-value{font-size:1.6rem}
.t-sub{font-size:.7rem;color:var(--mist)}
.pro{font-weight:500;color:var(--water);text-transform:none;letter-spacing:0}
.tile.is-warn{border-color:var(--alert);background:rgba(229,72,77,.12)}
.tile.is-warn .t-value{color:var(--alert-text)}

.modes{border:0;margin:0 0 12px;padding:0;min-width:0}
.modes legend{padding:0;margin-bottom:6px;font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mist)}
.cues{clear:both;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cues label{position:relative;display:flex;cursor:pointer}
.cues input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.cue{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;aspect-ratio:1;padding:10px 6px;border-radius:14px;text-align:center;
  background:var(--glass-2);border:1px solid rgba(195,216,235,.12);color:var(--mist);transition:background .2s,color .2s,border-color .2s}
.cue-ico{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--aqua);transition:color .2s}
.cue b{font-size:.88rem;font-weight:700;color:var(--ice)}
.cue small{font-size:.68rem;line-height:1.25}
.cues label:hover .cue{border-color:rgba(121,232,243,.45)}
.cues input:checked+.cue{background:var(--aqua);border-color:var(--aqua);color:var(--abyss)}
.cues input:checked+.cue b,.cues input:checked+.cue .cue-ico{color:var(--abyss)}
.cues input:focus-visible+.cue{outline:2px solid var(--ice);outline-offset:2px}
.mode-status{min-height:1.3em;margin-top:6px;font-size:.78rem;color:var(--mist);font-variant-numeric:tabular-nums}

.alerts:empty{display:none}
.alerts{margin-bottom:10px}
.alert-card{display:grid;grid-template-columns:auto 1fr auto;gap:4px 10px;align-items:center;padding:11px 12px;border-radius:14px;
  background:rgba(229,72,77,.16);border:1px solid var(--alert)}
.alert-card svg{grid-row:span 2;color:var(--alert-text)}
.alert-title{font-weight:600;font-size:.92rem}
.alert-sub{grid-column:2;font-size:.8rem;color:var(--mist)}
.alert-card .btn{grid-row:1/span 2;grid-column:3}

.more-toggle{display:none}
.block{margin-top:12px}
.block h2{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mist);margin-bottom:8px}
.h-note{font-weight:500;text-transform:none;letter-spacing:0;color:var(--mist);opacity:.8}
.outlets,.dosing{list-style:none;margin:0;padding:0}
.outlets{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}
.outlet{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:7px 9px;border-radius:12px;background:var(--glass-2);font-size:.84rem;cursor:pointer;min-width:0}
.outlet-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.outlet-state{font-size:.7rem;color:var(--mist);margin-left:auto;min-width:2.2em;text-align:right}
input[type=checkbox][switch]{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:34px;height:20px;margin:0;border-radius:999px;
  background:rgba(195,216,235,.22);cursor:pointer;transition:background .2s}
input[type=checkbox][switch]::before{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--ice);transition:translate .2s}
input[type=checkbox][switch]:checked{background:var(--aqua)}
input[type=checkbox][switch]:checked::before{translate:14px 0;background:var(--abyss)}

.dosing li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:6px 10px;border-radius:12px;background:var(--glass-2);margin-bottom:5px;font-size:.84rem}
.dose-name b{font-family:var(--head);font-weight:700;color:var(--water);margin-right:6px}
.dose-times{color:var(--mist);font-size:.78rem;text-align:right;font-variant-numeric:tabular-nums}

.scen{display:flex;gap:8px;flex-wrap:wrap}
.btn{cursor:pointer;border:1px solid rgba(121,232,243,.4);background:rgba(121,232,243,.08);color:var(--ice);border-radius:999px;padding:8px 14px;font-size:.84rem;font-weight:600;transition:background .2s}
.btn:hover{background:rgba(121,232,243,.18)}
.btn-quiet{border-color:rgba(195,216,235,.3);background:transparent}
.btn[aria-pressed=true]{background:var(--aqua);color:var(--abyss);border-color:var(--aqua)}
.panel-disclaimer{margin-top:10px;font-size:.72rem;color:var(--mist)}

/* Simulated push notification */
.push{position:fixed;z-index:5;top:max(14px,env(safe-area-inset-top));left:50%;translate:-50% 0;width:min(380px,calc(100vw - 32px));
  display:grid;gap:2px;padding:12px 14px 12px 16px;border-radius:16px;background:rgba(7,27,51,.92);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid rgba(195,216,235,.18);border-left:4px solid var(--alert);box-shadow:0 18px 40px rgba(0,6,18,.5);
  transition:opacity .3s,translate .3s;transition-behavior:allow-discrete}
.push[hidden]{display:none;opacity:0;translate:-50% -12px}
@starting-style{.push{opacity:0;translate:-50% -12px}}
.push-tag{font-size:.64rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mist)}
.push-app{font-weight:600;font-size:.86rem}
.push-body{font-size:.86rem;color:var(--ice)}

/* Cue editor: the settings sheet where customers tune or add cues. */
.modes legend{float:left;line-height:24px;margin-bottom:6px}
.cue-edit-btn{float:right;margin-bottom:6px;display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;border:1px solid rgba(195,216,235,.28);background:transparent;color:var(--mist);font-size:.74rem;font-weight:600;cursor:pointer}
.cue-edit-btn:hover{color:var(--ice);border-color:rgba(121,232,243,.5)}
.cue-edit-btn svg,.ce-x svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cue-editor{width:min(440px,calc(100vw - 24px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--line);border-radius:20px;
  background:rgba(3,14,32,.94);color:var(--ice);box-shadow:0 24px 60px rgba(0,6,18,.6)}
.cue-editor:modal{overscroll-behavior:contain}
.cue-editor::backdrop{background:rgba(2,11,29,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);overflow:hidden;overscroll-behavior:contain}
.cue-editor form{display:flex;flex-direction:column;gap:14px;padding:16px}
.ce-head{display:flex;align-items:center;justify-content:space-between}
.ce-head h2{font-family:var(--head);font-size:1.05rem}
.ce-x{display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:rgba(195,216,235,.08);color:var(--mist);cursor:pointer}
.ce-pick{display:flex;flex-wrap:wrap;gap:6px}
.ce-chip{padding:5px 11px;border-radius:999px;border:1px solid rgba(195,216,235,.28);background:transparent;color:var(--mist);font-size:.8rem;font-weight:600;cursor:pointer}
.ce-chip[aria-checked=true]{background:var(--aqua);border-color:var(--aqua);color:var(--abyss)}
.ce-field{display:flex;flex-direction:column;gap:6px;border:0;margin:0;padding:0;min-width:0}
.ce-field>span:first-child,.ce-field legend{padding:0;margin-bottom:2px;font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mist)}
.ce-row{flex-direction:row;align-items:center;justify-content:space-between}
.cue-editor input[type=text],.cue-editor input[type=number]{font:inherit;font-size:.9rem;color:var(--ice);background:var(--glass-2);border:1px solid rgba(195,216,235,.18);border-radius:10px;padding:8px 10px}
.cue-editor input:disabled{opacity:.6}
.cue-editor input:focus-visible,.ce-chip:focus-visible,.ce-icons input:focus-visible+span{outline:2px solid var(--ice);outline-offset:2px}
.ce-num{display:inline-flex;align-items:center;gap:6px;color:var(--mist)}
.ce-num input{width:5.5em}
.ce-icons{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.ce-icons label{position:relative;display:flex;cursor:pointer}
.ce-icons input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.ce-icons span{flex:1;display:grid;place-items:center;aspect-ratio:1;border-radius:12px;background:var(--glass-2);border:1px solid rgba(195,216,235,.12)}
.ce-icons .cue-ico{width:22px;height:22px}
.ce-icons input:checked+span{background:var(--aqua);border-color:var(--aqua)}
.ce-icons input:checked+span .cue-ico{color:var(--abyss)}
.ce-outlets{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ce-outlets li{display:grid;grid-template-columns:minmax(0,1fr) 7.6em;align-items:center;gap:6px}
.ce-outlets.no-times li{grid-template-columns:minmax(0,1fr)}
.ce-outlets.no-times .ce-time{display:none}
.ce-time{width:100%;min-width:0;padding:6px 6px;border-radius:10px;border:1px solid rgba(195,216,235,.22);background:var(--glass-2);color:var(--ice);font:inherit;font-size:.8rem}
.ce-time:disabled{opacity:.35}
.ce-outlets li.is-changed .outlet{box-shadow:inset 3px 0 0 var(--aqua)}
.ce-hint{font-size:.78rem;color:var(--mist);margin:0 0 2px}
.ce-note{font-size:.74rem;color:var(--mist)}
.ce-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.ce-save{background:var(--aqua);color:var(--abyss);border-color:var(--aqua)}
.ce-save:hover{background:var(--ice)}
[hidden]{display:none!important}

/* ---------- Phones: panel becomes a compact bottom sheet ---------- */
@media (max-width:760px){
  .ui{grid-template:"head" auto "spacer" 1fr "panel" auto "foot" auto / minmax(0,1fr);gap:10px;padding:12px 12px 10px;
    padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
  .site-head{flex-wrap:wrap;gap:4px 12px}
  .brand img{height:34px}
  .tagline{order:3;flex-basis:100%;font-size:.9rem}
  .beta{padding:8px 14px;font-size:.86rem}
  .panel{max-height:62dvh;border-radius:20px;padding:14px 12px 12px}
  .panel-head{margin-bottom:10px}
  .tile{padding:8px 9px}
  .panel-title{font-size:.98rem}
  .panel-head{flex-wrap:wrap;gap:6px}
  .chips{justify-content:flex-start}
  .chip,.t-label,.t-sub,.modes legend,.block h2,.h-note,.mode-status,.panel-disclaimer,.attrib,.disclaimer,.dose-times,.push-tag{font-size:12px}
  .outlets{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .outlet-state{display:none}
  .outlet{padding:7px 8px}
  .tile-lg .t-value{font-size:1.45rem}
  .t-value{font-size:.95rem}
  .modes{margin:0 0 10px}
  .cue{aspect-ratio:auto;min-height:84px;padding:8px 4px}
  .cue-ico{width:24px;height:24px}
  .cue small{font-size:11px}
  .more-toggle{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:10px;padding:8px;border:0;border-radius:10px;background:rgba(195,216,235,.08);font-size:.82rem;color:var(--mist);cursor:pointer}
  .more-toggle svg{transition:rotate .2s}
  .more-toggle .more-open{display:none}
  .panel[data-expanded=true] .more-toggle .more-open{display:inline}
  .panel[data-expanded=true] .more-toggle .more-closed{display:none}
  .panel[data-expanded=true] .more-toggle svg{rotate:180deg}
  .panel[data-expanded=false] .more{display:none}
  .site-foot{justify-self:stretch;max-width:none;padding:7px 10px;border-radius:10px}
  .feeding .fish .lift{translate:0 calc((13vh - var(--yy)) * .75)}
}
@media (orientation:portrait){.fish{--yy:var(--ym)}}
@media (max-width:760px) and (orientation:portrait){.fish{width:calc(var(--s) * clamp(80px,22vw,150px))}}
@media (max-height:620px) and (min-width:761px){.brand img{height:36px}.ui{gap:10px 20px}}

/* ---------- Reduced motion: static scene ---------- */
@media (prefers-reduced-motion:reduce){
  .rays,.caustics,.particles i,.fish .bob,.fish img{animation:none}
  .fish{animation:none;translate:calc(var(--x) * 1vw) 0}
  .fish .lift{transition:none}
  .flakes i{animation:none;opacity:.9;transform:translateY(var(--fy,10vh))}
  .tank-bg img,.fish-layer{translate:none}
  .push,.cue,.cue-ico,input[type=checkbox][switch],input[type=checkbox][switch]::before{transition:none}
}
@media (max-width:360px){.ce-outlets li{grid-template-columns:minmax(0,1fr) 6.4em;gap:4px}.ce-outlets .outlet{font-size:.78rem;gap:4px;padding:7px 7px}.ce-time{font-size:.72rem;padding:6px 3px}.cue b{font-size:.76rem}.cue small{font-size:10px}}