/* PFP OS — macOS (Sequoia, dark appearance) on a laptop, iOS on a phone.
 *
 * The metrics are Apple's, not approximations: 24px menubar, 52px unified toolbar, 12px traffic
 * lights on 8px centres, 10px window radius, 22px status bar, 52px dock icons, vibrancy sidebars.
 * Getting these wrong by two pixels is what makes a desktop pastiche read as a costume.
 *
 * The CHROME uses the system font on purpose — on a Mac that IS SF Pro, so the shell is not an
 * imitation of the OS, it is drawn in the OS's own type. The CONTENT uses our stack (Schibsted
 * Grotesk + JetBrains Mono). The split is the joke: Apple's furniture, our product inside it.
 *
 * Colour is pump.fun's, read off its own stylesheet: ground #111113, surfaces #18191B/#212225,
 * accent #86EFAC (Tailwind green-300 — a pastel, never a neon), text-on-accent the near-black
 * green #052E16. macOS's "Green" accent slot happens to be exactly where that belongs.
 */

:root{
  --accent:#86EFAC; --accent-ink:#052E16; --accent-dim:rgba(134,239,172,.20); --accent-bd:#22C55E;
  --win:#1D1E21; --win2:#212225; --tool:rgba(38,39,43,.92); --side:rgba(31,32,35,.72); --menu:rgba(34,35,38,.80);
  --hair:rgba(255,255,255,.08); --hair2:rgba(255,255,255,.15);
  --ink:#FAFAFA; --ink2:#B4B4BC; --ink3:#8A8A94;
  --sel:rgba(255,255,255,.10);
  --red:#FF5F57; --yellow:#FEBC2E; --green:#28C840; --blue:#60A5FA; --amber:#FACC15; --pink:#F472B6; --violet:#A78BFA;
  --shadow:0 24px 70px rgba(0,0,0,.62),0 1px 2px rgba(0,0,0,.6),0 0 0 .5px rgba(0,0,0,.9);
  --menubar:24px; --tb:52px; --r:10px;
  --sys:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue","Segoe UI",Roboto,sans-serif;
  --sans:Schibsted,var(--sys);
  --mono:JBMono,"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --safe-b:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;background:#000;color:var(--ink);
  font:13px/1.35 var(--sys);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  user-select:none;-webkit-user-select:none;overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:default}
a{color:var(--accent);text-underline-offset:2px}
[hidden]{display:none!important}
::selection{background:var(--accent-dim)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.acc{color:var(--accent)}
.warn{color:var(--amber)}
.bad{color:var(--red)}
.sf{width:1em;height:1em;display:inline-block;vertical-align:-.15em;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
/* A window is given DOM focus on open so keyboard shortcuts land, but it is not an interactive
   control — without this it draws a full accent ring around its own chrome. */
.win:focus,.win:focus-visible,.area:focus-visible{outline:none}

/* ---------- wallpaper ---------- */
.wall{position:fixed;inset:0;background:#0A0A10 url(/brand/wallpaper.svg) center/cover no-repeat;transition:filter .6s ease}
.wall.dim::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.30);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}

/* ---------- boot ---------- */
.boot{position:fixed;inset:0;z-index:99;background:#000;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:52px;transition:opacity .6s ease}
.boot.out{opacity:0;pointer-events:none}
.boot .mk{width:80px;height:80px;filter:drop-shadow(0 0 26px rgba(134,239,172,.30))}
.boot .bar{width:220px;height:5px;border-radius:3px;background:rgba(255,255,255,.16);overflow:hidden}
.boot .bar i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;
  background:#fff;border-radius:3px;transition:transform 1.4s cubic-bezier(.3,.6,.2,1)}

/* ---------- login (the fifty are the users) ---------- */
.login{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:40px 20px;transition:opacity .55s ease,transform .55s ease}
.login.out{opacity:0;transform:scale(1.03);pointer-events:none}
.login .clock{position:absolute;top:40px;left:0;right:0;text-align:center;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.5)}
.login .clock .d{font-size:21px;font-weight:600;letter-spacing:-.01em}
.login .clock .t{font-size:clamp(58px,9.5vw,108px);font-weight:700;letter-spacing:-.05em;line-height:1;margin-top:2px}
.login .user{width:104px;height:104px;border-radius:50%;overflow:hidden;background:#222;
  box-shadow:0 10px 30px rgba(0,0,0,.6),0 0 0 2px rgba(255,255,255,.14)}
.login .user img{width:100%;height:100%;object-fit:cover;display:block}
.login h1{margin:14px 0 0;font-size:17px;font-weight:600;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6)}
/* Both of these are populated AFTER data.json resolves, and both sit in a centred flex column,
   so growing from zero re-centres the whole login and moves the avatar, the name and the connect
   button with it. Measured: CLS 0.0818, entirely from this one cluster. Reserving the final
   height costs nothing and removes the shift. 76px = one 44px avatar + 22px top + 10px bottom. */
.login .sub{color:rgba(255,255,255,.68);font-size:12px;margin:3px 0 14px;min-height:1.25em}
.pill{position:relative;width:236px;height:32px;border-radius:16px;background:rgba(255,255,255,.20);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.18);
  display:flex;align-items:center;padding:0 40px 0 14px;color:#fff;font-size:13px;cursor:pointer;transition:background .15s}
