/* ============================================================
   CANIS: styles for the Canis pages only (/canis/ and /canis/privacy/).
   A separate file on purpose: the shared stylesheets are not touched.
   The look of the phone screens follows the app itself (Design/Pixel.swift):
   2 pt art pixels, 2 pt borders, 4 pt hard shadows, stair-stepped corners.
   One "pt" below is one iPhone point, scaled to the box it sits in (--pt).
   ============================================================ */

body[data-app="canis"]{
  --accent:var(--teal); --accent-2:#9AF3E3;
  --a-ink:#1B1A2E; --a-canvas:#F4E7D4; --a-surface:#FFFCF5; --a-hair:#E4D9CC;
  --a-t2:#5C5770; --a-t3:#857F98; --a-ink2:#34305A; --a-night:#24214A;
  --a-red:#FF3D1F; --a-orange:#FF7A1F; --a-yellow:#FFE347; --a-teal:#2DE8C9; --a-blue:#3D8BFF; --a-mint:#087A6A;
}
.cn-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }

/* ---------- the pixel kit: a panel is one border-image with stair corners ---------- */
.cn-appsurf, .cn-phone, .cn-goals-side{ container-type:inline-size; --pt:calc(100cqw / 390); --u:calc(var(--pt) * 2); }
.cn-goals-side{ --pt:calc(100cqw / 330); }
.cn-px{
  --S:4; --img:var(--cn-s2-surface); --P:12; --sd:2; --sh:#1B1A2E;
  box-sizing:border-box; position:relative;
  border:solid transparent; border-width:calc(var(--u) * var(--S));
  border-image-source:var(--img); border-image-slice:var(--S) fill; border-image-width:calc(var(--u) * var(--S)); border-image-repeat:stretch;
  padding:max(0px, calc(var(--P) * var(--pt) - var(--u) * var(--S)));
  filter:drop-shadow(calc(var(--u) * var(--sd)) calc(var(--u) * var(--sd)) 0 var(--sh));
  image-rendering:pixelated; background:none;
}
.cn-px1{ --S:3; --img:var(--cn-s1-surface); }
.cn-ico{
  display:inline-block; flex:none; width:calc(24 * var(--pt)); height:calc(24 * var(--pt)); background:currentColor;
  -webkit-mask:var(--ico) center / 100% 100% no-repeat; mask:var(--ico) center / 100% 100% no-repeat; image-rendering:pixelated; vertical-align:middle;
}

/* ---------- hero ---------- */
.cn-brandrow{ display:flex; align-items:center; gap:16px; margin-bottom:8px; flex-wrap:wrap; }
.cn-appicon{ width:72px; height:72px; border-radius:22%; flex:none; box-shadow:0 0 0 2px rgba(228,217,204,0.4), 5px 5px 0 rgba(0,0,0,0.5); }
.cn-brandrow .eyebrow{ margin:0; }
.cn-stage-wrap{ display:flex; flex-direction:column; align-items:center; gap:14px; width:100%; }
.cn-bezel{
  position:relative; width:min(100%, 372px); padding:7px; border-radius:46px; background:#05050A;
  box-shadow:0 0 0 2px rgba(228,217,204,0.5), 10px 10px 0 rgba(0,0,0,0.5), 0 0 70px -16px var(--accent);
}
.cn-phone{
  position:relative; width:100%; aspect-ratio:780 / 1688; border-radius:39px; overflow:hidden; background:var(--a-canvas); color:var(--a-ink);
  font-family:'Press Start 2P', monospace; user-select:none; -webkit-user-select:none; touch-action:manipulation; cursor:crosshair; outline-offset:6px;
}
.cn-phone:focus-visible{ outline:3px solid var(--yellow); }
.cn-phone-static{ cursor:default; }
.cn-phone-static img{ display:block; width:100%; height:100%; object-fit:cover; }
.cn-mapimg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; -webkit-user-drag:none; }
.cn-fog{ position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; pointer-events:none; }
.cn-world, .cn-ui{ position:absolute; inset:0; pointer-events:none; }
.cn-ui button{ pointer-events:auto; cursor:pointer; font-family:inherit; color:inherit; }
.cn-status{ position:absolute; left:calc(27 * var(--pt)); top:calc(15 * var(--pt)); font-size:calc(12 * var(--pt)); line-height:calc(14 * var(--pt)); }

/* HUD card */
.cn-hud{ position:absolute; left:calc(14 * var(--pt)); top:calc(54 * var(--pt)); width:calc(362 * var(--pt)); height:calc(78 * var(--pt)); --P:12; display:flex; align-items:center; gap:calc(10 * var(--pt)); }
.cn-pframe{ --sd:0; --P:0; width:calc(52 * var(--pt)); height:calc(52 * var(--pt)); flex:none; --img:var(--cn-s1-paper); }
.cn-pframe canvas{ position:absolute; left:calc(-4 * var(--pt)); top:calc(-4 * var(--pt)); width:calc(48 * var(--pt)); height:calc(48 * var(--pt)); image-rendering:pixelated; }
.cn-hud-mid{ width:calc(174 * var(--pt)); flex:none; display:grid; gap:calc(6 * var(--pt)); }
.cn-hud-name{ display:flex; align-items:baseline; gap:calc(10 * var(--pt)); line-height:calc(14 * var(--pt)); }
.cn-hud-name b{ font-weight:400; font-size:calc(12 * var(--pt)); }
.cn-lv{ font-size:calc(8 * var(--pt)); color:var(--a-red); }
.cn-bar{ display:flex; gap:var(--pt); height:calc(12 * var(--pt)); box-sizing:border-box; border:calc(2 * var(--pt)) solid var(--a-ink); background:var(--a-hair); }
.cn-bar i{ flex:1 1 0; min-width:0; display:block; }
.cn-bar i.r{ background:var(--a-red); box-shadow:inset 0 var(--pt) 0 rgba(255,255,255,0.45); }
.cn-bar i.o{ background:var(--a-orange); box-shadow:inset 0 var(--pt) 0 rgba(255,255,255,0.45); }
.cn-bar i.y{ background:var(--a-yellow); box-shadow:inset 0 var(--pt) 0 rgba(255,255,255,0.45); }
.cn-hud-xp{ font-size:calc(8 * var(--pt)); line-height:calc(10 * var(--pt)); color:var(--a-t2); white-space:nowrap; }
.cn-vr{ width:calc(2 * var(--pt)); height:calc(32 * var(--pt)); background:var(--a-hair); flex:none; margin-left:calc(-2 * var(--pt)); }
.cn-hud-steps{ display:grid; gap:calc(6 * var(--pt)); justify-items:end; flex:1; min-width:0; text-align:right; }
.cn-hud-steps b{ font-weight:400; font-size:calc(16 * var(--pt)); line-height:calc(18 * var(--pt)); font-variant-numeric:tabular-nums; }
.cn-hud-steps span{ font-size:calc(8 * var(--pt)); color:var(--a-t2); }
.cn-city, .cn-wx{ position:absolute; left:calc(14 * var(--pt)); height:calc(31 * var(--pt)); --P:10; display:flex; align-items:center; gap:calc(8 * var(--pt)); font-size:calc(8 * var(--pt)); white-space:nowrap; }
.cn-city{ top:calc(144 * var(--pt)); width:calc(292 * var(--pt)); }
.cn-dot{ width:calc(6 * var(--pt)); height:calc(6 * var(--pt)); background:var(--a-red); flex:none; }
.cn-wx{ top:calc(184 * var(--pt)); width:calc(158 * var(--pt)); }
.cn-wx .cn-ico{ width:calc(30 * var(--pt)); height:calc(30 * var(--pt)); margin-left:calc(-4 * var(--pt)); }
.cn-wx b{ font-weight:400; font-size:calc(9 * var(--pt)); margin-left:calc(-2 * var(--pt)); }
.cn-wx em{ font-style:normal; font-size:calc(7 * var(--pt)); color:var(--a-t2); }
.cn-sq{ position:absolute; left:calc(332 * var(--pt)); width:calc(44 * var(--pt)); height:calc(44 * var(--pt)); --P:0; display:grid; place-items:center; }
.cn-sq1{ top:calc(144 * var(--pt)); }
.cn-sq2{ top:calc(202 * var(--pt)); }
.cn-sq .cn-ico{ width:calc(24 * var(--pt)); height:calc(24 * var(--pt)); }

