/* warlo.net — half record shelf, half transparent tech.
   Structure and objects from the IVAR/record-shelf prototype; panels, buttons and
   readouts rendered in translucent tinted plastic. Single light theme, explicit colors,
   mobile-first at 390px, desktop >= 900px as the same objects on a wider wall. */

:root{
  /* room */
  --wall:#F6F3EC; --paper:#F1EADB; --ink:#1B1B1B; --muted:#5C584F; --line:#D9D3C6; --white:#FFFFFF;
  /* surfaces: --card is any white object, --cap is a moulded key cap, --gloss its top highlight */
  --card:#FFFFFF; --cap:#F2EFE6; --zebra:#FBFAF6; --gloss:rgba(255,255,255,.9); --shade:rgba(27,27,27,.16);
  --on-amber:#1B1B1B;
  /* jewel tones */
  --red:#6B1F33; --red-deep:#56192A; --red-tint:#F0E1E5;
  --green:#0F3F34; --deep:#082A23; --blue:#1F3A93; --amber:#B8860B;
  --violet:#4E2A6B; --violet-deep:#33194A; --moss:#86A17D; --moss-lt:#C6D2BE;
  --walnut:#6B4A2B; --walnut-lit:#B58A5E; --copper:#B87333;
  /* translucent plastics: a jewel hue laid over white */
  --j-clear:#E9E5DA; --j-red:#E3C2CB; --j-green:#BCD3CC; --j-blue:#C4CDEA;
  --j-violet:#D5C6E4; --j-amber:#EFDCAE; --j-moss:#D2DCCB;
  --screw:radial-gradient(circle at 50% 50%,#fff 0 26%,rgba(27,27,27,.5) 30% 44%,rgba(255,255,255,.7) 48% 58%,transparent 60%);
  --body:"Jost","Futura","Avenir Next",Helvetica,Arial,sans-serif;
  --disp:"Bebas Neue","Arial Narrow",Impact,sans-serif;
  --pix:"Silkscreen","Courier New",monospace;
  --hand:"Caveat","Bradley Hand","Segoe Script",cursive;
  --console-h:106px;

  --leaf-0:#A9BFA0; --leaf-1:#86A17D; --leaf-2:#0F3F34; --leaf-3:#082A23; --leaf-rib:rgba(246,243,236,.45); --pot:#1F3A93; --amber-lcd:#B8860B;
  --console-hi:#C9673F; --console:#A8492A; --console-lo:#7A3117; --cubby:#4E2012; --cubby-lo:#3A170C; --cubby-on:#9C4522;}

/* ---------- base ---------- */
*{box-sizing:border-box}
body{margin:0;background:var(--wall);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.45;overflow-x:hidden;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
h1,h2,h3{margin:0;font-weight:600}
h2{font-family:var(--disp);font-size:29px;font-weight:400;letter-spacing:.03em;line-height:1}
p{margin:0}
a{color:var(--blue)}
button{font:inherit;color:inherit;cursor:pointer}
img,svg{max-width:100%}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.disp{font-family:var(--disp);font-weight:400;letter-spacing:.03em}
.small{font-size:13px;color:var(--muted)}
.cnt{font:600 11px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.line{font-size:14px;color:var(--muted);margin:14px 2px 0}
.line b{color:var(--ink)}
.stack{display:flex;flex-direction:column;gap:10px}
.rowflex{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
form.inline{display:inline}

/* ---------- translucent plastic shell ---------- */
.pl{position:relative;border:2.5px solid var(--ink);border-radius:20px;background-color:var(--tint,var(--j-clear));
  background-image:radial-gradient(circle at 1.5px 1.5px,rgba(27,27,27,.13) 1px,transparent 1.3px),
    linear-gradient(var(--gloss),rgba(255,255,255,.1) 26%,rgba(255,255,255,0) 58%,var(--shade));
  background-size:9px 9px,auto;
  box-shadow:inset 0 3px 0 var(--gloss),inset 0 -9px 16px rgba(27,27,27,.15),4px 5px 0 rgba(27,27,27,.17)}
.screws::after{content:"";position:absolute;inset:7px;pointer-events:none;background-image:var(--screw),var(--screw),var(--screw),var(--screw);
  background-size:9px 9px;background-repeat:no-repeat;background-position:left top,right top,left bottom,right bottom}
.rib{height:13px;border-radius:999px;border:1.5px solid rgba(27,27,27,.5);
  background:repeating-linear-gradient(90deg,rgba(27,27,27,.22) 0 2px,rgba(255,255,255,.75) 2px 5px)}
.lcd{display:inline-block;background:#0C1310;color:#9FE0A4;font-family:var(--pix);font-size:11px;padding:3px 7px;border-radius:5px;
  border:1.5px solid var(--ink);box-shadow:inset 0 2px 5px rgba(0,0,0,.9);text-shadow:0 0 6px rgba(159,224,164,.6)}
.lcd.amb{color:var(--amber-lcd);text-shadow:0 0 6px rgba(239,220,174,.5)}
.lcd.big{font-size:22px;padding:7px 11px;letter-spacing:.06em}

/* ---------- header ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 16px 10px}
.wordmark{text-decoration:none;color:var(--ink);display:flex;flex-direction:column;line-height:1.1}
.wordmark .h{font:600 21px/1 var(--body);text-transform:uppercase;letter-spacing:.34em}
.wordmark .s{font:500 9px/1 var(--body);text-transform:uppercase;letter-spacing:.3em;color:var(--muted);margin-top:5px}
.top .clock{text-align:right;display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.bumper{height:12px;margin:2px 16px 0;border-radius:999px;border:2px solid var(--ink);
  background:linear-gradient(var(--j-red),#C79EAB);box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 3px 0 rgba(27,27,27,.18)}
/* Room under the page for the fixed dock (and the iPhone home bar), a little taller than the
   dock itself, so the last thing on any page can scroll clear of it. Only pages with a dock. */
:root{--dock-room:calc(var(--console-h) + env(safe-area-inset-bottom, 0px) + 24px)}
main{padding:0}
body:has(.console) main{padding-bottom:var(--dock-room)}
main:focus{outline:none}
.screen{padding:0 16px;position:relative}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:22px 2px 10px;flex-wrap:wrap}
.sec-head small{font:500 12px var(--body);color:var(--muted);letter-spacing:.03em}
.flash{display:flex;align-items:center;gap:11px;margin:12px 16px 0;padding:11px 14px;border-radius:16px;--tint:var(--j-green)}
.flash .t{font-weight:600;line-height:1.25}
.flash .t small{display:block;font:500 12px var(--body);color:#2F3830}

/* ---------- the IVAR unit ---------- */
.ivar{position:relative;padding:2px 14px 6px;margin-top:10px}
.ivar::before,.ivar::after{content:"";position:absolute;top:0;bottom:0;left:0;width:12px;border-radius:3px;box-shadow:1px 0 0 rgba(0,0,0,.2);
  background:radial-gradient(circle at 6px 9px,#2A1A0C 1.4px,transparent 2px) 0 0/12px 18px,
    repeating-linear-gradient(90deg,var(--walnut) 0 3px,#7D5837 3px 5px,var(--walnut) 5px 9px,#5A3C22 9px 12px)}
.ivar::after{left:auto;right:0}
.shelf-h{font-family:var(--disp);font-size:23px;font-weight:400;letter-spacing:.04em;line-height:1;margin:14px 10px 0;
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.shelf-h small{font:500 12px var(--body);color:var(--muted);letter-spacing:.02em}
.shelf{position:relative}
.plank{display:flex;align-items:flex-end;gap:10px;overflow-x:auto;padding:14px 12px 0;scroll-snap-type:x proximity;scrollbar-width:none;
  border-bottom:13px solid var(--walnut);box-shadow:inset 0 -1px 0 var(--walnut-lit),0 8px 10px -5px rgba(27,27,27,.4)}
.plank::-webkit-scrollbar{display:none}
.plank>*{flex:none;scroll-snap-align:start;transform-origin:50% 100%}
.plank.lean>*:nth-child(odd){transform:rotate(-1.4deg)}
.plank.lean>*:nth-child(even){transform:rotate(1.1deg)}
.plank .empty{font-size:13px;color:var(--muted);padding:14px 4px 18px;transform:none}
.lip{position:absolute;left:0;right:0;bottom:13px;border-top:2.5px solid var(--ink);pointer-events:none;z-index:2}

/* ---------- sleeves (friends, devices, events) ---------- */
.mod{width:154px;padding:12px 11px 10px;display:flex;flex-direction:column;gap:8px;text-align:left;--tint:var(--j-blue)}
.mod .top-row{display:flex;justify-content:space-between;align-items:flex-start;gap:6px;min-height:34px}
.mod .av{font-size:32px;line-height:1}
.mod .name a{color:inherit;text-decoration:none}
.mod .name{font-family:var(--disp);font-size:26px;line-height:.95;letter-spacing:.03em;word-break:break-word}
.mod .sub{font-size:12px;color:#413E38}
.mod .plate{background:var(--card);border:2px solid var(--ink);border-radius:9px;padding:5px 8px 6px;box-shadow:inset 0 2px 0 rgba(27,27,27,.07)}
.mod.device{--tint:var(--j-clear);padding-bottom:16px}
.mod.note{--tint:var(--j-moss);justify-content:center;align-items:center;text-align:center;font-size:12px;line-height:1.3;color:var(--ink)}
.mod.note svg{width:52px;height:52px}
.badge{font:700 10px var(--body);letter-spacing:.11em;background:var(--amber);color:var(--on-amber);border:2px solid var(--ink);border-radius:6px;
  padding:2px 6px;box-shadow:inset 0 2px 0 rgba(255,255,255,.55);white-space:nowrap}
.badge.rank{background:var(--card)}
.led{width:11px;height:11px;border-radius:50%;flex:none;border:1.5px solid var(--ink);
  background:radial-gradient(circle at 35% 30%,#fff,#7ED77B 45%,#1E6B2C);box-shadow:0 0 7px rgba(126,215,123,.8)}
.led.off{background:radial-gradient(circle at 35% 30%,#fff,#B9B4A6 55%,#6B675D);box-shadow:none}
.pulltab{align-self:center;margin-bottom:-11px;border:2.5px solid var(--ink);border-radius:4px 4px 11px 11px;padding:3px 14px 6px;
  font:600 9px var(--body);letter-spacing:.16em;text-transform:uppercase;background-color:var(--j-red);
  background-image:repeating-linear-gradient(90deg,rgba(27,27,27,.2) 0 2px,rgba(255,255,255,.6) 2px 5px);
  box-shadow:0 3px 0 rgba(27,27,27,.35)}
.pulltab:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(27,27,27,.35)}

/* ---------- chunky controls ---------- */
.btn{border:2.5px solid var(--ink);border-radius:999px;padding:10px 19px;font-weight:600;background-color:var(--card);text-decoration:none;display:inline-block;
  background-image:linear-gradient(var(--gloss),rgba(255,255,255,0) 48%,var(--shade));
  box-shadow:0 5px 0 rgba(27,27,27,.4),inset 0 2px 0 var(--gloss);transition:transform .07s,box-shadow .07s}
a.btn{color:var(--ink)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(27,27,27,.4),inset 0 2px 0 rgba(255,255,255,.6)}
.btn.red{background-color:var(--red);color:#fff;box-shadow:0 5px 0 var(--red-deep),inset 0 2px 0 rgba(255,255,255,.35)}
.btn.red:active{box-shadow:0 1px 0 var(--red-deep)}
.btn.go{background-color:var(--green);color:#fff;box-shadow:0 5px 0 var(--deep),inset 0 2px 0 rgba(255,255,255,.3)}
.btn.vio{background-color:var(--violet);color:#fff;box-shadow:0 5px 0 var(--violet-deep),inset 0 2px 0 rgba(255,255,255,.3)}
.btn.sm{padding:6px 13px;font-size:13px;box-shadow:0 4px 0 rgba(27,27,27,.4),inset 0 2px 0 rgba(255,255,255,.9)}
.btn.sm:active{box-shadow:0 1px 0 rgba(27,27,27,.4)}
.btn.link{border:0;background:none;box-shadow:none;color:var(--blue);padding:4px 0;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.btn.link:active{transform:none}
.slide{width:78px;height:36px;flex:none;padding:0;position:relative;overflow:hidden;border:2.5px solid var(--ink);border-radius:9px;
  background:#DCD6C7;box-shadow:inset 0 3px 7px rgba(27,27,27,.4)}
.slide .leg{position:absolute;top:0;bottom:0;width:50%;display:grid;place-items:center;font:700 9px var(--body);letter-spacing:.14em;color:#6B675D}
.slide .leg.a{left:0}
.slide .leg.b{right:0}
.slide .thumb{position:absolute;top:3px;left:3px;width:34px;height:24px;border-radius:5px;border:2px solid var(--ink);
  transition:transform .18s cubic-bezier(.2,.8,.3,1);
  background:repeating-linear-gradient(90deg,rgba(27,27,27,.28) 0 2px,#F4F1E8 2px 5px);box-shadow:0 3px 0 rgba(27,27,27,.4)}
.slide{transition:background .18s ease-out}
.slide[aria-checked="true"]{background:var(--blue)}
.slide[aria-checked="true"] .leg{color:rgba(255,255,255,.85)}
.slide[aria-checked="true"] .thumb{transform:translateX(35px)}

/* ---------- tactile keys: 90s handheld caps with real travel ---------- */
.key{position:relative;display:grid;place-items:center;padding:0;border:2.5px solid var(--ink);border-radius:50%;width:62px;height:62px;
  background-color:var(--cap);background-image:linear-gradient(var(--gloss),rgba(255,255,255,.12) 46%,var(--shade));
  box-shadow:0 5px 0 rgba(27,27,27,.45),0 7px 10px rgba(27,27,27,.2),inset 0 2px 0 var(--gloss),inset 0 -3px 7px rgba(27,27,27,.16);
  transition:transform .06s,box-shadow .06s}
.key::after{content:"";position:absolute;left:17%;top:9%;width:44%;height:27%;border-radius:50%;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.85),rgba(255,255,255,0))}
.key:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(27,27,27,.45),inset 0 3px 8px rgba(27,27,27,.34)}
.key[aria-pressed="true"]{transform:translateY(2px);box-shadow:0 2px 0 rgba(27,27,27,.45),inset 0 4px 10px rgba(27,27,27,.4)}
.key:disabled{filter:grayscale(.8);opacity:.5;cursor:not-allowed}
a.key{color:var(--ink);text-decoration:none}
a.k-red,a.k-go,a.k-vio{color:#fff}
.key .cap{display:flex;align-items:center;justify-content:center;gap:9px;font-size:19px;line-height:1}
.k-round .cap svg{width:30px;height:30px}
.k-pill{width:auto;height:46px;padding:0 20px;border-radius:999px}
.k-wide{width:100%;height:58px;border-radius:17px}
.k-wide .cap{font:600 16px var(--body);letter-spacing:.05em;text-transform:uppercase}
.k-wide .cap svg{width:24px;height:auto}
.k-amber{background-color:var(--j-amber)}
.k-red{background-color:var(--red);color:#fff}
.k-go{background-color:var(--green);color:#fff}
.k-vio{background-color:var(--violet);color:#fff}

/* ---------- rockers: one moulded plate, caps that sink when engaged ---------- */
.rocker{display:inline-flex;align-items:center;gap:4px;padding:4px;border:2.5px solid var(--ink);border-radius:13px;background:#DCD6C7;
  align-self:flex-start;box-shadow:inset 0 3px 7px rgba(27,27,27,.4),0 3px 0 rgba(27,27,27,.25)}
.rocker .rk{border:2px solid var(--ink);border-radius:9px;padding:5px 12px;font:600 12px var(--body);background-color:var(--cap);
  background-image:linear-gradient(var(--gloss),rgba(255,255,255,0) 52%,var(--shade));
  box-shadow:0 3px 0 rgba(27,27,27,.42),inset 0 2px 0 var(--gloss);transition:transform .06s,box-shadow .06s}
.rocker .rk:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(27,27,27,.42)}
.rocker .rk[aria-pressed="true"],.rocker .rk[aria-current="page"]{background-color:var(--ink);background-image:none;color:var(--wall);transform:translateY(2px);
  box-shadow:inset 0 3px 8px rgba(0,0,0,.7)}
.rocker .rk.go[aria-pressed="true"]{background-color:var(--green)}
.rocker .rk.mb[aria-pressed="true"]{background-color:var(--amber);color:var(--on-amber)}
.rk2 .rk{min-width:46px;text-align:center}
.rk3 .rk{padding:5px 9px;letter-spacing:.01em}
.rocker .lcd{min-width:42px;text-align:center;font-size:13px}

/* ---------- the guest-pass handheld ---------- */
.remote{margin-top:22px;padding:12px;border-radius:24px;--tint:var(--j-blue)}
.remote-head{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.remote-head .grip{flex:1}
.remote-head .lcd{flex:none;font-size:10px}
.pads{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pad{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;margin:0;
  background:var(--gloss);border:2px solid var(--ink);border-radius:15px;padding:10px 9px 9px;box-shadow:inset 0 2px 0 var(--gloss)}
.pad.wide{grid-column:1/-1;flex-direction:row;justify-content:space-between;text-align:left}
.pad.span{grid-column:1/-1}
.pad-lab{font:600 10px var(--body);letter-spacing:.16em;text-transform:uppercase;color:#3A382F}
.pad-lab svg{width:22px;height:22px}
.pad-sub{font-size:12px;line-height:1.2;color:var(--muted)}
.pad .key svg{max-width:32px}

/* ---------- device-face forms: key cutter, label maker ---------- */
.cutter,.labelmaker{margin-top:4px;padding:12px;border-radius:24px;--tint:var(--j-blue)}
.labelmaker{--tint:var(--j-violet)}
.devform{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fld{display:flex;flex-direction:column;gap:5px;min-width:0;margin:0}
.fld.span{grid-column:1/-1}
.fld>span{font:600 10px var(--body);letter-spacing:.14em;text-transform:uppercase;color:#3A382F}
.devform input[type=text],.devform input[type=search],.devform input[type=datetime-local],.devform textarea{
  width:100%;border-width:2px;border-radius:10px;padding:8px 10px;font-size:15px}
.devform textarea{resize:vertical;font-family:var(--body)}
.stepper{display:inline-flex;align-items:center;gap:5px;padding:4px;border:2.5px solid var(--ink);border-radius:12px;background:#DCD6C7;
  box-shadow:inset 0 3px 7px rgba(27,27,27,.4)}
.stepper .rk{border:2px solid var(--ink);border-radius:8px;width:32px;height:32px;font:600 16px var(--body);background-color:var(--cap);flex:none;
  background-image:linear-gradient(rgba(255,255,255,.95),rgba(255,255,255,0) 52%,rgba(27,27,27,.14));
  box-shadow:0 3px 0 rgba(27,27,27,.42),inset 0 2px 0 rgba(255,255,255,.9);transition:transform .06s,box-shadow .06s}
.stepper .rk:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(27,27,27,.42)}
.stepper .numlcd{flex:1;min-width:0;width:100%;text-align:center;background:#0C1310;color:#9FE0A4;border:2px solid var(--ink);border-radius:7px;
  font-family:var(--pix);font-size:15px;padding:7px 4px;box-shadow:inset 0 2px 6px rgba(0,0,0,.9);text-shadow:0 0 6px rgba(159,224,164,.5)}
.stepper .numlcd::placeholder{color:#4E6B52}
.togglekeys{display:flex;flex-wrap:wrap;gap:8px;position:relative}
.k-toggle{width:auto;height:auto;padding:9px 12px;border-radius:14px;cursor:pointer;display:inline-grid}
.k-toggle .cap{gap:8px;font-size:13px}
.k-toggle .cap b{font:600 12px var(--body);letter-spacing:.06em}
.k-toggle .cap svg{width:22px;height:22px}
.togglekeys input:checked+.k-toggle{background-color:var(--j-amber);color:var(--ink);transform:translateY(2px);
  box-shadow:0 2px 0 rgba(27,27,27,.45),inset 0 4px 10px rgba(27,27,27,.35)}
.togglekeys input:focus-visible+.k-toggle{outline:3px solid var(--blue);outline-offset:3px}
.swatch{width:14px;height:14px;border-radius:4px;border:1.5px solid var(--ink);display:block}
.lm-actions{display:flex;align-items:center;gap:12px;margin-top:4px}
.lm-actions .key{flex:1}
.minted{padding:12px;border-radius:18px;margin-bottom:12px}
.lcdstrip{display:flex;align-items:center;gap:9px;margin:8px 0 6px}
.lcdstrip .lcd{flex:1;min-width:0;font-size:12px;padding:9px 10px;word-break:break-all;line-height:1.35}
.housenote{display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:18px}
.housenote svg{width:46px;height:46px;flex:none}

/* ---------- plants: the monstera in the blue-and-white pot, and the pothos ---------- */
/* dappled leaf shadow on the wall — fixed, blurred, barely there, desktop only */
body::before{content:"";position:fixed;inset:-10%;z-index:-1;pointer-events:none;display:none;opacity:.055;filter:blur(9px);
  background-repeat:no-repeat;background-size:46vmin,34vmin;background-position:-8vmin 10vmin,104% 78%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%231B1B1B' fill-rule='evenodd' d='M50%203C64%203%2080%2010%2087%2024C84%2030%2077%2033%2069%2033C82%2037%2093%2046%2094%2057C89%2060%2081%2061%2073%2058C83%2065%2088%2076%2084%2088C77%2089%2068%2086%2062%2080C60%2088%2056%2095%2050%20100C44%2095%2040%2088%2038%2080C32%2086%2023%2089%2016%2088C12%2076%2017%2065%2027%2058C19%2061%2011%2060%206%2057C7%2046%2018%2037%2031%2033C23%2033%2016%2030%2013%2024C20%2010%2036%203%2050%203ZM37%2031a5%208%200%201%200%2010%200a5%208%200%201%200-10%200ZM57%2046a4%207%200%201%200%208%200a4%207%200%201%200-8%200ZM39%2061a4%206%200%201%200%208%200a4%206%200%201%200-8%200Z'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%231B1B1B' fill-rule='evenodd' d='M50%203C64%203%2080%2010%2087%2024C84%2030%2077%2033%2069%2033C82%2037%2093%2046%2094%2057C89%2060%2081%2061%2073%2058C83%2065%2088%2076%2084%2088C77%2089%2068%2086%2062%2080C60%2088%2056%2095%2050%20100C44%2095%2040%2088%2038%2080C32%2086%2023%2089%2016%2088C12%2076%2017%2065%2027%2058C19%2061%2011%2060%206%2057C7%2046%2018%2037%2031%2033C23%2033%2016%2030%2013%2024C20%2010%2036%203%2050%203ZM37%2031a5%208%200%201%200%2010%200a5%208%200%201%200-10%200ZM57%2046a4%207%200%201%200%208%200a4%207%200%201%200-8%200ZM39%2061a4%206%200%201%200%208%200a4%206%200%201%200-8%200Z'/%3E%3C/svg%3E")}
@media (min-width:700px){body::before{display:block}}
.plant{display:block;pointer-events:none;flex:none;transform:rotate(var(--lean,0deg));transition:transform .45s cubic-bezier(.2,1.5,.4,1)}
.potted,.shelf .vine{pointer-events:auto;cursor:grab}
@keyframes sway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
.plant .fronds{transform-origin:50% 96%;animation:sway 6s ease-in-out infinite}
.pothos .fronds{transform-origin:50% 2%}
.potted{width:96px;height:114px;align-self:flex-end;margin-bottom:12px;order:-1;margin-right:2px}
.shelf .vine{position:absolute;left:18px;top:-14px;width:52px;height:auto;z-index:0}
.crt .peek,.turntable .peek{position:absolute;height:auto;z-index:-1}
.crt .peek{right:-26px;top:-44px;width:104px;z-index:0}
.turntable .peek{left:-34px;top:-44px;width:132px;z-index:0}
.console .convine{position:absolute;left:-6px;top:2px;width:190px;height:auto;z-index:0;opacity:.8}
.console .tabs{position:relative;z-index:1}
.pola .tuck{position:absolute;top:-14px;left:16px;width:22px;height:auto;z-index:2}
.pola.sm .tuck{left:12px}
.sticker .streakleaf{display:inline-block;width:26px;height:11px;margin-left:5px;vertical-align:-1px;color:currentColor}
.st-moss{--st:var(--moss);color:var(--ink)}
.st-deep{--st:var(--deep)}
.plank .empty{display:flex;align-items:center;gap:11px}
.plank .empty .px{width:46px;height:auto;flex:none}
.flash .flashplant{width:34px;height:auto;flex:none}

/* the label maker's key rows and auto-filled readouts */
.lm .movieonly{display:none}
.lm #kind0:checked~.movieonly{display:flex}
.daykeys .key,.timekeys .key{padding:8px 11px}
.daykeys .key[aria-pressed="true"],.timekeys .key[aria-pressed="true"]{background-color:var(--j-amber);color:var(--ink)}
.pickkey{position:relative;overflow:hidden}
.pickkey input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.autorow{display:flex;align-items:center;gap:8px}
.autorow .lcd{font-size:15px;padding:6px 10px}

/* ---------- pixel art ---------- */
.px{display:block;image-rendering:pixelated;shape-rendering:crispEdges}
.kennel .px{width:30px;height:26px;flex:none}
.pop .px{width:15px;height:auto}
.keytag{display:block;width:74px;margin:0 auto 6px}
.k-vio .cap .px{width:22px}
.chip{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--ink);border-radius:999px;padding:3px 11px 3px 7px;font:500 13px var(--body);
  background:var(--j-red);box-shadow:inset 0 2px 0 rgba(255,255,255,.7)}
.chip.ok{background:var(--j-green)}
.kennel svg{width:28px;height:22px;flex:none}
.kennel.out .dog{display:none}
.card{background:var(--card);border:2.5px solid var(--ink);border-radius:18px;padding:4px 15px;box-shadow:0 5px 0 rgba(27,27,27,.16)}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:2px dotted var(--line)}
.row:last-child{border-bottom:0}
.row .lab{font-weight:600;display:block}
.row .sub{font-size:13px;color:var(--muted);display:block}
.rowicon{display:flex;align-items:center;gap:11px;min-width:0}
.rowicon svg{width:40px;height:40px;flex:none}
input[type=range]{width:100%;accent-color:var(--red);height:26px}
input[type=text],input[type=number],input[type=search],select,textarea{font:inherit;padding:8px 10px;border:2.5px solid var(--ink);border-radius:10px;
  background:var(--card);box-shadow:inset 0 2px 4px rgba(27,27,27,.15);max-width:100%}
.linkbox{background:var(--wall);border:2px solid var(--ink);border-radius:12px;padding:8px 8px 8px 13px;display:flex;justify-content:space-between;
  align-items:center;gap:10px;font-size:14px;margin:0 0 12px;word-break:break-all}
.counter{display:flex;align-items:center;gap:13px;margin:16px 2px 0;padding:11px 14px;border-radius:17px;--tint:var(--j-green)}
.counter .lcd{font-size:26px;padding:8px 13px 7px;letter-spacing:.06em;flex:none}
.counter .cap{font-size:13px;line-height:1.3;color:var(--ink)}
.counter .cap b{display:block;font:600 10px var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ---------- the friend leaderboard: a plank in the most-seen shelf unit ---------- */
.plank>.board{flex:1 1 auto;min-width:0;padding-bottom:14px}
.shelf-h .lcd{font-size:11px}
.board-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.board-row{display:grid;grid-template-columns:52px 30px 1fr auto auto;align-items:center;gap:10px;padding:6px 10px 6px 7px;
  background:var(--card);border:2px solid var(--ink);border-radius:11px;color:var(--ink);text-decoration:none;box-shadow:0 3px 0 var(--shade)}
.board-row:hover{transform:translateY(-1px)}
.board-row:active{transform:translateY(2px);box-shadow:0 1px 0 var(--shade)}
.board-rank{text-align:center;font-size:12px}
.board-name{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-days{font-size:13px;color:var(--muted);white-space:nowrap}
.board-days b{font-family:var(--disp);font-size:19px;font-weight:400;color:var(--ink);letter-spacing:.03em}
.board-streak{font-size:12px;color:var(--muted);white-space:nowrap}
.board-pager{display:flex;justify-content:space-between;margin-top:12px}
.board-pager [aria-disabled]{opacity:.35;pointer-events:none}
@media (max-width:420px){.board-row{grid-template-columns:46px 26px 1fr auto}.board-streak{display:none}}

/* ---------- flip-clock countdown ---------- */
.flip{display:inline-flex;align-items:center;gap:5px;padding:10px 15px;border-radius:16px;margin-top:14px;--tint:var(--j-clear)}
.flip .cap{font:600 9px var(--body);letter-spacing:.17em;text-transform:uppercase;color:var(--muted);margin-right:5px;max-width:54px;text-align:left;line-height:1.2}
.flap{position:relative;min-width:46px;text-align:center;background:#0C1310;color:#9FE0A4;font-family:var(--pix);font-size:22px;padding:8px 6px 7px;
  border-radius:7px;border:2.5px solid var(--ink);text-shadow:0 0 8px rgba(159,224,164,.5);box-shadow:inset 0 3px 7px rgba(0,0,0,.95),0 3px 0 rgba(27,27,27,.35)}
.flap::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:rgba(0,0,0,.9);box-shadow:0 1px 0 rgba(255,255,255,.1)}
.flap.tick{animation:flap .26s ease}
@keyframes flap{from{transform:perspective(220px) rotateX(-34deg);filter:brightness(1.6)}}
.flip .sep{font-family:var(--pix);font-size:15px;color:var(--muted)}
.flip.dead .flap{color:#C98A8A;text-shadow:none}

/* ---------- the CRT television ---------- */
.crt{width:min(100%,330px);padding:14px 14px 11px;--tint:var(--j-amber);border-radius:26px;transform:none!important}
.glass{position:relative;border-radius:26px/20px;border:7px solid #14181A;padding:16px 16px 14px;min-height:152px;overflow:hidden;color:#E9EFE4;
  background:radial-gradient(ellipse at 50% 38%,#164034 0,#0A1512 72%);box-shadow:inset 0 0 46px rgba(0,0,0,.92),0 0 0 2px rgba(27,27,27,.6)}
.glass::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.32) 0 1px,transparent 1px 3px);pointer-events:none}
.glass::after{content:"";position:absolute;left:5%;right:40%;top:-5%;height:42%;background:linear-gradient(rgba(255,255,255,.14),transparent);
  border-radius:50%/60%;pointer-events:none}
.glass.static{background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 3px),
  repeating-linear-gradient(0deg,rgba(255,255,255,.09) 0 2px,transparent 2px 5px),
  repeating-conic-gradient(rgba(255,255,255,.05) 0 2deg,transparent 2deg 5deg),#1A201D;animation:noise .22s steps(3) infinite}
@keyframes noise{to{background-position:3px -2px,-2px 4px,0 0,0 0}}
.osd{position:relative;padding-right:48px}
.ch{position:absolute;right:14px;top:12px;font-family:var(--pix);font-size:11px;color:var(--amber-lcd);text-shadow:0 0 8px rgba(184,134,11,.9)}
.osd-kind{font-family:var(--pix);font-size:10px;color:var(--amber-lcd);letter-spacing:.04em;text-shadow:0 0 8px rgba(184,134,11,.8)}
.osd-title{font-family:var(--disp);font-size:31px;line-height:1;margin:8px 0;letter-spacing:.03em;text-shadow:0 0 11px rgba(233,239,228,.5)}
.osd-sub{font-size:13px;color:#CFE3C8}
.cabinet{display:flex;align-items:center;gap:9px;margin-top:11px;flex-wrap:wrap}
.knob{width:22px;height:22px;border-radius:50%;flex:none;border:2px solid var(--ink);position:relative;
  background:radial-gradient(circle at 34% 30%,#fff 0 18%,rgba(255,255,255,.55) 22%,#C9B98E 60%,#8B7A4E);box-shadow:0 2px 0 rgba(27,27,27,.3)}
.knob::after{content:"";position:absolute;left:50%;top:3px;width:2.5px;height:7px;background:var(--ink);margin-left:-1.25px;border-radius:2px}
.knob.sm{width:16px;height:16px}
.cabinet .grille{flex:1;min-width:26px}
.marquee{display:flex;gap:9px;justify-content:center;padding:2px 0 8px;flex-wrap:wrap}
.marquee i{width:9px;height:9px;border-radius:50%;background:var(--amber);border:1.5px solid var(--ink);box-shadow:0 0 8px rgba(184,134,11,.9);
  animation:bulb 1.6s ease-in-out infinite}
.marquee i:nth-child(2n){animation-delay:.4s}
.marquee i:nth-child(3n){animation-delay:.8s}
@keyframes bulb{0%,100%{opacity:1}50%{opacity:.34}}

/* ---------- turntable (Me hero) ---------- */
.turntable{position:relative;padding:20px 16px 16px;aspect-ratio:1/.95;--tint:var(--j-clear);border-radius:26px;overflow:visible}
.platter{position:absolute;left:7%;top:8%;width:70%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;animation:spin 3.6s linear infinite;
  background:repeating-radial-gradient(circle,#2A2A28 0 2px,#131312 2px 4px);box-shadow:0 5px 14px rgba(0,0,0,.45),inset 0 0 0 5px #0E0E0D}
@keyframes spin{to{transform:rotate(360deg)}}
.rlabel{width:39%;aspect-ratio:1;border-radius:50%;background:var(--amber);border:2.5px solid var(--ink);display:grid;place-items:center;text-align:center;
  line-height:1;padding:6px;animation:spin 3.6s linear infinite reverse}
.rlabel .n{font-family:var(--disp);font-size:clamp(15px,4.6vw,21px);letter-spacing:.04em;word-break:break-word}
.rlabel .s{font:600 9px var(--body);letter-spacing:.1em;text-transform:uppercase}
.rlabel .s b{font-family:var(--disp);font-size:24px;font-weight:400;display:block;letter-spacing:.04em}
.spindle{position:absolute;left:50%;top:50%;width:8px;height:8px;background:#E6E2D6;border-radius:50%;transform:translate(-50%,-50%);border:1px solid #6B675D}
.tonearm{position:absolute;right:10%;top:7%;width:14px;height:62%;transform-origin:7px 14px}
.tonearm .base{position:absolute;left:-11px;top:-10px;width:36px;height:36px;border-radius:50%;border:2.5px solid var(--ink);
  background:radial-gradient(circle at 34% 30%,#fff,var(--j-clear) 50%,#B4AE9F)}
.tonearm .arm{position:absolute;left:5px;top:10px;width:5px;height:100%;background:linear-gradient(#F2EFE6,#A9A395);border:1.5px solid var(--ink);border-radius:3px}
.tonearm .head{position:absolute;left:-3px;bottom:-12px;width:18px;height:26px;background:var(--copper);border:2.5px solid var(--ink);border-radius:5px}
.tt-cap{position:absolute;left:16px;bottom:14px;font-size:13px;background:var(--card);border:2px solid var(--ink);border-radius:9px;padding:4px 9px}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin-top:16px}
.stat{background:var(--card);border:2.5px solid var(--ink);border-radius:14px;padding:9px 12px 10px;box-shadow:0 4px 0 rgba(27,27,27,.16)}
.stat .v{font-family:var(--disp);font-size:37px;line-height:.95;letter-spacing:.02em}
.stat .v.sm{font-size:21px;padding:8px 0 7px}
.stat .k{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}

/* ---------- punch card: one hole per visit, a star per full card, a better edge per star ---------- */
.punch{position:relative;margin:16px 0 0;background:var(--paper);border:2.5px solid var(--ink);border-radius:14px;
  padding:11px 14px 10px;box-shadow:0 4px 0 rgba(27,27,27,.16)}
.pc-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.pc-title{font-family:var(--disp);font-size:25px;letter-spacing:.05em;line-height:1}
.pc-no{font-family:var(--pix);font-size:10px;color:var(--muted);text-transform:uppercase;white-space:nowrap}
.pc-stars{min-height:20px;margin:3px 0 2px;font-size:15px;line-height:20px;color:var(--ink)}
.pc-stars i{font-style:normal;color:var(--amber);-webkit-text-stroke:.6px var(--ink);margin-right:2px}
.pc-hint{font-family:var(--hand);font-size:17px;color:var(--muted)}
.pc-holes{list-style:none;margin:6px 0 8px;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:9px}
.pc-holes li{aspect-ratio:1;max-width:56px;justify-self:center;width:100%;border-radius:50%;border:2px dashed var(--line);
  display:grid;place-items:center;font:600 11px var(--body);color:var(--muted)}
.pc-holes li.next{border-color:var(--ink)}
/* a punched hole is a paw-print cut, dark like the gap behind the card */
.pc-holes li.hit{--paw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cellipse cx='33.6' cy='21.5' rx='14' ry='21'/%3E%3Cellipse cx='66.4' cy='21.5' rx='14' ry='21'/%3E%3Cellipse cx='12.5' cy='47.5' rx='11.5' ry='17' transform='rotate(-20 12.5 47.5)'/%3E%3Cellipse cx='87.5' cy='47.5' rx='11.5' ry='17' transform='rotate(20 87.5 47.5)'/%3E%3Cpath d='M50 52C58 52 63 54 68 60L83 81C88 88 88 96 81 99C75 101 70 100 64 97.5C57 94.5 43 94.5 36 97.5C30 100 25 101 19 99C12 96 12 88 17 81L32 60C37 54 42 52 50 52Z'/%3E%3C/svg%3E");border:0;border-radius:0;color:transparent;
  background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--ink) 72%,var(--paper)),var(--ink) 70%);
  -webkit-mask:var(--paw) center/70% no-repeat;mask:var(--paw) center/70% no-repeat}
.pc-foot{font-size:12px;color:var(--muted);border-top:1.5px dashed var(--line);padding-top:6px}
.pc-foot b{font-family:var(--disp);font-size:17px;font-weight:400;color:var(--ink);letter-spacing:.03em}

/* edges, one per card filled */
.pc-stitched{outline:2px dashed var(--walnut-lit);outline-offset:-8px}
.pc-copper{border:5px double var(--copper)}
.pc-moss{box-shadow:0 0 0 3px var(--moss),0 0 0 5.5px var(--ink),0 7px 0 rgba(27,27,27,.16)}
.pc-gold,.pc-holo{border:4px solid transparent;
  background:linear-gradient(var(--paper),var(--paper)) padding-box,var(--edge) border-box}
.pc-gold{--edge:linear-gradient(135deg,#F3D27A,var(--amber) 35%,#F7E3A1 55%,var(--copper) 80%,#F3D27A)}
.pc-holo{--edge:linear-gradient(90deg,#FF8FA3,#FFD27A,#9FE0A4,#8FD3FF,#C9A2FF,#FF8FA3);background-size:auto,300% 100%;
  animation:pc-holo 6s linear infinite}
@keyframes pc-holo{to{background-position:0 0,300% 0}}
@media (prefers-reduced-motion:reduce){.pc-holo{animation:none}}
.card-who{display:flex;align-items:center;gap:12px}
.card-who h2{margin:0}

/* ---------- storybook ---------- */
.story-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px 22px}
.story{margin:0}
.story .small{margin:8px 2px 0}
/* the frame: stories down the left, the story itself in an iframe on the right */
/* pinned to the window rather than sized in vh, which some browsers measure short */
body.sb{position:fixed;inset:0;display:grid;grid-template-columns:220px 1fr;overflow:hidden}
.sb-nav{border-right:2.5px solid var(--ink);padding:18px 14px;overflow-y:auto;background:var(--paper)}
.sb-title{display:block;font-family:var(--disp);font-size:29px;letter-spacing:.04em;color:var(--ink);text-decoration:none;margin-bottom:14px}
.sb-group{display:flex;flex-direction:column;gap:2px;margin-bottom:16px}
.sb-group .cnt{margin:0 8px 4px}
.sb-group a{color:var(--ink);text-decoration:none;font-size:14px;padding:6px 8px;border-radius:8px;border:2px solid transparent}
.sb-group a:hover{border-color:var(--line)}
.sb-group a[aria-current]{border-color:var(--ink);background:var(--card);font-weight:600}
.sb-note{margin:6px 8px 0}
.sb-stage{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--wall)}
.sb-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 16px;border-bottom:2.5px solid var(--ink)}
.sb-widths{display:inline-flex;gap:4px;padding:3px;border:2px solid var(--ink);border-radius:11px}
.sb-widths a{font:600 12px var(--body);color:var(--ink);text-decoration:none;padding:4px 11px;border-radius:7px}
.sb-widths a[aria-current]{background:var(--ink);color:var(--wall)}
.sb-frame{flex:1;align-self:center;max-width:100%;border:0;border-left:2px dashed var(--line);border-right:2px dashed var(--line);background:var(--wall)}
@media (max-width:700px){
  body.sb{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .sb-nav{border-right:0;border-bottom:2.5px solid var(--ink);display:flex;gap:10px;overflow-x:auto;padding:10px 16px;align-items:flex-start}
  .sb-title{font-size:22px;margin:4px 6px 0 0}
  .sb-group{flex-direction:row;margin:0;align-items:center;flex:none}
  .sb-group .cnt,.sb-note{display:none}
  .sb-group a{white-space:nowrap}
}

/* ---------- heatmap ---------- */
.heat{overflow-x:auto;padding:6px 2px 4px;scrollbar-width:thin}
.heat-inner{display:inline-block;min-width:100%}
.months{display:grid;grid-auto-flow:column;grid-auto-columns:15px;font-size:11px;color:var(--muted);height:16px;margin-left:26px}
.hm{display:grid;grid-template-rows:repeat(7,12px);grid-auto-flow:column;grid-auto-columns:12px;gap:3px;margin-left:26px;position:relative}
.hm i{border-radius:3px;background:var(--card);border:1px solid rgba(27,27,27,.16)}
.hm i.l1{background:var(--moss)}
.hm i.l2{background:var(--green)}
.hm i.l3{background:var(--deep)}
.hm i.today{outline:2.5px solid var(--red);outline-offset:1px}
.hm i.pad{visibility:hidden}
.days{position:absolute;left:-26px;top:0;font-size:10px;color:var(--muted);line-height:15px}
.legend{display:flex;gap:4px;align-items:center;justify-content:flex-end;font-size:11px;color:var(--muted);margin-top:8px;flex-wrap:wrap}
.legend i{width:12px;height:12px;border-radius:3px;display:inline-block;border:1px solid rgba(27,27,27,.16)}

/* ---------- tickets + event sleeves ---------- */
.ticket{width:250px;display:grid;grid-template-columns:64px 1fr;background:var(--card);border:2.5px solid var(--ink);border-radius:16px;
  position:relative;text-align:left;box-shadow:0 5px 0 rgba(27,27,27,.22)}
.ticket .stub{background:var(--violet);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:12px 4px;
  border-right:3px dashed #fff;font-family:var(--disp);line-height:1;letter-spacing:.04em;border-radius:13px 0 0 13px}
.ticket.past .stub{background:var(--green)}
.ticket .stub .d{font-size:33px}
.ticket .stub small{font:600 10px var(--body);letter-spacing:.14em}
.ticket .stub .tm{font-family:var(--pix);font-size:10px;margin-top:6px;background:#0C1310;padding:3px 5px;border-radius:4px;color:#E6B84E}
.ticket::before,.ticket::after{content:"";position:absolute;left:56px;width:15px;height:15px;border-radius:50%;background:var(--wall);
  border:2.5px solid var(--ink);z-index:1}
.ticket::before{top:-9px}
.ticket::after{bottom:-9px}
.ticket .tb{padding:11px 11px 12px 13px;display:flex;flex-direction:column;gap:6px;min-width:0}
.ticket .film{font-family:var(--disp);font-size:26px;line-height:.94;letter-spacing:.03em}
.ticket .film a{color:inherit;text-decoration:none}
.ticket .r2{font-size:12px;color:var(--muted)}
.pop{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;font:600 11px var(--body);letter-spacing:.06em;background:var(--j-amber);
  border:2px solid var(--ink);border-radius:7px;padding:2px 7px 2px 4px}
.pop svg{width:18px;height:18px}
.evmod{width:186px;padding:0;overflow:hidden;--tint:var(--j-clear);text-align:left;display:flex;flex-direction:column}
.evmod .block{padding:9px 11px;display:flex;justify-content:space-between;align-items:flex-start;gap:8px;color:#fff;
  border-bottom:2.5px solid var(--ink);min-height:78px}
.evmod .date{font-family:var(--disp);font-size:26px;line-height:.92;text-align:center;background:var(--card);color:var(--ink);padding:4px 8px 3px;
  border:2.5px solid var(--ink);border-radius:8px}
.evmod .date small{display:block;font:600 9px var(--body);letter-spacing:.14em}
.evmod .kind{font:600 10px var(--body);letter-spacing:.11em;text-transform:uppercase;align-self:flex-end}
.evmod .body{padding:10px 11px 11px;display:flex;flex-direction:column;gap:7px}
.evmod .title{font-family:var(--disp);font-size:25px;line-height:.93;letter-spacing:.03em;min-height:46px}
.evmod .title a{color:inherit;text-decoration:none}
.c-red{background:var(--red)}
.c-blue{background:var(--blue)}
.c-green{background:var(--green)}
.c-violet{background:var(--violet)}
.c-amber{background:var(--amber);color:var(--on-amber)!important}

/* ---------- guest pass ---------- */
.pass-hero{text-align:center;padding:14px 0 2px}
.pass-hero .big{font-family:var(--disp);font-size:41px;line-height:.96;letter-spacing:.03em}
.gate{display:block;margin:20px auto 8px;width:214px;height:214px;border-radius:50%;padding:0;position:relative;border:3px solid var(--ink);
  background:radial-gradient(circle at 33% 23%,rgba(255,255,255,.8) 0 6%,rgba(255,255,255,.16) 17%,rgba(255,255,255,0) 30%),
    radial-gradient(circle at 50% 44%,var(--red) 0 58%,var(--red-deep));
  box-shadow:0 11px 0 var(--red-deep),0 18px 26px rgba(27,27,27,.3),inset 0 0 26px rgba(0,0,0,.35);transition:transform .1s,box-shadow .1s}
.gate:active{transform:translateY(7px);box-shadow:0 4px 0 var(--red-deep),inset 0 0 26px rgba(0,0,0,.35)}
.gate::before{content:"";position:absolute;inset:16px;border-radius:50%;border:3px dashed rgba(255,255,255,.45)}
.gate .t{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--disp);font-size:33px;line-height:.92;color:#fff;text-align:center;
  letter-spacing:.06em;text-shadow:0 2px 3px rgba(0,0,0,.55)}
.gate .t small{display:block;font:600 10px var(--body);letter-spacing:.1em;color:rgba(255,255,255,.8);margin-top:4px}
.gate.buzz{background:radial-gradient(circle at 33% 23%,rgba(255,255,255,.85) 0 6%,rgba(255,255,255,.18) 17%,rgba(255,255,255,0) 30%),
    radial-gradient(circle at 50% 44%,var(--green) 0 58%,var(--deep));
  box-shadow:0 11px 0 var(--deep),0 0 34px rgba(184,134,11,.55),inset 0 0 26px rgba(0,0,0,.3)}
.gate.buzz::before{animation:spin 1.2s linear infinite}
.gate.buzz .t{animation:pulse .5s ease-in-out infinite alternate}
@keyframes pulse{from{transform:scale(1)}to{transform:scale(1.07)}}
.gate:disabled{filter:grayscale(.85);opacity:.55;cursor:not-allowed}
.gate-status{text-align:center;min-height:22px;font-weight:600;padding:0 8px}
.scope{display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-size:13px;color:var(--muted);margin:16px 2px 0}
.scope b{font:600 11px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--on-amber);background:var(--j-amber);padding:3px 9px;
  border:2px solid var(--ink);border-radius:999px}
.lamp{color:#fff;transition:color .15s,filter .15s}
.lamp.on{color:var(--amber);filter:drop-shadow(0 0 10px rgba(184,134,11,.75))}

/* ---------- event sheet ---------- */
.sheet-bg{position:fixed;inset:0;background:rgba(27,27,27,.4);z-index:45;display:block}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:46;max-height:86vh;overflow-y:auto;border-radius:26px 26px 0 0;border-bottom:0;
  padding:10px 16px calc(26px + env(safe-area-inset-bottom));animation:up .24s ease;--tint:var(--j-clear)}
@keyframes up{from{transform:translateY(40px);opacity:0}}
.handle{width:56px;margin:0 auto 12px}
.sheet h2{font-size:35px;margin-top:4px}
.desc{font-size:15px;margin-top:8px}
.hosts{display:flex;align-items:center;gap:10px;margin:12px 0;flex-wrap:wrap}
.avs{display:flex}
.av{width:38px;height:38px;border-radius:50%;background:var(--card);border:2.5px solid var(--ink);display:grid;place-items:center;font-size:18px;
  margin-left:-11px;position:relative;flex:none}
.av:first-child{margin-left:0}
.av.host::after{content:"";position:absolute;right:-7px;top:-10px;width:17px;height:14px;background:var(--amber);border:1.5px solid var(--ink);
  clip-path:polygon(0 100%,0 30%,30% 60%,50% 5%,70% 60%,100% 30%,100% 100%)}
.av.more{font:600 11px var(--body);background:var(--ink);color:var(--wall)}
.pill{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--wall);border-radius:999px;padding:7px 15px 7px 9px;
  margin:12px 0;font-weight:600}
.pill .avs .av{width:29px;height:29px;font-size:14px;margin-left:-9px}
.pill .n{font-family:var(--disp);font-size:25px;letter-spacing:.05em}
.drow{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-bottom:2px dotted rgba(27,27,27,.2);font-size:14px}
.drow>svg{width:22px;height:22px;stroke:var(--blue);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:2px}
.drow b{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.res{margin-top:14px;padding-top:12px;border-top:2.5px solid var(--ink);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.res .small{width:100%;margin-bottom:2px}

/* ---------- Mac OS Platinum (welcome + QR dialogs only) ---------- */
.overlay{position:fixed;inset:0;background:rgba(27,27,27,.5);display:grid;place-items:center;padding:16px;z-index:50;overflow-y:auto}
.mac{width:100%;max-width:382px;background:#DDD;border:1px solid #000;box-shadow:1px 1px 0 #000,0 16px 44px rgba(0,0,0,.45);color:#000;font-size:15px}
.mac-title{height:22px;background:repeating-linear-gradient(180deg,#eaeaea 0 1px,#909090 1px 2px);border-bottom:1px solid #000;display:flex;
  align-items:center;padding:0 6px;position:relative}
.mac-title .box{width:11px;height:11px;border:1px solid #000;background:linear-gradient(#fff,#bbb);box-shadow:inset 1px 1px 0 #fff;flex:none;
  padding:0;display:block;text-decoration:none}
.mac-title .txt{position:absolute;left:50%;transform:translateX(-50%);background:#ddd;padding:0 8px;font-weight:700;font-size:13px;line-height:20px;white-space:nowrap}
.mac-body{padding:16px}
.mac h1{font-size:19px;font-weight:700;line-height:1.2;margin-bottom:4px}
.mac label.fld{display:block;font-size:12px;font-weight:600;margin:13px 0 5px;text-transform:uppercase;letter-spacing:.09em;color:#333}
.mac input[type=text]{width:100%;font:inherit;padding:8px 10px;border:1px solid #000;border-radius:0;background:#fff;box-shadow:inset 1px 1px 0 #999}
.mac-btn{font:600 15px var(--body);padding:6px 16px;color:#000;text-decoration:none;display:inline-block;text-align:center;background:linear-gradient(#f6f6f6,#d5d5d5);border:1px solid #000;border-radius:7px;
  box-shadow:inset 1px 1px 0 #fff,inset -1px -1px 0 #8a8a8a;min-width:80px}
.mac-btn:active{background:linear-gradient(#9a9a9a,#c5c5c5)}
.mac-btn.default{box-shadow:0 0 0 2px #ddd,0 0 0 5px #000,inset 1px 1px 0 #fff,inset -1px -1px 0 #8a8a8a;margin:5px}
.mac-btn.primary{background:linear-gradient(#8E2A44,#5A1628);color:#fff;font-size:18px;padding:10px 20px;width:calc(100% - 10px);margin:5px;
  box-shadow:0 0 0 2px #ddd,0 0 0 5px #000,inset 1px 1px 0 rgba(255,255,255,.4)}
.mac-actions{display:flex;justify-content:flex-end;gap:14px;margin-top:16px;flex-wrap:wrap;align-items:center}
.emojis{display:flex;flex-wrap:wrap;gap:6px;position:relative}
.emojis label{width:42px;height:42px;font-size:22px;background:#fff;border:1px solid #000;box-shadow:inset 1px 1px 0 #fff,inset -1px -1px 0 #999;
  margin:0;display:grid;place-items:center;cursor:pointer}
.emojis input{position:absolute;opacity:0;width:1px;height:1px}
.emojis input:checked+label{background:var(--amber);box-shadow:inset 2px 2px 0 #000}
.emojis input:focus-visible+label{outline:3px solid var(--blue);outline-offset:2px}
.qr{width:152px;height:152px;background:#fff;border:1px solid #000;padding:6px;margin:4px auto 0;display:block}
.qr svg{display:block;width:100%;height:100%}
.code{display:block;text-align:center;font-family:var(--pix);font-size:26px;letter-spacing:.1em;margin:12px auto 4px;padding:8px 12px;max-width:240px}
.mac .small{color:#333}

/* ---------- splash ---------- */
.splash{min-height:78vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:40px 22px}
.splash .mark{font:600 34px/1 var(--body);text-transform:uppercase;letter-spacing:.36em;margin-left:.36em}
.splash .sub{font:500 11px/1 var(--body);text-transform:uppercase;letter-spacing:.3em;color:var(--muted)}
.splash .panel{max-width:340px;padding:20px 22px;border-radius:22px;--tint:var(--j-red)}
.splash .panel p{font-size:15px;line-height:1.4}

/* ---------- polaroids ---------- */
.pola{--tilt:-2deg;position:relative;width:150px;margin:0;padding:9px 9px 0;background:var(--card);border:2px solid var(--ink);border-radius:3px;
  transform:rotate(var(--tilt));transform-origin:50% 100%;box-shadow:4px 5px 0 rgba(27,27,27,.15),0 10px 16px rgba(27,27,27,.13)}
.pola.sm{width:118px;padding:7px 7px 0}
.pola .photo{position:relative;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;border:1.5px solid var(--ink);
  background:linear-gradient(150deg,var(--g1,var(--red)),var(--g2,var(--deep)))}
.pola .photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(12,20,18,0) 52%,rgba(12,20,18,.3)),
    linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,0) 45%)}
.pola .photo img.raw,.avatar img.raw{filter:sepia(.18) saturate(.85) contrast(.92) brightness(1.05)}
.pola .photo img{width:100%;height:100%;object-fit:cover;display:block}
.pola .face{font-size:56px;line-height:1;filter:drop-shadow(0 3px 4px rgba(0,0,0,.4))}
.pola.sm .face{font-size:42px}
.pola .cap{font-family:var(--hand);font-size:23px;line-height:1;padding:10px 4px 15px;text-align:center}
.pola.sm .cap{font-size:19px;padding:8px 3px 12px}
.pola .cap a{color:inherit;text-decoration:none}
/* the name's link covers the whole polaroid, so the photo and frame are tappable too */
.pola .cap a::after{content:"";position:absolute;inset:0;z-index:4}
.pola .cap a:focus-visible{outline:none}
.pola:has(.cap a:focus-visible){outline:3px solid var(--blue);outline-offset:3px}
.pola .cap small{display:block;margin-top:5px;font:500 11px var(--body);letter-spacing:.04em;color:var(--muted)}
.pola .stickers{position:absolute;right:6px;top:10px;display:flex;flex-direction:column;align-items:flex-end;gap:5px;z-index:3}
.pola.sm .stickers{top:6px;right:5px;gap:4px}
.pola.sm .sticker{font-size:8px;padding:3px 7px;border-width:2px}
.pola .tape{position:absolute;top:-10px;left:50%;width:54px;height:18px;transform:translateX(-50%) rotate(-3deg);opacity:.92;
  border:1px solid rgba(27,27,27,.18);background:repeating-linear-gradient(135deg,rgba(255,255,255,.6) 0 4px,rgba(226,221,208,.85) 4px 8px)}
.pola .pin{position:absolute;top:-9px;left:50%;width:15px;height:15px;border-radius:50%;transform:translateX(-50%);border:1.5px solid var(--ink);
  background:radial-gradient(circle at 34% 30%,#fff,var(--red) 55%,#3D0F1D);box-shadow:0 2px 3px rgba(0,0,0,.4)}
.me-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:16px 2px 12px}
.me-head h2{font-size:34px}

.pola .emojibadge{position:absolute;left:5px;bottom:5px;z-index:2;font-size:15px;line-height:1;padding:2px 4px;border-radius:7px;
  background:var(--card);border:1.5px solid var(--ink);box-shadow:0 2px 3px rgba(0,0,0,.3)}
.pola.sm .emojibadge{font-size:13px}
.avatar{display:inline-grid;place-items:center;width:var(--s,26px);height:var(--s,26px);border-radius:50%;overflow:hidden;flex:none;
  background:var(--card);border:1.5px solid var(--ink);font-size:calc(var(--s,26px) * .6);vertical-align:-6px}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.adm .whocell{display:flex;align-items:center;gap:7px;white-space:nowrap}

/* the portrait studio */
.avatarlab{margin-top:4px;padding:12px;border-radius:24px;--tint:var(--j-moss)}
.lab-top{display:flex;gap:12px;align-items:flex-start;margin:10px 0 12px}
.modeswitch{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;flex:1}
.avatarlab .panel{display:none}
#av-emoji:checked~.panels .p-emoji,#av-draw:checked~.panels .p-draw,#av-photo:checked~.panels .p-photo{display:block}
#av-emoji:checked~.lab-top label[for=av-emoji],#av-draw:checked~.lab-top label[for=av-draw],
#av-photo:checked~.lab-top label[for=av-photo]{background-color:var(--j-amber);color:var(--ink);transform:translateY(2px);
  box-shadow:0 2px 0 rgba(27,27,27,.45),inset 0 4px 10px rgba(27,27,27,.35)}
.emojigrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:6px;max-height:186px;overflow-y:auto;padding:2px}
.emojigrid label{display:grid;place-items:center;height:40px;font-size:21px;cursor:pointer;border:2px solid var(--ink);border-radius:10px;
  background:var(--cap);box-shadow:0 2px 0 rgba(27,27,27,.3)}
.emojigrid input:checked+label{background:var(--j-amber);transform:translateY(2px);box-shadow:inset 0 3px 7px rgba(27,27,27,.35)}
.emojigrid input:focus-visible+label{outline:3px solid var(--blue);outline-offset:2px}
.lab-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.lab-custom{display:flex;gap:8px;align-items:flex-end;margin-top:10px}
.lab-custom .fld{flex:1}
.lab-remove{width:100%;margin-top:2px}
.pad-wrap{background:var(--card);border:2.5px solid var(--ink);border-radius:14px;padding:6px;box-shadow:inset 0 3px 8px rgba(27,27,27,.2)}
.pad-wrap canvas{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:9px;background:#fff;touch-action:none;cursor:crosshair}
.tools{display:flex;flex-direction:column;gap:9px;margin-top:10px}
.inks{display:flex;flex-wrap:wrap;gap:7px}
.inkkey{width:32px;height:32px;border-radius:50%;border:2.5px solid var(--ink);padding:0;cursor:pointer;background:var(--ink-swatch,#fff);
  box-shadow:0 3px 0 rgba(27,27,27,.4),inset 0 2px 0 rgba(255,255,255,.35)}
.inkkey:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(27,27,27,.4)}
.inkkey[aria-pressed="true"]{box-shadow:0 0 0 3px var(--wall),0 0 0 5.5px var(--ink)}
.mini[aria-pressed="true"]{background:var(--ink);color:var(--wall)}
.lab-status{margin:8px 2px 0;min-height:18px}
.p-draw .k-save,.p-photo .k-save{margin-left:auto}
.k-save:disabled{filter:grayscale(.7);opacity:.5}

/* get on the wifi: the first thing a guest sees after the tag */
.wifi{grid-column:1/-1;margin:12px 0 4px;padding:12px;border-radius:22px}
.wifi-body{display:flex;gap:14px;align-items:flex-start;margin-top:11px;flex-wrap:wrap}
.wifi-main{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:10px}
.wifi-plate{background:var(--card);border:2.5px solid var(--ink);border-radius:12px;padding:7px 12px 9px}
.wifi-plate strong{display:block;font-family:var(--disp);font-size:29px;line-height:1;letter-spacing:.03em;word-break:break-word}
.wifi-pass{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.wifi-pass .lcd{flex:1;min-width:120px;word-break:break-all;letter-spacing:.08em}
.wifi-pass .key{height:42px;padding:0 17px}
.wifi .k-wide{height:52px}
.wifi .k-wide .cap{font-size:15px}
.qrtile{margin:0;flex:none;background:#fff;border:2px solid var(--ink);border-radius:4px;padding:9px 9px 0;
  box-shadow:4px 5px 0 rgba(27,27,27,.15);transform:rotate(1.5deg)}
.qrtile .qr{width:150px;height:150px;background:#fff;border:0;padding:0;margin:0}
.qrtile .qr svg{display:block;width:100%;height:100%}
.qrtile figcaption{font-family:var(--hand);font-size:17px;color:#1B1B1B;text-align:center;padding:7px 2px 11px;max-width:150px;line-height:1.1}

/* ---------- the video store: cases on a shelf ---------- */
.media .sec-head{align-items:center}
.tvstrip{display:flex;align-items:center;gap:9px;margin:12px 2px 0}
.tvstrip .tvglyph svg{width:26px;height:20px;display:block}
.tvstrip .lcd{flex:1;min-width:0;font-size:11px;padding:7px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.case{position:relative;display:block;flex:none;width:106px;aspect-ratio:2/3;overflow:hidden;text-decoration:none;color:var(--ink);
  border:2.5px solid var(--ink);border-radius:3px 8px 8px 3px;background:var(--card);box-shadow:3px 4px 0 rgba(27,27,27,.22)}
.case.sm{width:88px}
.case img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case .spine{position:absolute;left:0;top:0;bottom:0;width:21px;z-index:2;display:flex;align-items:center;gap:7px;padding:8px 0;
  writing-mode:vertical-rl;transform:rotate(180deg);overflow:hidden;color:#F6F3EC;border-right:1.5px solid var(--ink);
  background:linear-gradient(90deg,rgba(8,20,16,.92),rgba(8,20,16,.6));font-family:var(--disp);font-size:13px;letter-spacing:.04em}
.case .spine i{font:500 9px var(--body);font-style:normal;opacity:.75}
.case.blank{background-color:var(--j-violet);
  background-image:radial-gradient(circle at 1.5px 1.5px,rgba(27,27,27,.13) 1px,transparent 1.3px),
    linear-gradient(var(--gloss),rgba(255,255,255,.1) 26%,rgba(255,255,255,0) 58%,var(--shade));
  background-size:9px 9px,auto}
.case .noart{position:absolute;inset:0 0 0 21px;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:10px 9px;text-align:center}
.case .noart-title{font-family:var(--disp);font-size:17px;line-height:1;letter-spacing:.03em;word-break:break-word}
.case .noart-year{font:500 10px var(--body);color:var(--muted)}
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:10px}
.cases .case{width:100%}
.mediasearch{display:flex;gap:9px;align-items:center;margin:10px 0 2px}
.mediasearch .lcd{flex:1;min-width:0;padding:4px 8px}
.mediasearch input{width:100%;border:0;background:none;box-shadow:none;padding:4px 2px;color:#9FE0A4;font-family:var(--pix);font-size:12px}
.mediasearch input::placeholder{color:#4E6B52}
.pager{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.pager .key{height:38px;padding:0 15px}
.backdrop{position:relative;margin-top:12px;border:2.5px solid var(--ink);border-radius:16px;overflow:hidden;aspect-ratio:16/6;background:var(--card)}
.backdrop img{width:100%;height:100%;object-fit:cover;display:block}
.backdrop::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,rgba(8,20,16,0) 40%,rgba(8,20,16,.55))}
.itemtop{display:flex;gap:14px;align-items:flex-start;margin-top:12px;flex-wrap:wrap}
.itemmeta{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:8px}
.overview{font-size:14px;line-height:1.45;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden}
#ovmore:checked~.overview{-webkit-line-clamp:unset;display:block}
.itemmeta label[for=ovmore]{cursor:pointer;align-self:flex-start}
.itemmeta label[for=ovmore]::after{content:attr(data-more)}
#ovmore:checked~label[for=ovmore]::after{content:attr(data-less)}
.playbox{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:6px}
.playdome{display:block;width:172px;height:172px;border-radius:50%;padding:0;position:relative;border:3px solid var(--ink);
  background:radial-gradient(circle at 33% 23%,rgba(255,255,255,.8) 0 6%,rgba(255,255,255,.16) 17%,rgba(255,255,255,0) 30%),
    radial-gradient(circle at 50% 44%,var(--copper) 0 58%,#8A521F);
  box-shadow:0 10px 0 #7A4519,0 16px 22px rgba(27,27,27,.3),inset 0 0 22px rgba(0,0,0,.32);transition:transform .1s,box-shadow .1s}
.playdome:active{transform:translateY(6px);box-shadow:0 4px 0 #7A4519,inset 0 0 22px rgba(0,0,0,.32)}
.playdome::before{content:"";position:absolute;inset:14px;border-radius:50%;border:3px dashed rgba(255,255,255,.45)}
.playdome .t{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--disp);font-size:26px;line-height:.95;color:#fff;
  text-align:center;letter-spacing:.05em;text-shadow:0 2px 3px rgba(0,0,0,.5)}
.playdome .t small{display:block;font:600 9px var(--body);letter-spacing:.11em;color:rgba(255,255,255,.82);margin-top:5px}
.tracks{list-style:none;margin:16px 0 0;padding:0;background:var(--card);border:2.5px solid var(--ink);border-radius:14px;overflow:hidden}
.trackrow{display:flex;align-items:center;gap:11px;padding:8px 11px;border-bottom:2px dotted var(--line)}
.trackrow:last-child{border-bottom:0}
.tracknum{font-family:var(--disp);font-size:19px;color:var(--muted);min-width:22px;text-align:center}
.trackname{flex:1;min-width:0}
.trackname a{color:inherit;text-decoration:none;font-weight:500}
.trackname small{display:block;font-size:12px;color:var(--muted)}
.k-play{width:auto;height:34px;padding:0 13px}
.notconnected{display:flex;flex-direction:column;gap:5px;margin-top:14px;padding:16px;border-radius:18px}
@media (min-width:900px){
  .cases{grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:14px}
  .backdrop{aspect-ratio:16/5}
}

/* ---------- die-cut stickers ---------- */
.sticker{--tilt:-7deg;position:relative;display:inline-block;overflow:hidden;white-space:nowrap;transform:rotate(var(--tilt));
  font:700 9px var(--body);letter-spacing:.12em;text-transform:uppercase;color:#fff;padding:4px 9px;border-radius:999px;
  border:3px solid #fff;background:var(--st,var(--amber));box-shadow:0 2px 5px rgba(27,27,27,.35)}
.sticker::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.3;
  background:conic-gradient(from 210deg,rgba(255,255,255,0),rgba(255,255,255,.9) 18%,rgba(255,255,255,0) 36%,rgba(255,255,255,.7) 60%,rgba(255,255,255,0) 80%)}
.st-amber{--st:var(--amber);color:var(--on-amber)}
.st-red{--st:var(--red)}
.st-green{--st:var(--green)}
.st-blue{--st:var(--blue)}
.st-violet{--st:var(--violet)}
.sticker.inline{margin-left:7px;vertical-align:middle}

/* ---------- the bouncing logo: CRT no-signal, and the wall screensaver ---------- */
.dvd-stage{position:absolute;inset:7px;z-index:1;pointer-events:none}
.dvd{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:7px;padding:5px 9px;border-radius:9px;
  border:2px solid rgba(255,255,255,.8);background:var(--dvd,var(--red));color:var(--wall);
  font-family:var(--pix);font-size:11px;letter-spacing:.08em;box-shadow:0 3px 10px rgba(0,0,0,.45)}
.dvd b{font-weight:400}
.dvd .px{width:14px;height:auto}
.glass .osd{z-index:2}
.saver{position:fixed;inset:0;z-index:60;background:var(--wall)}
.saver .dvd-stage{inset:0}
.saver .dvd{gap:16px;padding:16px 24px;border-width:4px;border-radius:20px;font-size:28px}
.saver .dvd .px{width:38px}

/* ---------- console nav: the red lacquered console, arched cubbies cut into it ---------- */
.console{position:fixed;left:0;right:0;bottom:0;z-index:40;border-top:3px solid var(--ink);
  background:linear-gradient(var(--console-hi) 0 5%,var(--console) 26%,var(--console) 66%,var(--console-lo));
  padding:11px 14px calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -9px 22px rgba(27,27,27,.28),inset 0 3px 0 rgba(255,255,255,.34)}
.console::before{content:"";position:absolute;left:0;right:0;top:3px;height:9px;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.34),rgba(255,255,255,0))}
.tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:9px;max-width:520px;margin:0 auto}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;color:#fff;border:2.5px solid var(--ink);
  border-radius:32px 32px 7px 7px;padding:9px 4px 7px;background:radial-gradient(ellipse at 50% 122%,var(--cubby),var(--cubby-lo) 72%);
  box-shadow:inset 0 6px 11px rgba(0,0,0,.6),inset 0 -2px 0 rgba(255,255,255,.09);transition:box-shadow .2s ease-out,background .2s ease-out}
.tab .obj{height:38px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5));
  transition:transform .2s cubic-bezier(.2,1.7,.4,1)}
.tab .obj svg{width:32px;height:32px;display:block}
.tab .lbl{font:600 9px var(--body);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.62);transition:color .2s ease-out}
.tab .dot{width:7px;height:3px;border-radius:2px;background:rgba(0,0,0,.4);display:block;
  transition:background .15s ease-out,box-shadow .15s ease-out}
.tab:active .obj{transform:translateY(2px)}
.tab[aria-current="page"]{background:radial-gradient(ellipse at 50% 118%,rgba(184,134,11,.95) 0 18%,var(--cubby-on) 52%,var(--cubby) 82%);
  box-shadow:inset 0 0 20px rgba(184,134,11,.7),inset 0 5px 9px rgba(0,0,0,.45)}
.tab[aria-current="page"] .obj{transform:translateY(-4px)}
.tab[aria-current="page"] .lbl{color:#fff}
.tab[aria-current="page"] .dot{background:var(--amber);box-shadow:0 0 10px 3px rgba(184,134,11,.95);
  transition:background .2s ease-out,box-shadow .2s cubic-bezier(.2,1.8,.4,1)}

/* ---------- admin: a dense paint.net-style panel ---------- */
.adm{display:grid;grid-template-columns:1fr;gap:12px;padding:0 16px;font-size:14px}
.adm .palette{padding:8px;border-radius:14px;--tint:var(--j-blue);display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start}
.adm .palette a{flex:1 1 auto;text-align:center;text-decoration:none;color:var(--ink);background:var(--card);border:2px solid var(--ink);border-radius:7px;
  padding:5px 9px;font:600 11px var(--body);letter-spacing:.09em;text-transform:uppercase;box-shadow:0 2px 0 rgba(27,27,27,.35)}
.adm .palette a[aria-current="page"]{background:var(--ink);color:var(--wall)}
.adm .panel{padding:10px 11px 12px;border-radius:14px;--tint:var(--j-clear);min-width:0}
.adm h2{font-size:22px;margin-bottom:8px}
.adm .tblwrap{overflow-x:auto;background:var(--card);border:2.5px solid var(--ink);border-radius:9px}
.adm table{border-collapse:collapse;width:100%;font-size:13px;min-width:540px}
.adm th{background:var(--ink);color:var(--wall);font:600 10px var(--body);letter-spacing:.13em;text-transform:uppercase;text-align:left;
  padding:5px 8px;white-space:nowrap}
.adm td{border-bottom:1.5px solid var(--line);padding:5px 8px;vertical-align:middle}
.adm tr:nth-child(even) td{background:var(--zebra)}
.adm tr:last-child td{border-bottom:0}
.adm td form{display:inline-flex;gap:3px;align-items:center;margin:2px 4px 2px 0}
.adm input[type=text],.adm input[type=number],.adm select{padding:2px 6px;border-width:1.5px;border-radius:5px;font-size:13px;box-shadow:none;max-width:132px}
.mini{font:600 11px var(--body);color:var(--ink);text-decoration:none;display:inline-block;border:1.5px solid var(--ink);border-radius:5px;
  background:var(--card);padding:3px 9px;box-shadow:0 2px 0 rgba(27,27,27,.3)}
.mini:active{transform:translateY(2px);box-shadow:none}
.mini.red{background:var(--red);color:#fff}
.mini.go{background:var(--green);color:#fff}
.adm .mint{margin-top:10px;background:var(--card);border:2.5px solid var(--ink);border-radius:9px;padding:9px 11px}
.adm .mint h3{font:600 11px var(--body);letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.adm .fields{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.adm .fields label{display:flex;flex-direction:column;gap:3px;font:600 10px var(--body);text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.adm .checks{display:flex;flex-wrap:wrap;gap:9px}
.adm .checks label{flex-direction:row;align-items:center;gap:4px;font:500 12px var(--body);text-transform:none;letter-spacing:0;color:var(--ink)}
.adm .hist{list-style:none;margin:0;padding:0;background:var(--card);border:2.5px solid var(--ink);border-radius:9px;overflow:hidden}
.adm .hist li{display:flex;gap:9px;align-items:center;padding:5px 9px;border-bottom:1.5px solid var(--line);font-size:13px}
.adm .hist li:last-child{border-bottom:0}
.adm .hist .when{font-family:var(--pix);font-size:9px;color:var(--muted);flex:none;width:80px}
.adm .hist .act{font-weight:600;flex:none}
.adm .hist .det{color:var(--muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm .hist .bad{color:var(--red);font-weight:600}
.adm .hist li.undone .det,.adm .hist li.undone .act{text-decoration:line-through;opacity:.6}
.adm .flash{margin:0 0 10px;border-radius:12px}
.adm .adm-actions{display:flex;gap:10px;margin:0 0 12px}

/* ---------- easter eggs: for people who poke at things ---------- */
.knob{cursor:pointer;transition:transform .18s ease-out}
.power{width:16px;height:16px;border-radius:3px;flex:none;border:2px solid var(--ink);padding:0;cursor:pointer;
  background:radial-gradient(circle at 35% 30%,#fff,#C4443C 60%,#6B1F33);box-shadow:0 2px 0 rgba(27,27,27,.3)}
.glass{transition:filter .25s ease-out}
.crt .glass.off{animation:crt-off .34s ease-in forwards}
@keyframes crt-off{0%{clip-path:inset(0 0 0 0);filter:brightness(1)}
  55%{clip-path:inset(48% 0 48% 0);filter:brightness(3.2)}100%{clip-path:inset(50% 0 50% 0);filter:brightness(0)}}
.glass .ch-screen{position:absolute;inset:0;z-index:1}
.ch-bars{background:linear-gradient(90deg,#6B1F33 0 20%,#B8860B 20% 40%,#0F3F34 40% 60%,#1F3A93 60% 80%,#4E2A6B 80%)}
.ch-bars::after{content:"";position:absolute;left:0;right:0;bottom:0;height:26%;
  background:linear-gradient(90deg,#082A23 0 34%,#F6F3EC 34% 50%,#0C1310 50% 72%,#B87333 72%)}
.ch-snow{background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 3px),
  repeating-linear-gradient(0deg,rgba(255,255,255,.1) 0 2px,transparent 2px 5px),#1A201D;animation:noise .22s steps(3) infinite}
.ch-wx{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:14px 16px;font-family:var(--pix);
  font-size:11px;color:#9FE0A4;text-shadow:0 0 8px rgba(159,224,164,.6);line-height:1.5}
.ch-wx b{font-family:var(--disp);font-size:30px;font-weight:400;color:#E9EFE4;letter-spacing:.04em}
.crt-osd{position:absolute;left:14px;bottom:12px;z-index:3;font-family:var(--pix);font-size:11px;color:var(--amber-lcd);
  text-shadow:0 0 8px rgba(184,134,11,.9);opacity:0;transition:opacity .25s}
.crt-osd.show{opacity:1}
@keyframes rustle{0%,100%{transform:rotate(0)}25%{transform:rotate(3.5deg)}60%{transform:rotate(-2.5deg)}}
.plant.rustle .fronds{animation:rustle .5s ease-in-out}
.fallen-leaf{position:fixed;z-index:55;width:18px;pointer-events:none;animation:fall 2.6s cubic-bezier(.4,0,.7,1) forwards}
@keyframes fall{0%{opacity:1;transform:translate(0,0) rotate(0)}
  100%{opacity:0;transform:translate(var(--dx,30px),var(--dy,60vh)) rotate(320deg)}}
.turntable .platter{cursor:grab}
.turntable.scrub .platter,.turntable.scrub .rlabel{animation:none!important}
.turntable.stopped .platter,.turntable.stopped .rlabel{animation-play-state:paused}
.turntable.stopped .tonearm{transform:rotate(-4deg)!important;transition:transform .5s ease-out}
.kennel{cursor:pointer}
.kennel.peek .dog{animation:dogpeek .6s ease-in-out}
.kennel.peek svg{animation:none}
@keyframes dogpeek{0%,100%{transform:translateY(0)}40%{transform:translateY(2.5px)}}
/* both halves keep a torn edge along the perforation; the stub swings off its top corner */
.ticket{transition:grid-template-columns .28s ease-out .1s}
.ticket .stub{clip-path:polygon(0 0,100% 0,94% 4%,100% 8%,94% 12%,100% 16%,94% 20%,100% 24%,94% 28%,100% 32%,94% 36%,100% 40%,
  94% 44%,100% 48%,94% 52%,100% 56%,94% 60%,100% 64%,94% 68%,100% 72%,94% 76%,100% 80%,94% 84%,100% 88%,94% 92%,100% 96%,94% 100%,0 100%)}
.ticket .tb{clip-path:polygon(2% 0,100% 0,100% 100%,2% 100%,0 96%,2% 92%,0 88%,2% 84%,0 80%,2% 76%,0 72%,2% 68%,0 64%,2% 60%,
  0 56%,2% 52%,0 48%,2% 44%,0 40%,2% 36%,0 32%,2% 28%,0 24%,2% 20%,0 16%,2% 12%,0 8%,2% 4%)}
.ticket.torn{grid-template-columns:0 1fr}
.ticket.torn .stub{opacity:0;pointer-events:none}
.ticket.torn::before,.ticket.torn::after{opacity:0}
.ticket.tearing{transition:none}
.ticket.tearing .stub{animation:tear .38s ease-in forwards;transform-origin:100% 0;z-index:3}
@keyframes tear{0%{transform:none;opacity:1}
  25%{transform:rotate(-8deg) translate(-2px,2px)}
  100%{transform:rotate(-8deg) translate(-14px,96px);opacity:0}}
.ticket.restoring .stub{animation:untear .26s ease-out}
@keyframes untear{0%{transform:translateX(-64px);opacity:0}100%{transform:none;opacity:1}}
.kernel{position:absolute;width:9px;height:9px;border-radius:50%;background:#F1EADB;border:1.5px solid var(--ink);
  pointer-events:none;z-index:4;animation:kernel .7s ease-out forwards}
@keyframes kernel{0%{opacity:1;transform:translate(0,0) scale(.4)}40%{transform:translate(6px,-22px) scale(1)}
  100%{opacity:0;transform:translate(12px,6px) scale(.9)}}
.tab .obj.hop{animation:hop .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes hop{0%,100%{transform:translateY(-4px)}40%{transform:translateY(-16px) rotate(-6deg)}70%{transform:translateY(-4px) rotate(3deg)}}
/* ---------- the map: every place the house runs, by the land it lives on ---------- */
a.rk{color:var(--ink);text-decoration:none}
.atlas .sec-head{align-items:center}
.regions{display:grid;gap:14px;margin-top:12px}
.region-col{display:contents}
.region{padding:14px 12px 12px}
.region h3,.region h4{margin:0 0 8px 6px}
.subregion{margin-top:12px;padding:12px 10px 10px}
.places{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.place{display:flex;align-items:center;gap:12px;background:var(--card);border:2px solid var(--ink);border-radius:12px;padding:8px 10px 8px 12px;
  text-decoration:none;color:var(--ink);transition:transform .08s,box-shadow .08s;box-shadow:0 3px 0 rgba(27,27,27,.25)}
.place:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(27,27,27,.25)}
.place-name{display:flex;flex-direction:column;flex:1;min-width:0}
.place-name b{font-weight:600;line-height:1.2}
.place-name small{font-size:12px;color:var(--muted);line-height:1.3}
/* the door: shut while we knock, open onto lamplight when a route answers, dim if nobody does */
.door{width:26px;height:30px;flex:none;color:var(--ink);overflow:visible;transition:opacity .3s}
.door-glow{fill:var(--j-amber);opacity:0;transition:opacity .4s}
.door-leaf{transform-box:view-box;transform-origin:5px 14.5px;transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.door-leaf>rect{fill:var(--walnut-lit)}
.place.knocking .door-leaf{animation:knock 1.2s ease-in-out infinite}
.place.open .door-glow{opacity:1}
.place.open .door-leaf{transform:skewY(-9deg) scaleX(.42)}
.place.open:hover .door-leaf,.place.open:focus-visible .door-leaf{transform:skewY(-12deg) scaleX(.26)}
.place.shut .door{opacity:.35}
.place-name .place-down{display:none;color:var(--red);font-weight:600}
.place.shut .place-down{display:block}
@keyframes knock{0%,60%,100%{transform:none}70%{transform:rotate(-2deg)}80%{transform:rotate(1.5deg)}}
@media (prefers-reduced-motion:reduce){.place.knocking .door-leaf{animation:none}.door-leaf{transition:none}}
.mapsoon{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 18px;margin-top:12px;text-align:center}
.mapsoon svg{width:100%;max-width:420px;height:auto;margin-bottom:6px}
@media (min-width:900px){.regions{grid-template-columns:repeat(2,1fr);align-items:start}
  .region-col{display:flex;flex-direction:column;gap:14px;min-width:0}}

/* ---------- /warlo: the house bot, its machines, and what it's doing ---------- */
.rowlink{color:var(--ink);text-decoration:none}
.rowlink .lab{display:flex;align-items:center;gap:8px}
.rowlink .btn{white-space:nowrap;flex:none}
.wst-head{padding:14px 15px 15px;border-radius:22px;margin-top:6px}
.wst-id{display:flex;align-items:center;gap:11px}
.wst-id .led{width:15px;height:15px}
.wst-name{flex:1;min-width:0;display:flex;flex-direction:column}
.wst-name h2{font-size:40px;line-height:.9}
.wst-name .small{color:var(--ink);opacity:.75}
.wst-line{font-size:14px;margin:10px 2px 0}
.wst-stats{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.wst-stats .stat{flex:1 1 auto;min-width:0;padding:6px 10px 7px;border-radius:12px;box-shadow:0 3px 0 rgba(27,27,27,.16)}
.wst-stats .stat .v.sm{padding:2px 0 3px;line-height:1}
.wst-stats .stat .k{font-size:9px}
.wst-stats .lcd{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.wst .line{margin-top:12px}
.muted{color:var(--muted);font-weight:500}
.who{display:inline-flex;align-items:baseline;gap:5px}
.who>[aria-hidden]{margin-right:2px}
.led.hold{background:radial-gradient(circle at 35% 30%,#fff,#E6B84E 45%,#8A6410);box-shadow:0 0 7px rgba(230,184,78,.8)}
.fleet{display:grid;gap:14px}
.machine{padding:12px 13px 13px;border-radius:18px;display:flex;flex-direction:column;gap:9px;min-width:0}
.machine.m-offline{opacity:.8}
.m-top{display:flex;align-items:center;gap:8px}
.m-top .cnt{margin-left:auto}
.m-state{text-transform:uppercase}
.m-offline .m-state{background:var(--card);color:var(--muted)}
.m-paused .m-state{background:var(--j-moss);color:var(--ink)}
.m-name{font-family:var(--disp);font-size:31px;line-height:.92;letter-spacing:.03em;word-break:break-word}
.m-owner{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-weight:600;margin-top:-4px}
.m-cu{background:var(--card);border:2.5px solid var(--ink);border-radius:13px;padding:9px 11px 10px;display:flex;flex-direction:column;gap:6px;
  box-shadow:0 4px 0 rgba(27,27,27,.2)}
.m-cu .lcd{align-self:flex-start}
.m-cu p{font-size:15px;line-height:1.3}
.m-cu small{display:block;font-size:12px;color:var(--muted)}
.m-cu.on{border-color:var(--red);box-shadow:0 4px 0 var(--red-deep),0 0 0 3px var(--red-tint)}
.m-cu.ask .lcd{animation:blink 1.2s steps(2,start) infinite}
@keyframes blink{50%{opacity:.35}}
.m-specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0}
.m-specs>div{background:var(--gloss);border:2px solid var(--ink);border-radius:9px;padding:4px 7px 5px;min-width:0}
.m-specs dt{font:600 9px var(--body);letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.m-specs dd{margin:0;font-size:13px;font-weight:600;line-height:1.2;overflow-wrap:anywhere}
.m-apps{display:flex;flex-wrap:wrap;gap:5px}
.m-apps span{font:600 11px var(--body);border:1.5px solid var(--ink);border-radius:999px;padding:1px 8px;background:var(--card)}
.wst .card .row .grow{flex:1;min-width:0}
.wst .card .row .lab{overflow-wrap:anywhere}
.wst .card .row>.lcd{flex:none}
.wst-task{justify-content:flex-start!important}
.wst-task>.lcd{min-width:84px;text-align:center}
.wst-task .lab{font-weight:500;font-size:15px;line-height:1.3}
.meter{display:block;height:14px;margin-top:7px;border:2px solid var(--ink);border-radius:7px;background:#0C1310;overflow:hidden;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.9)}
.meter i{display:block;height:100%;background:repeating-linear-gradient(90deg,#9FE0A4 0 6px,rgba(159,224,164,.35) 6px 8px);
  box-shadow:0 0 8px rgba(159,224,164,.6);transition:width .4s ease}
.wst-empty{display:flex;align-items:center;gap:11px;padding:12px 0;font-size:14px;color:var(--muted)}
.wst-empty .px{width:38px;height:auto;flex:none}
.wst-log{list-style:none;margin:0;padding:4px 13px}
.wst-log li{display:grid;grid-template-columns:auto auto 1fr;align-items:baseline;gap:9px;padding:8px 0;border-bottom:2px dotted var(--line);font-size:14px}
.wst-log li:last-child{border-bottom:0}
.wst-log .when{font-family:var(--pix);font-size:10px;color:var(--muted);white-space:nowrap}
.wst-log .tag{font:700 9px var(--body);letter-spacing:.12em;text-transform:uppercase;border:1.5px solid var(--ink);border-radius:6px;padding:1px 5px;
  background:var(--j-blue)}
.wst-log .t-run{background:var(--j-green)}
.wst-log .t-fleet{background:var(--j-amber)}
.wst-log .what{min-width:0;overflow-wrap:anywhere}
.wst-log .what small{display:block;font-size:12px;color:var(--muted)}
@media (min-width:600px){.fleet{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}}
@media (min-width:900px){
  .wst-head{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;padding:16px 22px}
  .wst-id{flex:0 1 auto}
  .wst-id .lcd{margin-left:14px}
  .wst-line{flex:1 1 220px;margin:0}
  .wst-stats{margin:0;flex:0 1 auto}
}
@media (prefers-reduced-motion:reduce){.m-cu.ask .lcd,.meter i{animation:none;transition:none}}

/* ---------- the footage drop (/upload) ---------- */
.footage{max-width:760px;margin:0 auto}
.ft-net{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;font-size:14px;line-height:1.35}
.ft-net .lcd{flex:none}
.ft-meta{display:grid;grid-template-columns:1fr;gap:10px;margin:16px 2px 0}
.ft-meta label{display:flex;flex-direction:column;gap:4px}
.ft-meta input{width:100%}
.ft-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;margin:16px 0 0;padding:26px 16px;
  border:3px dashed var(--ink);border-radius:20px;background:var(--card);cursor:pointer;box-shadow:0 5px 0 rgba(27,27,27,.16);
  -webkit-tap-highlight-color:transparent;transition:background-color .12s,transform .12s}
.ft-drop:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(27,27,27,.16)}
.ft-drop:focus-within{outline:3px solid var(--blue);outline-offset:3px}
.ft-big{font-family:var(--disp);font-size:30px;letter-spacing:.03em;line-height:1}
.ft-desk{display:none}
@media (hover:hover) and (pointer:fine){.ft-desk{display:inline}}
.ft-dragging .ft-drop{background:var(--j-green);border-style:solid;transform:scale(1.01)}
.ft-sum{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 2px 8px;font-size:14px;font-weight:600}
.ft-acts{display:flex;gap:8px}
.ft-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.ft-item{background:var(--card);border:2.5px solid var(--ink);border-radius:14px;padding:10px 12px;box-shadow:0 4px 0 rgba(27,27,27,.14)}
.ft-top,.ft-bot{display:flex;justify-content:space-between;align-items:center;gap:10px;min-width:0}
.ft-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ft-size{flex:none;font-variant-numeric:tabular-nums}
.ft-bar{height:12px;margin:8px 0 6px;border:2px solid var(--ink);border-radius:999px;overflow:hidden;background:var(--zebra)}
.ft-bar i{display:block;height:100%;width:0;background:var(--blue);transition:width .25s linear}
.ft-st{min-width:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.ft-btns{display:flex;align-items:center;gap:10px;flex:none}
.ft-item[data-st=done] .ft-bar i{background:var(--green)}
.ft-item[data-st=failed] .ft-bar i,.ft-item[data-st=rejected] .ft-bar i{background:var(--red)}
.ft-item[data-st=retrying] .ft-bar i,.ft-item[data-st=waiting] .ft-bar i{background:var(--amber)}
.ft-item[data-st=failed] .ft-st,.ft-item[data-st=rejected] .ft-st{color:var(--red)}
.ft-help{margin-top:18px}
@media (min-width:640px){.ft-meta{grid-template-columns:1fr 1.4fr}.ft-meta .small{grid-column:1/-1}}

/* ---------- the lamp: one token block turns the room down ---------- */
.headlamp{width:30px;height:30px;flex:none;padding:0;border:0;background:none;cursor:pointer;line-height:0}
.headlamp svg{width:30px;height:30px;display:block}
:root[data-theme="dark"] .lamp{color:var(--amber);filter:drop-shadow(0 0 12px rgba(184,134,11,.9))}
:root[data-theme="dark"]{
  --wall:#0B2C25; --paper:#16302A; --ink:#EFEAE0; --muted:#A9BDB2; --line:#2C4A41;
  --card:#12211D; --cap:#1D302A; --zebra:#16241F; --gloss:rgba(255,255,255,.12); --shade:rgba(0,0,0,.4);
  --red:#9A3350; --red-deep:#6B1F33; --red-tint:#3A2028;
  --green:#2F6B59; --deep:#17453A; --blue:#6C86D9; --violet:#8A66AE; --moss:#9DB795; --moss-lt:#4A6152;
  --walnut:#8A6340; --walnut-lit:#C09A6E; --copper:#D08A47;
  --j-clear:#1E2C28; --j-red:#3A2028; --j-green:#183530; --j-blue:#212C46; --j-violet:#2C2340; --j-amber:#3C3221; --j-moss:#223025;
  --leaf-0:#C9D9C0; --leaf-1:#9DB795; --leaf-2:#4E8C74; --leaf-3:#2E6B57; --leaf-rib:rgba(11,44,37,.5); --pot:#6C86D9; --amber-lcd:#E6B84E;
  --console-hi:#B3552F; --console:#8F3D22; --console-lo:#5F2412; --cubby:#3A170C; --cubby-lo:#2A1008; --cubby-on:#8B3A1D;
}
:root[data-theme="dark"] .glass{background:radial-gradient(ellipse at 50% 38%,#1B4A3B 0,#08110F 72%);box-shadow:inset 0 0 46px rgba(0,0,0,.95),0 0 26px rgba(184,134,11,.18)}
:root[data-theme="dark"] .mac{background:#2A3A35;color:#EFEAE0}
:root[data-theme="dark"] .mac input[type=text],:root[data-theme="dark"] .mac-btn{background:#12211D;color:#EFEAE0}
:root[data-theme="dark"] .mac-title .txt{background:#2A3A35;color:#EFEAE0}
:root[data-theme="dark"] .mac .small{color:#A9BDB2}
:root[data-theme="dark"] body::before{opacity:.13;filter:blur(11px) invert(1)}
:root[data-theme="dark"] .pola .photo::after{background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,0) 45%)}

/* ---------- motion: everything short, nothing showy ---------- */
@keyframes slap{from{transform:rotate(calc(var(--tilt) * 3)) scale(1.7);opacity:0}60%{opacity:1}to{transform:rotate(var(--tilt)) scale(1)}}
@keyframes settle{from{transform:rotate(0deg) translateY(6px)}to{transform:rotate(var(--tilt)) translateY(0)}}
@keyframes crt-on{0%{clip-path:inset(49% 0 49% 0);filter:brightness(5) contrast(2)}
  55%{clip-path:inset(0 0 0 0);filter:brightness(1.7) contrast(1.15)}100%{clip-path:inset(0 0 0 0);filter:none}}
@keyframes fade-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sticker{animation:slap .26s cubic-bezier(.2,1.4,.5,1) both}
.pola{animation:settle .28s ease-out both}
.crt .glass{animation:crt-on .5s ease-out}
main.nav-out{opacity:0;transform:translateY(-8px);transition:opacity .16s ease-in,transform .16s ease-in}
main.nav-in{animation:fade-in .22s ease-out both}

/* ---------- desktop: the same objects on a wider wall ---------- */
@media (min-width:900px){
  main{max-width:1200px;margin:0 auto;padding:18px 32px 44px}
  body:has(.console) main{padding-bottom:var(--dock-room)}
  .top,.bumper{max-width:1200px;margin-left:auto;margin-right:auto}
  .top{padding:20px 32px 10px}
  .bumper{margin-bottom:6px}
  .screen{padding:0}
  .screen.split{display:grid;grid-template-columns:1.05fr 1fr;gap:26px 40px;align-items:start}
  .screen.split>.col{min-width:0}
  .stats{grid-template-columns:repeat(4,1fr)}
  .flash{margin:12px 32px 0;max-width:1136px}
  :root{--console-h:138px}
  .console{left:50%;right:auto;transform:translateX(-50%);width:620px;max-width:calc(100% - 32px);border:3px solid var(--ink);border-bottom:0;
    border-radius:16px 16px 0 0;padding:16px 18px calc(18px + env(safe-area-inset-bottom));
    box-shadow:0 -10px 26px rgba(27,27,27,.2),inset 0 3px 0 rgba(255,255,255,.34)}
  .tab{padding:12px 6px 9px}
  .tab .obj{height:46px}
  .tab .obj svg{width:42px;height:42px}
  .tab .lbl{font-size:10px}
  .sheet{width:620px;margin:0 auto;border:2.5px solid var(--ink);border-bottom:0}
  .splash .panel{max-width:420px}
  .adm{grid-template-columns:186px 1fr;padding:0 32px;align-items:start}
  .adm .palette{flex-direction:column;position:sticky;top:12px}
  .adm .palette a{flex:none;width:100%;text-align:left}
}

@media (prefers-reduced-motion:reduce){
  .platter,.rlabel,.gate.buzz::before,.gate.buzz .t,.glass.static,.marquee i,.sheet{animation:none!important}
  .plant .fronds,.plant.rustle .fronds,.tab .obj.hop,.ticket.tearing .stub,.ticket.tearing .tb,.kennel.peek .dog{animation:none!important}
  .plant{transform:none!important;transition:none!important}
  .fallen-leaf,.kernel{display:none!important}
  .crt .glass.off{animation:none!important;opacity:.12}
  .sticker,.pola,.crt .glass,main.nav-in{animation:none!important}
  main.nav-out{transition:none!important;opacity:1!important;transform:none!important}
  .slide .thumb,.slide{transition:none!important}
  /* the logo stops bouncing and simply sits in the middle */
  .dvd{left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important}
}