/* Penguin Pad: isometric 2:1 pixel ice. Tokens = DIRECTIONS-batch7-penguin.md. One border system: 2:1 stair corners,
   no radius, no shadow except the single water diamond under the floes in the ending. Coral = heat only. */
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/JetBrainsMono.woff2') format('woff2')}
@font-face{font-family:'Nabla';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/Nabla-400.woff2') format('woff2')}
@font-face{font-family:'Rethink Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/RethinkSans.woff2') format('woff2')}
@font-palette-values --ice{font-family:Nabla;override-colors:0 #36586f,1 #4f7a99,2 #4f7a99,3 #4f7a99,4 #f6fafc,5 #4f7a99,6 #f6fafc,7 #f6fafc,8 #f6fafc,9 #a9c9dc}
@font-palette-values --heat{font-family:Nabla;override-colors:0 #b8401f,1 #b8401f,2 #b8401f,3 #b8401f,4 #f6fafc,5 #b8401f,6 #f6fafc,7 #f6fafc,8 #f6fafc,9 #f0b8a0}
@font-palette-values --night{font-family:Nabla;override-colors:0 #14222f,1 #4f7a99,2 #4f7a99,3 #4f7a99,4 #f6fafc,5 #4f7a99,6 #f6fafc,7 #f6fafc,8 #f6fafc,9 #a9c9dc}

:root{
  --name:"Penguin Pad";
  --white:#ffffff; --ice-top:#f6fafc; --snow:#f3f7f9; --frost:#dbe8ef; --ice-mid:#c3d8e4;
  --ice-left:#a9c9dc; --ice-shade:#7fa6c0; --ice-right:#4f7a99; --ice-deep:#36586f;
  --water-2:#27445c; --water:#1d3347; --ink:#14222f; --slate:#5d7488; --slate-lt:#8aa0b2;
  --heat-1:#e9e4dc; --heat-2:#f0b8a0; --coral:#e4572e; --coral-d:#b8401f;
  --f-disp:Nabla, 'Rethink Sans', system-ui; --f-text:'Rethink Sans', system-ui, sans-serif; --f-num:'JetBrains Mono', ui-monospace, monospace;
  --gut:32px; --col:1216px; --barh:64px;
  --stair:polygon(8px 0,calc(100% - 8px) 0,calc(100% - 8px) 2px,calc(100% - 4px) 2px,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) calc(100% - 2px),calc(100% - 8px) calc(100% - 2px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 2px),4px calc(100% - 2px),4px calc(100% - 4px),0 calc(100% - 4px),0 4px,4px 4px,4px 2px,8px 2px);
  --dots-snow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='64' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='4' height='4' fill='%23dbe8ef'/%3E%3Crect x='64' y='32' width='4' height='4' fill='%23dbe8ef'/%3E%3C/svg%3E");
  --dots-frost:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='64' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='4' height='4' fill='%23c3d8e4'/%3E%3Crect x='64' y='32' width='4' height='4' fill='%23c3d8e4'/%3E%3C/svg%3E");
  --dots-warm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='64' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='4' height='4' fill='%23ded5c8'/%3E%3Crect x='64' y='32' width='4' height='4' fill='%23ded5c8'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:16px}
html,body{margin:0;background:var(--snow);color:var(--water);font:400 17px/1.47 var(--f-text)}
body{background-image:var(--dots-snow);overflow-x:hidden}
img.px,canvas{image-rendering:pixelated;image-rendering:crisp-edges}
img.px{image-rendering:pixelated}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--water);outline-offset:4px}
.mono,.num{font-family:var(--f-num);font-variant-numeric:tabular-nums lining-nums}
.num{font-weight:600}
.lab{font:600 12px/1.2 var(--f-num);letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrapc{max-width:var(--col);margin:0 auto;padding:0 var(--gut)}
p{margin:0}
[hidden]{display:none!important}

/* ------------------------------------------------------------------ header: snow bar */
.bar{position:relative;z-index:20;height:var(--barh);display:flex;align-items:center;gap:28px;padding:0 var(--gut);background:var(--snow)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font:700 19px/1 var(--f-text);letter-spacing:-.2px;color:var(--water)}
.brand img{width:32px;height:32px}
.nav{display:flex;gap:4px;margin-left:8px}
.nav a{font:500 15px/1 var(--f-text);text-decoration:none;color:var(--slate);padding:10px 10px;cursor:pointer}
.nav a:hover,.nav a.on{color:var(--water)}
.nav a .age{font:600 12px/1 var(--f-num);color:var(--slate-lt);margin-left:4px}
.bar .sp{flex:1}
.bar-r{display:flex;align-items:center;gap:10px}
.key.menu-b{display:none}
.drawer{position:absolute;top:var(--barh);left:0;right:0;z-index:30;background:var(--water);padding:8px var(--gut) 24px;display:grid;gap:2px}
.drawer a{color:var(--ice-top);text-decoration:none;font:500 18px/1 var(--f-text);padding:14px 0;border-bottom:2px solid var(--water-2)}

/* ------------------------------------------------------------------ the ice key (one button family) */
.key{--top:var(--ice-top);--face:var(--ice-right);--txt:var(--water);--slotc:var(--frost);
  position:relative;display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 20px 0 6px;border:0;cursor:pointer;text-decoration:none;white-space:nowrap;
  background:var(--top);color:var(--txt);font:600 16px/1 var(--f-text);letter-spacing:-.1px;
  box-shadow:inset 0 -4px 0 var(--face);clip-path:var(--stair);transform:translateY(0);transition:none;user-select:none}
.key .slot{flex:none;width:40px;height:40px;margin-bottom:4px;display:grid;place-items:center;background:var(--slotc);position:relative;overflow:hidden}
.key .slot img{width:32px;height:32px;image-rendering:pixelated}
.key .slot img.i16{width:16px;height:16px}
.key .kl{margin-bottom:4px}
.key.dark{--top:var(--water);--face:var(--ink);--txt:var(--ice-top);--slotc:var(--water-2)}
.key:hover{--top:var(--white)}
.key.dark:hover{--top:var(--water-2)}
.key:active{transform:translateY(2px);box-shadow:inset 0 -2px 0 var(--face)}
.key:focus-visible{outline:2px solid var(--water);outline-offset:4px;clip-path:none}
.onwater .key:focus-visible,.key.dark:focus-visible{outline-color:var(--ice-left)}
.key:disabled,.key.off{--top:var(--frost);--face:var(--ice-left);--txt:var(--slate-lt);--slotc:var(--ice-mid);cursor:not-allowed;transform:none}
.key:disabled .slot img,.key.off .slot img{opacity:.55}
.key.busy{cursor:progress}
.key.busy .slot::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,var(--ice-left) 0 8px,var(--frost) 8px 16px);animation:stripes .33s steps(4) infinite}
.key.dark.busy .slot::after{background:repeating-linear-gradient(90deg,var(--ice-right) 0 8px,var(--water-2) 8px 16px)}
@keyframes stripes{to{transform:translateX(16px)}}
.key.busy .slot img{opacity:0}
.key.ok .slot{background:var(--ice-top)}
.key.ok .slot img{content:url(/assets/px/check16.png);width:16px;height:16px}
.key.err .slot{background:var(--ice-top)}
.key.err .slot img{content:url(/assets/px/crack16.png);width:16px;height:16px}
.key.sm{height:40px;padding:0 14px 0 4px;font-size:14px;gap:8px}
.key.sm .slot{width:30px;height:30px;margin-bottom:4px}
.key.sm .slot img{width:16px;height:16px}
.key.plain{padding:0 18px}
.link{font:600 15px/1.2 var(--f-text);color:var(--water);text-decoration:underline;text-decoration-color:var(--ice-left);text-decoration-thickness:2px;text-underline-offset:4px;cursor:pointer;background:none;border:0;padding:0}
.link::after{content:"";display:inline-block;width:8px;height:8px;margin-left:6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Cpath d='M0 3h5V1h1v1h1v1h1v2H7v1H6v1H5V5H0z' fill='%231d3347'/%3E%3C/svg%3E") no-repeat}
.link:hover{text-decoration-color:var(--water)}
.onwater .link{color:var(--ice-top);text-decoration-color:var(--ice-right)}
.onwater .link::after{filter:invert(1)}

/* ------------------------------------------------------------------ windows (isometric.nyc chrome, our water strip) */
.win{background:var(--ice-top);clip-path:var(--stair)}
.tb{overflow:hidden;display:flex;align-items:center;gap:12px;height:32px;padding:0 12px;background:var(--water);color:var(--snow);font:600 12px/1 var(--f-num);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.tb img{width:16px;height:16px}
.tb .sp{flex:1}
.tb b{font-weight:600;color:var(--ice-top)}
.tb .dim{color:var(--slate-lt)}
.tb .tab{background:none;border:0;padding:0 2px;height:32px;cursor:pointer;color:var(--snow);opacity:.6;font:inherit;letter-spacing:inherit;border-bottom:2px solid transparent}
.tb .tab[aria-selected=true]{opacity:1;border-bottom-color:var(--ice-top)}
.tb .tab:hover{opacity:1}
.tb .tkey{background:var(--water-2);border:0;height:24px;padding:0 10px;color:var(--ice-top);font:inherit;letter-spacing:inherit;cursor:pointer;box-shadow:inset 0 -2px 0 var(--ink);display:flex;align-items:center;gap:6px}
.tb .tkey:hover{background:var(--ice-deep)}
.tb .tkey:disabled{opacity:.45;cursor:not-allowed}
.body{padding:24px}

/* ------------------------------------------------------------------ HERO: the huddle map */
.hero{position:relative;background:var(--water-2)}
.hero .tb{position:relative;z-index:3}
.stage{position:relative;overflow:hidden;height:var(--stageh,clamp(640px,calc(100vh - 96px),960px));background:var(--water-2);touch-action:pan-y}
.stage .static{position:absolute;left:50%;top:-192px;width:1440px;height:810px;transform:translateX(-50%);image-rendering:pixelated}
.stage canvas{position:absolute;left:0;top:0;display:block;cursor:default}
.stage canvas.hot{cursor:pointer}
.js .stage .static{visibility:hidden}
.js .stage:not(.laid) .over,.js .stage:not(.laid) .legend{visibility:hidden}
.over{position:absolute;inset:0;pointer-events:none}
.over > *{pointer-events:auto}
.name{position:absolute;left:clamp(16px,6vw,88px);top:var(--namey,372px);margin:0;font:400 var(--namefs,148px)/1.3 var(--f-disp);font-palette:--ice;letter-spacing:-2px;color:var(--ice-top);white-space:nowrap;transform:translateY(-78%);pointer-events:none}
.band{position:absolute;left:clamp(16px,6vw,100px);right:360px;top:var(--bandy,610px);display:flex;flex-wrap:wrap;align-items:center;gap:18px 36px}
.band .line{flex:0 0 100%;font:500 22px/1.3 var(--f-text);color:var(--ice-top);letter-spacing:-.2px}
.wx{display:flex;gap:26px;font:600 15px/1 var(--f-num);color:var(--ice-top);flex-wrap:wrap}
.wx span{color:var(--ice-left);font-weight:400;margin-right:6px}
.wx b{font-weight:600}
.wx b.heat{color:var(--heat-2)}
.wx .pending{color:var(--slate-lt)}
.demo-tag{position:absolute;left:24px;top:20px;z-index:2;font:600 12px/1 var(--f-num);letter-spacing:.12em;color:var(--water);background:var(--ice-top);padding:8px 12px;border:2px solid var(--water)}
.zoom{position:absolute;right:24px;top:20px;display:flex;flex-direction:column;gap:4px;z-index:2}
.zoom button{width:36px;height:36px;display:grid;place-items:center;background:var(--ice-top);border:0;box-shadow:inset 0 -4px 0 var(--ice-right);font:600 16px/1 var(--f-num);color:var(--water);cursor:pointer;padding:0 0 4px}
.zoom button:hover{background:var(--white)}
.zoom button:active{box-shadow:inset 0 -2px 0 var(--ice-right);transform:translateY(2px)}
.zoom button:disabled{color:var(--slate-lt);cursor:not-allowed;background:var(--frost)}
.zoom img{width:16px;height:16px}
.help{position:absolute;right:72px;top:20px;width:280px;z-index:4;font-size:14px;line-height:1.45}
.help .body{padding:14px 16px;display:grid;gap:8px}
.legend{position:absolute;right:24px;bottom:24px;width:316px;z-index:2}
.legend .body{padding:14px 16px 12px;font:400 13px/1.5 var(--f-num);color:var(--water)}
.legend .scale{display:flex;align-items:center;gap:10px;margin-bottom:10px;color:var(--slate)}
.legend .scale i{display:block;height:4px;width:96px;background:repeating-linear-gradient(90deg,var(--water) 0 24px,var(--ice-left) 24px 48px)}
.legend .heat{display:flex;gap:4px;align-items:center;color:var(--slate);margin-bottom:6px}
.legend .heat i{width:24px;height:12px;display:block;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.legend .heat .t{margin-left:8px}
.legend .over-n{color:var(--slate);font-size:12px;margin-top:2px}
.ca{cursor:pointer;display:flex;align-items:center;gap:8px;border-top:2px solid var(--frost);padding-top:10px;margin-top:8px;color:var(--water);font:600 13px/1 var(--f-num)}
.ca .cv{font-weight:400;color:var(--slate)}
.ca .sp{flex:1}
.copy{width:32px;height:28px;display:grid;place-items:center;background:var(--frost);border:0;cursor:pointer;box-shadow:inset 0 -2px 0 var(--ice-left);padding:0}
.copy:hover{background:var(--white)}
.copy img{width:16px;height:16px}
.copy.copied img{content:url(/assets/px/check16.png)}
.copy:disabled{opacity:.45;cursor:not-allowed}
.insp{position:absolute;z-index:5;width:272px;pointer-events:none;transform:translate(-50%,calc(-100% - 10px))}
.insp .body{padding:12px;display:grid;grid-template-columns:64px 1fr;gap:4px 12px;align-items:start}
.insp .art{grid-row:span 3;width:64px;height:64px;background:var(--frost);image-rendering:pixelated}
.insp .nm{font:700 16px/1.2 var(--f-text);color:var(--water);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.insp .tk{font:600 12px/1 var(--f-num);color:var(--slate);letter-spacing:.06em}
.insp dl{grid-column:1/-1;margin:6px 0 0;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font:13px/1.2 var(--f-num)}
.insp dt{color:var(--slate);font-weight:600;letter-spacing:.08em;font-size:11px;text-transform:uppercase;padding-top:1px}
.insp dd{margin:0;font-weight:600;text-align:right}
.insp .pgs{display:inline-flex;gap:1px;vertical-align:-3px;margin-left:6px}
.insp .pgs img{width:12px;height:14px}
.insp .hint{grid-column:1/-1;font:400 12px/1.3 var(--f-text);color:var(--slate);margin-top:4px}
.chip{display:inline-block;font:600 11px/1 var(--f-num);letter-spacing:.1em;padding:5px 7px;background:var(--frost);color:var(--water);text-transform:uppercase;white-space:nowrap}
.chip.frozen{background:var(--ice-left)}
.chip.feed{background:var(--water);color:var(--ice-top)}
.chip.emp{background:var(--coral);color:var(--ice-top)}
.chip.warm{background:var(--heat-1)}
.chip.curve{background:var(--ice-top);box-shadow:inset 0 0 0 2px var(--frost)}
.pops{position:absolute;inset:0;pointer-events:none;z-index:4}
.pops span{position:absolute;transform:translate(-50%,-100%);font:600 13px/1 var(--f-num);background:var(--water);color:var(--ice-top);padding:5px 7px;white-space:nowrap}
.pops span.sink{background:var(--ice-top);color:var(--water)}
.roll{background:var(--ice-top);min-height:420px;max-height:var(--stageh,810px);overflow:auto}
.roll table{width:100%;border-collapse:collapse;font-size:15px}
.roll th{position:sticky;top:0;background:var(--frost);text-align:left;font:600 11px/1 var(--f-num);letter-spacing:.12em;text-transform:uppercase;color:var(--slate);padding:12px 16px;white-space:nowrap}
.roll td{padding:10px 16px;border-bottom:2px solid var(--frost);vertical-align:middle;white-space:nowrap}
.roll td.n{font:600 14px/1 var(--f-num);text-align:right}
.roll th.n{text-align:right}
.roll tr{cursor:pointer}
.roll tbody tr:hover td{background:var(--white)}
.roll .who{display:flex;align-items:center;gap:12px}
.roll .who img{width:32px;height:32px;background:var(--frost)}
.roll .who b{font-weight:700}
.roll .who .tk{font:600 12px/1 var(--f-num);color:var(--slate)}
.roll .invite{padding:72px var(--gut);display:grid;justify-items:start;gap:20px;max-width:560px}
.roll .invite p{font-size:20px}

/* ------------------------------------------------------------------ sections (scenes) */
.sc{position:relative;padding:96px 0 120px}
.sc.frost{background-color:var(--frost);background-image:var(--dots-frost)}
.sc.snow{background-color:var(--snow);background-image:var(--dots-snow)}
.sc.warm{background-color:var(--heat-1);background-image:var(--dots-warm)}
.sc.water{background:var(--water) url(/assets/art/tex-water.webp) repeat;background-size:256px 256px;color:var(--ice-top);image-rendering:pixelated}
.shead{display:grid;justify-items:start;gap:4px;margin-bottom:40px}
.shead .tb{display:inline-flex;clip-path:polygon(4px 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,100% 2px,100% calc(100% - 2px),calc(100% - 4px) calc(100% - 2px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 2px),0 calc(100% - 2px),0 2px,4px 2px)}
.sc.water .shead .tb{background:var(--ice-top);color:var(--water)}
.sc.water .shead .tb .dim{color:var(--slate)}
h2.sec{font:400 56px/1.3 var(--f-disp);font-palette:--ice;letter-spacing:-1px;margin:8px 0 0;color:var(--ice-top)}
h2.sec.heat{font-palette:--heat}
h2.sec.night{font-palette:--night}
.lede{font:500 20px/1.4 var(--f-text);max-width:46ch;margin-top:6px;color:var(--water)}
.sc.water .lede{color:var(--ice-top)}
.note{font:400 14px/1.45 var(--f-text);color:var(--slate);max-width:62ch}
.sc.water .note{color:var(--ice-left)}
/* section joins: 2:1 stair cliff edges (SVG), the colour of the next scene */
.edge{position:absolute;left:0;right:0;bottom:-1px;height:32px;pointer-events:none;background-repeat:repeat-x;background-size:128px 32px;image-rendering:pixelated}
.edge.to-snow{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='32' shape-rendering='crispEdges'%3E%3Cpath d='M0 32V16h8v-4h8v-4h8v-4h8V0h8v4h8v4h8v4h8v4h8v-4h8v-4h8v-4h8V0h8v4h8v4h8v4h8v4h0v16z' fill='%23f3f7f9'/%3E%3C/svg%3E")}
.edge.to-frost{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='32' shape-rendering='crispEdges'%3E%3Cpath d='M0 32V16h8v-4h8v-4h8v-4h8V0h8v4h8v4h8v4h8v4h8v-4h8v-4h8v-4h8V0h8v4h8v4h8v4h8v4h0v16z' fill='%23dbe8ef'/%3E%3C/svg%3E")}
.edge.to-warm{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='32' shape-rendering='crispEdges'%3E%3Cpath d='M0 32V16h8v-4h8v-4h8v-4h8V0h8v4h8v4h8v4h8v4h8v-4h8v-4h8v-4h8V0h8v4h8v4h8v4h8v4h0v16z' fill='%23e9e4dc'/%3E%3C/svg%3E")}
/* snow into deep water: a cliff with lit left faces and dark right faces */
.edge.to-water{height:48px;background-size:128px 48px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='48' shape-rendering='crispEdges'%3E%3Cpath d='M0 48V24h8v-4h8v-4h8v-4h8V8h8v4h8v4h8v4h8v4h8v-4h8v-4h8v-4h8V8h8v4h8v4h8v4h8v4v24z' fill='%231d3347'/%3E%3Cpath d='M0 24h8v-4h8v-4h8v-4h8V8h0v8h-8v4h-8v4H8v4H0z' fill='%23a9c9dc'/%3E%3Cpath d='M32 8h8v4h8v4h8v4h8v4h0v8h-8v-4h-8v-4h-8v-4h-8z' fill='%234f7a99'/%3E%3Cpath d='M64 24h8v-4h8v-4h8v-4h8V8h0v8h-8v4h-8v4h-8v4h-8z' fill='%23a9c9dc'/%3E%3Cpath d='M96 8h8v4h8v4h8v4h8v4h0v8h-8v-4h-8v-4h-8v-4h-8z' fill='%234f7a99'/%3E%3C/svg%3E")}

/* II weather */
.wgrid{display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:start}
.mast{position:relative;margin:0;width:max-content;max-width:100%;display:grid;gap:18px}
.mast .today{max-width:480px}
.mast img{display:block;width:480px;height:480px}
.thermo{position:absolute;display:flex;flex-direction:column-reverse;gap:2px;padding:4px;background:var(--water)}
.thermo i{display:block;width:22px;height:10px;background:var(--water-2)}
.thermo i.on{background:var(--heat-2)}
.thermo i.on.hot{background:var(--coral)}
.thermo-l{position:absolute;font:600 12px/1 var(--f-num);color:var(--water);letter-spacing:.08em;white-space:nowrap}
.wtool{display:grid;gap:22px;padding-top:12px}
.formula{font:500 15px/1.6 var(--f-num);color:var(--water);background:var(--ice-top);padding:14px 18px;clip-path:var(--stair);max-width:62ch}
.formula b{font-weight:600}
.slider{position:relative;max-width:640px;padding-top:8px}
.slider .zones{display:grid;grid-template-columns:33fr 34fr 40fr 93fr;height:12px}
.slider .zones i{display:block}
.slider .zones i:nth-child(1){background:var(--ice-left)}
.slider .zones i:nth-child(2){background:var(--ice-mid)}
.slider .zones i:nth-child(3){background:var(--heat-1)}
.slider .zones i:nth-child(4){background:var(--heat-2)}
.slider .ticks{height:8px;background:repeating-linear-gradient(90deg,var(--ice-shade) 0 2px,transparent 2px calc(100% / 20));margin-top:4px}
.slider input{position:absolute;left:0;right:0;top:0;width:100%;height:36px;margin:0;opacity:0;cursor:ew-resize}
.slider .thumb{position:absolute;top:2px;width:16px;height:24px;margin-left:-8px;background:var(--water);box-shadow:inset 0 -4px 0 var(--ink);pointer-events:none}
.slider input:focus-visible + .thumb{outline:2px solid var(--water);outline-offset:3px}
.slider .stops{display:flex;justify-content:space-between;margin-top:10px;font:600 12px/1 var(--f-num);letter-spacing:.08em;color:var(--slate);text-transform:uppercase}
.slider .stops button{background:none;border:0;padding:4px 0;cursor:pointer;color:inherit;font:inherit;letter-spacing:inherit}
.slider .stops button.on{color:var(--water);text-decoration:underline 2px;text-underline-offset:5px}
.readout{display:flex;align-items:center;gap:22px;flex-wrap:wrap;font:600 15px/1 var(--f-num)}
.readout .big{font-size:28px}
.readout .big b{color:var(--coral);font-weight:600}
.readout img{width:32px;height:32px}
.minirow{display:flex;gap:28px;align-items:flex-end;flex-wrap:wrap}
.mini{display:block}
.today{display:grid;gap:10px}
.today .tl{display:flex;gap:22px;flex-wrap:wrap;font:600 14px/1.2 var(--f-num)}
.today .tl span{font-weight:400;color:var(--slate);margin-right:6px}
.tip{position:relative;display:inline-flex;align-items:center;gap:8px;cursor:pointer;font:500 15px/1.4 var(--f-text);color:var(--water);border:0;background:none;padding:0;text-align:left}
.tip i{flex:none;width:20px;height:20px;display:grid;place-items:center;background:var(--water);color:var(--ice-top);font:600 12px/1 var(--f-num);font-style:normal}
.tip .tt{position:absolute;left:0;bottom:calc(100% + 10px);width:300px;padding:12px 14px;background:var(--water);color:var(--ice-top);font:400 14px/1.45 var(--f-text);display:none;z-index:5}
.tip:hover .tt,.tip:focus-visible .tt{display:block}

/* III frozen */
.fgrid{display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center}
.fstage{position:relative;background:var(--ice-top);clip-path:var(--stair)}
.fstage canvas{display:block}
.fstage .cnt{position:absolute;left:16px;top:14px;font:600 13px/1 var(--f-num);letter-spacing:.08em;color:var(--slate)}
.fstage .cnt b{font-size:28px;color:var(--water);letter-spacing:0;display:block;margin-top:6px}
.fstage .ex{position:absolute;right:14px;top:14px}
.scrub{display:grid;gap:10px;max-width:560px}
.scrub .hrs{display:flex;justify-content:space-between;font:600 12px/1 var(--f-num);color:var(--slate)}
.rule{font:600 22px/1.35 var(--f-text);letter-spacing:-.2px;max-width:30ch}
.edgerep{margin-top:72px}
.etiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;padding:20px}
.etile{display:grid;justify-items:center;gap:8px;text-decoration:none;padding:16px 8px 14px;background:var(--snow);text-align:center;cursor:pointer}
.etile:hover{background:var(--white)}
.etile canvas{display:block}
.etile b{font:700 15px/1.2 var(--f-text)}
.etile .w{font:600 13px/1 var(--f-num);color:var(--slate)}
.etile .w strong{color:var(--water);font-size:18px}
.erep-foot{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;padding:0 20px 20px;font:13px/1.4 var(--f-num);color:var(--slate)}
.compromise{margin-top:28px;max-width:70ch;font:400 15px/1.5 var(--f-text);color:var(--slate);border-left:4px solid var(--ice-left);padding-left:16px}
.compromise b{color:var(--water)}

/* IV emperor */
.egrid{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center}
.plinth{position:relative;width:max-content}
.plinth img{display:block}
.facts{display:grid;gap:14px;margin-top:28px;max-width:560px}
.fact{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start;font:500 16px/1.4 var(--f-text)}
.fact .slotf{width:40px;height:40px;display:grid;place-items:center;background:var(--ice-top);box-shadow:inset 0 -4px 0 var(--heat-2)}
.fact .slotf img{width:16px;height:16px}
.fact small{display:block;font:400 14px/1.4 var(--f-text);color:var(--slate)}
.ecard{margin-top:32px;max-width:620px}
.ecard .body{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center}
.ecard .art{width:128px;height:128px;background:var(--frost)}
.ecard .en{font:400 36px/1.15 var(--f-disp);font-palette:--heat;letter-spacing:-1px;margin:0;color:var(--ice-top);overflow-wrap:anywhere}
.ecard dl{margin:6px 0 0;display:flex;flex-wrap:wrap;gap:6px 22px;font:600 14px/1.2 var(--f-num)}
.ecard dt{display:inline;color:var(--slate);font-weight:400;margin-right:6px}
.ecard dd{display:inline;margin:0}
.crownrow{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:18px}
.crownrow .gap{font:600 14px/1.3 var(--f-num);color:var(--slate)}

/* V voyages */
.vgrid{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:start}
.ship{position:relative;width:max-content}
.ship img{display:block}
.ship.bob img{transform:translateY(var(--bob,0))}
.potbar{background:var(--water-2);clip-path:var(--stair);padding:20px 22px;display:grid;gap:14px}
.potbar canvas{display:block}
.potbar .ks{display:flex;flex-wrap:wrap;gap:8px 26px;font:600 14px/1.3 var(--f-num);color:var(--ice-top)}
.potbar .ks span{color:var(--ice-left);font-weight:400;margin-right:6px}
.route{font:500 14px/1.6 var(--f-num);color:var(--ice-left);margin-top:12px}
.route b{color:var(--ice-top);font-weight:600}
.cranks{display:flex;flex-wrap:wrap;gap:14px;margin-top:18px;align-items:center}
.vlist{display:grid;gap:12px;margin-top:40px}
.voy{background:var(--ice-top);color:var(--water);clip-path:var(--stair)}
.voy > button{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:40px 1fr auto;gap:16px;align-items:center;padding:14px 16px;cursor:pointer}
.voy > button:focus-visible{outline:2px solid var(--ice-left);outline-offset:-4px}
.voy .ic{width:40px;height:40px;background:var(--frost);display:grid;place-items:center}
.voy .ic img{width:16px;height:16px}
.voy .vh{font:600 14px/1.5 var(--f-num);letter-spacing:.04em}
.voy .vh .dim{color:var(--slate);font-weight:400}
.voy .vs{font:400 13px/1.4 var(--f-num);color:var(--slate);margin-top:2px}
.voy .st{font:600 11px/1 var(--f-num);letter-spacing:.12em;padding:6px 8px;background:var(--frost)}
.voy .st.final{background:var(--water);color:var(--ice-top)}
.voy .st.vetoed{background:var(--ice-left)}
.voy .det{padding:0 16px 16px 72px}
.voy table{width:100%;border-collapse:collapse;font:13px/1.3 var(--f-num)}
.voy th{text-align:left;font:600 11px/1 var(--f-num);letter-spacing:.12em;color:var(--slate);padding:8px 10px 8px 0;border-bottom:2px solid var(--frost)}
.voy td{padding:8px 10px 8px 0;border-bottom:2px solid var(--frost)}
.voy td.n,.voy th.n{text-align:right}
.voy a{color:var(--water)}
.berth{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;background:var(--water-2);padding:24px;clip-path:var(--stair);margin-top:40px}
.berth p{font:500 18px/1.4 var(--f-text);color:var(--ice-top);max-width:40ch}

/* VI launch */
.lgrid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:48px;align-items:start}
.lform .body{display:grid;gap:22px}
.step{display:grid;grid-template-columns:28px 1fr;gap:14px}
.step > .n{width:28px;height:28px;display:grid;place-items:center;background:var(--water);color:var(--ice-top);font:600 13px/1 var(--f-num)}
.step > .n.done{background:var(--ice-left);color:var(--water)}
.step h3{margin:2px 0 10px;font:700 16px/1.2 var(--f-text)}
.fl{display:grid;gap:6px}
.fl > span{font:600 11px/1 var(--f-num);letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
input[type=text],input[type=number],input[type=url],textarea{width:100%;height:46px;padding:0 12px;border:0;background:var(--snow);box-shadow:inset 0 -2px 0 var(--ice-left);font:500 16px/1 var(--f-text);color:var(--water);border-radius:0}
textarea{height:84px;padding:12px;line-height:1.4;resize:vertical}
input[type=number]{font-family:var(--f-num);font-weight:600}
input:focus{outline:2px solid var(--water);outline-offset:0;background:var(--white)}
.drop{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center;padding:14px;background:var(--snow);box-shadow:inset 0 0 0 2px var(--frost);cursor:pointer}
.drop.over{box-shadow:inset 0 0 0 2px var(--water);background:var(--white)}
.drop .pv{width:96px;height:96px;background:var(--frost) url(/assets/px/g-floe.png) center/32px no-repeat;image-rendering:pixelated;object-fit:cover}
.drop b{font:700 15px/1.3 var(--f-text);display:block}
.drop small{font:13px/1.4 var(--f-text);color:var(--slate)}
.presets{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.presets button{height:32px;padding:0 12px;border:0;background:var(--frost);box-shadow:inset 0 -2px 0 var(--ice-left);font:600 13px/1 var(--f-num);color:var(--water);cursor:pointer}
.presets button.on{background:var(--water);color:var(--ice-top);box-shadow:inset 0 -2px 0 var(--ink)}
.advb{cursor:pointer;font:600 14px/1 var(--f-text);color:var(--slate);display:flex;gap:8px;align-items:center;background:none;border:0;padding:8px 0}
.advb::before{content:"";width:8px;height:8px;background:var(--slate);clip-path:polygon(0 0,100% 50%,0 100%)}
.advb[aria-expanded=true]::before{clip-path:polygon(0 0,100% 0,50% 100%)}
.adv .fl{margin-top:12px}
.still{font:600 13px/1.4 var(--f-num);color:var(--slate)}
.terms{font:13px/1.5 var(--f-num);color:var(--slate);display:grid;gap:2px}
.terms b{color:var(--water);font-weight:600}
.lprev{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;background:var(--frost);padding:14px}
.lprev canvas{display:block}
.lprev .pn{font:700 16px/1.2 var(--f-text)}
.lprev .pt{font:600 12px/1 var(--f-num);color:var(--slate)}
.ldone{background:var(--water);color:var(--ice-top);padding:18px;display:grid;gap:12px}
.ldone .row{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center}
.ldone .link{color:var(--ice-top)}

/* VII ending: the edge of the floe */
.ending{position:relative;background:var(--water);color:var(--ice-top);overflow:hidden}
.ending .cliff{display:block;width:100%;height:96px;background:var(--snow)}
.ending .sea{position:relative;height:640px;background:var(--water) url(/assets/art/sea.webp) center top/1920px 1080px no-repeat;image-rendering:pixelated}
.ending h2{position:absolute;left:var(--gut);top:46%;font:400 56px/1.3 var(--f-disp);font-palette:--night;letter-spacing:-1px;margin:0;color:var(--ice-top)}
.floe{position:absolute;display:block;text-decoration:none;cursor:pointer;width:var(--fw);height:var(--fh)}
.floe .sh{position:absolute;left:0;right:0;bottom:-4px;height:100%;background:var(--ink);clip-path:polygon(50% 40%,100% 70%,50% 100%,0 70%);opacity:.55}
.floe i{position:absolute;inset:0;background-repeat:no-repeat;image-rendering:pixelated}
.floe b{position:absolute;left:0;right:0;top:28%;text-align:center;font:600 13px/1 var(--f-num);letter-spacing:.12em;color:var(--water)}
.floe:focus-visible{outline:2px solid var(--ice-left);outline-offset:6px}
.endline{position:absolute;left:var(--gut);right:var(--gut);bottom:22px;display:flex;flex-wrap:wrap;gap:8px 24px;font:12px/1.4 var(--f-num);color:var(--slate-lt)}
.endline a{color:var(--slate-lt)}

/* toasts: ice slabs bottom-left */
.tstack{position:fixed;left:16px;bottom:16px;z-index:60;display:grid;gap:8px;width:min(380px,calc(100vw - 32px))}
.toast{display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:center;background:var(--ice-top);color:var(--water);padding:10px 14px 12px 10px;box-shadow:inset 0 -4px 0 var(--ice-right);clip-path:var(--stair);font:500 14px/1.35 var(--f-text);animation:drop .25s steps(3)}
.toast.err{box-shadow:inset 0 -4px 0 var(--water)}
.toast .ts{width:28px;height:28px;display:grid;place-items:center;background:var(--frost)}
.toast .ts img{width:16px;height:16px}
.toast a{font:600 13px/1 var(--f-text);color:var(--water)}
.toast.out{opacity:0;transition:opacity .25s steps(3)}
@keyframes drop{from{transform:translateY(-6px)}66%{transform:translateY(-2px)}to{transform:none}}

/* dialogs: wallet picker (kit) + mine */
dialog.dlg{border:0;padding:0;background:var(--ice-top);color:var(--water);width:min(440px,calc(100vw - 32px));clip-path:var(--stair)}
dialog.dlg::backdrop{background:rgba(20,34,47,.62)}
dialog.dlg h2{margin:0;padding:0 16px;height:40px;display:flex;align-items:center;background:var(--water);color:var(--ice-top);font:600 12px/1 var(--f-num);letter-spacing:.12em;text-transform:uppercase}
.dlg-x{position:absolute;right:6px;top:6px;width:28px;height:28px;border:0;background:var(--water-2);color:var(--ice-top);cursor:pointer;font:600 18px/1 var(--f-num);z-index:2}
.wpick .wp-list{display:grid;gap:8px;padding:16px}
.wpick .wp-item{display:flex;align-items:center;gap:12px;height:52px;padding:0 14px 4px 6px;border:0;background:var(--snow);box-shadow:inset 0 -4px 0 var(--ice-left);cursor:pointer;font:600 16px/1 var(--f-text);color:var(--water);text-align:left}
.wpick .wp-item:hover{background:var(--white)}
.wpick .wp-item img{width:32px;height:32px}
.wpick .wp-dot{width:40px;height:40px;background:var(--frost) url(/assets/px/mark-32.png) center/32px no-repeat;image-rendering:pixelated}
.wpick .wp-none,.wpick .wp-cur{padding:16px 16px 0;font-size:15px}
.wpick .wp-get{display:flex;gap:18px;flex-wrap:wrap;padding:8px 16px 16px;font:600 14px/1 var(--f-text)}
.wpick .wp-get a{color:var(--water);text-underline-offset:4px;text-decoration-color:var(--ice-left);text-decoration-thickness:2px}
.wpick .wp-off{margin:0 16px 16px;height:40px;padding:0 14px;border:0;background:var(--frost);box-shadow:inset 0 -2px 0 var(--ice-left);cursor:pointer;font:600 14px/1 var(--f-text)}
.wpick .wp-err{padding:0 16px 16px;color:var(--water);font-weight:600}
.mine .mb{padding:16px;display:grid;gap:12px;max-height:70vh;overflow:auto}
.mine .mrow{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;background:var(--snow);padding:10px}
.mine .mrow img{width:40px;height:40px;background:var(--frost)}
.mine .mrow b{display:block;font:700 15px/1.2 var(--f-text)}
.mine .mrow span{font:600 12px/1.3 var(--f-num);color:var(--slate)}
.mine .tot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font:600 14px/1.3 var(--f-num)}

/* SUNSET banner */
.sunset{position:sticky;top:0;z-index:50;background:var(--water);color:var(--ice-top);padding:10px var(--gut);font:600 13px/1.4 var(--f-num)}
.sunset a{color:var(--ice-top)}

/* inner pages */
.page{max-width:var(--col);margin:0 auto;padding:40px var(--gut) 120px}
.phead{display:grid;gap:4px;margin-bottom:32px}
.phead h1{font:400 72px/1.3 var(--f-disp);font-palette:--ice;letter-spacing:-2px;margin:0;color:var(--ice-top)}
.phead h1.heat{font-palette:--heat}
.crumbs{font:600 12px/1 var(--f-num);letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.crumbs a{color:var(--slate)}
.foot{border-top:2px solid var(--frost);margin-top:72px;padding-top:20px;display:flex;flex-wrap:wrap;gap:12px 24px;font:600 13px/1 var(--f-num);color:var(--slate)}
.foot a{color:var(--slate)}

/* ------------------------------------------------------------------ responsive */
@media (max-width:1100px){
  .nav a:nth-child(n+5){display:none}
  .wgrid,.fgrid,.egrid,.vgrid,.lgrid{grid-template-columns:minmax(0,1fr)}
  .band{right:24px}
}
@media (max-width:860px){
  .nav{display:none}
  .key.menu-b{display:inline-flex}
  .bar{gap:12px}
  .bar .wlt .kl{max-width:96px;overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:700px){
  :root{--gut:16px;--barh:56px}
  html,body{font-size:16px}
  .brand span{font-size:17px}
  .name{font-size:64px;letter-spacing:-1px;transform:translateY(-80%)}
  .band{left:16px;right:16px;gap:12px 20px}
  .band .line{font-size:18px}
  .wx{gap:10px 18px;font-size:13px}
  .zoom{right:12px;top:12px}
  .zoom button{width:32px;height:32px}
  .demo-tag{left:12px;top:12px}
  .legend{position:fixed;left:0;right:0;bottom:0;width:auto;z-index:40;clip-path:none}
  .legend .tb{display:none}
  .legend .body{padding:8px 16px calc(8px + env(safe-area-inset-bottom))}
  .legend .scale,.legend .heat,.legend .over-n{display:none}
  .legend .ca{border:0;margin:0;padding:0}
  body{padding-bottom:48px}
  .tstack{bottom:64px}
  .help{right:52px;width:min(280px,calc(100vw - 72px))}
  .sc{padding:72px 0 96px}
  h2.sec{font-size:36px}
  .lede{font-size:18px}
  .mast img{width:320px;height:320px}
  .etiles{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px;gap:10px}
  .two{grid-template-columns:1fr}
  .voy > button{grid-template-columns:40px 1fr;gap:12px}
  .voy .st{grid-column:2;justify-self:start}
  .voy .det{padding:0 12px 12px}
  .voy table{font-size:12px}
  .ending .sea{height:640px;background-position:center top}
  .ending h2{top:auto;bottom:auto;top:31%}
  .ending h2{font-size:36px}
  .phead h1{font-size:44px}
  .ecard .body{grid-template-columns:1fr}
  .ecard .en{font-size:28px}
  .roll td,.roll th{padding:10px 10px}
  .roll .hide-m{display:none}
}
@media (prefers-reduced-motion:reduce){
  .key.busy .slot::after{animation:none}
  .toast{animation:none}
}

/* data figures: canvases with html labels anchored to native coordinates */
.race,.vdia{position:relative;margin:0;width:max-content;max-width:100%}
.race canvas,.vdia canvas{display:block}
.rl{position:absolute;inset:0;pointer-events:none}
.rl span{position:absolute;transform:translate(-50%,-100%);font:600 12px/1 var(--f-num);color:var(--water);background:var(--ice-top);padding:4px 6px;white-space:nowrap;letter-spacing:.02em}
.rl span.emp{background:var(--coral);color:var(--ice-top)}
.rl span.dk{background:var(--water);color:var(--ice-top)}
.rl span.lo{transform:translate(-50%,8px)}
.rl span.left{transform:translate(0,-50%)}
.rl span em{font-style:normal;color:var(--slate);font-weight:400}
.rl span.dk em{color:var(--ice-left)}
.race figcaption{margin-top:10px}
.vdia .rl span{background:var(--ice-top);color:var(--water)}

/* coin page */
.cgrid{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:40px;align-items:start}
.cleft{display:grid;gap:16px;justify-items:start}
.cstage canvas{display:block}
.cart img{display:block;width:256px;height:256px;background:var(--frost)}
.cfacts{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--frost)}
.cfacts > div{background:var(--ice-top);padding:12px 14px;display:grid;gap:4px;align-content:start}
.cfacts dt{font:600 11px/1.2 var(--f-num);letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.cfacts dd{margin:0;font:600 17px/1.25 var(--f-num);font-variant-numeric:tabular-nums;color:var(--water);overflow-wrap:anywhere}
.cfacts dd.s{font:400 12px/1.35 var(--f-text);color:var(--slate)}
.cpad{background:var(--ice-top);padding:12px 14px;margin:16px 0 0;border-top:0;flex-wrap:wrap}
.cpad a{color:var(--slate)}
.cacts{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:center;margin:20px 0}
.hist{list-style:none;margin:0;padding:0}
.hist li{display:grid;grid-template-columns:72px 150px 1fr auto;gap:12px;align-items:baseline;padding:10px 14px;border-bottom:2px solid var(--frost);font-size:14px}
.hist .t{color:var(--slate);font-size:12px}
.hist .w{font:13px/1.35 var(--f-num);color:var(--slate)}
.hist a{font-size:12px;color:var(--water)}
/* tx page */
.txevs{display:grid;gap:16px;margin-top:16px}
.txev .cfacts{padding:0}
/* stats */
.killer{font:500 30px/1.3 var(--f-text);letter-spacing:-.4px;max-width:30ch;margin-bottom:32px}
.killer b{font-family:var(--f-num);font-weight:600;font-size:.9em}
.sgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;background:var(--frost)}
.stat{background:var(--ice-top);padding:16px;display:grid;gap:6px}
.stat dt{font:600 11px/1.2 var(--f-num);letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.stat dd{margin:0;font:600 24px/1.1 var(--f-num);color:var(--water)}
/* log */
ol.log{list-style:none;margin:0;padding:0;display:grid;gap:16px;max-width:820px}
ol.log h2{margin:0 0 8px;font:700 22px/1.2 var(--f-text)}
ol.log ul{margin:0;padding-left:18px;display:grid;gap:6px}
/* 404 */
.lostp{background:var(--water)}
.lost{position:relative;min-height:100svh;overflow:hidden;display:grid;align-items:center}
.lostbg{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform:translate(-50%,-50%)}
.lostc{position:relative;padding:0 var(--gut);display:grid;justify-items:start;gap:16px;max-width:var(--col);margin:0 auto;width:100%}
.lostc h1{font:400 160px/1.2 var(--f-disp);font-palette:--night;letter-spacing:-3px;margin:0;color:var(--ice-top)}
.lostc p{font:500 22px/1.3 var(--f-text);color:var(--ice-top)}
.lostl{font-size:14px!important}
@media (max-width:1100px){.cgrid{grid-template-columns:1fr}.sgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.cfacts{grid-template-columns:repeat(2,minmax(0,1fr))}.hist li{grid-template-columns:1fr auto;gap:4px 12px}.hist .w{grid-column:1/-1}.killer{font-size:22px}.lostc h1{font-size:96px}.cart img{width:192px;height:192px}}

/* docs */
.docs .toc{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:14px 0;border-top:2px solid var(--frost);border-bottom:2px solid var(--frost);margin-bottom:24px;position:sticky;top:0;background:var(--snow);z-index:5}
.docs .toc a{color:var(--slate);text-decoration:none}
.docs .toc a:hover{color:var(--water)}
.dsec{padding:40px 0 8px;max-width:900px;display:grid;gap:14px}
.dsec h2{font:400 44px/1.3 var(--f-disp);font-palette:--ice;letter-spacing:-1px;margin:0;color:var(--ice-top)}
.dsec h3{margin:0 0 8px;font:700 17px/1.2 var(--f-text)}
.dsec p,.dsec li,.dsec dd{max-width:72ch}
.dsec code,.dt code{font:500 14px/1.4 var(--f-num);background:var(--frost);padding:1px 5px}
.dsec ul,.dsec ol{margin:0;padding-left:20px;display:grid;gap:8px}
.dt{width:100%;border-collapse:collapse;font-size:15px;background:var(--ice-top)}
.dt th{text-align:left;font:600 11px/1.2 var(--f-num);letter-spacing:.12em;text-transform:uppercase;color:var(--slate);background:var(--frost);padding:10px 12px}
.dt td{padding:10px 12px;border-bottom:2px solid var(--frost);vertical-align:top}
.faq dt{font-weight:700;margin-top:14px}
.faq dd{margin:4px 0 0;color:var(--slate)}
@media (max-width:700px){.dt{font-size:13px;display:block;overflow-x:auto}.dsec h2{font-size:32px}.docs .toc{position:static}}
.chead{grid-template-columns:auto 1fr;align-items:center;gap:24px}
.cthumb{width:128px;height:128px;background:var(--frost)}
@media (max-width:700px){.chead{grid-template-columns:1fr}.cthumb{width:96px;height:96px}}
.wgrid > *,.fgrid > *,.egrid > *,.vgrid > *,.lgrid > *,.cgrid > *{min-width:0}
.vlist-m{display:none}
@media (max-width:700px){
  .hero .tb .dim,.tkey .tl{display:none}
  .band .key{height:48px}
  .vdia .rl span.lo{display:none}
  .vlist-m{display:flex;flex-wrap:wrap;gap:6px 16px;font:600 12px/1.3 var(--f-num);color:var(--ice-top);margin-top:10px}
  .vlist-m em{font-style:normal;color:var(--ice-left);font-weight:400}
  .ecard dl{display:grid;grid-template-columns:1fr 1fr}
  .crownrow .gap{flex-basis:100%}
}
@media (max-width:700px){.hero .tb{height:40px}.tb .tab{height:40px}.tb .tkey{height:32px}.copy{height:32px;width:36px}.slider .stops button{min-height:32px}}
@media (min-width:701px) and (max-width:1100px){
  .legend{left:24px;right:auto;top:64px;bottom:auto;width:280px}
  .legend .scale,.legend .heat{display:none}
  .legend .ca{border:0;margin:0;padding:0}
  .band{right:24px}
}
.voy .vs a{display:inline-block;margin-right:6px}
.slider.hours .cells{display:grid;grid-template-columns:repeat(12,1fr);gap:2px;height:16px}
.slider.hours .cells i{display:block;background:var(--ice-mid)}
.slider.hours .cells i.on{background:var(--ice-right)}
.slider.hours .thumb{top:-4px;height:28px}
.slider.hours .hrs{margin-top:10px}
.pills{display:grid;gap:10px}
@media (max-width:700px){.cleft .tb .dim,.cright .tb .dim{display:none}}