/* the arcade toast */
.cn-toastbox{ position:absolute; left:calc(16 * var(--pt)); top:calc(231 * var(--pt)); width:calc(290 * var(--pt)); }
.cn-toastbox[hidden]{ display:none; }
.cn-toastbox.show{ animation:cn-in 0.2s steps(4) both; }
@keyframes cn-in{ from{ transform:translateY(calc(-16 * var(--pt))); opacity:0; } to{ transform:none; opacity:1; } }
.cn-toast{ --img:var(--cn-s2-toast); --P:14; --sh:rgba(5,5,10,0.85); display:flex; align-items:center; gap:calc(12 * var(--pt)); color:var(--a-hair); }
.cn-coin{ width:calc(24 * var(--pt)); height:calc(24 * var(--pt)); image-rendering:pixelated; flex:none; }
.cn-toast-txt{ flex:1; min-width:0; display:grid; gap:calc(8 * var(--pt)); }
.cn-toast-txt b{ font-weight:400; font-size:calc(16 * var(--pt)); line-height:calc(16 * var(--pt)); color:var(--a-yellow); text-shadow:calc(2 * var(--pt)) calc(2 * var(--pt)) 0 var(--a-red); overflow-wrap:anywhere; }
.cn-toast-txt span{ font-size:calc(8 * var(--pt)); line-height:calc(12 * var(--pt)); }
.cn-sendit{ --img:var(--cn-s1-red); --sh:#05050A; --P:10; height:calc(32 * var(--pt)); flex:none; font-size:calc(8 * var(--pt)); color:#fff; border-top-width:calc(var(--u) * var(--S)); cursor:pointer; }
.cn-sendit:active{ transform:translate(calc(4 * var(--pt)), calc(4 * var(--pt))); filter:none; }

/* OSM credit chip and the dock (start button / walk panel) */
.cn-osm{ position:absolute; left:calc(14 * var(--pt)); top:calc(644 * var(--pt)); height:calc(26 * var(--pt)); --P:8; display:flex; align-items:center; font-size:calc(8 * var(--pt)); --sh:rgba(27,26,46,0.9); }
.cn-phone.is-walk .cn-osm{ top:calc(580 * var(--pt)); }
.cn-dock{ position:absolute; left:calc(12 * var(--pt)); top:calc(626 * var(--pt)); width:calc(363 * var(--pt)); height:calc(125 * var(--pt)); }
.cn-start{
  position:absolute; left:0; top:calc(66 * var(--pt)); width:calc(362 * var(--pt)); height:calc(59 * var(--pt)); box-sizing:border-box; padding:0; border:0; background:none; font-size:calc(16 * var(--pt)); color:#fff;
}
.cn-start .face{ position:absolute; inset:0 calc(4 * var(--pt)) calc(4 * var(--pt)) 0; display:flex; align-items:center; justify-content:center; gap:calc(10 * var(--pt)); }
.cn-start .ink, .cn-start .band{ position:absolute; pointer-events:none; }
.cn-start .ink{ inset:0 calc(4 * var(--pt)) calc(4 * var(--pt)) 0; background:var(--a-ink); clip-path:polygon(calc(var(--u) * 2) 0, calc(100% - var(--u) * 2) 0, calc(100% - var(--u) * 2) var(--u), calc(100% - var(--u)) var(--u), calc(100% - var(--u)) calc(var(--u) * 2), 100% calc(var(--u) * 2), 100% calc(100% - var(--u) * 2), calc(100% - var(--u)) calc(100% - var(--u) * 2), calc(100% - var(--u)) calc(100% - var(--u)), calc(100% - var(--u) * 2) calc(100% - var(--u)), calc(100% - var(--u) * 2) 100%, calc(var(--u) * 2) 100%, calc(var(--u) * 2) calc(100% - var(--u)), var(--u) calc(100% - var(--u)), var(--u) calc(100% - var(--u) * 2), 0 calc(100% - var(--u) * 2), 0 calc(var(--u) * 2), var(--u) calc(var(--u) * 2), var(--u) var(--u), calc(var(--u) * 2) var(--u)); }
.cn-start .band{ inset:var(--u) calc(4 * var(--pt) + var(--u)) calc(4 * var(--pt) + var(--u)) var(--u); background:linear-gradient(var(--a-red) 0 58%, var(--a-orange) 58% 100%);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--u) * 2), calc(100% - var(--u)) calc(100% - var(--u) * 2), calc(100% - var(--u)) calc(100% - var(--u)), calc(100% - var(--u) * 2) calc(100% - var(--u)), calc(100% - var(--u) * 2) 100%, calc(var(--u) * 2) 100%, calc(var(--u) * 2) calc(100% - var(--u)), var(--u) calc(100% - var(--u)), var(--u) calc(100% - var(--u) * 2), 0 calc(100% - var(--u) * 2)); }
.cn-start .shade{ position:absolute; inset:calc(4 * var(--pt)) 0 0 calc(4 * var(--pt)); background:var(--a-ink); clip-path:polygon(calc(var(--u) * 2) 0, calc(100% - var(--u) * 2) 0, calc(100% - var(--u) * 2) var(--u), calc(100% - var(--u)) var(--u), calc(100% - var(--u)) calc(var(--u) * 2), 100% calc(var(--u) * 2), 100% calc(100% - var(--u) * 2), calc(100% - var(--u)) calc(100% - var(--u) * 2), calc(100% - var(--u)) calc(100% - var(--u)), calc(100% - var(--u) * 2) calc(100% - var(--u)), calc(100% - var(--u) * 2) 100%, calc(var(--u) * 2) 100%, calc(var(--u) * 2) calc(100% - var(--u)), var(--u) calc(100% - var(--u)), var(--u) calc(100% - var(--u) * 2), 0 calc(100% - var(--u) * 2), 0 calc(var(--u) * 2), var(--u) calc(var(--u) * 2), var(--u) var(--u), calc(var(--u) * 2) var(--u)); }
.cn-start:active .face, .cn-start:active .ink, .cn-start:active .band{ transform:translate(calc(4 * var(--pt)), calc(4 * var(--pt))); }
.cn-start:active .shade{ opacity:0; }
.cn-start .face{ z-index:2; }
.cn-start .ink{ z-index:1; } .cn-start .band{ z-index:1; } .cn-start .shade{ z-index:0; }
.cn-start .cn-ico{ width:calc(24 * var(--pt)); height:calc(24 * var(--pt)); color:#fff; }
.cn-walk{ position:absolute; inset:0 calc(-1 * var(--pt)) 0 0; --P:14; display:grid; grid-template-rows:auto 1fr; gap:calc(12 * var(--pt)); }
.cn-stats{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); height:calc(30 * var(--pt)); }
.cn-stats div{ display:grid; justify-items:center; align-content:start; gap:calc(6 * var(--pt)); }
.cn-stats div + div{ border-left:calc(2 * var(--pt)) solid var(--a-hair); }
.cn-stats b{ font-weight:400; font-size:calc(12 * var(--pt)); line-height:calc(14 * var(--pt)); font-variant-numeric:tabular-nums; }
.cn-stats span{ font-size:calc(7 * var(--pt)); color:var(--a-t2); }
.cn-btns{ display:grid; grid-template-columns:1fr 1fr; gap:calc(10 * var(--pt)); }
.cn-btn{ --P:0; height:calc(51 * var(--pt)); display:flex; align-items:center; justify-content:center; gap:calc(8 * var(--pt)); font-size:calc(16 * var(--pt)); padding:0; }
.cn-btn.alt{ --img:var(--cn-s2-ink2); color:#fff; }
.cn-btn .cn-ico{ width:calc(24 * var(--pt)); height:calc(24 * var(--pt)); }
.cn-btn:active{ transform:translate(calc(4 * var(--pt)), calc(4 * var(--pt))); filter:none; }

/* tab bar, home indicator */
.cn-tabs{ position:absolute; left:0; right:0; top:calc(760 * var(--pt)); bottom:0; box-sizing:border-box; padding-top:calc(8 * var(--pt)); background:var(--a-surface); border-top:calc(2 * var(--pt)) solid var(--a-ink); display:grid; grid-template-columns:repeat(4, 1fr); align-items:start; }
.cn-tab{ display:grid; justify-items:center; gap:calc(6 * var(--pt)); font-size:calc(7 * var(--pt)); color:var(--a-t3); }
.cn-tab.on{ color:var(--a-red); }
.cn-tab.on .cn-ico{ color:var(--a-ink); }
.cn-home{ position:absolute; left:calc(128 * var(--pt)); top:calc(831 * var(--pt)); width:calc(134 * var(--pt)); height:calc(5 * var(--pt)); border-radius:calc(3 * var(--pt)); background:var(--a-ink); }

/* world layer: pins, paws, Volf, bubble, pops */
.cn-pin{ position:absolute; transform:translate(-50%, -100%); width:calc(40 * var(--pt)); display:grid; justify-items:center; }
.cn-pinb{ --P:0; --sd:1; --sh:rgba(27,26,46,0.35); width:calc(40 * var(--pt)); height:calc(40 * var(--pt)); display:grid; place-items:center; }
.cn-pinb .cn-ico{ width:calc(24 * var(--pt)); height:calc(24 * var(--pt)); color:var(--a-red); }
.cn-pin.found .cn-pinb .cn-ico{ color:#fff; }
.cn-pin[data-kind="cafe"].found .cn-pinb{ --img:var(--cn-s2-cafe); }
.cn-pin[data-kind="bakery"].found .cn-pinb{ --img:var(--cn-s2-bakery); }
.cn-pin[data-kind="museum"].found .cn-pinb{ --img:var(--cn-s2-museum); }
.cn-pin[data-kind="park"].found .cn-pinb{ --img:var(--cn-s2-park); }
.cn-pin[data-kind="library"].found .cn-pinb{ --img:var(--cn-s2-library); }
.cn-pint{ width:calc(12 * var(--pt)); height:calc(8 * var(--pt)); background:var(--a-ink); clip-path:polygon(0 0, 100% 0, 100% 50%, 83.3% 50%, 83.3% 100%, 16.7% 100%, 16.7% 50%, 0 50%); }
.cn-pinstar{ position:absolute; right:calc(-8 * var(--pt)); top:calc(-9 * var(--pt)); width:calc(18 * var(--pt)); height:calc(18 * var(--pt)); color:var(--a-yellow); filter:drop-shadow(var(--pt) var(--pt) 0 var(--a-ink)); display:none; }
.cn-pin.found .cn-pinstar{ display:block; }
.cn-pin.pulse .cn-pinb{ animation:cn-pulse 0.5s steps(2) 3; }
@keyframes cn-pulse{ 50%{ transform:translateY(calc(-6 * var(--pt))); } }
.cn-paw{ position:absolute; width:calc(12 * var(--pt)); height:calc(12 * var(--pt)); margin:calc(-6 * var(--pt)) 0 0 calc(-6 * var(--pt)); }
.cn-paw .cn-ico{ width:100%; height:100%; }
.cn-volf-m{ position:absolute; width:0; height:0; }
.cn-vc{ position:absolute; left:0; top:0; width:var(--vs, 64px); height:var(--vs, 64px); transform:translate(-50%, -73.4%); image-rendering:pixelated; }
.cn-bubble{ position:absolute; left:calc(var(--vs, 64px) * 0.12); top:calc(var(--vs, 64px) * -0.734 - 38 * var(--pt)); --P:10; --sh:rgba(27,26,46,0.25); width:max-content; max-width:calc(168 * var(--pt)); font-size:calc(8 * var(--pt)); line-height:calc(12 * var(--pt)); text-transform:uppercase; color:var(--a-ink); animation:cn-pop-in 0.18s steps(3) both; }
.cn-bubble.flip{ left:auto; right:calc(var(--vs, 64px) * 0.12); }
.cn-btail{ position:absolute; left:calc(8 * var(--pt)); top:calc(100% - 4 * var(--pt)); width:calc(10 * var(--pt)); height:calc(8 * var(--pt)); background:var(--a-ink); clip-path:polygon(0 0, 60% 0, 60% 50%, 40% 50%, 40% 75%, 20% 75%, 20% 100%, 0 100%); }
.cn-bubble.flip .cn-btail{ left:auto; right:calc(8 * var(--pt)); transform:scaleX(-1); }
@keyframes cn-pop-in{ from{ transform:scale(0.6); opacity:0; } to{ transform:none; opacity:1; } }
.cn-pop{ position:absolute; left:0; top:0; white-space:nowrap; font-size:calc(8 * var(--pt)); line-height:1; color:var(--a-yellow); text-shadow:var(--pt) var(--pt) 0 var(--a-ink); transform:translate(-50%, 0); animation:cn-rise 1.2s steps(20) forwards; }
.cn-pop.street{ color:var(--a-orange); font-size:calc(16 * var(--pt)); text-shadow:calc(2 * var(--pt)) calc(2 * var(--pt)) 0 var(--a-ink); }
.cn-pop.place{ color:var(--a-teal); font-size:calc(16 * var(--pt)); text-shadow:calc(2 * var(--pt)) calc(2 * var(--pt)) 0 var(--a-ink); }
@keyframes cn-rise{ 0%{ margin-top:calc(-6 * var(--pt)); opacity:1; } 75%{ opacity:1; } 100%{ margin-top:calc(-56 * var(--pt)); opacity:0; } }

/* walk summary sheet (END) */
.cn-sum{ position:absolute; inset:0; z-index:9; background:var(--a-canvas); display:grid; align-content:start; gap:calc(14 * var(--pt)); padding:calc(52 * var(--pt)) calc(18 * var(--pt)) 0; }
.cn-sum[hidden]{ display:none; }
.cn-sum h3{ font-weight:400; font-size:calc(22 * var(--pt)); line-height:calc(24 * var(--pt)); color:var(--a-red); text-shadow:calc(2 * var(--pt)) calc(2 * var(--pt)) 0 var(--a-ink); margin:calc(10 * var(--pt)) 0 0; }
.cn-sum .hi{ font:500 calc(15 * var(--pt)) 'Space Grotesk', sans-serif; color:var(--a-t2); margin:0; }
.cn-sumcard{ --img:var(--cn-s2-toast); --P:16; --sh:rgba(255,61,31,0.9); color:var(--a-hair); display:grid; gap:calc(10 * var(--pt)); }
.cn-sumcard small{ font-size:calc(7 * var(--pt)); color:var(--a-hair); }
.cn-sumnums{ display:flex; gap:calc(18 * var(--pt)); }
.cn-sumnums div{ display:grid; gap:calc(6 * var(--pt)); }
.cn-sumnums b{ font-weight:400; font-size:calc(20 * var(--pt)); color:var(--a-yellow); text-shadow:calc(2 * var(--pt)) calc(2 * var(--pt)) 0 var(--a-red); }
.cn-sumcard p{ font:500 calc(12 * var(--pt)) 'Space Grotesk', sans-serif; margin:0; color:var(--a-hair); }
.cn-tiles{ display:grid; grid-template-columns:repeat(3, 1fr); gap:calc(10 * var(--pt)); }
.cn-tile3{ --P:10; display:grid; gap:calc(6 * var(--pt)); font-size:calc(7 * var(--pt)); color:var(--a-t2); }
.cn-tile3 b{ font-weight:400; font-size:calc(11 * var(--pt)); color:var(--a-ink); font-variant-numeric:tabular-nums; }
.cn-sum .cn-btn{ font-family:inherit; position:absolute; left:calc(18 * var(--pt)); right:calc(22 * var(--pt)); bottom:calc(52 * var(--pt)); width:auto; }

/* under the phone */
.cn-readout{ font:9px/1.9 'Press Start 2P', monospace; letter-spacing:1px; color:var(--soft); text-align:center; max-width:380px; text-transform:uppercase; min-height:3.8em; }
.cn-readout b{ color:var(--teal); font-weight:400; }
.cn-readout .y{ color:var(--yellow); }
.cn-actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.cn-note{ font-size:0.86rem; color:var(--soft); text-align:center; max-width:430px; line-height:1.55; }
.cn-nojs .cn-bezel{ margin:0 auto 12px; }

/* ---------- screens gallery ---------- */
.cn-gallery{ display:grid; grid-template-columns:auto minmax(0, 1fr); gap:clamp(22px, 4vw, 46px); align-items:start; }
.cn-gal-phone{ display:grid; justify-items:center; gap:12px; position:sticky; top:84px; }
.cn-bezel-sm{ width:min(100%, 318px); }
.cn-galscr{ aspect-ratio:780 / 1688; overflow-y:auto; overflow-x:hidden; border-radius:39px; background:var(--a-canvas); scrollbar-width:none; overscroll-behavior:auto; outline-offset:6px; }
/* a mouse wheel over the phone should not drag the page */
@media (hover:hover) and (pointer:fine){ .cn-galscr{ overscroll-behavior:contain; } }
/* on a touch screen the phone fills most of the width, and a scroller under the finger can swallow swipes and leave the page stuck. So a long screen is shown in full there instead of scrolling inside the phone. */
@media (pointer:coarse){
  .cn-gal-phone{ position:static; }
  .cn-galscr{ aspect-ratio:auto; overflow:hidden; }
  .cn-galhint, .cn-mouse-only{ display:none; }
}
.cn-galscr::-webkit-scrollbar{ display:none; }
.cn-galscr:focus-visible{ outline:3px solid var(--yellow); }
.cn-galscr img{ display:block; width:100%; height:auto; }
.cn-galhint{ font:8px 'Press Start 2P', monospace; letter-spacing:1px; color:var(--soft); text-transform:uppercase; visibility:hidden; }
.cn-galhint.on{ visibility:visible; }
.cn-gal-list{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.cn-gal-list button{
  appearance:none; text-align:left; cursor:pointer; background:rgba(10,10,15,0.8); border:2px solid var(--line); color:var(--paper);
  padding:13px 14px 14px; display:grid; gap:8px; align-content:start; transition:border-color 0.15s ease, background 0.15s ease;
}
.cn-gal-list button:hover{ border-color:var(--paper); }
.cn-gal-list button[aria-pressed="true"]{ border-color:var(--accent); background:rgba(45,232,201,0.08); }
.cn-gal-list b{ font:400 8px/1.5 'Press Start 2P', monospace; letter-spacing:1px; color:var(--accent); text-transform:uppercase; }
.cn-gal-list span{ font-size:0.85rem; color:var(--soft); line-height:1.45; }
.cn-gal-static{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:16px; }
.cn-gal-static figure{ margin:0; display:grid; gap:8px; }
.cn-gal-static img{ width:100%; height:auto; border:4px solid #05050A; box-shadow:0 0 0 2px rgba(228,217,204,0.4); }
.cn-gal-static figcaption{ font:8px 'Press Start 2P', monospace; letter-spacing:1px; color:var(--soft); text-transform:uppercase; }
.cn-gal-note{ font-size:0.82rem; color:var(--soft); margin-top:18px; max-width:760px; }

/* ---------- the app's own controls, in the labs ---------- */
.cn-appsurf{ background:var(--a-canvas); color:var(--a-ink); font-family:'Press Start 2P', monospace; max-width:440px; width:100%; box-sizing:border-box; border:2px solid var(--a-ink); box-shadow:0 0 0 2px rgba(228,217,204,0.5), 6px 6px 0 rgba(0,0,0,0.5); }
.cn-appsurf > *{ margin-left:calc(16 * var(--pt)); margin-right:calc(16 * var(--pt)); margin-bottom:calc(20 * var(--pt)); }
.cn-appsurf > :first-child{ margin-top:calc(18 * var(--pt)); }
.cn-hl{ font-size:calc(8 * var(--pt)); line-height:calc(10 * var(--pt)); color:var(--a-t2); text-transform:uppercase; }
.cn-gp-head{ display:flex; justify-content:space-between; align-items:center; gap:calc(10 * var(--pt)); margin-bottom:calc(12 * var(--pt)); }
.cn-gp-val{ font-size:calc(8 * var(--pt)); color:var(--a-red); text-transform:uppercase; font-variant-numeric:tabular-nums; }
.cn-gp-note{ font:500 calc(13 * var(--pt)) 'Space Grotesk', sans-serif; color:var(--a-t2); margin:calc(12 * var(--pt)) 0 0; line-height:1.4; }
.cn-chips{ display:flex; gap:calc(10 * var(--pt)); }
.cn-chip{ flex:1 1 0; min-width:0; height:calc(44 * var(--pt)); --P:0; display:flex; align-items:center; justify-content:center; font-size:calc(10 * var(--pt)); text-transform:uppercase; color:var(--a-ink); cursor:pointer; appearance:none; -webkit-appearance:none; font-family:inherit; white-space:nowrap; }
.cn-chip[aria-pressed="true"]{ --img:var(--cn-s2-ink); color:#fff; }
.cn-chip:active{ transform:translate(calc(4 * var(--pt)), calc(4 * var(--pt))); filter:none; }
.cn-chip:focus-visible, .cn-sw:focus-visible, .cn-tile:focus-visible{ outline:3px solid var(--a-blue); outline-offset:3px; }
.cn-slider[hidden]{ display:none; }
.cn-slider{ margin-top:calc(14 * var(--pt)); }
.cn-slide{ position:relative; height:calc(36 * var(--pt)); }
.cn-pbar{ position:absolute; left:calc(14 * var(--pt)); right:calc(14 * var(--pt)); top:calc(10 * var(--pt)); height:calc(16 * var(--pt)); box-sizing:border-box; border:calc(2 * var(--pt)) solid var(--a-ink); background:var(--a-hair); display:flex; gap:var(--pt); }
.cn-pbar i{ flex:1 1 0; min-width:0; }
.cn-pbar i.r{ background:var(--a-red); box-shadow:inset 0 var(--pt) 0 rgba(255,255,255,0.45); }
.cn-pbar i.o{ background:var(--a-orange); box-shadow:inset 0 var(--pt) 0 rgba(255,255,255,0.45); }
.cn-pbar i.y{ background:var(--a-yellow); box-shadow:inset 0 var(--pt) 0 rgba(255,255,255,0.45); }
.cn-thumb{ position:absolute; top:calc(4 * var(--pt)); width:calc(28 * var(--pt)); height:calc(28 * var(--pt)); left:calc(var(--f, 0) * (100% - 28 * var(--pt))); --P:0; --sd:1; --sh:rgba(27,26,46,0.35); display:flex; align-items:center; justify-content:center; gap:calc(4 * var(--pt)); pointer-events:none; }
.cn-thumb i{ display:block; width:calc(2 * var(--pt)); height:calc(10 * var(--pt)); background:var(--a-ink); }
.cn-slide:focus-within .cn-thumb{ outline:3px solid var(--a-blue); outline-offset:2px; }
.cn-range{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; touch-action:pan-y; }
.cn-lim{ display:flex; justify-content:space-between; font-size:calc(8 * var(--pt)); color:var(--a-t2); margin-top:calc(8 * var(--pt)); text-transform:uppercase; }

.cn-goals-body{ display:grid; grid-template-columns:minmax(0, 440px) minmax(0, 1fr); gap:clamp(20px, 4vw, 40px); align-items:start; }
.cn-goals-side{ display:grid; gap:18px; align-content:start; }
.cn-ringscard{ --P:16; display:flex; align-items:center; gap:calc(16 * var(--pt)); background:none; font-family:'Press Start 2P', monospace; color:var(--a-ink); }
.cn-ringscard canvas{ width:calc(104 * var(--pt)); height:calc(104 * var(--pt)); flex:none; image-rendering:pixelated; }
.cn-legend{ display:grid; gap:calc(10 * var(--pt)); min-width:0; }
.cn-legend p{ display:grid; grid-template-columns:calc(12 * var(--pt)) minmax(0, 1fr); column-gap:calc(8 * var(--pt)); row-gap:calc(3 * var(--pt)); margin:0; align-items:center; }
.cn-legend i{ width:calc(12 * var(--pt)); height:calc(12 * var(--pt)); display:block; }
.cn-legend b{ font-weight:400; font-size:calc(7 * var(--pt)); color:var(--a-t2); }
.cn-legend em{ grid-column:2; font:700 calc(14 * var(--pt)) 'Space Grotesk', sans-serif; font-style:normal; color:var(--a-ink); font-variant-numeric:tabular-nums; }
.cn-legend em small{ font:500 calc(11 * var(--pt)) 'Space Grotesk', sans-serif; color:var(--a-t2); }
.cn-goal-sum{ font:12.5px/1.65 'JetBrains Mono', monospace; color:var(--muted); border:2px solid var(--line); background:rgba(5,5,10,0.7); padding:12px 14px; min-height:4.2em; margin:0; }
.cn-goal-sum b{ color:var(--accent); font-weight:700; }

.cn-scenes-body{ display:grid; grid-template-columns:minmax(0, 440px) minmax(0, 1fr); gap:clamp(20px, 4vw, 40px); align-items:start; }
.cn-scenes-side{ display:grid; gap:14px; align-content:start; }
.cn-stagebox{ position:relative; width:calc(272 * var(--pt)); max-width:100%; aspect-ratio:1; margin-left:auto; margin-right:auto; }
.cn-stage{ display:block; width:100%; height:100%; image-rendering:pixelated; }
.cn-herobtn{ position:absolute; left:0; top:0; padding:0; border:0; background:none; cursor:pointer; line-height:0; width:var(--hs, 160px); height:var(--hs, 160px); }
.cn-herobtn canvas{ width:100%; height:100%; image-rendering:pixelated; display:block; }
.cn-herobtn:focus-visible{ outline:3px solid var(--a-blue); outline-offset:2px; }
.cn-say{ position:absolute; left:50%; top:2%; transform:translateX(-50%); width:max-content; max-width:80%; --P:10; --S:3; --img:var(--cn-s1-surface); --sh:rgba(27,26,46,0.25); font-size:calc(8 * var(--pt)); line-height:calc(12 * var(--pt)); text-transform:uppercase; text-align:center; visibility:hidden; z-index:2; }
.cn-say.show{ visibility:visible; animation:cn-pop-in 0.18s steps(3) both; }
.cn-field{ display:block; width:100%; height:calc(52 * var(--pt)); --P:16; --sd:1; --sh:rgba(27,26,46,0.35); font:500 max(16px, calc(16 * var(--pt))) 'Space Grotesk', sans-serif; color:var(--a-ink); border-radius:0; appearance:none; -webkit-appearance:none; }
.cn-field::placeholder{ color:var(--a-t3); }
.cn-field:focus-visible{ outline:3px solid var(--a-blue); outline-offset:3px; }
.cn-harness{ display:flex; gap:calc(10 * var(--pt)); }
.cn-sw{ flex:1 1 0; min-width:0; height:calc(44 * var(--pt)); --P:0; padding:0; display:grid; place-items:center; cursor:pointer; appearance:none; -webkit-appearance:none; background:none; }
.cn-sw[data-harness="#C6E265"]{ --img:var(--cn-s2-hlime); }
.cn-sw[data-harness="#FF3D1F"]{ --img:var(--cn-s2-red); }
.cn-sw[data-harness="#FF7A1F"]{ --img:var(--cn-s2-cafe); }
.cn-sw[data-harness="#FFE347"]{ --img:var(--cn-s2-yellow); }
.cn-sw[data-harness="#2DE8C9"]{ --img:var(--cn-s2-teal); }
.cn-sw[data-harness="#3D8BFF"]{ --img:var(--cn-s2-library); }
.cn-sw i{ display:none; }
.cn-sw[aria-pressed="true"]::after{ content:""; width:calc(24 * var(--pt)); height:calc(24 * var(--pt)); background:var(--a-ink); -webkit-mask:var(--cn-check) center / 100% 100% no-repeat; mask:var(--cn-check) center / 100% 100% no-repeat; image-rendering:pixelated; }
.cn-sw:active{ transform:translate(calc(4 * var(--pt)), calc(4 * var(--pt))); filter:none; }
.cn-picker{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:calc(10 * var(--pt)); }
.cn-tile{ appearance:none; -webkit-appearance:none; cursor:pointer; --S:4; --P:0; --sd:0; box-sizing:border-box; border:calc(var(--u) * 4) solid transparent; background:none; padding:0; display:grid; justify-items:center; gap:calc(2 * var(--pt)); font:400 calc(7 * var(--pt)) / calc(10 * var(--pt)) 'Press Start 2P', monospace; color:var(--a-t2); text-transform:uppercase; text-align:center; margin:calc(-1 * var(--u) * 3); }
.cn-tile canvas{ width:calc(84 * var(--pt)); height:calc(84 * var(--pt)); image-rendering:pixelated; max-width:100%; aspect-ratio:1; display:block; }
.cn-tile span{ min-height:calc(20 * var(--pt)); display:block; }
.cn-tile[aria-pressed="true"]{ color:var(--a-ink); border-image:var(--cn-s2-yellow) 4 fill / calc(var(--u) * 4) stretch; image-rendering:pixelated; }

/* ---------- where your data goes ---------- */
.cn-flow .dia-node.lit rect{ fill:rgba(45,232,201,0.1); }
.cn-flow .know.lit{ border-color:var(--accent); }
.cn-flow .know.lit h4{ color:var(--accent); }

/* ---------- small things ---------- */
.cn-pill{ display:inline-block; font:8px 'Press Start 2P', monospace; letter-spacing:1px; padding:6px 8px; border:2px solid var(--yellow); color:var(--yellow); vertical-align:middle; margin-right:8px; }

html.cn-failed .cn-stage-wrap, html.cn-failed .cn-gal-phone, html.cn-failed .cn-gal-list{ display:none !important; }
html.js.cn-failed .cn-nojs.nojs-only, html.js.cn-failed .cn-gal-static.nojs-only{ display:block !important; }
html.js.cn-failed .cn-gal-static.nojs-only{ display:grid !important; }
html.cn-failed #cnScenes .cn-scenes-body, html.cn-scenes-failed #cnScenes .cn-scenes-body{ display:none !important; }
html.js.cn-failed #cnScenes .nojs-only, html.js.cn-scenes-failed #cnScenes .nojs-only{ display:block !important; }

@media (max-width:900px){
  .cn-goals-body, .cn-scenes-body{ grid-template-columns:minmax(0, 1fr); }
  .cn-appsurf{ margin-left:auto; margin-right:auto; }
  .cn-gallery{ grid-template-columns:minmax(0, 1fr); }
  .cn-gal-phone{ position:static; }
}
@media (max-width:520px){
  .cn-gal-list{ grid-template-columns:minmax(0, 1fr); }
  .cn-brandrow .cn-appicon{ width:60px; height:60px; }
  .cn-bezel{ padding:5px; border-radius:40px; }
  .cn-phone{ border-radius:35px; }
}
@media (prefers-reduced-motion: reduce){
  .cn-toastbox.show, .cn-bubble, .cn-say.show{ animation:none; }
  .cn-pop{ animation:none; margin-top:calc(-30 * var(--pt)); opacity:0.95; }
  .cn-pin.pulse .cn-pinb{ animation:none; }
}
body[data-app="canis"]{
  --cn-s2-surface:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%209%209'%20width='9'%20height='9'%20shape-rendering='crispEdges'%3E%3Cpath%20fill='%231B1A2E'%20d='M2%200h5v1h-5zM1%201h2v1h-2zM6%201h2v1h-2zM0%202h2v1h-2zM7%202h2v1h-2zM0%203h1v1h-1zM8%203h1v1h-1zM0%204h1v1h-1zM8%204h1v1h-1zM0%205h1v1h-1zM8%205h1v1h-1zM0%206h2v1h-2zM7%206h2v1h-2zM1%207h2v1h-2zM6%207h2v1h-2zM2%208h5v1h-5z'/%3E%3Cpath%20fill='%23FFFCF5'%20d='M3%201h3v1h-3zM2%202h5v1h-5zM1%203h7v1h-7zM1%204h7v1h-7zM1%205h7v1h-7zM2%206h5v1h-5zM3%207h3v1h-3z'/%3E%3C/svg%3E");
  --cn-s2-ink:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%209%209'%20width='9'%20height='9'%20shape-rendering='crispEdges'%3E%3Cpath%20fill='%231B1A2E'%20d='M2%200h5v1h-5zM1%201h7v1h-7zM0%202h9v1h-9zM0%203h9v1h-9zM0%204h9v1h-9zM0%205h9v1h-9zM0%206h9v1h-9zM1%207h7v1h-7zM2%208h5v1h-5z'/%3E%3Cpath%20fill='%231B1A2E'%20d='M2%200h5v1h-5zM1%201h7v1h-7zM0%202h9v1h-9zM0%203h9v1h-9zM0%204h9v1h-9zM0%205h9v1h-9zM0%206h9v1h-9zM1%207h7v1h-7zM2%208h5v1h-5z'/%3E%3C/svg%3E");
  --cn-s2-ink2:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%209%209'%20width='9'%20height='9'%20shape-rendering='crispEdges'%3E%3Cpath%20fill='%231B1A2E'%20d='M2%200h5v1h-5zM1%201h2v1h-2zM6%201h2v1h-2zM0%202h2v1h-2zM7%202h2v1h-2zM0%203h1v1h-1zM8%203h1v1h-1zM0%204h1v1h-1zM8%204h1v1h-1zM0%205h1v1h-1zM8%205h1v1h-1zM0%206h2v1h-2zM7%206h2v1h-2zM1%207h2v1h-2zM6%207h2v1h-2zM2%208h5v1h-5z'/%3E%3Cpath%20fill='%2334305A'%20d='M3%201h3v1h-3zM2%202h5v1h-5zM1%203h7v1h-7zM1%204h7v1h-7zM1%205h7v1h-7zM2%206h5v1h-5zM3%207h3v1h-3z'/%3E%3C/svg%3E");
  --cn-s2-toast:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%209%209'%20width='9'%20height='9'%20shape-rendering='crispEdges'%3E%3Cpath%20fill='%23E4D9CC'%20d='M2%200h5v1h-5zM1%201h2v1h-2zM6%201h2v1h-2zM0%202h2v1h-2zM7%202h2v1h-2zM0%203h1v1h-1zM8%203h1v1h-1zM0%204h1v1h-1zM8%204h1v1h-1zM0%205h1v1h-1zM8%205h1v1h-1zM0%206h2v1h-2zM7%206h2v1h-2zM1%207h2v1h-2zM6%207h2v1h-2zM2%208h5v1h-5z'/%3E%3Cpath%20fill='%231B1A2E'%20d='M3%201h3v1h-3zM2%202h5v1h-5zM1%203h7v1h-7zM1%204h7v1h-7zM1%205h7v1h-7zM2%206h5v1h-5zM3%207h3v1h-3z'/%3E%3C/svg%3E");
  --cn-s2-yellow:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%209%209'%20width='9'%20height='9'%20shape-rendering='crispEdges'%3E%3Cpath%20fill='%231B1A2E'%20d='M2%200h5v1h-5zM1%201h2v1h-2zM6%201h2v1h-2zM0%202h2v1h-2zM7%202h2v1h-2zM0%203h1v1h-1zM8%203h1v1h-1zM0%204h1v1h-1zM8%204h1v1h-1zM0%205h1v1h-1zM8%205h1v1h-1zM0%206h2v1h-2zM7%206h2v1h-2zM1%207h2v1h-2zM6%207h2v1h-2zM2%208h5v1h-5z'/%3E%3Cpath%20fill='%23FFE347'%20d='M3%201h3v1h-3zM2%202h5v1h-5zM1%203h7v1h-7zM1%204h7v1h-7zM1%205h7v1h-7zM2%206h5v1h-5zM3%207h3v1h-3z'/%3E%3C/svg%3E");
  --cn-s2-cafe:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%209%209'%20width='9'%20height='9'%20shape-rendering='crispEdges'%3E%3Cpath%20fill='%231B1A2E'%20d='M2%200h5v1h-5zM1%201h2v1h-2zM6%201h2v1h-2zM0%202h2v1h-2zM7%202h2v1h-2zM0%203h1v1h-1zM8%203h1v1h-1zM0%204h1v1h-1zM8%204h1v1h-1zM0%205h1v1h-1zM8%205h1v1h-1zM0%206h2v1h-2zM7%206h2v1h-2zM1%207h2v1h-2zM6%207h2v1h-2zM2%208h5v1h-5z'/%3E%3Cpath%20fill='%23FF7A1F'%20d='M3%201h3v1h-3zM2%202h5v1h-5zM1%203h7v1h-7zM1%204h7v1h-7zM1%205h7v1h-7zM2%206h5v1h-5zM3%207h3v1h-3z'/%3E%3C/svg%3E");
  --cn-s2-bakery:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%209%209'%20width='9'%20height='9'%20shape-rendering='crispEdges'%3E%3Cpath%20fill='%231B1A2E'%20d='M2%200h5v1h-5zM1%201h2v1h-2zM6%201h2v1h-2zM0%202h2v1h-2zM7%202h2v1h-2zM0%203h1v1h-1zM8%203h1v1h-1zM0%204h1v1h-1zM8%204h1v1h-1zM0%205h1v1h-1zM8%205h1v1h-1zM0%206h2v1h-2zM7%206h2v1h-2zM1%207h2v1h-2zM6%207h2v1h-2zM2%208h5v1h-5z'/%3E%3Cpath%20fill='%23F29A3C'%20d='M3%201h3v1h-3zM2%202h5v1h-5zM1%203h7v1h-7zM1%204h7v1h-7zM1%205h7v1h-7zM2%206h5v1h-5zM3%207h3v1h-3z'/%3E%3C/svg%3E");
  --cn-s2-museum:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%209%209'%20width='9'%20height='9'%20shape-rendering='crispEdges'%3E%3Cpath%20fill='%231B1A2E'%20d='M2%200h5v1h-5zM1%201h2v1h-2zM6%201h2v1h-2zM0%202h2v1h-2zM7%202h2v1h-2zM0%203h1v1h-1zM8%203h1v1h-1zM0%204h1v1h-1zM8%204h1v1h-1zM0%205h1v1h-1zM8%205h1v1h-1zM0%206h2v1h-2zM7%206h2v1h-2zM1%207h2v1h-2zM6%207h2v1h-2zM2%208h5v1h-5z'/%3E%3Cpath%20fill='%237C6CF0'%20d='M3%201h3v1h-3zM2%202h5v1h-5zM1%203h7v1h-7zM1%204h7v1h-7zM1%205h7v1h-7zM2%206h5v1h-5zM3%207h3v1h-3z'/%3E%3C/svg%3E");
  --cn-s2-park:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%209%209'%20width='9'%20height='9'%20shape-rendering='crispEdges'%3E%3Cpath%20fill='%231B1A2E'%20d='M2%200h5v1h-5zM1%201h2v1h-2zM6%201h2v1h-2zM0%202h2v1h-2zM7%202h2v1h-2zM0%203h1v1h-1zM8%203h1v1h-1zM0%204h1v1h-1zM8%204h1v1h-1zM0%205h1v1h-1zM8%205h1v1h-1zM0%206h2v1h-2zM7%206h2v1h-2zM1%207h2v1h-2zM6%207h2v1h-2zM2%208h5v1h-5z'/%3E%3Cpath%20fill='%233FBF6A'%20d='M3%201h3v1h-3zM2%202h5v1h-5zM1%203h7v1h-7zM1%204h7v1h-7zM1%205h7v1h-7zM2%206h5v1h-5zM3%207h3v1h-3z'/%3E%3C/svg%3E");
  --cn-s2-library:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%209%209'%20width='9'%20height='9'%20shape-rendering='crispEdges'%3E%3Cpath%20fill='%231B1A2E'%20d='M2%200h5v1h-5zM1%201h2v1h-2zM6%201h2v1h-2zM0%202h2v1h-2zM7%202h2v1h-2zM0%203h1v1h-1zM8%203h1v1h-1zM0%204h1v1h-1zM8%204h1v1h-1zM0%205h1v1h-1zM8%205h1v1h-1zM0%206h2v1h-2zM7%206h2v1h-2zM1%207h2v1h-2zM6%207h2v1h-2zM2%208h5v1h-5z'/%3E%3Cpath%20fill='%233D8BFF'%20d='M3%201h3v1h-3zM2%202h5v1h-5zM1%203h7v1h-7zM1%204h7v1h-7zM1%205h7v1h-7zM2%206h5v1h-5zM3%207h3v1h-3z'/%3E%3C/svg%3E");
  --cn-s2-canvas:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%209%209'%20width='9'%20height='9'%20shape-rendering='crispEdges'%3E%3Cpath%20fill='%231B1A2E'%20d='M2%200h5v1h-5zM1%201h2v1h-2zM6%201h2v1h-2zM0%202h2v1h-2zM7%202h2v1h-2zM0%203h1v1h-1zM8%203h1v1h-1zM0%204h1v1h-1zM8%204h1v1h-1zM0%205h1v1h-1zM8%205h1v1h-1zM0%206h2v1h-2zM7%206h2v1h-2zM1%207h2v1h-2zM6%207h2v1h-2zM2%208h5v1h-5z'/%3E%3Cpath%20fill='%23F4E7D4'%20d='M3%201h3v1h-3zM2%202h5v1h-5zM1%203h7v1h-7zM1%204h7v1h-7zM1%205h7v1h-7zM2%206h5v1h-5zM3%207h3v1h-3z'/%3E%3C/svg%3E");
  --cn-s2-night:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%209%209'%20width='9'%20height='9'%20shape-rendering='crispEdges'%3E%3Cpath%20fill='%231B1A2E'%20d='M2%200h5v1h-5zM1%201h2v1h-2zM6%201h2v1h-2zM0%202h2v1h-2zM7%202h2v1h-2zM0%203h1v1h-1zM8%203h1v1h-1zM0%204h1v1h-1zM8%204h1v1h-1zM0%205h1v1h-1zM8%205h1v1h-1zM0%206h2v1h-2zM7%206h2v1h-2zM1%207h2v1h-2zM6%207h2v1h-2zM2%208h5v1h-5z'/%3E%3Cpath%20fill='%2324214A'%20d='M3%201h3v1h-3zM2%202h5v1h-5zM1%203h7v1h-7zM1%204h7v1h-7zM1%205h7v1h-7zM2%206h5v1h-5zM3%207h3v1h-3z'/%3E%3C/svg%3E");
  --cn-s2-red:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%209%209'%20width='9'%20height='9'%20shape-rendering='crispEdges'%3E%3Cpath%20fill='%231B1A2E'%20d='M2%200h5v1h-5zM1%201h2v1h-2zM6%201h2v1h-2zM0%202h2v1h-2zM7%202h2v1h-2zM0%203h1v1h-1zM8%203h1v1h-1zM0%204h1v1h-1zM8%204h1v1h-1zM0%205h1v1h-1zM8%205h1v1h-1zM0%206h2v1h-2zM7%206h2v1h-2zM1%207h2v1h-2zM6%207h2v1h-2zM2%208h5v1h-5z'/%3E%3Cpath%20fill='%23FF3D1F'%20d='M3%201h3v1h-3zM2%202h5v1h-5zM1%203h7v1h-7zM1%204h7v1h-7zM1%205h7v1h-7zM2%206h5v1h-5zM3%207h3v1h-3z'/%3E%3C/svg%3E");
  --cn-s2-hlime:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%209%209'%20width='9'%20height='9'%20shape-rendering='crispEdges'%3E%3Cpath%20fill='%231B1A2E'%20d='M2%200h5v1h-5zM1%201h2v1h-2zM6%201h2v1h-2zM0%202h2v1h-2zM7%202h2v1h-2zM0%203h1v1h-1zM8%203h1v1h-1zM0%204h1v1h-1zM8%204h1v1h-1zM0%205h1v1h-1zM8%205h1v1h-1zM0%206h2v1h-2zM7%206h2v1h-2zM1%207h2v1h-2zM6%207h2v1h-2zM2%208h5v1h-5z'/%3E%3Cpath%20fill='%23C6E265'%20d='M3%201h3v1h-3zM2%202h5v1h-5zM1%203h7v1h-7zM1%204h7v1h-7zM1%205h7v1h-7zM2%206h5v1h-5zM3%207h3v1h-3z'/%3E%3C/svg%3E");
  --cn-s2-teal:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%209%209'%20width='9'%20height='9'%20shape-rendering='crispEdges'%3E%3Cpath%20fill='%231B1A2E'%20d='M2%200h5v1h-5zM1%201h2v1h-2zM6%201h2v1h-2zM0%202h2v1h-2zM7%202h2v1h-2zM0%203h1v1h-1zM8%203h1v1h-1zM0%204h1v1h-1zM8%204h1v1h-1zM0%205h1v1h-1zM8%205h1v1h-1zM0%206h2v1h-2zM7%206h2v1h-2zM1%207h2v1h-2zM6%207h2v1h-2zM2%208h5v1h-5z'/%3E%3Cpath%20fill='%232DE8C9'%20d='M3%201h3v1h-3zM2%202h5v1h-5zM1%203h7v1h-7zM1%204h7v1h-7zM1%205h7v1h-7zM2%206h5v1h-5zM3%207h3v1h-3z'/%3E%3C/svg%3E");
  --cn-s1-surface:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%207%207'%20width='7'%20height='7'%20shape-rendering='crispEdges'%3E%3Cpath%20fill='%231B1A2E'%20d='M1%200h5v1h-5zM0%201h2v1h-2zM5%201h2v1h-2zM0%202h1v1h-1zM6%202h1v1h-1zM0%203h1v1h-1zM6%203h1v1h-1zM0%204h1v1h-1zM6%204h1v1h-1zM0%205h2v1h-2zM5%205h2v1h-2zM1%206h5v1h-5z'/%3E%3Cpath%20fill='%23FFFCF5'%20d='M2%201h3v1h-3zM1%202h5v1h-5zM1%203h5v1h-5zM1%204h5v1h-5zM2%205h3v1h-3z'/%3E%3C/svg%3E");
  --cn-s1-paper:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%207%207'%20width='7'%20height='7'%20shape-rendering='crispEdges'%3E%3Cpath%20fill='%231B1A2E'%20d='M1%200h5v1h-5zM0%201h2v1h-2zM5%201h2v1h-2zM0%202h1v1h-1zM6%202h1v1h-1zM0%203h1v1h-1zM6%203h1v1h-1zM0%204h1v1h-1zM6%204h1v1h-1zM0%205h2v1h-2zM5%205h2v1h-2zM1%206h5v1h-5z'/%3E%3Cpath%20fill='%23E4D9CC'%20d='M2%201h3v1h-3zM1%202h5v1h-5zM1%203h5v1h-5zM1%204h5v1h-5zM2%205h3v1h-3z'/%3E%3C/svg%3E");
  --cn-s1-red:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%207%207'%20width='7'%20height='7'%20shape-rendering='crispEdges'%3E%3Cpath%20fill='%2305050A'%20d='M1%200h5v1h-5zM0%201h2v1h-2zM5%201h2v1h-2zM0%202h1v1h-1zM6%202h1v1h-1zM0%203h1v1h-1zM6%203h1v1h-1zM0%204h1v1h-1zM6%204h1v1h-1zM0%205h2v1h-2zM5%205h2v1h-2zM1%206h5v1h-5z'/%3E%3Cpath%20fill='%23FF3D1F'%20d='M2%201h3v1h-3zM1%202h5v1h-5zM1%203h5v1h-5zM1%204h5v1h-5zM2%205h3v1h-3z'/%3E%3C/svg%3E");
  --cn-s1-ink:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%207%207'%20width='7'%20height='7'%20shape-rendering='crispEdges'%3E%3Cpath%20fill='%231B1A2E'%20d='M1%200h5v1h-5zM0%201h7v1h-7zM0%202h7v1h-7zM0%203h7v1h-7zM0%204h7v1h-7zM0%205h7v1h-7zM1%206h5v1h-5z'/%3E%3Cpath%20fill='%231B1A2E'%20d='M1%200h5v1h-5zM0%201h7v1h-7zM0%202h7v1h-7zM0%203h7v1h-7zM0%204h7v1h-7zM0%205h7v1h-7zM1%206h5v1h-5z'/%3E%3C/svg%3E");
  --cn-s1-canvas:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%207%207'%20width='7'%20height='7'%20shape-rendering='crispEdges'%3E%3Cpath%20fill='%231B1A2E'%20d='M1%200h5v1h-5zM0%201h2v1h-2zM5%201h2v1h-2zM0%202h1v1h-1zM6%202h1v1h-1zM0%203h1v1h-1zM6%203h1v1h-1zM0%204h1v1h-1zM6%204h1v1h-1zM0%205h2v1h-2zM5%205h2v1h-2zM1%206h5v1h-5z'/%3E%3Cpath%20fill='%23F4E7D4'%20d='M2%201h3v1h-3zM1%202h5v1h-5zM1%203h5v1h-5zM1%204h5v1h-5zM2%205h3v1h-3z'/%3E%3C/svg%3E");
}
/* the app's pixel icons as data: URIs, so they also work when the page is opened from a folder */
.cn-ico[data-ico="bakery"]{--ico:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAbUlEQVR4nGNgGAWUgP9QQCwfG2CipQNHABgScUBzCxixCRLyNk7DGBkxzKNvMiUm0kjVT3MfsOByCQMDZpji8h22sIeBgfEBzEXoLsblUnzxNjA+gAF8YYtNHTaf0CcnU5L28RrOyMg4WuEQBADWY1vlUFV6TQAAAABJRU5ErkJggg==")}
.cn-ico[data-ico="cafe"]{--ico:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAXklEQVR4nO2UQQoAIAgEM/r/l+2kkCAZYiI4t0K21tzGaLIBuYGI6BIEODSnR8zCst5EgxxTvVyHO6h/gPoGr8jeE3UcaFMX7kCddWuib3kJd1Af7p/3F2XB3zlo8tnVJBgo6U93aAAAAABJRU5ErkJggg==")}
.cn-ico[data-ico="check"]{--ico:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAARklEQVR4nO3SIQ4AIAxD0YX73xkMNUtIGYJO9EnUb0aEWRtzy+9DEVNyKoe+C1g5/F/Aym7LQXeDXFotB/0vei0H/QIzagEtpj/N070mKQAAAABJRU5ErkJggg==")}
.cn-ico[data-ico="clock"]{--ico:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAW0lEQVR4nGNgGOqAEZfE/////5NkECMjVrOYSHURxeA/FFBLH/18QIzLyVFDcx+MWjACLGAhRTGsOIAlQ1zFAzIYXD6AAVJ8Mjh9AAPExAEGGHKl6TCs0YYcAAB30Uf7aVe0YwAAAABJRU5ErkJggg==")}
.cn-ico[data-ico="cloudsun"]{--ico:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAfUlEQVR4nNWVURKAIAhEoen+V66fbByKWVYl7f1poLuCJkJwXDA5GxPcwr1Bi7o37DrpDqCC3rx0B4oCPDeqCnNFZtSggGoRrdU8B1GQkz1jw3pMdxHqHhs/3IEV8FCDFJfv690DrxvYeUu6A1jk6Fl7fP+aRv8F63XRbzkBGMVzzZ86bjoAAAAASUVORK5CYII=")}
.cn-ico[data-ico="coin"]{--ico:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAxUlEQVR4nGNkIBJIS+n9R+Y/fXaJkRh9TMRaQC5gwSWB7uInJyVR5GXMGYjyEc19gGErzOXoLiYEZMyfMzAwYPqEfj7A6XKZHRD6iQdRBqL7ZOBSES6Xv1x5loGBgYFBPNyYKAto7wOcYU9kmKODJ63vGBgYGBhkqiHmDmAckAr2XMUqTHsfwNIrrGwhNQeju1ymWoiBgWFQ5AMcAJ7+cYQ5OhiEpSkOl6OHPQzQ3wcwgFGjQXMoDMBcDAODp0bDBQZtqwIAHipKD9C0+28AAAAASUVORK5CYII=")}
.cn-ico[data-ico="collection"]{--ico:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAdklEQVR4nN2VUQ7AIAhDYdn9r+w+pokSBnYJytZPpZGHNhJlUqlCPEdUM5Bk5whJOMH3D2Cie6ZmETNr6zO+cIJTnoiYZ8jW5uBNUj3/niSjJFb9T4LW1DC15ydHYNX0e2uDpumJyqLttecOhgKnQ8+T48tMrQspNF/wYztGZgAAAABJRU5ErkJggg==")}
.cn-ico[data-ico="flag"]{--ico:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAATklEQVR4nGNgGHbgPxRQyzwmahmECzCiC1DqekZGRhQzae4DFmJdggvAfIxL/cD5gBAg5HIYGLw+gLl8wONgNB8QBDT3wagFoxaMAgYGAJP6HDH70urVAAAAAElFTkSuQmCC")}
.cn-ico[data-ico="fog"]{--ico:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAYUlEQVR4nO2VwQ4AEAxDzf//c11wmFALwhLvPLWtFSF4R1gBAAwFRIYa0drRNpBZrTs+Qd2f7oLtVtM7f36CcrO1Y0bRvZciN8hM1k2CysvvAaXJ/m5PvgeU5Xfw7o/mhgQyby/9O7AEpAAAAABJRU5ErkJggg==")}
.cn-ico[data-ico="heart"]{--ico:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAaklEQVR4nNWUSQ4AIQgEwfj/L7cXOZi4ADMq1pG0sStBiV6He0MAaELM7lz60s4MKqu5Nkd0ymDU6I/cdoNsCY+2acZ2g/cvaNBuieX8WYNZE2/+joGwMtGY3jUQtL9pjxgGguedxDIISQEVjIegt8cXYQAAAABJRU5ErkJggg==")}
.cn-ico[data-ico="journal"]{--ico:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAYklEQVR4nO2UQQoAIQwDzbL//3K8bC8iGu0WKjgnD5V0iFjKZQLsQJLTYQCrs49nOwXYNpY4Ymc23OD1XO510drlNlC6yG1wO/gFVwA/wgIUzu8Ayt/uIdxgCeXVtOQy2KECiqowIudzXN4AAAAASUVORK5CYII=")}
.cn-ico[data-ico="landmark"]{--ico:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAd0lEQVR4nN2T2w6AIAxDV+L//7K+SFLnuATcCJ43ICntLiK/5LwZPTPJ16oIrMuSm6YY8NJzT3DUHi1HFrXE7glSdjBadwvWi5miL90/xAHETlHv1LTgiqzdA0b3qTft+gTZuXZcutfEbPLWH5h1nRalvrgn2J8LY9dP/CHfdgIAAAAASUVORK5CYII=")}
.cn-ico[data-ico="library"]{--ico:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAVElEQVR4nGNgGOqAEZfE/////5NlICMjiplM5BhCEfgPBeSqR+fT3Ac0t4AFxkAPFhgfPdJIBfTzAcyl1HI5DIzGAUEwGgcEwWgcDLwFw7BGG3IAAOhSRBlncBmQAAAAAElFTkSuQmCC")}
.cn-ico[data-ico="locate"]{--ico:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAXUlEQVR4nGNgGEzgPxSQooeJVo4ZPhYwEqMIV7gzMjIS1E9zH+AFhFINMalqYHxAanrHp57mPmCBuYAahqGbw8jIyEgfH6CnZ3J9hC1fjOYDgmCYl0XoYLRGG5oAAGmFU+VlaEWqAAAAAElFTkSuQmCC")}
.cn-ico[data-ico="map"]{--ico:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAZ0lEQVR4nO2VMQ7AIAwDCeL/X3YXGAhyIbSJhMStWDp7ISmdjrAHAOiCIjT7ls9f2q0wtGpNWoPZEpYPW1BYE83qIo37ArNAKm4CK1dwBYECVNwEuxT2wP4mtoLl4+7BXxdM477gfB6itjwqKAGCHwAAAABJRU5ErkJggg==")}
.cn-ico[data-ico="museum"]{--ico:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAATklEQVR4nGNgGAWDCvyHAmqayURNwyi2AN2HxPh4YH1AjTgZXHFADmChRDMjIyMjAwMkKJH5yGDoB9HQt4CiSIYBfJE99INo6FswCggCAKrwKA37TMqzAAAAAElFTkSuQmCC")}
.cn-ico[data-ico="mystery"]{--ico:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAbklEQVR4nGNgGOqAEZfE/////5NkECMjVrOYSHURxeA/FFBLH819AA83mO3YwhKXj/CphcnR3Acs+CTx+YoYeQaGgfYBPpdRxQJ0gB7ZxDhgYIMIFyAl6AaXD8iJdJJ8QE45NVqaEgTDsEYbcgAAF4FIELI9VgwAAAAASUVORK5CYII=")}
.cn-ico[data-ico="park"]{--ico:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAWUlEQVR4nGNgGOqAkZCC/////8drACMjXjOYSHUR1cB/KKBUHf19QKzLidVHcx8MfQvggNywJ2TO0A+iUQtIB0MuJ+Msy0n1Ba56YeDqA2yAnPgZXD4YlAAA74JP1b508tEAAAAASUVORK5CYII=")}
.cn-ico[data-ico="pause"]{--ico:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAASUlEQVR4nGNgGAUDDRjRBf7///8fq0JGRkZi5NEBEyWuIwbgtIARCsiVJ2gBtcCoBaMWjFowHCxgwSWBq9QkVh4GaO6DUTDwAABi3xAqd9c/xQAAAABJRU5ErkJggg==")}
.cn-ico[data-ico="paw"]{--ico:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAa0lEQVR4nO2V0QrAIAhFc/T/v+yeDHLIdYWGbOcx07zhrdaqQ1aAmXnaSERv4sK1052Hrhd0Z14kTysJV1CfcV/eqbCw8vOnSIOmCikNV+B2Mix0ysmPU1edPApmO7n+AdAHAvoPLP7X9APczs0oH5LEzKYAAAAASUVORK5CYII=")}
.cn-ico[data-ico="pin"]{--ico:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAc0lEQVR4nO2TSwrAIAwFk9L7Xznd9IEVzUcMKnS2hph5RqLTYe1QRMTVhLnb54pONAV5mVGfbvDJDlO0Mq0n1GrKs3SD2yroWWm2JekG519gvgEy9mxRi/8nm6yJCFhReaJcawDqSSNLsIcBiK4v0W4GIzwY/WPf9n6nuAAAAABJRU5ErkJggg==")}
.cn-ico[data-ico="play"]{--ico:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAW0lEQVR4nO2U2woAEBBEd+X/f5kHtuSBvVCjnDel3TlNEH0ilE5kRjoVJrQgYnLdIGsuMTMTNZPxrAHDQPCYYBkIFhNMg3c7gHwHyyTz/2NJLmB04EkuXDf4bKkwXSgu/m7iLwAAAABJRU5ErkJggg==")}
.cn-ico[data-ico="profile"]{--ico:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAcElEQVR4nN2U0Q6AIAhFpfn/v3x7ia0VNryGWOcNB8gVsJSvI9YhAFDJRG75NiYRDQ5aNuM/R0Fv5T3x4QpcF4woDFdQz4ZWZc3zE+pvqcrdgzfi15gihVEYruBnv6lF6929/cjpgcW1Wu+25/dgeXa8F4uoysctBAAAAABJRU5ErkJggg==")}
.cn-ico[data-ico="sparkles"]{--ico:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAdklEQVR4nO2VSw7AIAhEmab3v3K7KUmLNKIyxiZ9Oz+BQT6KrMRx0XK+sUXtGUasal0DAD2CEPZt33Lx3RwoAGD36BEUHkXKqvCURe/NiSCquIZn589BDtFO9qBH8HDQoqzLAY2RaVljzjTV+r3/RFkO1uiDEU7K+3vUAOIgPwAAAABJRU5ErkJggg==")}
.cn-ico[data-ico="style"]{--ico:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAYUlEQVR4nO2TzQoAIAiDt+j9X7kuBRHZL5mHvptSsKkDPiYJidM+ALgbAkv8zKNaXa5JcvTXhoMZpRJvHEiKV2af0XMg3fHJ/AEFB012EithIwc9Rruz74Ake/l4c0UfVSJjXkAJb2j+iAAAAABJRU5ErkJggg==")}
.cn-ico[data-ico="theater"]{--ico:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAaklEQVR4nN1Vyw6AMAxqzf7/l/Gil0VSptamctyDQiCbWXc42wCAJSL3S65tVdFj4MBb975zcFd5xJPuIBzAnKmO0x2M6ADrN1ufUZ9B6oAoSCXo2pDPIJlKJej6mprplZTQ7jX94Y/WDjtSZFvn/sRM+wAAAABJRU5ErkJggg==")}
.cn-ico[data-ico="walker"]{--ico:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAVklEQVR4nGNgGOqAkViF/////4+ikZGRKL1MpLqIVDD0LaA5QIko9Igk21CkBDA4gug/FODi4wNDPxUNfQtYSFFMTjIeXEHECAU0s4AcMGrBwFsw9AEA7L0cGdNk0fIAAAAASUVORK5CYII=")}
#cnSceneSurf{--cn-check:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAARklEQVR4nO3SIQ4AIAxD0YX73xkMNUtIGYJO9EnUb0aEWRtzy+9DEVNyKoe+C1g5/F/Aym7LQXeDXFotB/0vei0H/QIzagEtpj/N070mKQAAAABJRU5ErkJggg==")}