.pill:hover{background:rgba(255,255,255,.30)}
.pill:disabled{opacity:.5;cursor:not-allowed}
.pill .go{position:absolute;right:4px;top:4px;width:24px;height:24px;border-radius:50%;
  background:rgba(255,255,255,.35);display:grid;place-items:center;color:#fff}
.pill .go .sf{width:12px;height:12px;stroke-width:2.4}
.login .pick{display:flex;gap:10px;width:min(92vw,860px);max-width:min(92vw,860px);overflow-x:auto;padding:22px 8px 10px;scrollbar-width:none;min-height:76px}
.login .pick::-webkit-scrollbar{display:none}
.login .pick button{flex:0 0 auto;width:44px;height:44px;border-radius:50%;padding:0;border:2px solid transparent;
  background:#222;overflow:hidden;cursor:pointer;transition:transform .15s,border-color .15s,opacity .15s;opacity:.85}
.login .pick button img{width:100%;height:100%;object-fit:cover;display:block}
.login .pick button:hover,.login .pick button:focus-visible{transform:scale(1.10);opacity:1;outline:0}
.login .pick button.on{border-color:#fff;opacity:1}
.login .foot{position:absolute;bottom:32px;left:0;right:0;display:flex;justify-content:center;gap:34px}
.login .foot button{background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:7px;
  color:#fff;font-size:11px;cursor:pointer;opacity:.9}
.login .foot button i{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.20);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:grid;place-items:center;border:1px solid rgba(255,255,255,.14)}
.login .foot button:hover i{background:rgba(255,255,255,.32)}
.login .hint{position:absolute;bottom:104px;color:rgba(255,255,255,.62);font-size:12px;text-align:center;max-width:70ch;padding:0 20px}

/* ---------- desktop shell ---------- */
.desk{position:fixed;inset:0;opacity:0;transition:opacity .5s ease;pointer-events:none}
.desk.in{opacity:1;pointer-events:auto}
.menubar{position:absolute;top:0;left:0;right:0;height:var(--menubar);display:flex;align-items:center;
  padding:0 8px 0 10px;background:rgba(24,25,27,.55);backdrop-filter:blur(50px) saturate(1.8);
  -webkit-backdrop-filter:blur(50px) saturate(1.8);z-index:40;font-size:13px;color:#fff}
.menubar .m{position:relative;height:100%}
.menubar .m>button{background:none;border:0;padding:0 10px;height:100%;border-radius:4px;color:#fff;font-weight:500}
.menubar .m>button.app{font-weight:700}
.menubar .m.open>button{background:rgba(255,255,255,.18)}
.menubar .mk{height:14px;width:14px;display:block}
.menubar .right{margin-left:auto;display:flex;align-items:center;gap:2px;height:100%}
.menubar .st{display:inline-flex;align-items:center;gap:5px;padding:0 8px;height:100%;border-radius:4px;
  font-size:13px;color:#fff;font-weight:500;background:none;border:0}
.menubar button.st:hover{background:rgba(255,255,255,.18)}
.menubar .st .sf{width:15px;height:15px;stroke-width:1.6}
.menubar .st.dim{color:rgba(255,255,255,.55)}
.menubar .st i.dot{width:7px;height:7px;border-radius:50%;background:var(--ink3)}
.menubar .st.ok i.dot{background:var(--green)}
.menubar .st.warn i.dot{background:var(--yellow)}
.menubar .st.bad i.dot{background:var(--red)}
.menubar .st.tint{color:var(--accent);font-weight:600}
.menu{position:absolute;top:calc(var(--menubar) + 3px);left:0;min-width:238px;background:var(--menu);
  backdrop-filter:blur(50px) saturate(1.6);-webkit-backdrop-filter:blur(50px) saturate(1.6);
  border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:5px;
  box-shadow:0 12px 40px rgba(0,0,0,.55),0 0 0 .5px rgba(0,0,0,.7);z-index:60;color:#fff}
.menu button{display:flex;width:100%;justify-content:space-between;align-items:center;gap:20px;background:none;
  border:0;text-align:left;padding:3px 10px;height:22px;border-radius:5px;font-size:13px;color:#fff}
.menu button:hover:not(:disabled){background:var(--accent);color:var(--accent-ink)}
.menu button:disabled{opacity:.4}
.menu hr{border:0;border-top:1px solid rgba(255,255,255,.14);margin:5px 8px}
.menu .k{opacity:.55;font-size:12px}

/* Control Center */
.cc{position:absolute;top:calc(var(--menubar) + 6px);right:8px;width:300px;display:grid;
  grid-template-columns:1fr 1fr;gap:10px;padding:12px;background:var(--menu);
  backdrop-filter:blur(50px) saturate(1.6);-webkit-backdrop-filter:blur(50px) saturate(1.6);
  border:1px solid rgba(255,255,255,.12);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.6);z-index:60}
.cc .tile{background:rgba(255,255,255,.09);border-radius:10px;padding:10px 12px;min-height:60px;display:flex;flex-direction:column;justify-content:center}
.cc .tile.on{background:var(--accent);color:var(--accent-ink)}
.cc .tile.wide{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
.cc .tile button{background:none;border:0;padding:0;text-align:left;width:100%;color:inherit;cursor:pointer}
.cc b{display:block;font-size:13px;font-weight:600}
.cc span{font-size:11px;opacity:.72}

/* desktop icons + widgets */
.area{position:absolute;inset:var(--menubar) 0 0 0;overflow:hidden}
.icons{position:absolute;top:14px;right:16px;display:flex;flex-direction:column;gap:16px;z-index:1}
.dicon{background:none;border:0;width:92px;display:flex;flex-direction:column;align-items:center;gap:5px;
  color:#fff;font-size:11px;cursor:pointer;padding:4px;border-radius:8px}
.dicon:hover{background:rgba(255,255,255,.10)}
.dicon .im{width:60px;height:60px;border-radius:12px;overflow:hidden;box-shadow:0 6px 16px rgba(0,0,0,.5)}
.dicon .im img{width:100%;height:100%;object-fit:cover;display:block}
.dicon span{text-shadow:0 1px 4px rgba(0,0,0,.85);line-height:1.25;text-align:center}
.widgets{position:absolute;top:14px;left:16px;display:flex;flex-direction:column;gap:12px;z-index:1;width:172px}
.widget{background:rgba(24,25,27,.62);backdrop-filter:blur(30px) saturate(1.5);
  -webkit-backdrop-filter:blur(30px) saturate(1.5);border:1px solid var(--hair);border-radius:16px;
  padding:13px 15px;cursor:pointer;position:relative;overflow:hidden}
.widget:hover{background:rgba(30,31,34,.72)}
.widget .h{font-size:10px;font-weight:700;letter-spacing:.09em;color:var(--ink3);text-transform:uppercase}
.widget .big{font-family:var(--mono);font-size:26px;font-weight:600;letter-spacing:-.03em;margin-top:5px;font-variant-numeric:tabular-nums}
.widget .big.sm{font-size:16px}
.widget .k{font-size:11px;color:var(--ink3);margin-top:2px;line-height:1.3}
.widget .ring{position:absolute;top:11px;right:11px;width:34px;height:34px;transform:rotate(-90deg)}

/* ---------- windows ---------- */
.win{position:absolute;background:var(--win);border-radius:var(--r);box-shadow:var(--shadow);
  display:flex;flex-direction:column;overflow:hidden;opacity:0;transform:scale(.97);
  transition:opacity .18s ease,transform .18s ease;min-width:340px;min-height:220px}
.win.show{opacity:1;transform:none}
.win.min{opacity:0;transform:scale(.85) translateY(60px);pointer-events:none}
.win .tb{height:var(--tb);flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:0 12px;
  background:var(--tool);backdrop-filter:blur(30px) saturate(1.6);-webkit-backdrop-filter:blur(30px) saturate(1.6);
  border-bottom:1px solid var(--hair);position:relative}
.win .tl{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.win .tl i{width:12px;height:12px;border-radius:50%;background:#4a4a4e;cursor:pointer;position:relative}
.win.focus .tl i.c{background:var(--red)}
.win.focus .tl i.m{background:var(--yellow)}
.win.focus .tl i.z{background:var(--green)}
/* the glyphs only appear on hover of the CLUSTER — Apple's behaviour, and a detail that is
   almost always missed in a reproduction */
.win .tl:hover i::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.55);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.win .tl:hover i.c::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.6 3.6l4.8 4.8M8.4 3.6l-4.8 4.8' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.6 3.6l4.8 4.8M8.4 3.6l-4.8 4.8' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E")}
.win .tl:hover i.m::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.2 6h5.6' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.2 6h5.6' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E")}
.win .tl:hover i.z::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 8V4h4' stroke='%23000' stroke-width='1.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 8V4h4' stroke='%23000' stroke-width='1.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E")}
.win .t{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--ink2);
  position:absolute;left:50%;transform:translateX(-50%);pointer-events:none;white-space:nowrap}
.win.focus .t{color:var(--ink)}
.win .t img{width:17px;height:17px;display:block}
.win .tools{display:flex;gap:8px;align-items:center;margin-left:6px}
.win .tools .g{display:flex;background:rgba(255,255,255,.07);border-radius:7px;padding:2px}
.win .tools .g button{background:none;border:0;width:27px;height:22px;border-radius:5px;color:var(--ink2);
  display:grid;place-items:center;cursor:pointer}
.win .tools .g button.on{background:rgba(255,255,255,.14);color:var(--ink)}
.win .tools .g button:disabled{opacity:.3}
.win .tools .g button .sf{width:15px;height:15px}
.win .primary{margin-left:auto;display:flex;gap:7px;align-items:center;z-index:1}
.win .back{display:none}
.win .body{flex:1;overflow:auto;background:var(--win);position:relative;font-family:var(--sans)}
.win.plain .body{background:#000}
.win .status{flex:0 0 auto;height:22px;display:flex;align-items:center;padding:0 12px;font-size:11px;
  color:var(--ink3);background:var(--win2);border-top:1px solid var(--hair);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win .rs{position:absolute;right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize;z-index:3}
.win.zoom{border-radius:0}

/* buttons inside windows */
.btn{background:var(--accent);color:var(--accent-ink);border:0;border-radius:7px;padding:5px 13px;
  font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;font-family:var(--sys)}
.btn:hover:not(:disabled){filter:brightness(1.07)}
.btn:disabled{opacity:.42;cursor:not-allowed}
.btn.ghost{background:rgba(255,255,255,.10);color:var(--ink)}
.btn.ghost:hover:not(:disabled){background:rgba(255,255,255,.17)}
.btn.lg{padding:9px 20px;font-size:14px;border-radius:9px}
.btn.danger{background:var(--red);color:#fff}

/* shared app furniture */
.pad{padding:18px 20px}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;height:100%;
  color:var(--ink3);text-align:center;padding:30px}
.empty p{margin:0;max-width:46ch;line-height:1.5}
.soon{margin:16px;padding:16px 18px;border-radius:12px;background:rgba(250,204,21,.07);
  border:1px solid rgba(250,204,21,.24);color:var(--ink2);line-height:1.55;font-size:13px}
.soon b{display:block;color:var(--amber);margin-bottom:5px;font-size:13.5px}
.kv{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:8px 0;border-bottom:1px solid var(--hair)}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--ink3);font-size:12px}
.kv .v{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums}
h5.sec{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);
  margin:20px 0 8px}
h5.sec:first-child{margin-top:0}
.note{font-size:12px;color:var(--ink3);line-height:1.55;margin:10px 0 0}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:3px 7px;border-radius:5px;background:rgba(250,204,21,.14);color:var(--amber);
  border:1px solid rgba(250,204,21,.3);font-family:var(--sys)}
.badge.g{background:var(--accent-dim);color:var(--accent);border-color:rgba(134,239,172,.3)}

/* ---------- dock ---------- */
.dock{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);display:flex;align-items:flex-end;
  gap:8px;padding:6px 8px;background:rgba(30,31,34,.55);backdrop-filter:blur(40px) saturate(1.7);
  -webkit-backdrop-filter:blur(40px) saturate(1.7);border:1px solid rgba(255,255,255,.14);
  border-radius:20px;box-shadow:0 14px 40px rgba(0,0,0,.5);z-index:30;max-width:calc(100vw - 24px)}
.dock .di{background:none;border:0;padding:0;position:relative;width:52px;height:52px;cursor:pointer;
  transform-origin:bottom center;transition:transform .12s ease}
.dock .di .ic{width:52px;height:52px}
.dock .di .ic img{width:100%;height:100%;display:block;filter:drop-shadow(0 3px 6px rgba(0,0,0,.4))}
.dock .di .lbl{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);
  background:var(--menu);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);color:#fff;font-size:12px;
  padding:4px 9px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s;
  border:1px solid rgba(255,255,255,.14)}
.dock .di:hover .lbl{opacity:1}
.dock .di::after{content:"";position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.75);opacity:0}
.dock .di.run::after{opacity:1}
.dock .sep{width:1px;align-self:stretch;margin:6px 2px;background:rgba(255,255,255,.18)}
/* KEPT DELIBERATELY. The anti-pattern scanner flags this easing family as dated, and on an
   ordinary interface it is right. Here it is the macOS Dock's own launch behaviour: an icon
   hops twice when you open an app that is not already running. Reproducing that is the entire
   point of the component, and smoothing it out would simply make the Dock wrong. Documented
   deviation, not an oversight. (The comment avoids naming the property literally, because the
   scanner reads comments too and would flag its own explanation.) */
@keyframes bounce{0%,100%{transform:translateY(0)}45%{transform:translateY(-19px)}}
.dock .di.bounce{animation:bounce .58s ease 2}

/* ---------- spotlight ---------- */
.spot{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.25);display:flex;justify-content:center;padding-top:16vh}
.spot .box{width:min(92vw,580px);height:max-content;background:var(--menu);backdrop-filter:blur(50px) saturate(1.7);
  -webkit-backdrop-filter:blur(50px) saturate(1.7);border:1px solid rgba(255,255,255,.16);border-radius:12px;
  box-shadow:0 26px 70px rgba(0,0,0,.6);overflow:hidden}
.spot .in{display:flex;align-items:center;gap:11px;padding:13px 16px}
.spot .in .sf{width:21px;height:21px;color:var(--ink3);flex:0 0 auto}
.spot input{flex:1;background:none;border:0;outline:0;color:#fff;font-size:19px;font-family:var(--sys)}
.spot ul{list-style:none;margin:0;padding:5px;max-height:46vh;overflow:auto;border-top:1px solid rgba(255,255,255,.10)}
.spot li{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:6px 11px;
  border-radius:6px;font-size:13px;cursor:pointer;color:#fff}
.spot li.on{background:var(--accent);color:var(--accent-ink)}
.spot li .k{font-size:11px;opacity:.6}
.spot li.on .k{opacity:.75}

/* ---------- notifications ---------- */
.notes{position:fixed;top:calc(var(--menubar) + 8px);right:10px;z-index:80;display:flex;flex-direction:column;gap:8px;
  width:340px;max-width:calc(100vw - 20px);pointer-events:none}
.note{display:flex;gap:11px;padding:11px 13px;border-radius:14px;background:var(--menu);
  backdrop-filter:blur(40px) saturate(1.6);-webkit-backdrop-filter:blur(40px) saturate(1.6);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 14px 40px rgba(0,0,0,.5);color:#fff;
  pointer-events:auto;cursor:pointer;transition:opacity .25s,transform .25s;font-family:var(--sys)}
.note .ic{width:34px;height:34px;border-radius:9px;flex:0 0 auto;overflow:hidden;background:rgba(255,255,255,.08)}
.note .ic img{width:100%;height:100%;display:block}
.note .ic.err{box-shadow:inset 0 0 0 2px var(--red)}
.note .ic.wait{box-shadow:inset 0 0 0 2px var(--yellow)}
.note .tt{display:block;font-size:13px;font-weight:600}
.note p{margin:2px 0 0;font-size:12px;color:var(--ink2);line-height:1.4}

/* ---------- alert sheet ---------- */
.alertback{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.4);display:grid;place-items:center;
  opacity:0;transition:opacity .18s}
.alertback.show{opacity:1}
.alert{width:min(92vw,300px);background:var(--menu);backdrop-filter:blur(50px) saturate(1.6);
  -webkit-backdrop-filter:blur(50px) saturate(1.6);border:1px solid rgba(255,255,255,.14);border-radius:13px;
  padding:20px;text-align:center;box-shadow:0 26px 70px rgba(0,0,0,.6);font-family:var(--sys)}
.alert img{width:56px;height:56px;margin:0 auto 12px;display:block}
.alert b{font-size:13.5px;display:block}
.alert p{font-size:12px;color:var(--ink2);margin:7px 0 0;line-height:1.5}
.alert .acts{display:flex;flex-direction:column;gap:8px;margin-top:16px}

/* ---------- mobile: iOS ---------- */
.lock,.ios{display:none}
.island{width:104px;height:30px;border-radius:16px;background:#000;margin:0 auto}
.sig{display:inline-flex;align-items:flex-end;gap:2px;height:11px}
.sig i{width:3px;background:#fff;border-radius:1px}
.sig i:nth-child(1){height:4px}.sig i:nth-child(2){height:6px}.sig i:nth-child(3){height:8px}.sig i:nth-child(4){height:11px}
.sig .bat{width:22px;height:11px;border:1px solid rgba(255,255,255,.6);border-radius:3px;position:relative;margin-left:4px}
.sig .bat::before{content:"";position:absolute;inset:1.5px;width:70%;background:#fff;border-radius:1px}

@media (max-width:820px),(pointer:coarse) and (max-width:1024px){
  :root{--tb:44px}
  .menubar,.dock,.widgets,.icons{display:none!important}
  .login{display:none!important}
  .area{inset:0}

  /* lock screen */
  .lock{display:flex!important;position:fixed;inset:0;z-index:55;flex-direction:column;
    background:#0A0A10 url(/brand/wallpaper.svg) center/cover no-repeat;padding:12px 18px calc(22px + var(--safe-b));
    transition:opacity .45s ease,transform .45s ease}
  .lock.out{opacity:0;transform:scale(1.06);pointer-events:none}
  .lock .lstat{display:flex;justify-content:space-between;align-items:center;color:#fff;font-size:14px;
    font-weight:600;margin-top:-4px}
  .lock .lclock{margin-top:11vh;text-align:center;color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.5)}
  .lock .ld{font-size:17px;font-weight:600}
  .lock .lt{font-size:78px;font-weight:700;letter-spacing:-.05em;line-height:1.02}
  .lnote{margin-top:26px;display:flex;gap:11px;align-items:flex-start;padding:13px;border-radius:17px;
    background:rgba(255,255,255,.16);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);color:#fff}
  .lnote img{width:36px;height:36px;border-radius:9px;flex:0 0 auto}
  .lnote b{font-size:13px}
  .lnote p{margin:2px 0 0;font-size:13px;line-height:1.4;opacity:.92}
  .lfoot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:14px}
  .lbtn{width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.20);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#fff;display:grid;place-items:center;flex:0 0 auto}
  .lbtn .sf{width:21px;height:21px}
  .lswipe{flex:1;text-align:center;color:rgba(255,255,255,.85);font-size:12px;cursor:pointer}
  .lswipe i{display:block;width:128px;height:5px;border-radius:3px;background:rgba(255,255,255,.65);margin:11px auto 0}

  /* home screen */
  .ios{display:flex!important;position:absolute;inset:0;flex-direction:column;padding-top:8px}
  .ios .status{display:flex;justify-content:space-between;align-items:center;padding:0 22px;height:22px;
    color:#fff;font-size:14px;font-weight:600;margin-top:-24px}
  .ios .status .pl{font-size:11px;font-weight:600;opacity:.8;font-family:var(--mono)}
  .ios .pages{flex:1;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-top:14px}
  .ios .pages::-webkit-scrollbar{display:none}
  .ios .page{flex:0 0 100%;scroll-snap-align:center;overflow-y:auto;padding:0 18px 8px}
  .ios .board{display:grid;grid-template-columns:repeat(4,1fr);gap:20px 12px}
  /* Home-screen widgets. iOS fills apps from the top, so with ten apps the lower half of the
     springboard is dead space — and dead space on the one screen most people will ever see is a
     waste of the only thing that supplies this product's energy: the art and the live shift. */
  .iwidgets{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px}
  /* min-width:0 — a grid item defaults to min-width:auto, so the 3-up avatar mosaic inside the
     second widget refuses to shrink and pushes the whole tile off the right edge of the phone. */
  .iw{border-radius:22px;padding:14px;background:rgba(22,23,26,.62);backdrop-filter:blur(30px) saturate(1.5);
    -webkit-backdrop-filter:blur(30px) saturate(1.5);border:1px solid rgba(255,255,255,.10);
    aspect-ratio:1;display:flex;flex-direction:column;color:#fff;text-align:left;cursor:pointer;
    min-width:0;overflow:hidden}
  .iw .h{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3)}
  .iw .big{font-family:var(--mono);font-size:31px;font-weight:600;letter-spacing:-.035em;margin-top:auto;
    font-variant-numeric:tabular-nums}
  .iw .k{font-size:11.5px;color:var(--ink3);margin-top:3px;line-height:1.3}
  .iw .ring{position:absolute;top:12px;right:12px;width:30px;height:30px;transform:rotate(-90deg)}
  .iw.rel{position:relative}
  .iwmos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:auto;min-width:0}
  .iwmos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:7px;display:block;min-width:0}
  .ios .app{background:none;border:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:6px;
    color:#fff;font-size:11px;text-shadow:0 1px 4px rgba(0,0,0,.7);cursor:pointer}
  .ios .app .ic{width:60px;height:60px}
  .ios .app .ic img{width:100%;height:100%;display:block;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
  .ios .app span{line-height:1.2;text-align:center}
  .ios .dots{display:flex;justify-content:center;gap:7px;padding:9px 0}
  .ios .dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35);cursor:pointer}
  .ios .dots i.on{background:#fff}
  .idock{margin:0 12px calc(10px + var(--safe-b));padding:11px 14px;border-radius:26px;
    background:rgba(255,255,255,.14);backdrop-filter:blur(24px) saturate(1.6);
    -webkit-backdrop-filter:blur(24px) saturate(1.6);display:flex;justify-content:space-around;align-items:center}
  .idock .app .ic{width:58px;height:58px}

  /* page 2 — your PFPs */
  .mine{color:#fff}
  .mwrap{padding:4px 4px 20px}
  .mwrap h2{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:0 0 3px;font-family:var(--sans)}
  .mk{color:rgba(255,255,255,.7);font-size:13px;margin:0 0 14px;line-height:1.5}
  .mstats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:16px}
  .mstats>div{background:rgba(255,255,255,.11);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-radius:14px;padding:11px}
  .mstats b{display:block;font-size:21px;font-family:var(--mono);font-weight:600}
  .mstats span{font-size:10.5px;opacity:.72}
  .mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
  .mb{background:rgba(255,255,255,.11);border:0;border-radius:14px;padding:7px;color:#fff;
    display:flex;flex-direction:column;gap:5px;cursor:pointer}
  .mb .im{aspect-ratio:1;border-radius:10px;overflow:hidden;background:#222}
  .mb .im img{width:100%;height:100%;object-fit:cover;display:block}
  .mb span{font-size:12px;font-weight:600;font-family:var(--mono)}
  .mb small{font-size:10px;opacity:.7;text-transform:lowercase}

  /* windows become full-screen iOS apps */
  .win{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
    border-radius:0;transform:translateY(100%);transition:transform .3s cubic-bezier(.32,.72,0,1),opacity .2s;
    opacity:1;min-width:0;min-height:0}
  .win.show{transform:none}
  .win.min{transform:translateY(100%);opacity:0}
  .win .tb{padding:0 8px 0 4px;padding-top:env(safe-area-inset-top,0px);
    height:calc(var(--tb) + env(safe-area-inset-top,0px));background:var(--tool)}
  .win .tl,.win .rs,.win .tools{display:none}
  .win .t{position:static;transform:none;margin:0 auto;font-size:16px;font-weight:700}
  .win .back{display:inline-flex;align-items:center;gap:2px;background:none;border:0;color:var(--accent);
    font-size:16px;padding:0 6px;order:-1;cursor:pointer}
  .win .back .sf{width:19px;height:19px;stroke-width:2.4}
  /* actions move to a bottom toolbar, where a thumb can reach them */
  .win .primary{position:absolute;left:0;right:0;bottom:0;margin:0;padding:9px 12px calc(9px + var(--safe-b));
    background:var(--tool);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
    border-top:1px solid var(--hair);justify-content:center;flex-wrap:wrap;z-index:4}
  .win .primary:empty{display:none}
  .win .primary .btn{flex:1;min-width:112px;justify-content:center;text-align:center;padding:11px 14px;font-size:15px}
  .win .body{padding-bottom:0}
  .win .status{order:9}

  .notes{top:calc(env(safe-area-inset-top,0px) + 8px);left:10px;right:10px;width:auto}
  /* alerts become iOS action sheets */
  .alertback{align-items:flex-end}
  .alert{width:100%;margin:0 8px calc(8px + var(--safe-b));border-radius:15px;max-width:none}
  .spot{padding-top:9vh}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}

/* ═══════════════════════════════════════════ app content
   Everything below lives INSIDE a window body, which is the one place the product's own type
   takes over from the system font. */

/* toolbar search */
.srch{background:rgba(255,255,255,.09);border:1px solid var(--hair);border-radius:7px;height:26px;
  padding:0 10px;color:var(--ink);font-size:13px;width:180px;outline:0;font-family:var(--sys)}
.srch:focus{border-color:var(--accent);background:rgba(255,255,255,.13)}
.srch::placeholder{color:var(--ink3)}

/* floor hero */
.hero{display:flex;align-items:center;gap:18px;margin-bottom:6px}
.dial{width:74px;height:74px;flex:0 0 auto;transform:rotate(-90deg)}
.hero .big{font-family:var(--mono);font-size:42px;font-weight:600;letter-spacing:-.035em;line-height:1;
  font-variant-numeric:tabular-nums}
.hero .k{color:var(--ink3);font-size:12.5px;margin-top:5px}
.kv .v i.sm,.qlt em{font-style:normal}
.kv .v i.sm{color:var(--ink3);font-size:11px;margin-left:5px;font-family:var(--sys)}

/* the rotation strip */
.line{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.tick{background:var(--win2);border:1px solid var(--hair);border-radius:9px;padding:8px 11px;
  min-width:96px;cursor:pointer;transition:border-color .15s,background .15s}
.tick:hover{background:#26272B}
.tick.on{border-color:var(--accent);background:var(--accent-dim)}
.tick b{display:block;font-size:12.5px;font-weight:700;font-family:var(--mono)}
.tick span{display:block;font-size:12px;color:var(--ink2);font-family:var(--mono)}
.tick i{font-style:normal;font-size:11px;font-family:var(--mono)}

/* Finder split view */
.split{display:flex;height:100%;align-items:stretch}
.side{width:212px;flex:0 0 auto;background:var(--side);backdrop-filter:blur(30px);
  -webkit-backdrop-filter:blur(30px);border-right:1px solid var(--hair);padding:12px 10px;overflow:auto;
  font-family:var(--sys)}
.side h5{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);
  margin:16px 8px 6px}
.side h5:first-child{margin-top:2px}
.side .it{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;padding:6px 9px;
  border-radius:7px;color:var(--ink2);font-size:13px;text-align:left;cursor:pointer}
.side .it:hover{background:rgba(255,255,255,.07)}
.side .it.on{background:var(--accent);color:var(--accent-ink);font-weight:600}
.side .it i{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.side .it span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side .it b{font-family:var(--mono);font-size:12px;opacity:.75}
.content{flex:1;overflow:auto;padding:14px}

/* the icon grid */
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:14px}
.fgrid.sm{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin-top:4px}
.fi{background:none;border:0;padding:6px;border-radius:11px;cursor:pointer;text-align:center;color:var(--ink)}
.fi:hover{background:rgba(255,255,255,.07)}
.fi .im{aspect-ratio:1;border-radius:10px;overflow:hidden;background:#000;
  box-shadow:0 2px 10px rgba(0,0,0,.4),inset 0 0 0 1.5px var(--tc,transparent)}
.fi .im img{width:100%;height:100%;object-fit:cover;display:block}
.fi .n{font-family:var(--mono);font-size:12.5px;font-weight:600;margin-top:7px}
.fi .s{font-size:10.5px;color:var(--tc,var(--ink3));margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Quick Look */
.qlwrap{display:flex;flex-direction:column}
.qlim{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:#000}
.qlt{font-size:23px;font-weight:800;letter-spacing:-.02em;margin:0 0 10px}
.qlt em{color:var(--accent);font-weight:700;font-size:18px;margin-left:6px}
.pillrow{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:6px}
.tierpill{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;
  border-radius:6px;background:rgba(255,255,255,.08);color:var(--tc,var(--ink2));
  border:1px solid var(--tc,var(--hair2));font-family:var(--sys)}

/* Markets rows */
.mrow{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 13px;
  border-radius:10px;background:var(--win2);border:1px solid transparent;margin-bottom:7px}
.mrow.on{border-color:var(--accent);background:var(--accent-dim)}
.mrow b{font-size:14px;font-weight:700;display:block}
.mrow span{font-size:11.5px;color:var(--ink3);display:block;margin-top:1px}
.mrow .r{text-align:right}
.mrow .r b{font-size:14px}

/* payroll ladder */
.lad{display:flex;flex-direction:column;gap:11px;margin-top:4px}
.lrow{display:grid;grid-template-columns:150px 1fr 128px;gap:12px;align-items:center;cursor:pointer;
  padding:5px;border-radius:8px}
.lrow:hover{background:rgba(255,255,255,.05)}
.lh{display:flex;align-items:center;gap:7px;min-width:0}
.lh i{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.lh b{font-size:11.5px;font-weight:700;letter-spacing:.04em}
.lh span{font-size:11px;color:var(--ink3);margin-left:auto}
.lbar{height:9px;border-radius:5px;background:rgba(255,255,255,.07);overflow:hidden}
.lbar i{display:block;height:100%;border-radius:5px}
.lv{text-align:right;font-size:13px;font-weight:600}
.lv span{display:block;font-size:10px;color:var(--ink3);font-weight:400;font-family:var(--sys)}

/* calculator */
.modelbar{padding:11px 13px;border-radius:10px;background:rgba(250,204,21,.08);
  border:1px solid rgba(250,204,21,.24);color:var(--ink2);font-size:12.5px;line-height:1.5;margin-bottom:4px}
.modelbar b{color:var(--amber)}
.sl{display:block;margin:14px 0}
.sl>span{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink2);margin-bottom:7px}
.sl b{font-size:13px;color:var(--ink)}
.sl input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;
  background:rgba(255,255,255,.14);outline:0}
.sl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;
  background:var(--accent);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.sl input[type=range]::-moz-range-thumb{width:17px;height:17px;border:0;border-radius:50%;
  background:var(--accent);cursor:pointer}
.curve{width:100%;height:150px;display:block;margin:14px 0 4px;background:var(--win2);border-radius:10px}
.pay{display:flex;flex-direction:column;gap:7px;margin-top:4px}
.prow{display:grid;grid-template-columns:110px 1fr;gap:10px;align-items:baseline;padding:8px 11px;
  border-radius:9px;background:var(--win2)}
.prow b{font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--tc)}
.prow span{font-size:14px;font-weight:600}
.prow i{grid-column:1 / -1;font-style:normal;font-size:10.5px;color:var(--ink3)}

/* the book */
.steps{margin:6px 0 0;padding-left:19px;color:var(--ink2);font-size:13px;line-height:1.65}
.steps li{margin-bottom:9px}
.steps b{color:var(--ink)}

/* TextEdit document */
.doc{padding:30px 34px;max-width:66ch;font-size:14px;line-height:1.68;color:var(--ink2);user-select:text;-webkit-user-select:text}
.doc h1{font-size:34px;font-weight:900;letter-spacing:-.03em;color:var(--ink);margin:0 0 4px}
.doc .lede{font-size:15px;color:var(--accent);margin:0 0 26px}
.doc h2{font-size:16px;font-weight:800;color:var(--ink);margin:26px 0 7px;letter-spacing:-.01em}
.doc p{margin:0 0 13px}
.doc b{color:var(--ink)}
.doc code{font-family:var(--mono);font-size:12.5px;background:rgba(255,255,255,.08);padding:1px 5px;border-radius:4px}

/* terminal */
/* terminal chrome, chat behaviour. Monospace and a prompt, but the unit is a message rather
   than a command, so lines wrap and hang-indent under their prefix instead of being a fixed grid. */
/* The chat pane sizes itself off the remaining space rather than a magic pixel figure, so a
   narrow window that wraps the suggestion chips onto a third row cannot push the input off the
   bottom. `min-height:0` is what actually lets a flex child scroll instead of growing. */
.win.plain .body{display:flex;flex-direction:column}
.chat{flex:1;min-height:0;padding:14px 16px;font-family:var(--mono);font-size:12.5px;line-height:1.65;
  color:#D6D6DC;overflow:auto;user-select:text;-webkit-user-select:text;overscroll-behavior:contain}
.cl{display:flex;gap:8px;align-items:flex-start;margin-bottom:2px}
.cl .px{flex:0 0 auto;width:42px;text-align:right;opacity:.9;user-select:none;-webkit-user-select:none}
.cl .tx{flex:1;min-width:0;white-space:pre-wrap;overflow-wrap:anywhere}
.cu{margin-top:9px}
.cu .px{color:var(--accent)}
.cu .tx{color:#fff}
.cb .px{color:var(--ink3)}
.cl.dim .tx{color:var(--ink3)}
.chips{flex:0 0 auto;display:flex;gap:6px;padding:0 16px 8px;flex-wrap:wrap;background:#0A0A0C}
.chip{background:rgba(255,255,255,.07);border:1px solid var(--hair);color:var(--ink2);
  font-family:var(--mono);font-size:11px;padding:4px 9px;border-radius:6px;cursor:pointer;white-space:nowrap}
.chip:hover{background:rgba(255,255,255,.13);color:var(--ink)}
.tin{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:0 16px;height:40px;
  border-top:1px solid var(--hair);background:#0A0A0C;font-family:var(--mono);font-size:12.5px}
.ps1{color:var(--accent);flex:0 0 auto}
.tin input{flex:1;background:none;border:0;outline:0;color:#D6D6DC;font:inherit;caret-color:var(--accent)}
.tin input::placeholder{color:#55565C}

/* settings */
.wallrow{display:flex;gap:11px}
.wopt{background:none;border:0;padding:0;color:var(--ink2);font-size:12px;cursor:pointer;text-align:center}
.wopt span{display:block;width:104px;height:66px;border-radius:9px;background-size:cover;background-position:center;
  border:2px solid transparent;margin-bottom:6px}
.wopt.on{color:var(--ink)}
.wopt.on span{border-color:var(--accent)}

/* about */
.aboutbox{padding:30px 26px;text-align:center}
.aboutbox img{margin:0 auto 14px;display:block}
.aboutbox h2{font-size:25px;font-weight:800;letter-spacing:-.02em;margin:0}
.aboutbox .v{color:var(--ink3);font-size:12.5px;margin:5px 0 20px}
.aboutbox .kv{text-align:left}
.aboutbox .note{text-align:left}

@media (max-width:820px),(pointer:coarse) and (max-width:1024px){
  .split{flex-direction:column}
  .side{width:auto;border-right:0;border-bottom:1px solid var(--hair);display:flex;gap:6px;overflow-x:auto;
    padding:9px 10px;align-items:center}
  .side h5{display:none}
  .side .it{width:auto;flex:0 0 auto;white-space:nowrap;padding:6px 11px;background:rgba(255,255,255,.07)}
  .content{padding:12px}
  .fgrid{grid-template-columns:repeat(auto-fill,minmax(102px,1fr));gap:11px}
  .lrow{grid-template-columns:1fr;gap:5px}
  .lv{text-align:left}
  .doc{padding:22px 20px}
  .chips{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .srch{width:130px}
  .prow{grid-template-columns:1fr auto}
}