/* ============================================================================
   CULTURE CAVE — THE STALK, dressed
   Hyphae's gesture, Culture Cave's hand: the handle is a carved slab with the
   house spore on it, the branches grow on a lit filament, and the node under
   your thumb fills with the brand gradient.
   ========================================================================== */

/* ---------------------------------------------------------------- the handle
   It sits above the fold of the page rather than in a dock, because Culture
   Cave has no dock: it is a marketplace, not an app shell. */
#cc-stalk-handle{
  position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%);z-index:191;
  display:inline-flex;align-items:center;gap:11px;
  padding:12px 20px 12px 16px;border-radius:999px;cursor:pointer;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--uv-ice,#7FEBFF);
  background:rgba(8,4,18,.9);
  border:1px solid rgba(var(--glow-v),.5);
  box-shadow:0 0 0 1px rgba(var(--glow-v),.16),
             0 10px 34px -10px rgba(var(--glow-v),.8),
             0 22px 50px -26px #000,
             inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s ease,border-color .22s ease;
  -webkit-user-select:none;user-select:none;-webkit-user-drag:none;touch-action:none}
#cc-stalk-handle:hover{transform:translateX(-50%) translateY(-2px);
  border-color:rgb(var(--glow-m));
  box-shadow:0 0 0 1px rgba(var(--glow-m),.3),
             0 14px 40px -10px rgba(var(--glow-m),.9),0 24px 56px -26px #000}
#cc-stalk-handle.pulling{transform:translateX(-50%) scale(.97)}
#cc-stalk-handle:focus-visible{outline:2px solid rgb(var(--glow-m));outline-offset:4px}
/* the house mark, breathing */
#cc-stalk-handle .sk-spore{width:17px;height:17px;flex:none;
  background:linear-gradient(120deg,var(--uv-cyan,#14C4FF),var(--uv-mag,#FF14C4));
  -webkit-mask:var(--spore) center/contain no-repeat;mask:var(--spore) center/contain no-repeat;
  animation:skbreath 4.5s ease-in-out infinite}
@keyframes skbreath{0%,100%{opacity:.8;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
#cc-stalk-handle .sk-n{font-size:10px;letter-spacing:.08em;color:var(--ink-mut,#6E839E);
  padding-left:11px;border-left:1px solid rgba(var(--glow-v),.28)}
@media (prefers-reduced-motion:reduce){#cc-stalk-handle .sk-spore{animation:none}}
/* out of the way while a full-screen overlay is up */
.wf-ov.on ~ #cc-stalk-handle,body:has(.qv.on) #cc-stalk-handle{opacity:0;pointer-events:none}
@media(max-width:520px){
  #cc-stalk-handle{padding:11px 16px 11px 13px;gap:9px;font-size:10.5px;letter-spacing:.16em}
  #cc-stalk-handle .sk-n{display:none}
  #cc-stalksay{max-width:min(300px,88vw);padding:9px 14px}
  #cc-stalksay b{font-size:15px}
  #cc-stalksay s{font-size:9.8px;letter-spacing:.04em}
}

/* ----------------------------------------------------------- the menu layer */
/* The veil colour sits on the layer itself as well as on its child. On a phone
   the child alone was not painting, and a menu you cannot read the page behind
   is better than a menu with the page shouting through it. The z-index clears
   everything the page itself uses. */
#cc-stalk{position:fixed;inset:0;z-index:190;pointer-events:none;opacity:0;
  background:rgba(5,2,12,.92);
  transition:opacity .18s ease}
#cc-stalk.on{opacity:1;pointer-events:auto}
/* THE VEIL IS TRANSLUCENT. Never hide the page you are navigating away from:
   the whole complaint about a modal drawer is that it covers what you were
   reading in order to help you leave it. */
/* Translucent, but only just: you should still know what you are leaving,
   without the page competing with the branches you are choosing between. */
#cc-stalk .sk-veil{position:absolute;inset:0;
  background:rgba(5,2,12,.90);
  -webkit-backdrop-filter:blur(6px) saturate(.85);backdrop-filter:blur(6px) saturate(.85)}
#cc-stalklines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* the filament: the same two hues everything else in the cave glows with */
.sk-live{fill:none;stroke:url(#ccstalkgrad);stroke-width:2.5;stroke-linecap:round;
  opacity:.9;filter:drop-shadow(0 0 6px rgba(var(--glow-v),.8))}
#cc-stalknodes{position:absolute;inset:0}

.sk-node{position:absolute;transform:translate(-50%,-50%) scale(.5);opacity:0;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  width:var(--slot,92px);
  cursor:pointer;
  transition:opacity .18s ease,transform .3s cubic-bezier(.34,1.4,.64,1)}
.sk-node.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.sk-disc{position:relative;width:48px;height:48px;border-radius:50%;display:grid;
  place-items:center;
  background:rgba(10,5,22,.92);
  border:1px solid rgba(var(--glow-v),.45);
  color:var(--uv-ice,#7FEBFF);
  box-shadow:0 0 18px -6px rgba(var(--glow-v),.7),0 10px 24px -12px #000;
  transition:transform .18s cubic-bezier(.34,1.4,.64,1),background .18s,border-color .18s,box-shadow .18s}
.sk-node b{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;font-weight:600;
  color:#CFE6FA;text-align:center;max-width:100%;line-height:1.28;
  /* the name shrinks a little when its slot is tight rather than colliding */
  font-size:clamp(9.4px,calc(var(--slot,92px) * .118),10.8px);
  overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  text-shadow:0 1px 8px rgba(0,0,0,.95),0 0 14px rgba(0,0,0,.8)}
/* a branch you have already passed through */
.sk-node.via .sk-disc{background:rgba(var(--glow-v),.16);border-color:rgba(var(--glow-v),.75)}
/* the one under your thumb */
.sk-node.at .sk-disc{background:linear-gradient(122deg,var(--uv-cyan,#14C4FF),var(--uv-mag,#FF14C4));
  color:#04020A;border-color:transparent;transform:scale(1.2);
  box-shadow:0 0 30px -4px rgba(var(--glow-m),.95),0 12px 30px -12px #000}
.sk-node.at b{color:#fff;font-weight:700}
.sk-node:hover .sk-disc{transform:scale(1.1);border-color:rgb(var(--glow-m))}
.sk-cnt{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:999px;
  padding:0 5px;background:var(--uv-mag,#FF14C4);color:#fff;
  font-family:var(--mono);font-size:9.5px;font-weight:700;line-height:18px;text-align:center;
  box-shadow:0 0 10px rgba(var(--glow-m),.9)}

/* a pill says what releasing will do, BEFORE it commits */
#cc-stalksay{position:absolute;left:50%;transform:translateX(-50%);max-width:82vw;z-index:3;
  padding:10px 17px;border-radius:14px;text-align:center;
  background:rgba(8,4,18,.94);border:1px solid rgba(var(--glow-v),.4);
  box-shadow:0 0 26px -8px rgba(var(--glow-v),.7),0 18px 40px -20px #000;
  transition:top .18s ease}
#cc-stalksay b{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-size:16px;color:#fff;letter-spacing:.01em}
#cc-stalksay b svg{color:var(--uv-cyan,#14C4FF)}
#cc-stalksay s{display:block;text-decoration:none;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.06em;color:var(--ink-mut,#6E839E);margin-top:4px}

/* a depth gauge teaches the gesture without a tutorial */
#cc-stalkdepth{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:3}
#cc-stalkdepth i{width:20px;height:3px;border-radius:999px;
  background:rgba(var(--glow-v),.22);transition:background .18s,box-shadow .18s}
#cc-stalkdepth i.on{background:rgb(var(--glow-m));box-shadow:0 0 8px rgba(var(--glow-m),.9)}

/* the hint, once, then never again */
.sk-hint{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));
  z-index:93;transform:translateX(-50%);pointer-events:none;
  display:flex;align-items:center;gap:9px;padding:9px 15px;border-radius:999px;
  background:rgba(var(--glow-v),.14);border:1px solid rgba(var(--glow-v),.45);
  color:var(--uv-ice,#7FEBFF);font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;white-space:nowrap;
  animation:skfade 8s ease forwards}
@keyframes skfade{0%{opacity:0;transform:translate(-50%,10px)}
  9%{opacity:1;transform:translate(-50%,0)}86%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.sk-hint{animation:none;opacity:1}}

/* while the menu is open the page underneath stops scrolling out from under it */
body.stalking{overflow:hidden}

/* ============================================================================
   THE STALK v2 — finding, and the trail
   Once the menu holds the whole catalogue, walking to a thing is slower than
   naming it. Any keystroke turns the web into a launcher.
   ========================================================================== */
#cc-stalkfind{position:absolute;left:50%;top:clamp(64px,13vh,150px);transform:translateX(-50%);
  width:min(520px,90vw);display:none;z-index:4}
#cc-stalk.finding #cc-stalkfind{display:block}
#cc-stalk.finding #cc-stalksay{display:none}
.sk-fbar{display:flex;align-items:center;gap:11px;padding:13px 16px;border-radius:14px;
  background:rgba(8,4,18,.96);border:1px solid rgba(var(--glow-v),.5);
  box-shadow:0 0 30px -8px rgba(var(--glow-v),.8),0 20px 44px -22px #000}
.sk-fic{display:grid;place-items:center;color:var(--uv-cyan,#14C4FF);flex:none}
#cc-stalkq{flex:1;min-width:0;background:none;border:0;outline:none;color:#EAF6FF;
  font-family:var(--sans);font-size:16px;letter-spacing:.005em}
#cc-stalkq::placeholder{color:var(--ink-mut,#6E839E)}
.sk-fesc{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--ink-mut,#6E839E);
  border:1px solid rgba(var(--glow-v),.3);border-radius:6px;padding:3px 7px;flex:none}
#cc-stalkhits{margin-top:10px;display:grid;gap:6px;max-height:min(52vh,420px);overflow:auto;
  overscroll-behavior:contain;padding-right:2px}
.sk-hit{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  padding:10px 13px;border-radius:11px;
  background:rgba(10,5,22,.9);border:1px solid rgba(var(--glow-v),.24);
  color:#EAF6FF;font-family:inherit;transition:border-color .15s,background .15s,transform .15s}
.sk-hit:hover,.sk-hit.on{border-color:rgb(var(--glow-m));background:rgba(var(--glow-v),.14);
  transform:translateX(3px)}
.sk-hit .hi{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;flex:none;
  background:rgba(var(--glow-v),.12);color:var(--uv-ice,#7FEBFF)}
.sk-hit.on .hi{background:linear-gradient(122deg,var(--uv-cyan,#14C4FF),var(--uv-mag,#FF14C4));color:#04020A}
.sk-hit .ht{min-width:0;flex:1}
.sk-hit .ht b{display:block;font-size:14.5px;font-weight:600;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sk-hit .ht s{display:block;text-decoration:none;font-family:var(--mono);font-size:10.5px;
  color:var(--ink-mut,#6E839E);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sk-hit .hc{font-family:var(--mono);font-size:11px;color:var(--uv-mag,#FF14C4);flex:none}
.sk-none{padding:22px;text-align:center;color:var(--ink-mut,#6E839E);
  font-family:var(--mono);font-size:12px}

/* the trail: how you got to where the readout is pointing */
#cc-stalksay u{display:block;text-decoration:none;font-family:var(--mono);font-size:9.8px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--uv-cyan,#14C4FF);margin-bottom:5px;
  opacity:.85}

@media(max-width:520px){
  #cc-stalkfind{top:56px;width:calc(100vw - 28px)}
  #cc-stalkq{font-size:16px}
  .sk-hit{padding:9px 11px;gap:10px}
  .sk-hit .ht b{font-size:13.5px}
}

/* the deep link opens without the fade, so a capture of it is repeatable */
#cc-stalk.nofade,#cc-stalk.nofade .sk-node{transition:none!important}

/* the branch you came through: present, but plainly behind you */
.sk-node.via{z-index:1}
.sk-node.via .sk-disc{width:38px;height:38px;opacity:.9}
.sk-node.via .sk-disc svg{width:15px;height:15px}
.sk-node.via b{font-size:9.5px;opacity:.75;letter-spacing:.06em}
.sk-node.via .sk-cnt{transform:scale(.8)}

/* a long strain name must ellipsis inside the row, not push the row wider than
   the phone: every level of the flex chain needs to be allowed to shrink */
#cc-stalkhits{width:100%}
.sk-hit{max-width:100%;box-sizing:border-box}
.sk-hit .ht{overflow:hidden;min-width:0}
.sk-hit .ht b,.sk-hit .ht s{max-width:100%}
/* an auto grid track sizes to its items' max-content, and a nowrap strain name
   has a very large one, so the track has to be told it may not exceed the box */
#cc-stalkhits{grid-template-columns:minmax(0,1fr)}

/* ============================================================================
   THE STALK — EXTREME. The menu is the shop.
   Reaching a listing inside the menu and then being thrown out to a page to act
   on it defeats the point, so the listing opens in place with the arc still
   behind it and the basket on the handle.
   ========================================================================== */
#cc-stalkpanel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.96);
  width:min(460px,calc(100vw - 28px));max-height:min(84vh,720px);overflow:auto;
  overscroll-behavior:contain;display:none;opacity:0;z-index:6;
  border-radius:18px;background:rgba(9,5,20,.985);
  border:1px solid rgba(var(--glow-v),.5);
  box-shadow:0 0 0 1px rgba(var(--glow-v),.18),
             0 0 70px -14px rgba(var(--glow-v),.85),0 40px 90px -40px #000;
  transition:opacity .2s ease,transform .26s cubic-bezier(.34,1.4,.64,1)}
#cc-stalk.shopping #cc-stalkpanel{display:block;opacity:1;transform:translate(-50%,-50%) scale(1)}
#cc-stalk.shopping #cc-stalksay,#cc-stalk.shopping #cc-stalkdepth{opacity:.25}
.sp-x{position:absolute;top:11px;right:11px;z-index:3;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(6,3,14,.8);border:1px solid rgba(var(--glow-v),.4);color:var(--uv-ice,#7FEBFF)}
.sp-x:hover{border-color:rgb(var(--glow-m));color:#fff}
.sp-art{aspect-ratio:16/10;background:rgba(var(--glow-v),.07);overflow:hidden;
  border-bottom:1px solid rgba(var(--glow-v),.22)}
.sp-art img{width:100%;height:100%;object-fit:cover;display:block}
.sp-body{padding:18px 18px 20px}
.sp-ven{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-mut,#6E839E)}
.sp-body h4{font-family:var(--display);font-size:20px;line-height:1.2;margin:8px 0 0;color:#fff}
.sp-price{display:flex;align-items:baseline;gap:12px;margin-top:12px}
.sp-price b{font-family:var(--mono);font-size:22px;color:#fff;font-variant-numeric:tabular-nums}
.sp-stk{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--uv-green,#5BFF9E)}
.sp-stk.out{color:var(--ink-mut,#6E839E)}
.sp-var{width:100%;margin-top:14px;padding:11px 13px;border-radius:10px;
  background:rgba(var(--glow-v),.08);border:1px solid rgba(var(--glow-v),.32);
  color:#EAF6FF;font-family:inherit;font-size:14.5px;outline:none}
.sp-var:focus{border-color:rgb(var(--glow-v))}
.sp-row{display:flex;gap:10px;margin-top:14px}
.sp-qty{display:inline-flex;align-items:center;flex:none;border-radius:10px;overflow:hidden;
  border:1px solid rgba(var(--glow-v),.32);background:rgba(var(--glow-v),.06)}
.sp-qty button{width:38px;height:44px;border:0;background:none;cursor:pointer;
  color:var(--uv-ice,#7FEBFF);font-size:17px;line-height:1}
.sp-qty button:hover{background:rgba(var(--glow-v),.16)}
.sp-qty b{min-width:34px;text-align:center;font-family:var(--mono);font-size:15px;color:#fff}
.sp-add{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:0;border-radius:10px;cursor:pointer;padding:0 18px;height:46px;
  background:linear-gradient(122deg,var(--uv-cyan,#14C4FF),var(--uv-mag,#FF14C4));
  color:#04020A;font-family:inherit;font-weight:800;font-size:14.5px;
  box-shadow:0 0 26px -8px rgba(var(--glow-m),.9);
  transition:transform .16s,box-shadow .16s}
.sp-add:hover{transform:translateY(-1px);box-shadow:0 0 36px -6px rgba(var(--glow-m),1)}
.sp-add:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none}
.sp-full{display:block;text-align:center;margin-top:14px;padding:6px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--uv-ice,#7FEBFF)}
.sp-full:hover{color:rgb(var(--glow-m))}

/* a listing on the shelf wears its price and a warmer rim than a place does */
.sk-node .sk-disc.buy{border-color:rgba(var(--glow-m),.55)}
.sk-node.at .sk-disc.buy{border-color:transparent}
.sk-node u{display:block;text-decoration:none;font-family:var(--mono);font-size:10px;
  letter-spacing:.04em;color:var(--uv-mag,#FF14C4);margin-top:1px;
  text-shadow:0 1px 8px rgba(0,0,0,.95)}

/* the basket, on the handle, because the menu is also the cart button */
#cc-stalk-handle .sk-cart{min-width:19px;height:19px;padding:0 6px;border-radius:999px;
  background:linear-gradient(122deg,var(--uv-cyan,#14C4FF),var(--uv-mag,#FF14C4));
  color:#04020A;font-family:var(--mono);font-size:10px;font-weight:700;line-height:19px;
  text-align:center;margin-left:-2px}
#cc-stalk-handle .sk-cart.pop{animation:skpop .45s cubic-bezier(.34,1.5,.64,1)}
@keyframes skpop{0%{transform:scale(1)}45%{transform:scale(1.45)}100%{transform:scale(1)}}

.sk-toast{position:absolute;left:50%;bottom:96px;transform:translate(-50%,10px);z-index:8;
  padding:11px 18px;border-radius:999px;opacity:0;pointer-events:none;
  background:rgba(8,4,18,.96);border:1px solid rgba(var(--glow-m),.5);
  color:#EAF6FF;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  box-shadow:0 0 26px -8px rgba(var(--glow-m),.9);
  transition:opacity .2s ease,transform .24s cubic-bezier(.34,1.4,.64,1);
  max-width:82vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sk-toast.on{opacity:1;transform:translate(-50%,0)}

@media(max-width:520px){
  #cc-stalkpanel{width:calc(100vw - 20px);max-height:86vh}
  .sp-art{aspect-ratio:3/2}
  .sp-body{padding:15px 15px 17px}
  .sp-body h4{font-size:18px}
}

/* ============================================================================
   THE ROOM — a place, opened inside the menu
   ========================================================================== */
#cc-stalkroom{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.985);
  width:min(940px,calc(100vw - 24px));height:min(84vh,860px);
  display:none;opacity:0;z-index:7;flex-direction:column;overflow:hidden;
  border-radius:18px;background:rgba(7,4,16,.985);
  border:1px solid rgba(var(--glow-v),.5);
  box-shadow:0 0 0 1px rgba(var(--glow-v),.16),
             0 0 80px -16px rgba(var(--glow-v),.85),0 46px 100px -44px #000;
  transition:opacity .2s ease,transform .26s cubic-bezier(.34,1.4,.64,1)}
#cc-stalk.roomed #cc-stalkroom{display:flex;opacity:1;transform:translate(-50%,-50%) scale(1)}
#cc-stalk.roomed #cc-stalksay,
#cc-stalk.roomed #cc-stalkdepth,
#cc-stalk.roomed #cc-stalknodes,
#cc-stalk.roomed #cc-stalklines{opacity:0;pointer-events:none}

.rm-bar{display:flex;align-items:center;gap:11px;flex:0 0 auto;padding:11px 12px;
  border-bottom:1px solid rgba(var(--glow-v),.28);background:rgba(10,5,22,.9)}
.rm-back,.rm-x,.rm-out{width:34px;height:34px;flex:none;border-radius:9px;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(var(--glow-v),.1);border:1px solid rgba(var(--glow-v),.3);
  color:var(--uv-ice,#7FEBFF);transition:.16s}
.rm-back{transform:scaleX(-1)}
.rm-back:hover,.rm-x:hover,.rm-out:hover{border-color:rgb(var(--glow-m));
  background:rgba(var(--glow-m),.16);color:#fff}
.rm-x{margin-left:0}
.rm-t{flex:1;min-width:0;line-height:1.25}
.rm-t b{display:block;font-family:var(--display);font-size:15.5px;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rm-t s{display:block;text-decoration:none;font-family:var(--mono);font-size:9.8px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mut,#6E839E)}
.rm-body{position:relative;flex:1;min-height:0}
#cc-room{width:100%;height:100%;border:0;display:block;background:transparent}
.rm-wait{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:11px;
  color:var(--ink-mut,#6E839E);font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  background:rgba(7,4,16,.96);text-align:center;padding:20px}
.rm-wait a{color:var(--uv-ice,#7FEBFF);text-decoration:underline}
.rm-wait span{width:15px;height:15px;border-radius:50%;flex:none;
  border:2px solid rgba(var(--glow-v),.28);border-top-color:rgb(var(--glow-v));
  animation:rmspin .8s linear infinite}
@keyframes rmspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.rm-wait span{animation:none}}

@media(max-width:640px){
  #cc-stalkroom{width:calc(100vw - 14px);height:88vh;border-radius:16px}
  .rm-bar{padding:9px 10px;gap:9px}
  .rm-t b{font-size:14px}
  .rm-out{display:none}
}

/* A node on the outermost arc already carries an icon and a two-line name; the
   price makes it three lines and the ring stops being legible. The readout card
   above shows the price for whatever is highlighted, so the node does not need
   it on a narrow screen. This has to sit at the END of the file: the base
   `.sk-node u{display:block}` rule is further down than where it was first
   written, and a media query adds no specificity to beat it. */
@media(max-width:760px){
  .sk-node u{display:none}
}