/* tigOS styles.css, part 00: tokens (variables, reset, root). The parts in this folder are concatenated in name order by build.py. */
/* ===================== tigOS 2.0 ===================== */
html, body { margin:0 !important; padding:0 !important; height:100%; overflow:hidden !important; overscroll-behavior:none; background:#07070a; }
.tigos, .tigos * { box-sizing:border-box; }
.tigos {
  --bg:#07070a; --bg2:#0e0e14; --ink:#f4f1ea; --muted:rgba(244,241,234,.62); --faint:rgba(244,241,234,.36);
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16); --body:rgba(244,241,234,.86);
  --glass:rgba(18,18,24,.62); --glass2:rgba(24,24,32,.78);
  --orange:#ff8a00; --amber:#ffd166; --teal:#63e6be; --blue:#8cc7ff; --pink:#ff7ab6; --violet:#a78bfa; --red:#ff5f57; --green:#28c840;
  --r:20px; --r2:14px;
  --ease:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.34,1.56,.64,1);
  position:fixed; inset:0; width:auto; height:auto; min-height:0; overflow:hidden; overscroll-behavior:none;
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,Inter,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.45; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  user-select:none; -webkit-user-select:none;
}
.tigos a { color:inherit; text-decoration:none; }
.tigos button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.tigos svg { display:block; }
.tigos .ic { width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.tigos p { margin:0; }
.tigos ::selection { background:rgba(255,138,0,.35); }
.tigos .win-body, .tigos .win-body * { user-select:text; -webkit-user-select:text; }

/* tigOS styles.css, part 01: wallpaper. The parts in this folder are concatenated in name order by build.py, so they share one scope. */
/* ---------- wallpaper ---------- */
.wall { position:absolute; inset:0; z-index:0; overflow:hidden; background:
  radial-gradient(1100px 720px at 10% -10%, rgba(255,150,70,.26), transparent 62%),
  radial-gradient(1050px 760px at 90% 108%, rgba(150,105,255,.30), transparent 62%),
  radial-gradient(800px 640px at 56% 44%, rgba(255,90,150,.14), transparent 66%),
  linear-gradient(158deg,#251639 0%,#2b1a43 28%,#1d2350 62%,#151b36 100%); }
.wall .orb { position:absolute; border-radius:50%; opacity:.8; filter:blur(34px); will-change:transform; animation:orb 30s var(--ease) infinite alternate; }
.wall .orb-a { width:60vmax; height:60vmax; left:-20vmax; top:-24vmax; background:radial-gradient(circle, rgba(255,150,60,.46), rgba(255,150,60,0) 62%); }
.wall .orb-b { width:56vmax; height:56vmax; right:-20vmax; bottom:-28vmax; background:radial-gradient(circle, rgba(135,100,255,.46), rgba(135,100,255,0) 62%); animation-delay:-11s; }
.wall .orb-c { width:44vmax; height:44vmax; left:40%; top:30%; background:radial-gradient(circle, rgba(255,90,150,.26), rgba(255,90,150,0) 62%); animation-delay:-19s; }
.wall .orb-d { width:38vmax; height:38vmax; left:58%; top:-14%; background:radial-gradient(circle, rgba(90,190,255,.22), rgba(90,190,255,0) 62%); animation-delay:-25s; }
@keyframes orb { to { transform:translate3d(5vmax,-3vmax,0) scale(1.08); } }

/* tigOS styles.css, part 02: boot. The parts in this folder are concatenated in name order by build.py, so they share one scope. */
/* ---------- boot ---------- */
.boot { position:absolute; inset:0; z-index:100; display:grid; place-items:center; background:#050507; transition:opacity .6s var(--ease), visibility .6s; }
.tigos:not(.booting) .boot { opacity:0; visibility:hidden; pointer-events:none; }
.tigos.booting .boot { transition:none; }
.tigos.handoff .boot { opacity:1; visibility:visible; transition:none; z-index:117; }
.boot::before { content:""; position:absolute; inset:0; background:radial-gradient(700px 420px at 50% 42%, rgba(255,77,141,.14), transparent 70%), radial-gradient(900px 500px at 50% 60%, rgba(124,92,255,.12), transparent 70%); }
.boot-card { position:relative; display:grid; justify-items:center; gap:22px; transform:translateY(-3vh); }
.boot-logo { width:124px; height:124px; filter:drop-shadow(0 0 28px rgba(120,90,255,.35)) drop-shadow(0 12px 24px rgba(0,0,0,.5)); animation:bootLogo 1s var(--spring) both; }
@keyframes bootLogo { from { opacity:0; transform:scale(.7) translateY(10px); } to { opacity:1; transform:none; } }
.boot-bar { width:200px; height:4px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; margin-top:6px; }
.boot-bar i { display:block; height:100%; width:100%; transform-origin:left; transform:scaleX(0); background:linear-gradient(90deg,#ff9a1f,#ffd23f,#6fd86a,#3ab0ff,#6a4dff); animation:bootBar 1.9s var(--ease) .15s forwards; }
@keyframes bootBar { 0%{transform:scaleX(0)} 60%{transform:scaleX(.72)} 100%{transform:scaleX(1)} }
.boot-msg { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); font-weight:700; min-height:14px; }
.tigos.booting .menubar, .tigos.booting .dock, .tigos.booting .desktop { opacity:0; }
.menubar, .dock, .desktop { transition:opacity .7s var(--ease) .1s; }

/* tigOS styles.css, part 03: menubar. The parts in this folder are concatenated in name order by build.py, so they share one scope. */
/* ---------- menubar ---------- */
.menubar { position:absolute; top:0; left:0; right:0; height:34px; z-index:60; display:flex; align-items:center; gap:4px; padding:0 10px 0 8px;
  background:rgba(12,12,18,.55); backdrop-filter:blur(26px) saturate(160%); -webkit-backdrop-filter:blur(26px) saturate(160%); border-bottom:1px solid var(--line); font-size:13px; }
.mb-logo { width:26px; height:26px; border-radius:8px; display:grid; place-items:center; transition:background .2s; }
.mb-logo svg { width:25px; height:25px; }
.mb-logo:hover, .mb-logo.on { background:rgba(255,255,255,.1); }
.mb-app { font-weight:700; padding:0 8px 0 4px; letter-spacing:-.01em; white-space:nowrap; }
.mb-right { margin-left:auto; display:flex; align-items:center; gap:6px; color:var(--body); }
.mb-icon { width:26px; height:26px; border-radius:7px; display:grid; place-items:center; transition:background .15s; }
.mb-icon:hover { background:rgba(255,255,255,.1); }
.mb-icon svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.mb-loc { display:flex; align-items:center; gap:4px; font-size:12px; color:var(--muted); padding:0 7px; height:24px; border-radius:7px; transition:background .15s, color .15s; }
.mb-loc:hover, .mb-loc.on { background:rgba(255,255,255,.1); color:var(--ink); }
.menu.city { left:auto; right:8px; min-width:200px; max-height:70vh; overflow:auto; overflow-x:visible; }
.menu.city::before { content:""; position:absolute; top:-6px; left:var(--caret, 50%); width:10px; height:10px; transform:translateX(-50%) rotate(45deg); background:var(--glass2); border-left:1px solid var(--line2); border-top:1px solid var(--line2); }
.city-h { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); font-weight:700; padding:6px 10px 8px; }
.menu.city button { display:flex; justify-content:space-between; gap:12px; }
.menu.city button small { color:var(--faint); font-weight:500; }
.menu.city button.sel { color:var(--amber); }
.menu.city button.sel:hover { color:#111; }
.mb-loc svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.9; }
.mb-clock { font-variant-numeric:tabular-nums; font-weight:600; font-size:12.5px; padding:0 7px; height:24px; border-radius:7px; color:inherit; font-family:inherit; transition:background .15s; white-space:nowrap; }
.mb-clock.on { background:rgba(255,255,255,.1); }
@media (hover:hover) and (min-width:761px) { .mb-clock { cursor:default; } }
.mb-wx { display:inline-flex; align-items:center; gap:4px; padding:0 6px; font-size:12px; font-weight:600; color:rgba(244,241,234,.9); animation:fade .5s ease both; }
.mb-wx[hidden] { display:none; }
.mb-wx svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.mb-wx.sun svg { color:var(--amber); } .mb-wx.moon svg { color:#c9c4ff; } .mb-wx.cloud svg, .mb-wx.fog svg { color:#cfd3dc; } .mb-wx.partly svg { color:#ffd98a; } .mb-wx.rain svg { color:var(--blue); } .mb-wx.snow svg { color:#e8f6ff; } .mb-wx.storm svg { color:var(--amber); }
.mb-wx b { font-weight:600; }
#mbPower:hover { color:#ff7a7a; }
.menu.pw { left:auto; right:8px; min-width:170px; }
.menu button svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; display:inline-block; vertical-align:-3px; margin-right:9px; }
.tigos.poweroff .menubar { animation:leaveUp .55s var(--ease) forwards; }
.tigos.poweroff .dock { animation:leaveDown .55s var(--ease) .05s forwards; }
.tigos.poweroff .win { animation:winOff .7s var(--ease) forwards; pointer-events:none; }
.tigos.poweroff .home, .tigos.poweroff #pets, .tigos.poweroff .toast, .tigos.poweroff .pop { animation:fadeOut .45s ease forwards; }
.tigos.poweroff .wall { animation:wallOff 1.15s var(--ease) forwards; }
.tigos.poweroff .desktop, .tigos.poweroff .menubar, .tigos.poweroff .dock { pointer-events:none; }
@keyframes leaveUp { to { opacity:0; transform:translateY(-100%); } }
@keyframes leaveDown { to { opacity:0; transform:translate(-50%, 70px) scale(.92); } }
.dock-left.poweroff .dock, .dock-right.poweroff .dock { animation:fadeOut .5s ease forwards; }
@keyframes winOff { 35% { opacity:1; transform:scale(.97); filter:brightness(1.05); } to { opacity:0; transform:scale(.9) translateY(14px); filter:brightness(.4) blur(3px); } }
@keyframes wallOff { 30% { filter:brightness(1) saturate(1); } to { filter:brightness(0) saturate(0); transform:scale(1.04); } }
.sleep, .off { position:absolute; inset:0; z-index:120; background:#000; display:grid; place-items:center; align-content:center; gap:14px; cursor:pointer; animation:fade .5s ease both; overflow:hidden; }
.sleep { display:block; }
.saver { position:absolute; inset:0; width:100%; height:100%; display:block; }
.sleep[hidden], .off[hidden] { display:none; }
.sleep-face { position:absolute; left:0; right:0; top:clamp(56px,11vh,132px); display:grid; justify-items:center; gap:2px; text-align:center; padding:0 20px; pointer-events:none; }
.sleep-date { font-size:clamp(15px,1.7vw,21px); font-weight:600; letter-spacing:.01em; color:rgba(255,255,255,.78); text-shadow:0 2px 20px rgba(0,0,0,.55); }
.sleep-clock { font-size:clamp(72px,12vw,164px); font-weight:200; letter-spacing:-.05em; line-height:1.02; color:rgba(255,255,255,.95); font-variant-numeric:tabular-nums; text-shadow:0 4px 40px rgba(0,0,0,.5); transition:opacity .6s; }
.sleep-wx { display:inline-flex; align-items:center; gap:7px; margin-top:8px; padding:5px 13px 5px 10px; border-radius:99px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); font-size:clamp(12.5px,1.3vw,15px); font-weight:600; color:rgba(255,255,255,.88); }
.sleep-wx[hidden] { display:none; }
.sleep-wx svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.off-hint { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.3); font-weight:600; animation:blink 2.4s ease infinite alternate; }
.off-btn { position:relative; width:72px; height:72px; border-radius:50%; border:1px solid rgba(255,255,255,.12); display:grid; place-items:center; color:rgba(255,255,255,.72); transition:transform .25s var(--spring), color .2s, border-color .2s; isolation:isolate; }
.off-btn::before { content:''; position:absolute; inset:-1px; border-radius:50%; background:conic-gradient(from 0deg, rgba(167,139,250,0) 0deg, rgba(167,139,250,.75) 70deg, rgba(140,199,255,.85) 120deg, rgba(167,139,250,0) 200deg, rgba(167,139,250,0) 360deg); -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2.2px), #000 calc(100% - 1.4px)); mask:radial-gradient(farthest-side, transparent calc(100% - 2.2px), #000 calc(100% - 1.4px)); animation:offRing 5.5s linear infinite; opacity:.9; }
.off-btn::after { content:''; position:absolute; inset:-34px; border-radius:50%; background:radial-gradient(circle, rgba(120,110,255,.22), rgba(90,140,255,.08) 45%, transparent 70%); z-index:-1; animation:offGlow 4.2s ease-in-out infinite alternate; pointer-events:none; }
@keyframes offRing { to { transform:rotate(360deg); } }
@keyframes offGlow { from { opacity:.55; transform:scale(.92); } to { opacity:1; transform:scale(1.06); } }
.off-btn svg { width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; filter:drop-shadow(0 0 6px rgba(150,130,255,.45)); animation:offBreath 4.2s ease-in-out infinite alternate; }
@keyframes offBreath { from { color:rgba(210,200,255,.72); } to { color:rgba(190,220,255,.95); } }
.off-btn:hover { transform:scale(1.08); color:#fff; border-color:rgba(255,255,255,.4); }
.off.leaving { animation:fadeOut .5s ease forwards; }
.rm .off-btn::before { animation-duration:5.5s !important; animation-iteration-count:infinite !important; }   /* a stopped ring reads as broken, not calm */
.rm .off-btn::after, .rm .off-btn svg { animation:none !important; }
/* shutdown: a black card with the logo dimming and a ring counting down, then a CRT collapse to a line, then the off screen */
.shutdown { position:absolute; inset:0; z-index:119; background:#000; display:grid; place-items:center; overflow:hidden; animation:fade .35s ease both; }
.shutdown[hidden] { display:none; }
.sd-card { display:grid; justify-items:center; gap:18px; transform:translateY(-2vh); animation:sdCard 2.2s var(--ease) both; }
.sd-logo { width:92px; height:92px; filter:drop-shadow(0 0 22px rgba(120,90,255,.3)) grayscale(0); animation:sdLogo 2.2s var(--ease) both; }
.sd-ring { width:26px; height:26px; border-radius:50%; border:2px solid rgba(255,255,255,.12); position:relative; }
.sd-ring i { position:absolute; inset:-2px; border-radius:50%; border:2px solid transparent; border-top-color:rgba(255,255,255,.75); animation:offRing .8s linear infinite; }
.sd-msg { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.45); font-weight:700; }
.sd-crt { position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; }
.shutdown.crt .sd-card { opacity:0; transition:opacity .15s; }
.shutdown.crt .sd-crt { animation:crtOff .7s cubic-bezier(.6,0,.9,.3) both; }
@keyframes sdCard { 0% { opacity:0; transform:translateY(0) scale(.96); } 12% { opacity:1; transform:translateY(-2vh) scale(1); } 100% { opacity:1; transform:translateY(-2vh) scale(1); } }
@keyframes sdLogo { 0% { filter:grayscale(0) brightness(1); } 100% { filter:grayscale(.9) brightness(.45); } }
@keyframes crtOff { 0% { opacity:.9; transform:scale(1,1); } 45% { opacity:1; transform:scale(1,.012); } 70% { opacity:1; transform:scale(.4,.004); } 100% { opacity:0; transform:scale(0,.002); } }
.tigos.poweroff .pets, .tigos.poweroff .ufo { animation:fadeOut .45s ease forwards; }

/* tigOS styles.css, part 04: menu. The parts in this folder are concatenated in name order by build.py, so they share one scope. */
/* ---------- menu (logo dropdown) ---------- */
.menu { position:absolute; top:38px; left:8px; z-index:90; min-width:210px; padding:6px; border-radius:12px; background:var(--glass2); backdrop-filter:blur(30px); -webkit-backdrop-filter:blur(30px); border:1px solid var(--line2); box-shadow:0 24px 60px rgba(0,0,0,.5); animation:pop .18s var(--spring) both; }
.menu[hidden] { display:none; }
.menu button { display:block; width:100%; text-align:left; padding:7px 10px; border-radius:8px; font-size:13px; }
.menu button:hover { background:var(--orange); color:#111; }
.menu hr { border:0; border-top:1px solid var(--line); margin:5px 8px; }
@keyframes pop { from { opacity:0; transform:translateY(-6px) scale(.97); } to { opacity:1; transform:none; } }

/* tigOS styles.css, part 05: desktop. The parts in this folder are concatenated in name order by build.py, so they share one scope. */
/* ---------- desktop ---------- */
.desktop { position:absolute; inset:34px 0 0 0; z-index:5; }
.tile { width:52px; height:52px; border-radius:15px; display:grid; place-items:center; position:relative; box-shadow:0 10px 26px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.28); transition:transform .25s var(--spring); }
.tile svg { width:26px; height:26px; fill:none; stroke:#fff; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 1px 2px rgba(0,0,0,.3)); position:relative; z-index:1; }
/* depth: a soft top gloss and a shaded foot over every tile colour, the way macOS lights its icons; the glyph sits above it */
.tile::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.05) 46%, rgba(0,0,0,0) 54%, rgba(0,0,0,.12)); box-shadow:inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(0,0,0,.20); }
.tile.resume::before { background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.12) 46%, rgba(0,0,0,0) 54%, rgba(0,0,0,.06)); }
.tile.about { background:linear-gradient(145deg,#ffb15c,#ff6a00); }
.tile.projects { background:linear-gradient(145deg,#8fd3ff,#3b82f6); }
.tile.experience { background:linear-gradient(145deg,#b39dff,#7c3aed); }
.tile.resume { background:linear-gradient(145deg,#f8f6f0,#d3cbbf); }
.tile.resume svg { stroke:#26262e; filter:none; }
.tile.skills { background:linear-gradient(145deg,#7cf2d0,#0fa78a); }
.tile.contact { background:linear-gradient(145deg,#ff9fd0,#f0407f); }
.tile.journey { background:linear-gradient(145deg,#7fd0ff,#2a7de1); }
.tile.terminal { background:linear-gradient(145deg,#3a3a46,#141418); }
.tile.linkedin { background:linear-gradient(145deg,#4aa3ff,#0a66c2); }
.tile.settings { background:linear-gradient(145deg,#9a9aa6,#4b4b56); }

/* tigOS styles.css, part 06: home hero. The parts in this folder are concatenated in name order by build.py, so they share one scope. */
/* ---------- home hero ---------- */
.home { position:absolute; left:clamp(18px,4vw,64px); top:clamp(22px,8vh,84px); max-width:min(640px, 60vw); z-index:5; transition:opacity .45s var(--ease), transform .45s var(--ease); }
.tigos.has-windows .home { opacity:0; transform:translateY(10px) scale(.985); pointer-events:none; }
.home .hi { display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 8px; border-radius:99px; background:rgba(255,255,255,.07); border:1px solid var(--line2); font-size:12px; font-weight:600; color:var(--muted); margin-bottom:18px; backdrop-filter:blur(10px); }
.home .hi img { width:22px; height:22px; border-radius:50%; object-fit:cover; }
.home .hi i { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(40,200,64,.18); }
.home h1 { margin:0 0 14px; font-size:clamp(38px,5.6vw,72px); line-height:.98; letter-spacing:-.045em; font-weight:800; }
.home h1 em { font-style:normal; background:linear-gradient(90deg,var(--orange),var(--amber),var(--teal),var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.home .lead { font-size:clamp(15px,1.35vw,18px); color:var(--muted); max-width:52ch; }
.home .lead b { color:var(--ink); font-weight:600; }
.home .cta { display:flex; flex-wrap:wrap; gap:10px; }
.btn { display:inline-flex; align-items:center; gap:8px; padding:11px 16px; border-radius:12px; font-weight:700; font-size:calc(14px * var(--ts)); border:1px solid var(--line2); background:rgba(255,255,255,.07); backdrop-filter:blur(10px); transition:transform .2s var(--spring), background .2s, border-color .2s, box-shadow .2s; }
.btn:hover { transform:translateY(-2px); background:rgba(255,255,255,.12); }
.btn:active { transform:translateY(0) scale(.98); }
.btn svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.btn.primary { background:linear-gradient(135deg,var(--orange),#ff5f1f); border-color:transparent; color:#160c02; box-shadow:0 12px 30px rgba(255,120,0,.28); }
.btn.primary:hover { box-shadow:0 18px 40px rgba(255,120,0,.38); }
.home .hint { margin-top:24px; font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:8px; }
.home .hint .arrow { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid var(--line2); animation:nudge 1.6s var(--ease) infinite; }
.home .hint .arrow svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
@keyframes nudge { 50% { transform:translateY(4px); } }
.home kbd, .spot-row kbd { font:inherit; font-size:11px; padding:2px 6px; border-radius:6px; border:1px solid var(--line2); background:rgba(255,255,255,.06); color:var(--muted); }
.home > * { animation:rise .7s var(--ease) both; }
.home > *:nth-child(2){animation-delay:.08s} .home > *:nth-child(3){animation-delay:.16s} .home > *:nth-child(4){animation-delay:.24s} .home > *:nth-child(5){animation-delay:.32s}
@keyframes rise { from { opacity:0; transform:translateY(16px); filter:blur(6px); } to { opacity:1; transform:none; filter:blur(0); } }

/* tigOS styles.css, part 07: windows. The parts in this folder are concatenated in name order by build.py, so they share one scope. */
/* ---------- windows ---------- */
.windows { position:absolute; inset:0; z-index:10; pointer-events:none; }
.win { position:absolute; pointer-events:auto; display:flex; flex-direction:column; border-radius:var(--r); background:var(--glass); backdrop-filter:blur(22px) saturate(140%); -webkit-backdrop-filter:blur(22px) saturate(140%); contain:layout paint; border:1px solid var(--line2); box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 0 .5px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12); overflow:hidden; will-change:transform, opacity; animation:winIn .42s var(--spring) both; transform-origin:var(--ox,50%) var(--oy,120%); }
@keyframes winIn { from { opacity:0; transform:translateY(28px) scale(.9); } to { opacity:1; transform:none; } }
.win.closing { animation:winOut .28s var(--ease) forwards; pointer-events:none; }
@keyframes winOut { to { opacity:0; transform:translateY(22px) scale(.92); } }
.win.minimizing { animation:winGenie .62s cubic-bezier(.45,0,.15,1) forwards; pointer-events:none; transform-origin:50% 50% !important; }
@keyframes winGenie {
  0%   { transform:translate(0,0) scale(1,1); opacity:1; filter:blur(0); border-radius:var(--r); }
  28%  { transform:translate(calc(var(--dx, 0px) * .06), calc(var(--dy, 0px) * .1)) scale(.94,1.03); opacity:1; }
  62%  { transform:translate(calc(var(--dx, 0px) * .5), calc(var(--dy, 0px) * .56)) scale(.38,.72); opacity:.96; filter:blur(.4px); border-radius:calc(var(--r) * 2); }
  100% { transform:translate(var(--dx, 0px), var(--dy, 0px)) scale(.05,.08); opacity:0; filter:blur(2px); border-radius:50%; }
}
.win.restoring { animation:winUngenie .55s cubic-bezier(.2,.9,.25,1.05) both; transform-origin:50% 50% !important; }
@keyframes winUngenie {
  0%   { transform:translate(var(--dx, 0px), var(--dy, 0px)) scale(.05,.08); opacity:0; filter:blur(2px); border-radius:50%; }
  40%  { transform:translate(calc(var(--dx, 0px) * .45), calc(var(--dy, 0px) * .5)) scale(.42,.74); opacity:.96; filter:blur(.4px); border-radius:calc(var(--r) * 2); }
  75%  { transform:translate(calc(var(--dx, 0px) * .04), calc(var(--dy, 0px) * .06)) scale(.97,1.02); opacity:1; filter:blur(0); }
  100% { transform:none; opacity:1; border-radius:var(--r); }
}
.win.zooming { transition:left .48s cubic-bezier(.2,.8,.2,1), top .48s cubic-bezier(.2,.8,.2,1), width .48s cubic-bezier(.2,.8,.2,1), height .48s cubic-bezier(.2,.8,.2,1), border-radius .48s; }
.win.zooming .win-body { overflow:hidden; }
.win.focus { border-color:rgba(255,255,255,.24); box-shadow:0 40px 100px rgba(0,0,0,.65), 0 0 0 .5px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.14); }
.win.max { border-radius:0; }
.win-bar { display:flex; align-items:center; gap:10px; height:44px; padding:0 12px 0 12px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.03); cursor:grab; flex:0 0 auto; touch-action:none; }
.win.dragging .win-bar { cursor:grabbing; }
.win.dragging { transition:none; }
.lights { display:flex; gap:8px; }
.lights button { width:12px; height:12px; border-radius:50%; position:relative; border:.5px solid rgba(0,0,0,.35); transition:transform .15s var(--spring); }
.lights button:hover { transform:scale(1.15); }
.lights .c { background:var(--red); } .lights .m { background:#febc2e; } .lights .z { background:var(--green); }
.lights button::after { content:""; position:absolute; inset:2.5px; opacity:0; background:currentColor; transition:opacity .15s; }
.lights .c::after { color:#5a0000; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 2l6 6M8 2L2 8' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 2l6 6M8 2L2 8' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.lights .m::after { color:#7a4a00; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5h6' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5h6' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.lights .z::after { color:#0b4d0b; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 6.5V2h4.5M8 3.5V8H3.5' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 6.5V2h4.5M8 3.5V8H3.5' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.win-bar:hover .lights button::after { opacity:1; }
.win-title { flex:1; text-align:center; font-size:13px; font-weight:600; color:var(--muted); display:flex; align-items:center; justify-content:center; gap:7px; pointer-events:none; }
.win-title svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.win-close-m { display:none; }
.win-tools { display:flex; gap:6px; min-width:56px; justify-content:flex-end; }
.win-tools button, .win-tools a { height:26px; padding:0 9px; border-radius:8px; display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--muted); background:rgba(255,255,255,.05); border:1px solid var(--line); transition:background .15s, color .15s; }
.win-tools button:hover, .win-tools a:hover { background:rgba(255,255,255,.12); color:var(--ink); }
.win-tools svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.win-body { flex:1; overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent; }
.win-body::-webkit-scrollbar { width:8px; height:8px; }
.win-body::-webkit-scrollbar-thumb { background:rgba(255,255,255,.18); border-radius:99px; border:2px solid transparent; background-clip:padding-box; }
.pad { padding:26px 28px 34px; }
.rz { position:absolute; width:20px; height:20px; z-index:4; touch-action:none; }
.rz.se { right:0; bottom:0; cursor:nwse-resize; } .rz.sw { left:0; bottom:0; cursor:nesw-resize; }
.rz.ne { right:0; top:0; cursor:nesw-resize; } .rz.nw { left:0; top:0; cursor:nwse-resize; }

/* generic content bits */
.acc-txt { color:var(--acc, var(--accent)); }
.eyebrow { font-size:calc(11px * var(--ts)); letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--faint); margin-bottom:8px; }
.h2 { font-size:calc(clamp(24px,2.4vw,32px) * var(--ts)); font-weight:800; letter-spacing:-.035em; line-height:1.05; margin:0 0 10px; }
.h3 { font-size:calc(17px * var(--ts)); font-weight:700; letter-spacing:-.02em; margin:0 0 4px; }
.sub { color:var(--muted); font-size:calc(14.5px * var(--ts)); line-height:1.55; max-width:64ch; }
.acc-orange{--acc:var(--orange)} .acc-amber{--acc:var(--amber)} .acc-blue{--acc:var(--blue)} .acc-pink{--acc:var(--pink)} .acc-red{--acc:#ff6b6b} .acc-teal{--acc:var(--teal)} .acc-violet{--acc:var(--violet)}
.chip { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:99px; font-size:calc(12px * var(--ts)); font-weight:600; border:1px solid var(--line2); background:rgba(255,255,255,.05); color:var(--body); }
.chip i { width:6px; height:6px; border-radius:50%; background:var(--acc,var(--orange)); }
.chips { display:flex; flex-wrap:wrap; gap:7px; }
.card { border:1px solid var(--line); border-radius:var(--r2); background:rgba(255,255,255,.035); padding:16px 18px; transition:transform .25s var(--spring), border-color .2s, background .2s; }
.card.hover:hover { transform:translateY(-3px); border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.06); }
.grid2 { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.stat b { display:block; font-size:calc(28px * var(--ts)); letter-spacing:-.04em; font-weight:800; line-height:1; background:linear-gradient(90deg,var(--acc,var(--orange)),#fff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat span { display:block; margin-top:6px; font-size:calc(13px * var(--ts)); font-weight:600; }
.stat small { display:block; margin-top:2px; font-size:calc(12px * var(--ts)); color:var(--faint); }
.sec { margin-top:28px; }
.divider { height:1px; background:var(--line); margin:22px 0; }

/* tigOS styles.css, part 08: about. The parts in this folder are concatenated in name order by build.py, so they share one scope. */
/* ---------- ABOUT ---------- */
.about-hero { display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center; }
.avatar { width:112px; height:112px; border-radius:36px; object-fit:cover; box-shadow:0 18px 40px rgba(0,0,0,.45), 0 0 0 1px var(--line2); background:#e9e3f7; }
.about-hero .h2 { margin-bottom:4px; }
.about-hero .role { color:var(--muted); font-weight:600; }
.about-hero .role b { color:var(--orange); font-weight:700; }
.kv { display:grid; grid-template-columns:auto 1fr; gap:6px 18px; font-size:calc(13.5px * var(--ts)); }
.kv dt { color:var(--faint); font-weight:600; text-transform:uppercase; font-size:calc(11px * var(--ts)); letter-spacing:.1em; padding-top:2px; }
.kv dd { margin:0; font-weight:600; }
.logos { display:flex; flex-wrap:wrap; gap:8px; }
.logo-pill { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.04); font-weight:700; font-size:calc(13px * var(--ts)); }
.logo-pill i { width:10px; height:10px; border-radius:3px; background:var(--acc,var(--orange)); }

/* tigOS styles.css, part 09: projects. The parts in this folder are concatenated in name order by build.py, so they share one scope. */
/* ---------- PROJECTS ---------- */
.proj-list { display:grid; gap:12px; }
.pcard { display:grid; grid-template-columns:120px 1fr auto; gap:16px; align-items:center; text-align:left; width:100%; padding:12px; }
.pcard .thumb { width:120px; height:84px; border-radius:10px; overflow:hidden; background:rgba(255,255,255,.06); border:1px solid var(--line); display:grid; place-items:center; }
.pcard .thumb img { width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .5s var(--ease); }
.pcard:hover .thumb img { transform:scale(1.05); }
.pcard .num { font-size:calc(11px * var(--ts)); letter-spacing:.12em; font-weight:700; color:var(--acc); text-transform:uppercase; }
.pcard .h3 { margin:2px 0 3px; font-size:calc(16.5px * var(--ts)); }
.pcard .tag { font-size:calc(12.5px * var(--ts)); color:var(--muted); }
.pcard .arrow { justify-self:end; color:var(--faint); font-size:calc(18px * var(--ts)); transition:transform .2s; }
.pcard:hover .arrow { transform:translateX(4px); color:var(--ink); }
.pdetail .back { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-weight:600; font-size:calc(13px * var(--ts)); padding:6px 10px 6px 6px; border-radius:8px; margin:-6px 0 14px -6px; }
.pdetail .back:hover { background:rgba(255,255,255,.08); color:var(--ink); }
.pdetail .back svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.gallery { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:10px; margin:18px 0 6px; }
.gallery figure { margin:0; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:rgba(255,255,255,.04); cursor:zoom-in; position:relative; aspect-ratio:4/3; }
.gallery img { width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .5s var(--ease); display:block; }
.gallery figure:hover img { transform:scale(1.04); }
.gallery figcaption { position:absolute; left:0; right:0; bottom:0; padding:18px 10px 8px; font-size:calc(11.5px * var(--ts)); color:#fff; background:linear-gradient(transparent, rgba(0,0,0,.72)); }
.oer { display:grid; gap:14px; margin-top:18px; }
.oer .card b { display:block; color:var(--acc); font-size:calc(11px * var(--ts)); letter-spacing:.14em; text-transform:uppercase; margin-bottom:6px; }
.oer .card p { color:var(--body); line-height:1.6; }
.pnav { display:flex; justify-content:space-between; gap:10px; margin-top:20px; }
.pnav button { flex:1; text-align:left; padding:12px 14px; }
.pnav button:last-child { text-align:right; }
.pnav small { display:block; font-size:calc(11px * var(--ts)); color:var(--faint); text-transform:uppercase; letter-spacing:.1em; margin-bottom:2px; }

/* tigOS styles.css, part 10: experience. The parts in this folder are concatenated in name order by build.py, so they share one scope. */
/* ---------- EXPERIENCE ---------- */
.tl { position:relative; padding-left:26px; display:grid; gap:14px; }
.tl::before { content:""; position:absolute; left:8px; top:8px; bottom:8px; width:2px; background:linear-gradient(var(--orange),var(--blue),var(--pink),#ff6b6b,var(--teal)); border-radius:2px; opacity:.6; }
.job { position:relative; }
.job::before { content:""; position:absolute; left:-23px; top:18px; width:12px; height:12px; border-radius:50%; background:var(--acc); box-shadow:0 0 0 4px rgba(0,0,0,.6), 0 0 0 6px color-mix(in srgb, var(--acc) 35%, transparent); }
.job .row { display:flex; justify-content:space-between; gap:12px; align-items:baseline; flex-wrap:wrap; }
.job .co { font-weight:800; font-size:calc(16px * var(--ts)); letter-spacing:-.02em; }
.job .co em { font-style:normal; color:var(--acc); }
.job .when { font-size:calc(12.5px * var(--ts)); color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.job .role { color:var(--muted); font-weight:600; font-size:calc(13.5px * var(--ts)); margin:2px 0 10px; }
.job ul { margin:0; padding:0 0 0 0; list-style:none; display:grid; gap:8px; }
.job li { position:relative; padding-left:16px; color:var(--body); line-height:1.55; font-size:calc(13.5px * var(--ts)); }
.job li::before { content:""; position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:2px; background:var(--acc); }
.job .now { display:inline-flex; align-items:center; gap:6px; font-size:calc(11px * var(--ts)); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--green); }
.job .now i { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(40,200,64,.2); animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow:0 0 0 6px rgba(40,200,64,.08); } }
.job.collapsed ul { display:none; }
.job .more { margin-top:8px; font-size:calc(12.5px * var(--ts)); color:var(--muted); font-weight:600; padding:4px 0; }
.job .more:hover { color:var(--ink); }

/* tigOS styles.css, part 11: resume. The parts in this folder are concatenated in name order by build.py, so they share one scope. */
/* ---------- RESUME ---------- */
.res-wrap { display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:20px; align-items:start; }
.res-paper { border-radius:12px; overflow:hidden; border:1px solid var(--line2); background:#fff; box-shadow:0 30px 60px rgba(0,0,0,.5); aspect-ratio:8.5/11; position:relative; cursor:zoom-in; }
.res-paper .zoom-hint { position:absolute; right:10px; bottom:10px; padding:5px 9px; border-radius:8px; background:rgba(0,0,0,.6); color:#fff; font-size:calc(11px * var(--ts)); font-weight:600; opacity:0; transition:opacity .2s; }
.res-paper:hover .zoom-hint { opacity:1; }
.res-paper img, .res-paper embed, .res-paper iframe { width:100%; height:100%; display:block; border:0; }
.res-side { display:grid; gap:10px; position:sticky; top:0; }
.res-side .btn { width:100%; justify-content:center; }
.res-side .card p { font-size:calc(13px * var(--ts)); color:var(--muted); line-height:1.5; }
.res-fact { display:flex; justify-content:space-between; font-size:calc(13px * var(--ts)); padding:8px 0; border-bottom:1px solid var(--line); }
.res-fact:last-child { border-bottom:0; }
.res-fact span { color:var(--faint); }
.res-fact b { font-weight:600; text-align:right; }

/* tigOS styles.css, part 12: skills. The parts in this folder are concatenated in name order by build.py, so they share one scope. */
/* ---------- SKILLS ---------- */
.skill-group { margin-top:18px; }
.skill-group .h3 { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.skill-group .h3 i { width:10px; height:10px; border-radius:3px; background:var(--acc); }
.skill { padding:9px 13px; border-radius:11px; border:1px solid var(--line); background:rgba(255,255,255,.04); font-weight:600; font-size:calc(13px * var(--ts)); transition:transform .2s var(--spring), border-color .2s, background .2s; cursor:default; }
.skill:hover { transform:translateY(-2px); border-color:var(--acc); background:color-mix(in srgb, var(--acc) 12%, transparent); }
.skills-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:8px; }
.proof { margin-top:22px; }
.proof .card { display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; }
.proof .k { font-size:calc(22px * var(--ts)); font-weight:800; letter-spacing:-.04em; color:var(--acc); min-width:72px; }
.proof p { color:var(--muted); font-size:calc(13.5px * var(--ts)); }

/* tigOS styles.css, part 13: contact. The parts in this folder are concatenated in name order by build.py, so they share one scope. */
/* ---------- CONTACT ---------- */
.contact-grid { display:grid; grid-template-columns:1fr; gap:10px; margin-top:18px; }
.crow { display:flex; align-items:center; gap:14px; padding:14px 16px; text-align:left; width:100%; }
.crow .ico { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:color-mix(in srgb, var(--acc) 18%, transparent); color:var(--acc); flex:0 0 auto; }
.crow .ico svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.crow b { display:block; font-size:calc(12px * var(--ts)); color:var(--faint); text-transform:uppercase; letter-spacing:.1em; font-weight:700; }
.crow span { display:block; font-weight:600; font-size:calc(14px * var(--ts)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.crow > span:nth-child(2) { min-width:0; flex:1; }
.contact-grid > * { min-width:0; }
.crow small { margin-left:auto; color:var(--faint); font-size:calc(11.5px * var(--ts)); white-space:nowrap; }
.crow:hover small { color:var(--ink); }

/* tigOS styles.css, part 14: terminal. The parts in this folder are concatenated in name order by build.py, so they share one scope. */
/* ---------- TERMINAL ---------- */
.term { background:rgba(6,6,9,.9); color:#d9f7e8; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:calc(13px * var(--ts)); line-height:1.55; padding:16px 18px; min-height:100%; }
.term .line { white-space:pre-wrap; word-break:break-word; }
.term .p { color:var(--teal); }
.term .dim { color:rgba(217,247,232,.5); }
.term .o { color:var(--amber); }
.term input { width:100%; background:transparent; border:0; outline:0; color:inherit; font:inherit; caret-color:var(--teal); }
.term .in { display:flex; gap:8px; }
.term .in .p { white-space:nowrap; flex:0 0 auto; }

/* tigOS styles.css, part 15: spotlight. The parts in this folder are concatenated in name order by build.py, so they share one scope. */
/* ---------- SPOTLIGHT ---------- */
.spotlight { position:absolute; inset:0; z-index:80; display:grid; place-items:start center; padding-top:12vh; background:rgba(0,0,0,.35); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); animation:fade .18s ease both; }
.spotlight[hidden] { display:none; }
@keyframes fade { from { opacity:0; } }
.spot-box { width:min(640px, 92vw); border-radius:16px; background:var(--glass2); border:1px solid var(--line2); box-shadow:0 40px 100px rgba(0,0,0,.6); overflow:hidden; animation:pop .2s var(--spring) both; }
.spot-row { display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); }
.spot-row svg { width:20px; height:20px; fill:none; stroke:var(--muted); stroke-width:2; stroke-linecap:round; }
.spot-row input { flex:1; background:transparent; border:0; outline:0; color:var(--ink); font:inherit; font-size:18px; }
.spot-results { max-height:52vh; overflow:auto; padding:6px; }
.spot-results button { display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:12px; width:100%; text-align:left; padding:9px 10px; border-radius:10px; }
.spot-results button:hover, .spot-results button.sel { background:rgba(255,255,255,.1); }
.spot-results .sm { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; }
.spot-results .sm.face svg { width:30px; height:30px; fill:#000; stroke:none; stroke-width:0; filter:none; }   /* a pet hit shows the pet itself, drawn with its own fills */
.spot-results .sm svg { width:18px; height:18px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.spot-results b { display:block; font-size:14px; font-weight:600; }
.spot-results span { display:block; font-size:12px; color:var(--muted); }
.spot-results em { font-style:normal; color:var(--faint); font-size:11px; text-transform:uppercase; letter-spacing:.1em; }
.spot-empty { padding:22px; text-align:center; color:var(--faint); font-size:13px; }

/* tigOS styles.css, part 16: lightbox. The parts in this folder are concatenated in name order by build.py, so they share one scope. */
/* ---------- LIGHTBOX ---------- */
.lightbox { position:absolute; inset:0; z-index:85; display:grid; place-items:center; background:rgba(0,0,0,.78); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); animation:fade .2s ease both; cursor:zoom-out; }
.lightbox[hidden] { display:none; }
.lightbox figure { margin:0; max-width:min(1100px, 92vw); max-height:88vh; display:grid; gap:10px; justify-items:center; animation:pop .25s var(--spring) both; }
.lightbox img { max-width:92vw; max-height:80vh; object-fit:contain; border-radius:12px; box-shadow:0 40px 100px rgba(0,0,0,.7); background:#fff; }
.lightbox figcaption { color:var(--muted); font-size:13px; }
.lb-close { position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.1); display:grid; place-items:center; }
.lb-close svg { width:18px; height:18px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; }

/* tigOS styles.css, part 17: dock. The parts in this folder are concatenated in name order by build.py, so they share one scope. */
/* ---------- DOCK ---------- */
.dock { position:absolute; left:50%; bottom:calc(12px + var(--lift, 0px)); transform:translateX(-50%); z-index:70; display:flex; align-items:flex-end; gap:6px; padding:8px 10px; border-radius:22px; background:rgba(20,20,28,.55); border:1px solid var(--line2); backdrop-filter:blur(30px) saturate(160%); -webkit-backdrop-filter:blur(30px) saturate(160%); box-shadow:0 20px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12); }
.dock .sep { width:1px; height:40px; background:var(--line2); margin:0 4px 6px; align-self:center; }
.dk { position:relative; width:52px; height:52px; display:grid; place-items:center; transition:transform .22s var(--spring); transform-origin:bottom center; }
.dk .tile { width:46px; height:46px; border-radius:13px; }
.dk .tile svg { width:23px; height:23px; }
.dk:hover { transform:translateY(-10px) scale(1.16); }
.dk:hover + .dk, .dk:has(+ .dk:hover) { transform:translateY(-4px) scale(1.06); }
.dk .dot { position:absolute; bottom:-5px; left:50%; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:rgba(255,255,255,.8); opacity:0; transition:opacity .2s; }
.dk.open .dot { opacity:1; }
.dk .tip { position:absolute; bottom:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(4px); padding:5px 10px; border-radius:8px; background:rgba(30,30,40,.92); border:1px solid var(--line2); font-size:12px; font-weight:600; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s, transform .15s; }
.dk:hover .tip { opacity:1; transform:translateX(-50%) translateY(0); }
.dk.bounce { animation:bounce .5s var(--spring); }
.dk.tmp { animation:dkIn .32s var(--spring) both; } .dk.tmp.gone { animation:dkOut .24s ease both; pointer-events:none; }
@keyframes dkIn { from { width:0; opacity:0; transform:scale(.3); } to { width:calc(52px * var(--dk, 1)); opacity:1; transform:none; } }
@keyframes dkOut { from { width:calc(52px * var(--dk, 1)); opacity:1; } to { width:0; opacity:0; transform:scale(.3); } }
.dock .sep.tmpsep { animation:fade .3s ease both; }
@keyframes bounce { 40% { transform:translateY(-22px); } }

/* tigOS styles.css, part 18: toast. The parts in this folder are concatenated in name order by build.py, so they share one scope. */
/* ---------- TOAST ---------- */
.toast { position:absolute; left:50%; top:44px; --tx:-50%; z-index:95; min-width:240px; max-width:320px; padding:12px 14px; border-radius:14px; background:var(--glass2); border:1px solid var(--line2); box-shadow:0 20px 50px rgba(0,0,0,.5); transform:translate(-50%,-140%); opacity:0; transition:transform .45s var(--spring), opacity .3s; pointer-events:none; text-align:center; }
.toast.show { transform:translate(-50%,0); opacity:1; }
.toast b { display:flex; justify-content:center; align-items:center; gap:6px; font-size:13px; }
.toast b #toastIco svg { width:15px; height:15px; fill:none; stroke:var(--amber); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; display:block; }
.toast b #toastIco[hidden] { display:none; }
.toast span { display:block; font-size:12px; color:var(--muted); }

/* tigOS styles.css, part 19: tour. The parts in this folder are concatenated in name order by build.py, so they share one scope. */
/* ---------- TOUR ---------- */
.tigos.touring #windows { visibility:hidden; pointer-events:none; }
.tigos.touring.has-windows .home { opacity:1; transform:none; }
.tigos.touring .pet { pointer-events:none; }
.tour-tip { position:absolute; z-index:96; max-width:260px; padding:12px 14px; border-radius:14px; background:var(--glass2); border:1px solid var(--line2); box-shadow:0 20px 50px rgba(0,0,0,.5); font-size:13px; animation:pop .25s var(--spring) both; }
.tour-tip b { display:block; margin-bottom:4px; }
.tour-tip .row { display:flex; gap:8px; justify-content:flex-end; margin-top:10px; }
.tour-tip button { padding:5px 10px; border-radius:8px; font-size:12px; font-weight:600; background:rgba(255,255,255,.08); }
.tour-tip button.go { background:var(--orange); color:#111; }

/* tigOS styles.css, part 20: weather popover. The parts in this folder are concatenated in name order by build.py, so they share one scope. */
/* ---------- weather popover ---------- */
.mb-wx { cursor:default; border-radius:7px; transition:background .15s; }
.mb-wx:hover, .mb-wx.on { background:rgba(255,255,255,.1); }
.wx-pop { position:absolute; top:40px; z-index:70; width:230px; padding:10px 12px 8px; border-radius:14px; background:var(--glass2); border:1px solid var(--line2); box-shadow:0 24px 60px rgba(0,0,0,.55); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); animation:pop .18s var(--spring) both; }
.wx-pop[hidden] { display:none; }
.wx-h { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding-bottom:8px; border-bottom:1px solid var(--line); }
.wx-h b { font-weight:700; }
.wx-h span { margin-left:auto; font-weight:600; letter-spacing:0; text-transform:none; color:var(--faint); }
.wx-h svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2; }
.wx-day { display:grid; grid-template-columns:44px 22px 1fr auto; align-items:center; gap:10px; padding:7px 0; font-size:13px; }
.wx-day + .wx-day { border-top:1px solid var(--line); }
.wx-day b { font-weight:600; }
.wx-day svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.wx-day .k { color:var(--muted); font-size:12px; }
.wx-day .t { font-variant-numeric:tabular-nums; } .wx-day .t i { font-style:normal; color:var(--faint); margin-left:6px; }
.wx-city { display:flex; align-items:center; gap:6px; width:100%; margin-top:6px; padding:8px 6px 4px; border-top:1px solid var(--line); font-size:12px; font-weight:600; color:var(--muted); border-radius:0 0 8px 8px; }
.wx-city svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2; }
.wx-city em { margin-left:auto; font-style:normal; color:var(--amber); font-weight:600; }
.wx-city:hover { color:var(--ink); }
.wx-day.sun svg, .wx-day.partly svg { color:var(--amber); } .wx-day.rain svg, .wx-day.storm svg { color:var(--blue); } .wx-day.snow svg { color:#e6f4ff; } .wx-day.cloud svg, .wx-day.fog svg { color:rgba(244,241,234,.7); }

/* tigOS styles.css, part 21: easter eggs. The parts in this folder are concatenated in name order by build.py, so they share one scope. */
/* ---------- easter eggs ---------- */
.egg { position:absolute; inset:0; z-index:110; display:grid; place-items:center; background:rgba(4,4,8,.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); animation:fade .3s ease both; cursor:pointer; overflow:hidden; }
.egg[hidden] { display:none; }
.egg-card { position:relative; z-index:2; display:grid; justify-items:center; gap:14px; text-align:center; animation:eggIn .6s var(--spring) both; }
.egg::after { content:""; position:absolute; left:0; bottom:0; height:3px; width:100%; background:currentColor; transform-origin:left; animation:eggTimer 5s linear forwards; opacity:.5; }
.egg.love { color:#ff4d8d; } .egg.tux { color:#e95420; }
@keyframes eggTimer { from { transform:scaleX(1); } to { transform:scaleX(0); } }
.egg-sub { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; color:var(--muted); } .egg-sub b { color:var(--teal); font-weight:600; }
.love-word { font-size:clamp(48px,9vw,120px); font-weight:800; letter-spacing:-.05em; line-height:1; background:linear-gradient(90deg,#ff9fd0,#ff4d8d,#ff7ab6); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 10px 40px rgba(255,77,141,.45)); animation:beat 1.1s ease-in-out infinite; }
@keyframes beat { 0%,100% { transform:scale(1); } 14% { transform:scale(1.08); } 28% { transform:scale(1); } 42% { transform:scale(1.06); } }
@keyframes eggIn { from { opacity:0; transform:scale(.6) translateY(30px); } to { opacity:1; transform:none; } }
.hearts { position:absolute; inset:0; pointer-events:none; }
.hearts i { position:absolute; bottom:-40px; width:22px; height:22px; color:#ff4d8d; animation:floatUp linear infinite; opacity:0; }
.hearts i svg { width:100%; height:100%; fill:currentColor; stroke:none; filter:drop-shadow(0 0 10px rgba(255,77,141,.6)); }
@keyframes floatUp { 0% { transform:translateY(0) rotate(-8deg) scale(.6); opacity:0; } 10% { opacity:.95; } 100% { transform:translateY(-110vh) rotate(12deg) scale(1.15); opacity:0; } }
.tux-svg { width:clamp(160px,30vmin,260px); height:auto; filter:drop-shadow(0 30px 60px rgba(0,0,0,.6)); animation:waddle 1.6s ease-in-out infinite; }
@keyframes waddle { 0%,100% { transform:rotate(-3deg) translateY(0); } 50% { transform:rotate(3deg) translateY(-6px); } }
.u-ariel { --ink:#ffe6f3; --muted:rgba(255,214,235,.72); --faint:rgba(255,214,235,.45); --orange:#ff5fa8; --amber:#ffa3d1; --teal:#d08cff; --blue:#c58bff; --pink:#ff5fa8; --violet:#b06cff; --red:#ff5f57; --green:#ff8fc8; --line:rgba(255,120,200,.16); --line2:rgba(255,120,200,.28); --glass:rgba(34,14,34,.7); --glass2:rgba(40,16,40,.86); }
.u-ariel .wall .orb-a { background:radial-gradient(circle, rgba(255,77,141,.5), rgba(255,77,141,0) 60%); }
.u-ariel .wall .orb-b { background:radial-gradient(circle, rgba(176,108,255,.45), rgba(176,108,255,0) 60%); }
.u-ariel .wall .orb-c { background:radial-gradient(circle, rgba(255,159,208,.3), rgba(255,159,208,0) 60%); }
.u-ariel .wall { background:radial-gradient(1200px 700px at 20% 0%, rgba(255,77,141,.34), transparent 60%), radial-gradient(1000px 700px at 90% 100%, rgba(255,120,190,.3), transparent 60%), #1e0814; }
/* Ariel's desktop: the hearts keep floating up behind the windows, slow and soft */
.wall-hearts { display:none; z-index:1; }
.u-ariel .wall-hearts { display:block; }
.wall-hearts i { color:rgba(255,120,190,.55); }
.wall-hearts i svg { filter:drop-shadow(0 0 12px rgba(255,77,141,.45)); }
.rm .wall-hearts i { animation:none; opacity:0; }
.u-ariel .tile { background:linear-gradient(145deg,#ff9fd0,#ff4d8d) !important; }   /* just pink */
.u-ariel .tile svg { stroke:#fff !important; fill:rgba(255,255,255,.22); filter:none; }
.u-ariel .home h1 em { background:linear-gradient(90deg,#ff5fa8,#ffa3d1,#c58bff); -webkit-background-clip:text; background-clip:text; }
.u-ariel .home h1, .u-ariel .h3, .u-ariel .win-title, .u-ariel .crow b, .u-ariel .eyebrow { color:#ffd0ea; }
.u-ariel .home .lead, .u-ariel p, .u-ariel .sub { color:rgba(255,214,235,.8); }
.u-ariel .menubar, .u-ariel .dock { background:rgba(40,12,36,.6); border-color:rgba(255,120,200,.22); }
.u-ariel .term { color:#ffb3dc; background:rgba(28,6,24,.94); } .u-ariel .term .p { color:#ff7bbf; } .u-ariel .term .o { color:#e0a8ff; } .u-ariel .term .ok { color:#ff9fd0; }
.u-ariel .menu button:hover { background:#ff5fa8; color:#fff; }
.u-ariel .mb-app, .u-ariel .mb-clock { color:#ffd0ea; }
.u-ariel .lights .m { background:#ff9fd0; } .u-ariel .lights .z { background:#c58bff; }
.u-greggyd { --ink:#f2f2f2; --muted:rgba(242,242,242,.7); --faint:rgba(242,242,242,.42); --orange:#e95420; --amber:#f5a623; --teal:#77216f; --blue:#5e2750; --pink:#e95420; --violet:#77216f; --glass:rgba(44,0,30,.86); --glass2:rgba(50,4,36,.95); --line:rgba(255,255,255,.1); --line2:rgba(255,255,255,.18); --r:6px; --r2:6px; font-family:Ubuntu,"DejaVu Sans","Noto Sans",Cantarell,system-ui,sans-serif; }
.u-greggyd .wall { background:radial-gradient(1200px 800px at 30% 10%, #a34a76 0%, transparent 55%), radial-gradient(1000px 900px at 85% 90%, #e95420 0%, transparent 50%), linear-gradient(160deg,#77216f,#2c001e 60%,#1a0012); }
.u-greggyd .wall .orb { display:none; }
/* Ubuntu: the circle of friends sits low on the wallpaper like the stock desktop, the panel is Yaru dark, Ubuntu orange is the accent */
.u-greggyd .wall::after { content:""; position:absolute; right:4vw; bottom:6vh; width:clamp(120px,16vw,220px); height:clamp(120px,16vw,220px); opacity:.16; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='34' fill='none' stroke='%23fff' stroke-width='11' stroke-dasharray='53 18.2' transform='rotate(-30 50 50)'/%3E%3Ccircle cx='50' cy='11' r='9.5' fill='%23fff'/%3E%3Ccircle cx='16.2' cy='69.5' r='9.5' fill='%23fff'/%3E%3Ccircle cx='83.8' cy='69.5' r='9.5' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat; pointer-events:none; }
.u-greggyd .dk.xtra .tile, .u-ariel .dk.xtra .tile { box-shadow:none; }
.u-greggyd .dk.open .dot { background:#e95420; }
.u-greggyd .win-body, .u-greggyd .card { color:#f2f2f2; }
.u-greggyd .seg button.on, .u-greggyd .pt-btn.live, .u-greggyd .pet-chip.on { background:#e95420; color:#fff; }
.u-greggyd .menubar { height:28px; background:#1d1d1d; border-bottom:1px solid #000; backdrop-filter:none; -webkit-backdrop-filter:none; font-family:inherit; }
.u-greggyd .desktop { inset:28px 0 0 0; }
.u-greggyd .mb-app::before { content:"Activities"; margin-right:14px; font-weight:500; color:#eee; }
.u-greggyd .mb-clock { font-weight:500; }
.u-greggyd .win { border-radius:8px 8px 0 0; background:#2b2b2b; backdrop-filter:none; -webkit-backdrop-filter:none; border:1px solid #111; box-shadow:0 12px 40px rgba(0,0,0,.6); color:#f2f2f2; }
.u-greggyd .win-bar { height:38px; background:linear-gradient(#3c3b37,#2f2e2b); border-bottom:1px solid #1a1a1a; flex-direction:row-reverse; }
.u-greggyd .lights { gap:8px; }
.u-greggyd .lights button { width:18px; height:18px; border-radius:50%; border:0; background:#3a3a3a; }
.u-greggyd .lights button::after { opacity:1; color:#ddd; }
.u-greggyd .lights .c { background:#e95420; order:3; } .u-greggyd .lights .c::after { color:#fff; }
.u-greggyd .lights .m { order:1; } .u-greggyd .lights .z { order:2; }
.u-greggyd .win-title { font-weight:700; color:#dfdbd2; }
.u-greggyd .card { background:#353535; border-color:#222; border-radius:6px; }
.u-greggyd .home h1 em { background:linear-gradient(90deg,#e95420,#f5a623); -webkit-background-clip:text; background-clip:text; }
.u-greggyd .dock { left:0; right:auto; top:28px; bottom:0; transform:none; flex-direction:column; align-items:center; justify-content:flex-start; gap:10px; padding:10px 6px; border-radius:0; background:rgba(0,0,0,.72); border:0; border-right:1px solid rgba(255,255,255,.08); backdrop-filter:none; -webkit-backdrop-filter:none; }
.u-greggyd .dk { transform-origin:left center; }
.u-greggyd .dk:hover { transform:scale(1.08); } .u-greggyd .dk:hover + .dk, .u-greggyd .dk:has(+ .dk:hover) { transform:none; }
.u-greggyd .dk .tile { border-radius:10px; box-shadow:none; }
.u-greggyd .dk .tip { display:none; }
.u-greggyd .dk .dot { left:-6px; top:50%; bottom:auto; transform:translateY(-50%); width:3px; height:18px; border-radius:2px; background:#e95420; }
.u-greggyd .dock .sep { display:none; }
.u-greggyd .home { left:clamp(90px,10vw,140px); }
.u-greggyd .term { background:#300a24; color:#f2f2f2; font-family:"Ubuntu Mono",ui-monospace,Menlo,monospace; font-size:14px; }
.u-greggyd .term .p { color:#8ae234; font-weight:700; } .u-greggyd .term .o { color:#729fcf; } .u-greggyd .term .ok { color:#8ae234; } .u-greggyd .term .err { color:#ef2929; }
.u-greggyd .tile.terminal { background:#300a24 !important; }
.u-greggyd .menu { border-radius:6px; background:#2b2b2b; backdrop-filter:none; -webkit-backdrop-filter:none; }
.u-greggyd .menu button:hover { background:#e95420; color:#fff; }
.u-greggyd .toast { border-radius:6px; background:#2b2b2b; }

.term .err { color:var(--red); }
.term .ok { color:var(--green); }
.term .art { color:var(--blue); line-height:1.15; }
.term .art.tig { color:var(--orange); }
.term .art.logo .tig { color:var(--orange); } .term .art.logo .word { color:var(--accent, var(--orange)); opacity:.95; }
.term .line.wx { white-space:pre; } .term .wx-g { font-size:1.15em; }

/* tigOS styles.css, part 22: login screen. The parts in this folder are concatenated in name order by build.py, so they share one scope. */
/* ---------- login screen (macOS-style) ---------- */
.login { position:absolute; inset:0; z-index:118; display:grid; place-items:center; align-content:center; gap:22px; animation:fade .5s ease both; overflow:hidden; }
.login[hidden] { display:none; }
.login-bg { position:absolute; inset:-12%; background:linear-gradient(160deg,#2a1240 0%,#3b1a3f 35%,#1a1f4a 70%,#0f1a3a 100%); overflow:hidden; }
.login-bg i { position:absolute; border-radius:50%; filter:blur(70px); opacity:.95; will-change:transform; animation:lgDrift var(--d,40s) ease-in-out infinite alternate; }
.login-bg .l1 { width:70vmax; height:70vmax; left:-15vmax; top:-25vmax; background:radial-gradient(circle, rgba(255,140,60,.85), rgba(255,140,60,0) 62%); --d:44s; }
.login-bg .l2 { width:64vmax; height:64vmax; right:-20vmax; bottom:-24vmax; background:radial-gradient(circle, rgba(130,90,255,.9), rgba(130,90,255,0) 62%); --d:52s; animation-delay:-18s; }
.login-bg .l3 { width:52vmax; height:52vmax; left:30%; top:20%; background:radial-gradient(circle, rgba(255,80,150,.6), rgba(255,80,150,0) 62%); --d:38s; animation-delay:-30s; }
.login-bg .l4 { width:46vmax; height:46vmax; left:55%; top:-10%; background:radial-gradient(circle, rgba(90,200,255,.5), rgba(90,200,255,0) 62%); --d:60s; animation-delay:-9s; }
@keyframes lgDrift { from { transform:translate(0,0) scale(1); } 50% { transform:translate(6vw,-4vh) scale(1.08); } to { transform:translate(-5vw,5vh) scale(.96); } }
.login-bg::after { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 55%, rgba(0,0,0,0) 30%, rgba(0,0,0,.35) 100%); }
/* login -> desktop transition */
.login.leaving { animation:loginOut .9s var(--ease) forwards; pointer-events:none; }
.login.leaving .lu { animation:luOut .6s var(--ease) forwards; }
.login.leaving .login-clock, .login.leaving .login-hint, .login.leaving .login-pw { animation:fadeOut .35s ease forwards; }
@keyframes loginOut { 0% { opacity:1; transform:scale(1); } 55% { opacity:1; } 100% { opacity:0; transform:scale(1.06); } }
@keyframes luOut { 0% { transform:scale(1); opacity:1; } 35% { transform:scale(1.12); opacity:1; } 100% { transform:scale(.5) translateY(-40px); opacity:0; } }
@keyframes fadeOut { to { opacity:0; } }
.tigos.entering .menubar { animation:enterDown .7s var(--ease) .25s both; }
.tigos.entering .dock { animation:enterUp .7s var(--spring) .35s both; }
.tigos.entering .home { animation:enterHome .8s var(--ease) .45s both; }
.tigos.entering .wall { animation:enterWall 1.2s var(--ease) both; }
@keyframes enterDown { from { opacity:0; transform:translateY(-100%); } to { opacity:1; transform:none; } }
@keyframes enterUp { from { opacity:0; transform:translate(-50%, 60px) scale(.9); } to { opacity:1; transform:translate(-50%, 0) scale(1); } }
@keyframes enterHome { from { opacity:0; transform:translateY(18px); filter:blur(8px); } to { opacity:1; transform:none; filter:blur(0); } }
@keyframes enterWall { from { transform:scale(1.08); filter:brightness(1.6) saturate(1.3); } to { transform:none; filter:none; } }
.dock-left.entering .dock, .dock-right.entering .dock { animation:none; }
.login-clock { position:absolute; top:clamp(28px,7vh,72px); left:0; right:0; text-align:center; font-size:clamp(48px,8vw,96px); font-weight:200; letter-spacing:-.04em; color:rgba(255,255,255,.85); font-variant-numeric:tabular-nums; line-height:1; pointer-events:none; }
.login-clock small { display:block; font-size:clamp(14px,1.6vw,18px); font-weight:600; letter-spacing:.02em; color:rgba(255,255,255,.7); margin-bottom:6px; }
.login-users { position:relative; display:flex; gap:clamp(22px,5vw,56px); align-items:flex-start; justify-content:center; flex-wrap:wrap; }
.lu { display:grid; justify-items:center; gap:12px; transition:transform .3s var(--spring), opacity .3s; }
.lu.dim { opacity:.45; transform:scale(.92); }
.lu .av { width:clamp(96px,12vw,128px); height:clamp(96px,12vw,128px); border-radius:50%; overflow:hidden; display:grid; place-items:center; box-shadow:0 20px 50px rgba(0,0,0,.5), 0 0 0 3px rgba(255,255,255,.14); transition:transform .3s var(--spring), box-shadow .3s; font-size:clamp(30px,4vw,44px); font-weight:800; color:#fff; letter-spacing:-.04em; }
.lu .av img { width:100%; height:100%; object-fit:cover; }
.lu .av.a-ariel { background:linear-gradient(145deg,#ff9fd0,#ff4d8d); }
.lu .av.a-greggyd { background:linear-gradient(145deg,#f7a21b,#e95420 60%,#300a24); }
.lu .av .av-tux { width:66%; height:auto; display:block; filter:drop-shadow(0 6px 14px rgba(0,0,0,.4)); }
.lu .av.a-ariel svg { width:52%; height:52%; fill:#fff; stroke:none; filter:drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
.lu:hover .av, .lu.sel .av { transform:scale(1.06); box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 0 4px rgba(255,255,255,.35); }
.lu b { font-size:17px; font-weight:600; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.6); }
.lu small { display:block; font-size:11px; color:rgba(255,255,255,.55); font-weight:500; margin-top:2px; }
.login-pw { position:relative; display:flex; gap:6px; width:min(260px, 80vw); }
.login-pw[hidden] { display:none; }
.login-pw input { flex:1; height:34px; border-radius:99px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.14); color:#fff; padding:0 14px; font:inherit; font-size:14px; outline:0; text-align:center; letter-spacing:.2em; }
.login-pw input::placeholder { letter-spacing:0; color:rgba(255,255,255,.6); }
.login-pw button { width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.2); color:#fff; display:grid; place-items:center; }
.login-pw button svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.login-pw.shake { animation:shake .4s ease; }
@keyframes shake { 0%,100% { transform:translateX(0); } 20%,60% { transform:translateX(-10px); } 40%,80% { transform:translateX(10px); } }
.login-hint { position:relative; min-height:16px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:rgba(255,255,255,.55); }

/* tigOS styles.css, part 23: ladybugs. The parts in this folder are concatenated in name order by build.py, so they share one scope. */
/* ---------- ladybugs ---------- */
.bugs { position:absolute; inset:0; z-index:115; pointer-events:none; overflow:hidden; }
.bug { position:absolute; left:-90px; width:56px; height:56px; animation:bugRun var(--dur, 3s) cubic-bezier(.3,.1,.7,.9) forwards; will-change:transform; }
.bug.rtl { left:auto; right:-90px; animation-name:bugRunR; }
.bug svg { width:56px; height:56px; overflow:visible; animation:bugWobble .22s ease-in-out infinite alternate; filter:drop-shadow(0 4px 6px rgba(0,0,0,.35)); }
.bug .leg { stroke:#1a1a1a; stroke-width:2.2; stroke-linecap:round; fill:none; transform-origin:center; animation:legs .12s ease-in-out infinite alternate; }
.bug .leg.b { animation-delay:-.06s; }
@keyframes bugRun { to { transform:translateX(calc(100vw + 200px)); } }
@keyframes bugRunR { to { transform:translateX(calc(-100vw - 200px)); } }
@keyframes bugWobble { from { transform:rotate(-4deg) translateY(0); } to { transform:rotate(4deg) translateY(-2px); } }
@keyframes legs { from { transform:rotate(-14deg); } to { transform:rotate(14deg); } }

/* tigOS styles.css, part 24: settings. The parts in this folder are concatenated in name order by build.py, so they share one scope. */
/* ---------- settings ---------- */
.set-row { display:grid; grid-template-columns:150px 1fr; gap:10px 18px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); }
.set-row:last-child { border-bottom:0; }
.set-row .lbl b { display:block; font-weight:700; font-size:calc(14px * var(--ts)); }
.set-row .lbl span { display:block; color:var(--faint); font-size:calc(12px * var(--ts)); margin-top:2px; }
.seg { display:inline-flex; gap:2px; padding:3px; border-radius:11px; background:rgba(127,127,127,.12); border:1px solid var(--line); flex-wrap:wrap; }
.seg button { padding:6px 12px; border-radius:8px; font-size:calc(13px * var(--ts)); font-weight:600; color:var(--muted); transition:background .15s, color .15s; }
.seg button:hover { color:var(--ink); }
.seg button.on { background:var(--accent, var(--orange)); color:#111; }
.seg button.sw { width:26px; height:26px; padding:0; border-radius:50%; box-shadow:inset 0 0 0 2px rgba(0,0,0,.2); }
.seg button.sw.on { box-shadow:0 0 0 2px var(--ink), inset 0 0 0 2px rgba(0,0,0,.2); }
.set-foot { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:18px; color:var(--faint); font-size:calc(12px * var(--ts)); }
.set-foot button { padding:7px 12px; border-radius:9px; border:1px solid var(--line2); font-weight:600; font-size:calc(13px * var(--ts)); color:var(--muted); }
.set-foot button:hover { color:var(--ink); border-color:var(--ink); }

/* accent hooks */
.tigos { --accent:var(--orange); }
.menu button:hover { background:var(--accent) !important; }
.dk.open .dot { background:var(--accent); }
.home h1 em { background:linear-gradient(90deg,var(--accent),var(--amber),var(--teal),var(--violet)); -webkit-background-clip:text; background-clip:text; }
.acc-orange { --acc:var(--accent) !important; }

/* text size: --ts is 1 everywhere except inside window bodies, where it follows the Text size setting */
.tigos { --ts:1; }
.win-body { --ts:var(--tscale, 1); font-size:calc(15.5px * var(--ts)); }

/* tigOS styles.css, part 25: journey. The parts in this folder are concatenated in name order by build.py, so they share one scope. */
/* ---------- Journey ---------- */
.jr { display:grid; grid-template-columns:minmax(0,1fr) 300px; height:100%; min-height:100%; }
.win[data-app="journey"] .win-body { overflow:hidden; }
.jr-map { position:relative; overflow:hidden; background:radial-gradient(120% 90% at 50% 40%, rgba(120,110,255,.10), transparent 60%), linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.25)); }
.jr-cv { position:absolute; inset:0; display:block; }
.jr-top { position:absolute; left:22px; top:18px; pointer-events:none; padding:6px 10px 8px; margin:-6px -10px; border-radius:12px; background:radial-gradient(closest-side, rgba(10,10,16,.8), rgba(10,10,16,0)); }
.jr-top .eyebrow { color:var(--muted); text-shadow:0 1px 8px rgba(0,0,0,.8); }
.jr-top .eyebrow { margin-bottom:4px; }
.jr-h { font-size:calc(19px * var(--ts)); font-weight:800; letter-spacing:-.02em; text-shadow:0 2px 14px rgba(0,0,0,.5); }
.jr-replay { position:absolute; right:14px; bottom:12px; display:inline-flex; align-items:center; gap:6px; padding:6px 11px 6px 9px; border-radius:99px; background:rgba(20,20,28,.55); border:1px solid var(--line2); color:var(--muted); font-size:calc(12px * var(--ts)); font-weight:600; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); transition:color .2s, border-color .2s, transform .25s var(--spring); }
.jr-replay svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.jr-replay:hover { color:var(--ink); border-color:rgba(255,255,255,.35); transform:scale(1.04); }
.jr-pins { position:absolute; inset:0; pointer-events:none; }
.jr-pin { position:absolute; width:0; height:0; pointer-events:auto; cursor:pointer; }
.jr-pin.l span { left:auto; right:12px; }
.jr-pin.l.on span { transform:translateX(-3px); }
.jr-pin i { position:absolute; left:-7px; top:-7px; width:14px; height:14px; border-radius:50%; background:var(--acc); border:2.5px solid #fff; box-shadow:0 2px 10px rgba(0,0,0,.45), 0 0 0 0 var(--acc); transition:transform .25s var(--spring); }
.jr-pin b { position:absolute; left:-14px; top:-14px; width:28px; height:28px; border-radius:50%; border:2px solid var(--acc); opacity:0; }
.jr-pin span em { font-style:normal; font-weight:700; color:var(--muted); margin-left:2px; font-size:10px; }
.jr-pin span { position:absolute; left:12px; top:-11px; white-space:nowrap; font-size:12px; font-weight:700; letter-spacing:.01em; color:var(--ink); text-shadow:0 1px 8px rgba(0,0,0,.7); padding:2px 7px; border-radius:99px; background:rgba(15,15,22,.6); border:1px solid var(--line); opacity:.85; transition:opacity .2s, transform .25s var(--spring); }
.jr-pin:hover i, .jr-pin.on i { transform:scale(1.25); }
.jr-pin.on span { opacity:1; transform:translateX(3px); border-color:var(--acc); }
.jr-pin.on b { animation:jrPulse 1.8s ease-out infinite; }
@keyframes jrPulse { 0% { transform:scale(.5); opacity:.9; } 100% { transform:scale(1.9); opacity:0; } }
.jr-pin.hid { opacity:0; pointer-events:none; }
.jr-pin.drop i { animation:jrDrop .55s var(--spring) both; }
.jr-pin.drop span { animation:jrLabel .5s var(--ease) .2s both; }
@keyframes jrDrop { 0% { transform:translateY(-26px) scale(.4); opacity:0; } 60% { transform:translateY(2px) scale(1.2); opacity:1; } 100% { transform:none; } }
@keyframes jrLabel { from { opacity:0; transform:translateX(-6px); } to { opacity:.85; transform:none; } }
.jr-side { display:flex; flex-direction:column; gap:12px; padding:16px 16px 18px 14px; border-left:1px solid var(--line); overflow:auto; background:rgba(0,0,0,.14); }
.jr-stops { display:grid; gap:4px; }
.jr-stop { display:flex; align-items:center; gap:10px; padding:6px 9px; border-radius:11px; border:1px solid transparent; text-align:left; color:var(--ink); transition:background .2s, border-color .2s, transform .2s var(--spring); }
.jr-stop i { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:10.5px; font-weight:800; font-style:normal; background:color-mix(in srgb, var(--acc) 22%, transparent); color:var(--acc); flex:none; }
.jr-stop span { display:flex; flex-direction:column; min-width:0; }
.jr-stop b { font-size:calc(13px * var(--ts)); font-weight:700; line-height:1.2; }
.jr-stop small { font-size:calc(11px * var(--ts)); color:var(--muted); line-height:1.3; }
.jr-stop:hover { background:rgba(255,255,255,.05); }
.jr-stop.on { background:color-mix(in srgb, var(--acc) 14%, transparent); border-color:color-mix(in srgb, var(--acc) 45%, transparent); }
.jr-stop.on i { background:var(--acc); color:#111; }
.jr-card { border-color:color-mix(in srgb, var(--acc) 35%, var(--line)); animation:jrCard .45s var(--ease) both; }
.jr-yrs { color:var(--faint); font-weight:600; letter-spacing:.04em; text-transform:none; }
.jr-where { display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:calc(12px * var(--ts)); font-weight:700; color:var(--acc); text-transform:uppercase; letter-spacing:.1em; margin-bottom:8px; }
.jr-dot { width:8px; height:8px; border-radius:50%; background:var(--acc); box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 25%, transparent); }
.jr-card .h3 { font-size:calc(16.5px * var(--ts)); line-height:1.25; }
.jr-org { color:var(--muted); font-size:calc(12.5px * var(--ts)); margin-bottom:8px; }
.jr-org span { color:var(--faint); }
.jr-card .sub { font-size:calc(13.5px * var(--ts)); }
.jr-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.jr-more { margin-top:12px; }
@keyframes jrCard { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.light .jr-map { background:radial-gradient(120% 90% at 50% 40%, rgba(120,110,255,.10), transparent 60%), linear-gradient(180deg, rgba(255,255,255,0), rgba(0,0,0,.05)); }
.light .jr-pin span { background:rgba(255,255,255,.85); text-shadow:none; color:#1a1a2e; }
.light .jr-h { text-shadow:none; }
.light .jr-replay { background:rgba(255,255,255,.7); }
.light .jr-side { background:rgba(0,0,0,.025); }
.rm .jr-pin.on b { animation:none; opacity:.5; }

/* dock size */
.dock { --dk:1.25; }
.dk { width:calc(52px * var(--dk)); height:calc(52px * var(--dk)); }
.dk .tile { width:calc(46px * var(--dk)); height:calc(46px * var(--dk)); border-radius:calc(13px * var(--dk)); }
.dk .tile svg { width:calc(23px * var(--dk)); height:calc(23px * var(--dk)); }
.dock-sm .dock { --dk:1.02; } .dock-lg .dock { --dk:1.45; }

/* dock position */
.dock-left .dock, .dock-right .dock { left:12px; right:auto; top:50%; bottom:auto; transform:translateY(-50%); flex-direction:column; align-items:center; }
.dock-right .dock { left:auto; right:12px; }
.dock-left .dk, .dock-right .dk { transform-origin:center; }
.dock-left .dk:hover, .dock-right .dk:hover { transform:scale(1.14); }
.dock-left .dk:hover + .dk, .dock-left .dk:has(+ .dk:hover), .dock-right .dk:hover + .dk, .dock-right .dk:has(+ .dk:hover) { transform:scale(1.05); }
.dock-left .dock .sep, .dock-right .dock .sep { width:40px; height:1px; margin:4px 0 4px; }
.dock-left .dk .dot, .dock-right .dk .dot { bottom:auto; top:50%; margin-left:0; transform:translateY(-50%); }
.dock-left .dk .dot { left:-7px; } .dock-right .dk .dot { left:auto; right:-7px; }
.dock-left .dk .tip, .dock-right .dk .tip { bottom:auto; top:50%; transform:translateY(-50%) translateX(0); }
.dock-left .dk .tip { left:calc(100% + 14px); } .dock-right .dk .tip { left:auto; right:calc(100% + 14px); }
.dock-left .home { left:clamp(90px,8vw,120px); }

/* dock auto-hide */
.dock-hide .dock { transform:translate(-50%, calc(100% + 6px)); transition:transform .3s var(--ease); }
.dock-hide .dock:focus-within, .dock-hide.dock-peek .dock { transform:translate(-50%, 0); }
.dock-hide.dock-left .dock { transform:translate(calc(-100% - 6px), -50%); } .dock-hide.dock-left .dock:focus-within, .dock-hide.dock-left.dock-peek .dock { transform:translate(0, -50%); }
.dock-hide.dock-right .dock { transform:translate(calc(100% + 6px), -50%); } .dock-hide.dock-right .dock:focus-within, .dock-hide.dock-right.dock-peek .dock { transform:translate(0, -50%); }

/* reduce motion (user setting) */
.rm *, .rm *::before, .rm *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
.rm .wall .orb { animation:none; }

/* tigOS styles.css, part 26: terminal cursor. The parts in this folder are concatenated in name order by build.py, so they share one scope. */
/* ---------- terminal cursor (block by default, desktop setting) ---------- */
.term input { caret-color:transparent; }
.tinw { position:relative; flex:1; min-width:0; display:flex; }
.term .ghost { position:absolute; left:0; top:0; white-space:pre; pointer-events:none; font:inherit; }
.term .gv { visibility:hidden; }
.tcur { display:inline-block; width:.62em; height:1.16em; position:relative; vertical-align:-.24em; }
.tcur::after { content:""; position:absolute; background:var(--teal); animation:tblink 1.06s steps(1) infinite; }
.cur-block .tcur::after { inset:0; opacity:.8; border-radius:1px; }
.cur-line .tcur::after { left:0; top:.06em; bottom:.06em; width:2px; }
.cur-underline .tcur::after { left:0; right:0; bottom:1px; height:2px; }
@keyframes tblink { 50% { opacity:0; } }
.term:not(:focus-within) .tcur::after { animation:none; opacity:.3; }
.u-ariel .tcur::after { background:#ff7bbf; } .u-greggyd .tcur::after { background:#8ae234; }

/* tigOS styles.css, part 27: menubar calendar. The parts in this folder are concatenated in name order by build.py, so they share one scope. */
/* ---------- menubar calendar ---------- */
.menu.cal { min-width:236px; padding:10px 12px 12px; }
.cal-h { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin:0 2px 8px; }
.cal-h b { font-size:13.5px; font-weight:700; letter-spacing:-.01em; }
.cal-h span { font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cal-grid i { font-style:normal; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); text-align:center; padding-bottom:3px; }
.cal-grid span { width:27px; height:27px; margin:0 auto; display:grid; place-items:center; font-size:12px; font-weight:600; color:var(--muted); border-radius:50%; font-variant-numeric:tabular-nums; }
.cal-grid span.blank { visibility:hidden; }
.cal-grid span.we { color:var(--faint); }
.cal-grid span.now { background:var(--accent); color:#141014; font-weight:800; }

/* tigOS styles.css, part 28: desktop pets. The parts in this folder are concatenated in name order by build.py, so they share one scope. */
/* ---------- desktop pets (terminal: pet <name>) ---------- */
.pets { position:absolute; inset:0; z-index:60; pointer-events:none; overflow:hidden; }
.pet { position:absolute; --pw:calc(112px * var(--petq, 1)); width:var(--pw); height:var(--pw); pointer-events:auto; cursor:grab; touch-action:none; animation:petIn .55s var(--spring) both; will-change:left, top; }
.pet.walk { transition:left var(--wd, 2s) linear; }
.pet .body { position:absolute; inset:0; animation:petBob 2.6s ease-in-out infinite; transform-origin:50% 96%; }
.pet .art { position:absolute; inset:0; transform:scaleX(var(--face, 1)); transform-origin:50% 50%; }
/* 3D: the .art holds a canvas the shared renderer paints into; the SVG underneath stays as the fallback until the first frame lands.
   Facing is a real turn of the model, so the mirror flip is dropped once the canvas is live */
.pet .art canvas { position:absolute; inset:0; width:100%; height:100%; display:none; }
.pet.gl .art canvas { display:block; }
.pet.gl .art svg { display:none; }
.pet.gl .art { transform:none; }
.pet.gl .shadow { left:22%; right:22%; bottom:6%; }
.pet.gl.abduct.beamed .art { transform:translateY(-92%) scale(.4) rotate(14deg); }
.pet.gl.abduct.returned .art { transform:none; }
.pet.gl.doomed .art { transform:scale(.86); }
.pet svg { width:100%; height:100%; overflow:visible; display:block; }
.pet svg * { transform-box:fill-box; }
.pet svg .abs { transform-box:view-box; transform-origin:0 0; }   /* parts positioned with an SVG rotate(a cx cy) attribute keep their own pivot */
.pet[data-pet="cow"] .tail { transform-origin:0% 0%; }             /* the cow's tail hangs from the rump, so it swings from the top */
.pet .shadow { position:absolute; left:18%; right:18%; bottom:1%; height:7%; border-radius:50%; background:rgba(0,0,0,.36); filter:blur(4px); animation:petShade 2.6s ease-in-out infinite; }
.pet .pname { position:absolute; left:50%; bottom:calc(100% - 2px); transform:translate(-50%,6px); padding:3px 9px; border-radius:99px; background:var(--glass2); border:1px solid var(--line2); font-size:11px; font-weight:700; letter-spacing:.02em; color:var(--ink); white-space:nowrap; opacity:0; transition:opacity .18s, transform .18s; pointer-events:none; }
.pet:hover .pname, .pet.drag .pname, .pet.happy .pname { opacity:1; transform:translate(-50%,0); }
/* parts */
.pet .head { transform-origin:50% 92%; }
.pet .lids { transform-origin:50% 0%; transform:scaleY(0); animation:petBlink 4.6s steps(1) infinite; }
.pet .tail { transform-origin:0% 100%; animation:petTail 1.3s ease-in-out infinite alternate; }
.pet .earL, .pet .earR { transform-origin:50% 100%; animation:petEar 4.2s ease-in-out infinite; } .pet .earR { animation-delay:-2.1s; }
.pet .legA, .pet .legB { transform-origin:50% 0%; }
.pet .flipL { transform-origin:100% 0%; animation:petFlip 1.7s ease-in-out infinite alternate; } .pet .flipR { transform-origin:0% 0%; animation:petFlip 1.7s ease-in-out infinite alternate-reverse; }
.pet .wingL { transform-origin:100% 0%; } .pet .wingR { transform-origin:0% 0%; }
.pet .tongue { transform-origin:50% 0%; }
.pet .zz { position:absolute; right:-6%; top:-4%; font-weight:800; color:var(--ink); opacity:0; pointer-events:none; }
.pet .zz i { position:absolute; right:0; font-style:normal; font-size:calc(var(--pw) * .16); opacity:0; text-shadow:0 1px 0 rgba(0,0,0,.4); }
.pet .zz i:nth-child(2) { font-size:calc(var(--pw) * .2); } .pet .zz i:nth-child(3) { font-size:calc(var(--pw) * .25); }
.pet .hearts { position:absolute; inset:0; pointer-events:none; }
.pet .hearts i { position:absolute; left:50%; top:10%; font-style:normal; font-size:calc(var(--pw) * .18); color:#ff5d8f; opacity:0; }
.pet .hearts i:nth-child(2) { left:28%; } .pet .hearts i:nth-child(3) { left:70%; }
/* behaviours */
.pet.walk .legA { animation:petStep .34s ease-in-out infinite alternate; } .pet.walk .legB { animation:petStep .34s ease-in-out infinite alternate-reverse; }
.pet.walk .body { animation:petWaddle .34s ease-in-out infinite alternate; }
.pet.hop .body { animation:petHop .6s var(--spring) both; }
.pet.look .head { animation:petLook 1.7s ease-in-out both; }
.pet.nap .lids { transform:scaleY(1); animation:none; }
.pet.nap .body { animation:petBreathe 3.2s ease-in-out infinite; }
.pet.nap .tail, .pet.nap .earL, .pet.nap .earR, .pet.nap .flipL, .pet.nap .flipR, .pet.nap .legA, .pet.nap .legB, .pet.nap .ant, .pet.nap .jets .jet { animation:none; }
.pet.nap { transition:none; }
.pet.nap .head { animation:petNapHead 3.2s ease-in-out infinite; transform-origin:50% 92%; }
.pet.nap .shadow { animation:none; transform:scale(1.04); }
.pet.nap .zz { opacity:1; }
.pet.nap .zz i { animation:zzFloat 2.4s ease-in-out infinite; } .pet.nap .zz i:nth-child(2) { animation-delay:.8s; } .pet.nap .zz i:nth-child(3) { animation-delay:1.6s; }
.pet.happy .hearts i { animation:heartUp 1.3s ease-out both; } .pet.happy .hearts i:nth-child(2) { animation-delay:.12s; } .pet.happy .hearts i:nth-child(3) { animation-delay:.24s; }
.pet.happy .body { animation:petWiggle .5s ease-in-out 2; }
.pet.trick[data-pet="cat"] .tail { animation:petTailFast .28s ease-in-out infinite alternate; } .pet.trick[data-pet="cat"] .body { animation:petStretch 1.8s ease-in-out both; }
.pet.trick[data-pet="dog"] .tail { animation:petTailFast .22s ease-in-out infinite alternate; } .pet.trick[data-pet="dog"] .tongue { animation:petPant .3s ease-in-out infinite alternate; } .pet.trick[data-pet="dog"] .body { animation:petHop .6s var(--spring) 2; }
.pet.trick[data-pet="cow"] .head { animation:petChew .45s ease-in-out 4 alternate; } .pet.trick[data-pet="cow"] .tail { animation:petTailFast .3s ease-in-out infinite alternate; }
.pet.trick[data-pet="penguin"] .flipL, .pet.trick[data-pet="penguin"] .flipR { animation:petFlapFast .22s ease-in-out infinite alternate; } .pet.trick[data-pet="penguin"] .body { animation:petWiggle .45s ease-in-out 4; }
.pet.trick[data-pet="ladybug"] .wingL { animation:wingL 1.8s ease-in-out both; } .pet.trick[data-pet="ladybug"] .wingR { animation:wingR 1.8s ease-in-out both; } .pet.trick[data-pet="ladybug"] .body { animation:petHover 1.8s ease-in-out both; }
/* sit, scratch, talk */
.pet.sit .body { animation:petSit 3s ease-in-out both; }
.pet.sit .tail { animation:petTail 2.6s ease-in-out infinite alternate; }
.pet.scratch .head { animation:petScratchHead .35s ease-in-out 4 alternate; }
.pet.scratch .legA { animation:petScratchLeg .17s ease-in-out 8 alternate; }
.pet.scratch .earL { animation:petEarFlick .35s ease-in-out 4 alternate; }
.pet .say { position:absolute; left:64%; bottom:calc(100% - 8px); max-width:180px; padding:6px 10px; border-radius:14px 14px 14px 4px; background:var(--glass2, rgba(20,20,28,.9)); border:1px solid var(--line2); color:var(--ink); font-size:12px; font-weight:700; white-space:nowrap; opacity:0; transform:translateY(6px) scale(.9); transform-origin:0 100%; transition:opacity .2s, transform .25s var(--spring); pointer-events:none; }
.pet.talk .say { opacity:1; transform:none; }
.pet.talk .pname { opacity:0; }
.pet[data-pet="aki"] .say { font-family:ui-monospace, Menlo, monospace; font-size:11px; letter-spacing:.02em; color:#5ff2ff; border-color:rgba(95,242,255,.35); }
/* Aki the robot: hovers, glows, blinks its antenna, panel eyes track when looking */
.pet[data-pet="aki"] .body { animation:petHoverBob 2.4s ease-in-out infinite; }
.pet[data-pet="aki"] .shadow { animation:petShadeHover 2.4s ease-in-out infinite; left:24%; right:24%; }
.pet[data-pet="aki"] .glow { filter:drop-shadow(0 0 3px #5ff2ff) drop-shadow(0 0 8px rgba(95,242,255,.55)); }
.pet[data-pet="aki"] .bulb { filter:drop-shadow(0 0 3px #a78bfa) drop-shadow(0 0 8px rgba(167,139,250,.7)); animation:petBulb 1.6s ease-in-out infinite alternate; }
.pet[data-pet="aki"] .core { animation:petCore 2.2s ease-in-out infinite alternate; transform-origin:50% 50%; }
.pet[data-pet="aki"] .jets .jet { animation:petJet .28s ease-in-out infinite alternate; transform-origin:50% 0%; }
.pet[data-pet="aki"] .jets .jet:nth-child(3) { animation-delay:-.14s; }
.pet[data-pet="aki"] .eyesHappy { opacity:0; }
.pet[data-pet="aki"].happy .eyesHappy, .pet[data-pet="aki"].trick .eyesHappy, .pet[data-pet="aki"].talk .eyesHappy { opacity:1; }
.pet[data-pet="aki"].happy .eyes, .pet[data-pet="aki"].trick .eyes, .pet[data-pet="aki"].talk .eyes { opacity:0; }
.pet[data-pet="aki"] .eyes { transition:opacity .15s; } .pet[data-pet="aki"] .eyesHappy { transition:opacity .15s; }
.pet[data-pet="aki"] .lids { animation-duration:6s; }
.pet[data-pet="aki"].walk .legA, .pet[data-pet="aki"].walk .legB { animation:none; }
.pet[data-pet="aki"].walk .body { animation:petGlide .34s ease-in-out infinite alternate; }
.pet[data-pet="aki"].walk .jets .jet { animation-duration:.14s; }
.pet[data-pet="aki"].trick .body { animation:petSpin 1.7s var(--ease) both; }
.pet[data-pet="aki"].trick .armL, .pet[data-pet="aki"].trick .armR { animation:petArmsUp 1.7s var(--ease) both; }
.pet[data-pet="aki"] .armL { transform-origin:50% 12%; } .pet[data-pet="aki"] .armR { transform-origin:50% 12%; }
.pet[data-pet="aki"].nap .glow, .pet[data-pet="aki"].nap .bulb, .pet[data-pet="aki"].nap .core { filter:none; animation:none; opacity:.35; }
.pet[data-pet="aki"].nap .body { animation:petPowerSave 4s ease-in-out infinite; }
.pet[data-pet="aki"].nap .jets { opacity:0; }
.pet[data-pet="aki"].nap .head { animation:none; }
.pet[data-pet="aki"].scratch .head { animation:petScan .5s ease-in-out 3 alternate; }
.pet[data-pet="aki"].scratch .legA { animation:none; }
/* dog: ears perk when looking, wag hard when happy; cat: tail curl when sitting; penguin: flippers slap when happy */
.pet[data-pet="dog"].look .earL, .pet[data-pet="dog"].look .earR { animation:petPerk 1.7s ease-in-out both; }
.pet[data-pet="dog"].happy .tail, .pet[data-pet="dog"].say .tail { animation:petTailFast .18s ease-in-out infinite alternate; }
.pet[data-pet="dog"].say .tongue, .pet[data-pet="dog"].happy .tongue { animation:petPant .25s ease-in-out infinite alternate; }
.pet[data-pet="cat"].sit .tail { animation:petTailCurl 3s ease-in-out both; }
.pet[data-pet="penguin"].happy .flipL, .pet[data-pet="penguin"].happy .flipR { animation:petFlapFast .2s ease-in-out infinite alternate; }
.pet[data-pet="cow"].say .head { animation:petMooHead 1.9s ease-in-out both; }
.pet[data-pet="ladybug"].sit .wingL { animation:wingL 3s ease-in-out both; } .pet[data-pet="ladybug"].sit .wingR { animation:wingR 3s ease-in-out both; }
/* the UFO (cow only) */
.ufo { position:absolute; z-index:3; pointer-events:none; opacity:0; transform:translateY(-140px) scale(.6); transition:opacity .5s, transform .9s var(--spring); }
.ufo svg { width:100%; height:auto; display:block; overflow:visible; }
.ufo .art { display:block; position:relative; }
.ufo .art canvas { position:absolute; inset:0; width:100%; height:100%; display:none; }
.ufo.gl .art { aspect-ratio:1.15; }
.ufo.gl .art canvas { display:block; -webkit-mask-image:linear-gradient(#000 70%, transparent 100%); mask-image:linear-gradient(#000 70%, transparent 100%); }   /* the beam fades out toward the ground instead of ending on the canvas edge */
.ufo.gl .art svg { visibility:hidden; }
.ufo .ufo-ship { animation:ufoHover 1.6s ease-in-out infinite alternate; transform-origin:50% 40%; }
.ufo .ufo-lights circle { fill:#ff5d8f; animation:ufoLights 1s steps(1) infinite; }
.ufo .ufo-lights circle:nth-child(2) { animation-delay:.2s; } .ufo .ufo-lights circle:nth-child(3) { animation-delay:.4s; } .ufo .ufo-lights circle:nth-child(4) { animation-delay:.6s; } .ufo .ufo-lights circle:nth-child(5) { animation-delay:.8s; }
.ufo .ufo-beam { opacity:0; transform:scaleY(0); transform-origin:50% 0; transition:opacity .25s, transform .35s var(--ease); }
.ufo.arrive { opacity:1; transform:translateY(0) scale(1); }
.ufo.beam .ufo-beam { opacity:1; transform:scaleY(1); animation:ufoBeamFlicker .12s steps(2) infinite; }
.ufo.leave { opacity:0; transform:translate(160px, -220px) scale(.3) rotate(8deg); transition:opacity .7s .15s, transform .9s cubic-bezier(.5,-.2,.9,.4); }
.pet.abduct { transition:none; }
.pet.abduct .body { animation:petBob 2.6s ease-in-out infinite; }
.pet.abduct .shadow { transition:opacity .4s; }
.pet.abduct .art { transition:transform 1.1s var(--ease), filter .8s, opacity .6s .5s; }
.pet.abduct.beamed .art { transform:scaleX(var(--face, 1)) translateY(-92%) scale(.4) rotate(14deg); filter:brightness(1.9) saturate(.3) hue-rotate(70deg); opacity:0; transition:transform 1.2s var(--ease), filter .9s, opacity .35s .9s; }
.pet.flee { transition:left var(--wd) ease-in-out, top var(--wd) ease-in-out; }
.pet.abduct.beamed .shadow { opacity:0; }
.pet.abduct.beamed .legA, .pet.abduct.beamed .legB { animation:petDangleLeg .3s ease-in-out infinite alternate; }
.pet.abduct.returned .art { transition:transform .7s cubic-bezier(.3,.9,.4,1.3), filter .4s, opacity .3s; transform:scaleX(var(--face, 1)); filter:none; opacity:1; }
.pet.abduct.returned .shadow { opacity:1; }
/* drag, bin, poof */
.pet.drag { cursor:grabbing; z-index:2; transition:none; }
.pet.drag .body { animation:petDangle .55s ease-in-out infinite alternate; }
.pet.drag .legA, .pet.drag .legB { animation:petDangleLeg .55s ease-in-out infinite alternate; } .pet.drag .legB { animation-delay:-.27s; }
.pet.drag .shadow { opacity:.15; transform:scale(.7); }
.pet.drop .body { animation:petLand .55s var(--spring) both; }
.pet.doomed .art { transform:scaleX(var(--face, 1)) scale(.86); filter:saturate(.6); transition:transform .2s, filter .2s; }
.pet.poof { animation:petPoof .45s ease-in both; pointer-events:none; }
.pet-bin { position:absolute; right:18px; bottom:calc(18px + var(--lift, 0px)); z-index:66; width:60px; height:60px; border-radius:50%; display:grid; place-items:center; background:rgba(18,18,26,.78); border:2px dashed rgba(255,255,255,.4); color:rgba(255,255,255,.8); opacity:0; transform:scale(.5); transition:opacity .22s, transform .22s var(--spring), background .15s, border-color .15s; pointer-events:none; }
.pet-bin svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; }
.pet-bin span { position:absolute; right:0; bottom:100%; margin-bottom:8px; white-space:nowrap; font-size:11.5px; font-weight:700; color:var(--ink); background:var(--glass2); border:1px solid var(--line2); padding:4px 9px; border-radius:99px; opacity:0; transform:translateY(4px); transition:opacity .15s, transform .15s; }
.tigos.pet-dragging .pet-bin { opacity:1; transform:scale(1); }
.pet-bin.hot { background:var(--red); border-color:#fff; border-style:solid; color:#fff; transform:scale(1.18); }
.pet-bin.hot span { opacity:1; transform:none; }
.pet-ctl { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pet-more { padding:6px 12px; border-radius:8px; border:1px solid var(--line2); font-weight:600; font-size:calc(13px * var(--ts)); color:var(--muted); transition:background .15s, color .15s; }
.pet-more:hover { color:var(--ink); border-color:var(--ink); }
/* the Settings picker: a chip per pet with a live mini inside */
.set-group { padding-top:10px; }
.pet-pick { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:8px; }
.pet-chip { position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 4px 7px; border-radius:12px; border:1px solid var(--line); background:rgba(127,127,127,.1); color:var(--muted); transition:background .15s, border-color .15s, color .15s, transform .15s; cursor:pointer; }
.pet-chip:hover { color:var(--ink); border-color:var(--line2); transform:translateY(-1px); }
.pet-chip.on { border-color:var(--accent, var(--orange)); background:rgba(255,138,0,.1); color:var(--ink); box-shadow:0 0 0 1px var(--accent, var(--orange)) inset; }
.pet-chip b { font-size:calc(12.5px * var(--ts)); font-weight:700; line-height:1.1; }
.pet-chip small { font-size:calc(10.5px * var(--ts)); color:var(--faint); line-height:1; }
.pet-chip-art { position:relative; width:52px; height:52px; display:grid; place-items:center; }
.pet-chip-art .pet { --pw:52px; position:relative; pointer-events:none; cursor:default; animation:none; will-change:auto; }
.pet-chip-art .pet .body { animation:none; }
.pet-chip.none .pet-chip-art svg { width:22px; height:22px; opacity:.7; }
.pet-chip.none.on .pet-chip-art svg { opacity:1; }
@media (max-width:760px) { .pet-pick { grid-template-columns:repeat(3, minmax(0, 1fr)); } .pet-chip-art { width:44px; height:44px; } .pet-chip-art .pet { --pw:44px; } }
.pet-off { padding:6px 12px; border-radius:8px; border:1px solid var(--line2); font-weight:600; font-size:calc(13px * var(--ts)); color:var(--muted); transition:background .15s, color .15s; }
.pet-off:hover { background:var(--red); color:#fff; border-color:transparent; }
/* keyframes */
@keyframes petIn { 0% { opacity:0; transform:translateY(16px) scale(.5); } 60% { transform:translateY(0) scale(1.08); } 100% { opacity:1; transform:none; } }
@keyframes petBob { 0%,100% { transform:translateY(0) scale(1,1); } 50% { transform:translateY(-3%) scale(.995,1.015); } }
@keyframes petBreathe { 0%,100% { transform:scale(1,1); } 50% { transform:scale(1.03,.97); } }
@keyframes petShade { 0%,100% { transform:scale(1); opacity:.36; } 50% { transform:scale(.93); opacity:.28; } }
@keyframes petTail { from { transform:rotate(-10deg); } to { transform:rotate(14deg); } }
@keyframes petTailFast { from { transform:rotate(-22deg); } to { transform:rotate(26deg); } }
@keyframes petEar { 0%,86%,100% { transform:rotate(0); } 90% { transform:rotate(-12deg); } 95% { transform:rotate(6deg); } }
@keyframes petBlink { 0%,93%,100% { transform:scaleY(0); } 95% { transform:scaleY(1); } }
@keyframes petFlip { from { transform:rotate(-6deg); } to { transform:rotate(12deg); } }
@keyframes petFlapFast { from { transform:rotate(-22deg); } to { transform:rotate(30deg); } }
@keyframes petStep { from { transform:rotate(-14deg) translateY(-3%); } to { transform:rotate(14deg) translateY(0); } }
@keyframes petWaddle { from { transform:rotate(-3deg) translateY(0); } to { transform:rotate(3deg) translateY(-2%); } }
@keyframes petHop { 0% { transform:translateY(0) scale(1,1); } 20% { transform:translateY(2%) scale(1.06,.92); } 55% { transform:translateY(-30%) scale(.96,1.06); } 80% { transform:translateY(0) scale(1.05,.94); } 100% { transform:none; } }
@keyframes petLook { 0%,100% { transform:rotate(0); } 25% { transform:rotate(-9deg); } 65% { transform:rotate(8deg); } }
@keyframes petStretch { 0%,100% { transform:scale(1,1); } 40% { transform:scale(1.12,.9) translateY(4%); } 70% { transform:scale(.96,1.06) translateY(-2%); } }
@keyframes petChew { from { transform:translateY(0) rotate(0); } to { transform:translateY(3%) rotate(-3deg); } }
@keyframes petPant { from { transform:scaleY(.7); } to { transform:scaleY(1.15); } }
@keyframes petWiggle { 0%,100% { transform:rotate(0); } 25% { transform:rotate(-6deg); } 75% { transform:rotate(6deg); } }
@keyframes wingL { 0%,100% { transform:rotate(0); } 30%,70% { transform:rotate(-34deg) translateY(-6%); } }
@keyframes wingR { 0%,100% { transform:rotate(0); } 30%,70% { transform:rotate(34deg) translateY(-6%); } }
@keyframes petHover { 0%,100% { transform:translateY(0); } 30%,70% { transform:translateY(-16%); } }
@keyframes petDangle { from { transform:rotate(-6deg) scale(1.05); } to { transform:rotate(6deg) scale(1.05); } }
@keyframes petDangleLeg { from { transform:rotate(-10deg) translateY(4%); } to { transform:rotate(10deg) translateY(4%); } }
@keyframes petLand { 0% { transform:translateY(-8%) scaleY(1.06); } 45% { transform:translateY(0) scale(1.12,.86); } 100% { transform:none; } }
@keyframes petPoof { 0% { transform:scale(1) rotate(0); opacity:1; } 100% { transform:scale(0) rotate(25deg); opacity:0; } }
@keyframes zzFloat { 0% { opacity:0; transform:translate(0,0) scale(.6); } 30% { opacity:1; } 100% { opacity:0; transform:translate(40%,-160%) scale(1.1); } }
@keyframes petNapHead { 0%,100% { transform:rotate(0) translateY(0); } 50% { transform:rotate(-4deg) translateY(2%); } }
@keyframes petSit { 0% { transform:scale(1,1); } 15%,85% { transform:scale(1.06,.92) translateY(3%); } 100% { transform:none; } }
@keyframes petScratchHead { from { transform:rotate(-7deg) translateY(1%); } to { transform:rotate(-11deg) translateY(2%); } }
@keyframes petScratchLeg { from { transform:rotate(-22deg) translate(-4%,-30%); } to { transform:rotate(-30deg) translate(-4%,-38%); } }
@keyframes petEarFlick { from { transform:rotate(-6deg); } to { transform:rotate(-16deg); } }
@keyframes petPerk { 0%,100% { transform:rotate(0) translateY(0); } 20%,80% { transform:rotate(0) translateY(-6%) scaleY(1.08); } }
@keyframes petTailCurl { 0%,100% { transform:rotate(0); } 40%,70% { transform:rotate(-38deg) scale(1.05); } }
@keyframes petMooHead { 0%,100% { transform:rotate(0); } 25% { transform:rotate(-8deg) translateY(-3%); } 60% { transform:rotate(-6deg) translateY(-2%); } }
@keyframes petHoverBob { 0%,100% { transform:translateY(-4%); } 50% { transform:translateY(-9%); } }
@keyframes petShadeHover { 0%,100% { transform:scale(.9); opacity:.3; } 50% { transform:scale(.78); opacity:.2; } }
@keyframes petGlide { from { transform:translateY(-5%) rotate(-2deg); } to { transform:translateY(-8%) rotate(2deg); } }
@keyframes petBulb { from { opacity:.55; transform:scale(.9); } to { opacity:1; transform:scale(1.15); } }
@keyframes petCore { from { opacity:.75; transform:scale(.94); } to { opacity:1; transform:scale(1.08); } }
@keyframes petJet { from { transform:scaleY(.6); opacity:.5; } to { transform:scaleY(1.3); opacity:1; } }
@keyframes petSpin { 0% { transform:translateY(-4%) rotateY(0); } 50% { transform:translateY(-22%) rotateY(180deg); } 100% { transform:translateY(-4%) rotateY(360deg); } }
@keyframes petArmsUp { 0%,100% { transform:rotate(0); } 30%,70% { transform:rotate(-150deg); } }
@keyframes petPowerSave { 0%,100% { transform:translateY(2%); } 50% { transform:translateY(0); } }
@keyframes petScan { from { transform:rotate(-10deg); } to { transform:rotate(10deg); } }
@keyframes ufoHover { from { transform:translateY(0) rotate(-1.5deg); } to { transform:translateY(-6%) rotate(1.5deg); } }
@keyframes ufoLights { 0% { fill:#ff5d8f; } 20% { fill:#ffd23f; } 40% { fill:#5ff2ff; } 60% { fill:#8fffb0; } 80% { fill:#a78bfa; } }
@keyframes ufoBeamFlicker { from { opacity:.75; } to { opacity:1; } }
@keyframes heartUp { 0% { opacity:0; transform:translate(-50%,0) scale(.5); } 25% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-140%) scale(1.15); } }
.pet-sm .pet { --petq:.74; } .pet-lg .pet { --petq:1.36; }
.rm .pet .body, .rm .pet .shadow, .rm .pet .tail, .rm .pet .earL, .rm .pet .earR, .rm .pet .lids, .rm .pet .legA, .rm .pet .legB, .rm .pet .flipL, .rm .pet .flipR, .rm .pet .jets .jet, .rm .pet .bulb, .rm .pet .core, .rm .ufo .ufo-ship { animation:none; }

/* tigOS styles.css, part 29: light appearance. The parts in this folder are concatenated in name order by build.py, so they share one scope. */
/* ---------- light appearance ---------- */
.light { --body:rgba(23,23,28,.84); --bg:#f2f0ea; --bg2:#ffffff; --ink:#17171c; --muted:rgba(23,23,28,.66); --faint:rgba(23,23,28,.42); --line:rgba(0,0,0,.08); --line2:rgba(0,0,0,.14); --glass:rgba(255,255,255,.74); --glass2:rgba(255,255,255,.94); --amber:#d98a00; --teal:#0f9d7a; --blue:#2b7fd8; --violet:#7c4dff; }
.light .wall { background:radial-gradient(1200px 700px at 20% 0%, rgba(255,160,60,.35), transparent 60%), radial-gradient(1000px 700px at 90% 100%, rgba(150,120,255,.35), transparent 60%), #ece9f1; }
.light .wall .orb { opacity:.45; }
.light .menubar { background:rgba(255,255,255,.62); border-bottom-color:rgba(0,0,0,.08); color:var(--ink); }
.light .mb-right, .light .mb-app, .light .mb-clock, .light .mb-wx { color:var(--ink); }
.light .mb-logo:hover, .light .mb-logo.on, .light .mb-icon:hover, .light .mb-loc:hover, .light .mb-loc.on, .light .mb-wx:hover, .light .mb-wx.on, .light .mb-clock.on { background:rgba(0,0,0,.07); }
.light .dock { background:rgba(255,255,255,.6); border-color:rgba(0,0,0,.1); box-shadow:0 20px 50px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.8); }
.light .dk .tip { background:rgba(255,255,255,.96); color:var(--ink); border-color:rgba(0,0,0,.1); }
.light .dk .dot { background:rgba(0,0,0,.6); }
.light .win { box-shadow:0 30px 80px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.06); }
.light .win-bar { background:rgba(0,0,0,.03); }
.light .win-close-m { background:rgba(0,0,0,.07); }
.light .card { background:rgba(0,0,0,.03); } .light .card.hover:hover { background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.2); }
.light .stat b { background:linear-gradient(90deg,color-mix(in srgb, var(--acc, var(--accent)) 66%, #14141a),#2a2a30); -webkit-background-clip:text; background-clip:text; }
/* light mode: accent-coloured text needs darkening or it washes out on white (teal and amber especially) */
.light .pcard .num, .light .oer .card b, .light .job .co em, .light .proof .k, .light .role b, .light .acc-txt, .light .crow .ico { color:color-mix(in srgb, var(--acc, var(--accent)) 66%, #14141a); }
.light .role b { color:color-mix(in srgb, var(--accent) 62%, #14141a); }
.light .home .hi { background:rgba(0,0,0,.05); }
.light .home kbd, .light .spot-row kbd { background:rgba(0,0,0,.05); color:var(--muted); }
.light .home .hint .arrow { background:rgba(0,0,0,.05); }
.light .seg { background:rgba(0,0,0,.06); }
.light .home h1 em { background:linear-gradient(90deg,color-mix(in srgb, var(--accent) 74%, #14141a),#a4571a,#166f57,#5b3fa8); -webkit-background-clip:text; background-clip:text; }
.light .toast, .light .menu, .light .tour-tip, .light .wx-pop { color:var(--ink); }
.light .cal-grid span { color:rgba(23,23,28,.72); } .light .cal-grid span.we { color:rgba(23,23,28,.42); }
.light .pet .pname, .light .pet-bin span { background:rgba(255,255,255,.96); border-color:rgba(0,0,0,.12); }
.light .pet .zz { color:#17171c; text-shadow:none; }
.light .pet-chip { background:rgba(0,0,0,.04); } .light .pet-chip.on { background:rgba(255,138,0,.14); }
.light .menu.cal { background:rgba(255,255,255,.97); }
.light .win-body::-webkit-scrollbar-thumb { background:rgba(0,0,0,.2); }
.light .term { background:#14141a; color:#d9f7e8; }
.light .spotlight { background:rgba(255,255,255,.35); }
.light .spot-results button:hover, .light .spot-results button.sel { background:rgba(0,0,0,.06); }
.light .mb-wx.sun svg, .light .mb-wx.partly svg { color:#d98a00; }

/* tigOS styles.css, part 30: reduced motion. The parts in this folder are concatenated in name order by build.py, so they share one scope. */
/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce) { .tigos *, .tigos *::before, .tigos *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }

/* tigOS styles.css, part 31: mobile. The parts in this folder are concatenated in name order by build.py, so they share one scope. */
/* ---------- MOBILE ---------- */
@media (max-width:760px) {
  .tigos { font-size:15px; }
  .win-body { font-size:calc(14px * var(--ts)); }
  .dock { --dk:1.1; } .dock-sm .dock { --dk:.9; } .dock-lg .dock { --dk:1.32; }
  .set-row { grid-template-columns:1fr; gap:8px; }
  .dock-left .dock, .dock-right .dock { left:50%; right:auto; top:auto; bottom:calc(10px + var(--lift, 0px)); transform:translateX(-50%); flex-direction:row; }
  .dock-hide .dock { transform:translateX(-50%); }
  .dock-left .home { left:18px; }
  .login-users { gap:22px; }
  .light .win { background:rgba(255,255,255,.97); } .light .menubar { background:rgba(255,255,255,.94); } .light .dock { background:rgba(255,255,255,.9); }
  .menu { background:rgba(22,22,30,.97); backdrop-filter:none; -webkit-backdrop-filter:none; }
  .menu.city { right:8px; left:auto; max-height:calc(100dvh - 120px); }
  .crow small { display:none; }
  .u-greggyd .dock { left:50%; right:auto; top:auto; bottom:0; transform:translateX(-50%); flex-direction:row; width:100%; justify-content:center; border-right:0; border-top:1px solid rgba(255,255,255,.08); }
  .u-greggyd .dk .dot { left:50%; top:auto; bottom:-4px; transform:translateX(-50%); width:18px; height:3px; }
  .u-greggyd .home { left:18px; }
  .u-greggyd .mb-app::before { display:none; }
  .wx-pop { left:12px !important; right:12px; width:auto; top:46px; background:rgba(20,20,28,.97); backdrop-filter:none; -webkit-backdrop-filter:none; }
  .toast { top:auto; bottom:calc(112px + var(--lift, 0px)); }
  .toast { transform:translate(-50%,140%); }
  .toast.show { transform:translate(-50%,0); }
  .menubar { height:40px; padding:0 8px; }
  .mb-loc { display:none; }
  .mb-icon#mbLinkedIn { display:none; }
  .mb-wx { padding:0 4px; }
  .mb-app { font-size:14px; }
  .desktop { inset:40px 0 0 0; }
  .home { left:20px; right:20px; top:26px; max-width:none; }
  .home h1 { font-size:clamp(34px,10vw,46px); }
  .home .lead { font-size:15px; }
  .home .hint { margin-top:20px; }
  .win { left:0 !important; top:0 !important; width:100% !important; height:calc(100% - 78px - var(--lift, 0px)) !important; border-radius:0 0 22px 22px; transform:none !important; animation:winInM .38s var(--ease) both; }
  @keyframes winInM { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
  .jr { grid-template-columns:1fr; grid-template-rows:min(46vh, 340px) auto; height:auto; min-height:100%; }
  .win[data-app="journey"] .win-body { overflow:auto; }
  .jr-map { min-height:240px; border-bottom:1px solid var(--line); }
  .jr-top { left:16px; top:14px; } .jr-h { font-size:16px; }
  .jr-side { border-left:0; padding:14px 16px 20px; gap:10px; }
  .jr-stops { grid-template-columns:1fr; }
  .jr-stop { padding:6px 8px; } .jr-stop b { font-size:12.5px; } .jr-stop small { font-size:11px; }
  .jr-pin span { font-size:11px; }
  .win.closing { animation:winOutM .26s var(--ease) forwards; }
  .win.minimizing { animation:winOutM .3s var(--ease) forwards; } .win.restoring { animation:winInM .38s var(--ease) both; }
  @keyframes winOutM { to { opacity:0; transform:translateY(24px); } }
  .win-bar { cursor:default; height:48px; padding:0 10px 0 14px; }
  .lights { display:none; }
  .win-title { justify-content:flex-start; font-size:15px; color:var(--ink); }
  .win-close-m { display:inline-flex; align-items:center; gap:4px; height:30px; padding:0 12px; border-radius:99px; background:rgba(255,255,255,.1); font-weight:700; font-size:13px; }
  .win, .menubar, .dock { backdrop-filter:none; -webkit-backdrop-filter:none; }
  .win { background:rgba(16,16,22,.96); }
  .menubar { background:rgba(10,10,14,.92); }
  .dock { background:rgba(18,18,26,.9); }
  .wall .orb { animation:none; }
  .rz { display:none; }
  .pad { padding:18px 16px 28px; }
  .grid2, .grid3, .contact-grid { grid-template-columns:1fr; }
  .about-hero { grid-template-columns:1fr; text-align:center; justify-items:center; }
  .kv { text-align:left; }
  .pcard { grid-template-columns:88px 1fr auto; gap:12px; }
  .pcard .thumb { width:88px; height:66px; }
  .res-wrap { grid-template-columns:1fr; }
  .res-side { position:static; }
  .dock { bottom:calc(10px + var(--lift, 0px)); gap:4px; padding:7px 8px; border-radius:20px; max-width:calc(100% - 20px); }
  .tl { padding-left:22px; } .job { min-width:0; } .job::before { left:-19px; }
  .job .row { flex-direction:column; align-items:flex-start; gap:2px; } .job .when { white-space:normal; }
  .job .more { padding:8px 0; min-height:36px; }
  .jr-pin::after { content:""; position:absolute; left:-20px; top:-20px; width:40px; height:40px; border-radius:50%; }
  .jr-pin span em { font-size:11px; } .jr-stop i { font-size:11px; }
  .dk { width:46px; height:46px; }
  .dk .tile { width:42px; height:42px; }
  .dk:hover { transform:none; }
  .dk .tip { display:none; }
  .spotlight { padding-top:6vh; }
  .pet { --pw:calc(88px * var(--petq, 1)); }
  .pet-bin { right:14px; bottom:calc(96px + var(--lift, 0px)); }
  .wall .orb { filter:blur(22px); }
  .tour-tip { max-width:min(230px, calc(100vw - 24px)); padding:10px 12px; font-size:12px; border-radius:12px; }
  .tour-tip .row { margin-top:8px; }
  .tour-tip button { padding:4px 9px; font-size:11.5px; }
}
@media (max-width:420px) { .dock .dk:nth-child(n+9), .dock .sep { display:none; } }
@media (max-width:360px) { .dock .dk:nth-child(n+8) { display:none; } }
/* Embedded in Google Sites on a phone: Google pins a 48x52 "report abuse" badge to the bottom-left of the PAGE (outside our
   iframe, 12px inset). Keep the whole dock right of x=66 so no icon is ever under it; icons shrink to fit. Standalone builds keep the centred dock. */
@media (max-width:760px) {
  .framed .dock, .framed.dock-left .dock, .framed.dock-right .dock, .framed.dock-hide .dock { --n:9; --w:min(40px, calc((100vw - 88px - (var(--n) - 1) * 3px) / var(--n))); left:66px; right:10px; transform:none; justify-content:center; max-width:none; gap:3px; padding:7px 6px; }
  .framed .dock .sep { display:none; }
  .framed .dk { width:var(--w); height:var(--w); } .framed .dk .tile { width:calc(var(--w) - 3px); height:calc(var(--w) - 3px); border-radius:calc(var(--w) * .28); } .framed .dk .tile svg { width:calc(var(--w) * .48); height:calc(var(--w) * .48); }
  .framed.entering .dock { animation-name:enterUpF; }
  .framed.poweroff .dock { animation-name:leaveDownF; }
  .framed.u-greggyd .dock { left:0; right:0; width:auto; transform:none; padding-left:64px; }
}
@media (max-width:420px) { .framed .dock { --n:8; } }
@media (max-width:360px) { .framed .dock { --n:7; } }
@keyframes enterUpF { from { opacity:0; transform:translateY(60px) scale(.9); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes leaveDownF { to { opacity:0; transform:translateY(70px) scale(.92); } }

/* tigOS styles.css, part 32: arcade. The parts in this folder are concatenated in name order by build.py, so they share one scope. */
/* ---------------- arcade (hidden app, `game` in the terminal) ---------------- */
.tile.games { background:linear-gradient(145deg,#ff7ab6,#7c3aed); }
.win[data-app="games"] .win-body { overflow:hidden; display:flex; flex-direction:column; }
.gm-home { padding:26px 28px 22px; overflow:auto; height:100%; }
.gm-head h2 { margin:0 0 6px; font-size:26px; letter-spacing:-.02em; }
.gm-head p { margin:0 0 18px; color:var(--muted); font-size:14.5px; line-height:1.5; }
.gm-head code, .gm-foot kbd, .gm-card kbd { font-family:ui-monospace, Menlo, monospace; font-size:.85em; padding:1px 6px; border-radius:6px; background:rgba(255,255,255,.08); border:1px solid var(--line); color:var(--ink); }
.gm-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:12px; }
.gm-card { position:relative; display:grid; grid-template-columns:44px 1fr; gap:12px; align-items:start; text-align:left; padding:14px 14px 14px 12px; border-radius:16px; background:rgba(255,255,255,.05); border:1px solid var(--line); color:var(--ink); cursor:pointer; font:inherit; transition:transform .25s var(--ease), background .25s, border-color .25s; }
.gm-card:focus-visible { transform:translateY(-2px); background:rgba(255,255,255,.09); border-color:var(--gc); outline:none; }
@media (hover:hover) { .gm-card:hover { transform:translateY(-2px); background:rgba(255,255,255,.09); border-color:var(--gc); } .gm-hud button:hover { background:rgba(255,255,255,.14); } .gm-over button:hover { filter:brightness(1.1); } }
.gm-card, .gm-hud button, .gm-over button, .gm-pad button { -webkit-tap-highlight-color:transparent; }
.gm-card.premium { background:linear-gradient(160deg, rgba(255,209,102,.10), rgba(255,255,255,.04) 60%); border-color:rgba(255,209,102,.35); }
.gm-card.premium .gm-best { color:#ffd166; }
.gm-prem { margin-top:26px; padding-top:20px; border-top:1px solid rgba(255,209,102,.28); }
.gm-prem h3 { margin:0 0 4px; font-size:17px; letter-spacing:.01em; color:#ffd166; display:flex; align-items:center; gap:8px; }
.gm-prem h3::before { content:''; width:8px; height:8px; border-radius:50%; background:#ffd166; box-shadow:0 0 12px #ffd166; }
.gm-prem p { margin:0 0 14px; color:var(--muted); font-size:13px; }
.light .gm-prem h3 { color:#b8860b; } .light .gm-card.premium { border-color:rgba(184,134,11,.4); background:linear-gradient(160deg, rgba(255,209,102,.18), rgba(0,0,0,.03) 60%); } .light .gm-card.premium .gm-best { color:#b8860b; }
.gm-ico { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(145deg, var(--gc), rgba(0,0,0,.35) 140%); box-shadow:inset 0 1px 0 rgba(255,255,255,.25); }
.gm-ico svg { width:26px; height:26px; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.gm-meta { display:flex; flex-direction:column; gap:3px; min-width:0; padding-right:30px; }
.gm-meta b { font-size:15.5px; }
.gm-meta small { color:var(--muted); font-size:12.5px; line-height:1.45; }
.gm-meta em { font-style:normal; color:var(--faint); font-size:11.5px; }
.gm-card .gm-best { position:absolute; right:12px; top:12px; font-size:11px; color:var(--gc); font-weight:700; letter-spacing:.02em; }
.gm-card kbd { position:absolute; right:12px; bottom:12px; opacity:.55; }
.gm-foot { margin:18px 0 0; color:var(--faint); font-size:12.5px; line-height:1.7; }
.gm { display:flex; flex-direction:column; flex:1; min-height:0; height:100%; background:#08080c; color:#f4f1ea; }
.gm-hud { display:flex; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); font-size:12.5px; flex-wrap:wrap; }
.gm-hud button { height:28px; padding:0 10px; border-radius:8px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); color:#f4f1ea; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.gm-hud button:disabled { opacity:.4; cursor:default; }
.gm-hud button svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.gm-name { font-size:14px; padding-left:10px; border-left:3px solid var(--gc, var(--orange)); }
.gm-sc { color:rgba(244,241,234,.6); } .gm-sc b { color:#fff; font-variant-numeric:tabular-nums; margin-left:2px; }
.gm-status { color:rgba(244,241,234,.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:34%; }
.gm-sp { flex:1; }
.tigos .win-body .gm, .tigos .win-body .gm * { -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none; }   /* iOS: a held finger is a game move, never a selection, magnifier or callout. Outranks the `.win-body *` rule in 00-tokens that makes window content selectable, which was what put the blue highlight on a long press in Mines */
.gm-stage { position:relative; flex:1; min-height:0; min-width:0; overflow:hidden; display:flex; align-items:center; justify-content:center; background:radial-gradient(900px 500px at 50% 40%, #131320, #050508); outline:none; touch-action:none; user-select:none; -webkit-user-select:none; }
/* floating joystick (Kong, Rocks): a ring where the finger landed, a nub that follows it */
.gm-stick { position:absolute; left:0; top:0; width:104px; height:104px; margin:-52px 0 0 -52px; border-radius:50%; border:2px solid rgba(255,255,255,.22); background:rgba(255,255,255,.05); pointer-events:none; z-index:3; }
.gm-stick[hidden] { display:none; }
.gm-stick i { position:absolute; left:50%; top:50%; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; background:rgba(255,138,0,.55); box-shadow:0 2px 10px rgba(0,0,0,.4); }
.gm-stage:focus-visible { box-shadow:inset 0 0 0 2px rgba(255,138,0,.5); }
.gm-cv { display:block; border-radius:6px; box-shadow:0 20px 60px rgba(0,0,0,.6); touch-action:none; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
.win.fs .gm-cv { border-radius:0; box-shadow:none; }
.gm-over { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; background:rgba(6,6,10,.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); animation:fadeIn .25s var(--ease) both; }
.gm-over[hidden] { display:none; }
.gm-over b { font-size:26px; letter-spacing:-.02em; } .gm-over span { color:rgba(244,241,234,.7); font-size:14px; } .gm-over em { font-style:normal; color:var(--orange); font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-top:6px; animation:pulse 1.6s ease-in-out infinite; }
.gm-over kbd { font-family:ui-monospace, Menlo, monospace; font-size:.85em; padding:1px 6px; border-radius:6px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); }
.gm-over div { display:flex; gap:10px; margin-top:12px; }
.gm-over button { height:36px; padding:0 16px; border-radius:10px; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.1); color:#fff; font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.gm-over button:first-child { background:var(--orange); border-color:transparent; color:#1a1208; }
.gm-over small { color:rgba(255,209,102,.9); font-size:12px; max-width:80%; line-height:1.4; }
.gm-pad { display:none; align-items:center; justify-content:center; gap:18px; padding:12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); border-top:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); flex:none; touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.gm-pad.both { justify-content:space-between; }
.gm-dpad { display:grid; grid-template-columns:repeat(3, 56px); grid-template-rows:repeat(3, 56px); gap:4px; }
.gm-dpad.two { grid-template-columns:56px; grid-template-rows:repeat(2, 56px); }
.gm-dpad .gm-l { grid-area:2 / 1; } .gm-dpad .gm-u { grid-area:1 / 2; } .gm-dpad .gm-d { grid-area:3 / 2; } .gm-dpad .gm-r { grid-area:2 / 3; }
.gm-dpad.two .gm-u { grid-area:1 / 1; } .gm-dpad.two .gm-d { grid-area:2 / 1; }
.gm-dpad button { min-width:0; width:56px; height:56px; padding:0; border-radius:14px; font-size:20px; }
.gm-acts { display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; align-items:center; max-width:190px; }
.gm-acts .gm-act { min-width:68px; height:56px; border-radius:28px; padding:0 16px; font-size:14px; letter-spacing:.02em; background:rgba(255,138,0,.18); border-color:rgba(255,138,0,.45); }
.gm-acts.n1 .gm-act { min-width:96px; height:72px; border-radius:36px; font-size:15px; }
.gm-acts.n4 { display:grid; grid-template-columns:repeat(2, 1fr); }
.gm-acts.n5 { display:grid; grid-template-columns:repeat(2, 1fr); } .gm-acts.n5 .gm-act:last-child { grid-column:1 / -1; }
.gm.touch .gm-pad { display:flex; }
.gm-pad button { min-width:54px; height:48px; padding:0 14px; border-radius:14px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.08); color:#fff; font:inherit; font-size:18px; font-weight:700; touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; cursor:pointer; }
.gm-pad button.on { background:var(--orange); color:#1a1208; border-color:transparent; transform:scale(.94); }
.gm-pad button:focus { outline:none; }
@keyframes pulse { 0%, 100% { opacity:.55; } 50% { opacity:1; } }
/* phones held sideways (any width, short and coarse): HUD becomes a left rail, the pad a right rail, the stage gets the middle */
@media (pointer:coarse) and (max-height:520px) and (orientation:landscape) { .win.fs .win-bar { display:none; } .win.fs .gm { flex-direction:row; } .win.fs .gm-hud { flex-direction:column; align-items:stretch; border-bottom:0; border-right:1px solid rgba(255,255,255,.08); width:72px; padding:10px 8px; gap:8px; } .win.fs .gm-hud .gm-name { border-left:0; border-top:3px solid var(--gc, var(--orange)); padding:6px 0 0; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .win.fs .gm-hud .gm-sc { font-size:11px; } .win.fs .gm-hud .gm-status, .win.fs .gm-backb span { display:none; } .win.fs .gm-hud button { width:100%; justify-content:center; padding:0 6px; } .win.fs .gm-hud .gm-sp { flex:1; } .win.fs .gm-pad { border-top:0; border-left:1px solid rgba(255,255,255,.08); flex-direction:column; justify-content:space-between; padding:14px 12px; gap:14px; } .win.fs .gm-pad.both { justify-content:space-between; } .win.fs .gm-acts { justify-content:center; } }
/* full screen: the game window takes the whole tigOS surface; menubar, dock and pets step aside until Esc */
.win.fs { left:0 !important; top:var(--fsTop, -34px) !important; width:100% !important; height:calc(100% - var(--fsTop, -34px)) !important; border-radius:0 !important; transform:none !important; z-index:500 !important; animation:none !important; }
.win.fs .rz { display:none; }
.win.fs .win-bar { cursor:default; }
.tigos.gaming .menubar, .tigos.gaming .dock, .tigos.gaming .pets, .tigos.gaming .toast { opacity:0 !important; pointer-events:none !important; }
.tigos.gaming .win:not(.fs) { visibility:hidden; }
.light .gm-home code, .light .gm-foot kbd, .light .gm-card kbd { background:rgba(0,0,0,.06); } .light .gm-card { background:rgba(0,0,0,.035); } .light .gm-card:hover { background:rgba(0,0,0,.06); }
@media (max-width:760px) {
  .gm-home { padding:18px 16px; } .gm-grid { grid-template-columns:1fr; } .gm-head h2 { font-size:22px; }
  .gm-hud { gap:7px; padding:8px 10px; flex-wrap:nowrap; font-size:12px; } .gm-status { display:none; } .gm-hud button { padding:0 8px; font-size:12px; } .gm-backb span { display:none; } .gm-name { padding-left:8px; font-size:13px; } .gm-sp { flex:1; }
  @media (max-width:400px) { .gm-sc.best { display:none; } .gm-dpad { grid-template-columns:repeat(3, 50px); grid-template-rows:repeat(3, 50px); } .gm-dpad button { width:50px; height:50px; } .gm-acts .gm-act { min-width:60px; height:50px; } .gm-acts.n1 .gm-act { min-width:84px; height:64px; } .gm-pad { gap:10px; padding-left:12px; padding-right:12px; } .gm-acts { max-width:150px; } }
  .win.fs { border-radius:0 !important; }
  .win.fs .win-bar { display:none; }
  .win.fs .gm-hud { padding-top:calc(8px + env(safe-area-inset-top, 0px)); }
}

/* tigOS styles.css, part 33: pets window. The parts in this folder are concatenated in name order by build.py, so they share one scope. */
/* ---------------- pets window (hidden app) ---------------- */
.tile.paw { background:linear-gradient(145deg,#ffd166,#f0407f); }
.pt-home { padding:24px 26px 20px; }
.pt-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:16px; }
.pt-head h2 { margin:0 0 6px; font-size:26px; letter-spacing:-.02em; }
.pt-head p { margin:0; color:var(--muted); font-size:14px; line-height:1.5; max-width:560px; }
.pt-size { display:flex; align-items:center; gap:8px; flex:none; color:var(--muted); font-size:12.5px; }
.pt-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:12px; }
.pt-card { position:relative; display:grid; grid-template-columns:84px 1fr; grid-template-rows:1fr auto; gap:12px; align-items:center; padding:14px; border-radius:16px; background:rgba(255,255,255,.05); border:1px solid var(--line); transition:background .25s, border-color .25s; }
.pt-card.on { border-color:var(--accent, var(--orange)); background:rgba(255,138,0,.08); }
.pt-art { width:84px; height:84px; border-radius:14px; background:rgba(255,255,255,.06); position:relative; overflow:hidden; grid-row:1; }
/* the card art is a live .pet: same blink / bob / wag / hover animations as the desktop one, pinned inside its box */
.pt-art .pet { --pw:72px; position:absolute; left:6px; top:4px; pointer-events:none; cursor:default; animation:none; will-change:auto; }
.pt-art .pet .shadow { bottom:-2%; }
.pt-card.on .pt-art { background:rgba(255,138,0,.12); }
.pt-card.on .pt-art .pet .body { animation-duration:1.6s; }
.pt-meta { display:flex; flex-direction:column; gap:3px; min-width:0; grid-row:1; }
.pt-meta b { font-size:15.5px; } .pt-meta small { color:var(--muted); font-size:12.5px; } .pt-meta em { font-style:normal; color:var(--faint); font-size:11.5px; }
.pt-btn { grid-column:1 / -1; grid-row:2; height:34px; border-radius:10px; border:1px solid var(--line2); background:rgba(255,255,255,.08); color:var(--ink); font:inherit; font-size:13px; font-weight:700; cursor:pointer; transition:background .2s, color .2s, border-color .2s; }
.pt-btn:hover { background:var(--accent, var(--orange)); color:#111; border-color:transparent; }
/* the active card's button IS the status: "Out now" in the accent, and it turns into "Send home" on hover */
.pt-btn.live { background:var(--accent, var(--orange)); color:#111; border-color:transparent; display:grid; place-items:center; }
.pt-btn.live span { grid-area:1 / 1; transition:opacity .18s; } .pt-btn.live .b { opacity:0; } .pt-btn.live:hover .a { opacity:0; } .pt-btn.live:hover .b { opacity:1; }
.pt-btn.live:hover { background:var(--red); color:#fff; }
.pt-btn.live .a::before { content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:#111; margin:0 7px 1px 0; vertical-align:middle; animation:ptPulse 1.6s ease infinite alternate; }
@keyframes ptPulse { to { opacity:.35; } }
.light .pt-card { background:rgba(0,0,0,.035); } .light .pt-art { background:rgba(0,0,0,.05); } .light .pt-btn { background:rgba(0,0,0,.05); }
@media (max-width:760px) { .pt-home { padding:18px 16px; } .pt-head { flex-direction:column; gap:10px; } .pt-grid { grid-template-columns:1fr; } }
/* tigOS styles.css, part 34: large desktop. The parts in this folder are concatenated in name order by build.py, so they share one scope. */
/* ---------- large desktop (the widget was tuned for a 1200x820 iframe; as a full page the hero and dock grow with the screen) ---------- */
@media (min-width:1600px) and (min-height:900px) {
  .home { max-width:min(900px, 46vw); left:clamp(48px, 5vw, 128px); top:clamp(64px, 11vh, 150px); }
  .home .hi { font-size:13.5px; padding:8px 14px 8px 9px; margin-bottom:24px; }
  .home .hi img { width:26px; height:26px; }
  .home h1 { font-size:clamp(72px, 4.6vw, 120px); margin-bottom:20px; }
  .home .lead { font-size:clamp(18px, 1.05vw, 24px); max-width:56ch; }
  .home .hint { font-size:14px; margin-top:34px; }
  .home kbd { font-size:12px; }
}
@media (min-width:1920px) and (min-height:1000px) {
  .dock { gap:8px; padding:10px 12px; border-radius:26px; bottom:calc(16px + var(--lift, 0px)); }
  .dk { width:64px; height:64px; }
  .dk .tile { width:56px; height:56px; border-radius:16px; }
  .dk .tile svg { width:28px; height:28px; }
  .dock .sep { height:48px; }
  .dk .tip { font-size:13px; }
}
/* tigOS styles.css, part 35: live wallpaper, screensavers, party mode, barrel roll, train. The parts in this folder are concatenated in name order by build.py. */
/* ---------- live wallpaper (WebGL canvas under the orbs; fades in once it renders) ---------- */
.wall .wallgl { position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; transition:opacity 1.6s ease; }
.wall .wallgl.on { opacity:1; }
.wall .wallgl.on ~ .orb { opacity:.55; }
/* ---------- confetti over everything but the sleep and power screens ---------- */
.confetti { position:absolute; inset:0; width:100%; height:100%; z-index:115; pointer-events:none; }
.confetti[hidden] { display:none; }
/* ---------- party mode: the wallpaper cycles hue, the dock and pets dance ---------- */
.tigos.party .wall { animation:partyHue 3s linear infinite; }
@keyframes partyHue { to { filter:hue-rotate(360deg); } }
.tigos.party .dk { animation:partyBop .46s var(--spring) infinite alternate; }
.tigos.party .dk:nth-child(2n) { animation-delay:.12s; } .tigos.party .dk:nth-child(3n) { animation-delay:.24s; } .tigos.party .dk:nth-child(5n) { animation-delay:.36s; }
@keyframes partyBop { to { transform:translateY(-14px) rotate(-6deg); } }
.tigos.party #pets .pet { animation:partyDance .4s ease-in-out infinite alternate; }
@keyframes partyDance { from { transform:translateY(0) rotate(-8deg); } to { transform:translateY(-16px) rotate(8deg); } }
.tigos.party .home h1 em { animation:partyHue 1.5s linear infinite; }
.tigos.rm.party .wall, .tigos.rm.party .dk, .tigos.rm.party #pets .pet, .tigos.rm.party .home h1 em { animation:none; }
/* ---------- do a barrel roll ---------- */
.tigos.roll { animation:roll 1.2s var(--ease) both; }
@keyframes roll { to { transform:rotate(360deg); } }
/* ---------- sl: the locomotive steams across the terminal ---------- */
.term .line.art.train { overflow:hidden; white-space:pre; animation:train 5s linear both; color:var(--amber); }
@keyframes train { from { transform:translateX(100%); } to { transform:translateX(-110%); } }
/* tigOS styles.css, part 36: Nightshift. The parts in this folder are concatenated in name order by build.py, so they share one scope. */
/* ---------------- Nightshift: a WebGL game fills the stage; its HUD and title card are DOM over the canvas ---------------- */
.gm-cv.fill { width:100%; height:100%; border-radius:0; box-shadow:none; }
.ns-hud { position:absolute; inset:0; pointer-events:none; font-family:ui-monospace, Menlo, Consolas, monospace; color:#f4f1ea; text-shadow:0 1px 2px rgba(0,0,0,.8); user-select:none; overflow:hidden; }
.ns-hud > div { position:absolute; }
.ns-vig { inset:0; background:radial-gradient(ellipse at center, rgba(160,0,0,0) 45%, rgba(160,0,0,.85) 100%); opacity:0; transition:opacity .08s linear; }
.ns-white { inset:0; background:#fffae6; opacity:0; }
.ns-fog { inset:0; background:linear-gradient(180deg, rgba(150,170,200,.25), rgba(180,195,225,.55)); opacity:0; transition:opacity .6s; }
.ns-top { top:14px; left:50%; transform:translateX(-50%); display:flex; gap:14px; align-items:baseline; padding:6px 16px; border-radius:6px; background:rgba(0,0,0,.35); border:1px solid rgba(255,209,102,.25); }
.ns-top b { font-size:15px; letter-spacing:.14em; color:#ffd166; } .ns-top span { font-size:12px; letter-spacing:.12em; color:rgba(255,255,255,.75); }
.ns-kills { top:16px; right:18px; font-size:12px; letter-spacing:.08em; color:rgba(255,255,255,.7); }
.ns-cross { left:50%; top:50%; width:0; height:0; --gap:6px; } .ns-cross i { position:absolute; background:rgba(255,255,255,.9); box-shadow:0 0 2px rgba(0,0,0,.8); }
.ns-cross i:nth-child(1) { left:-1px; top:calc(-1 * var(--gap) - 7px); width:2px; height:7px; } .ns-cross i:nth-child(2) { left:-1px; top:var(--gap); width:2px; height:7px; }
.ns-cross i:nth-child(3) { top:-1px; left:calc(-1 * var(--gap) - 7px); width:7px; height:2px; } .ns-cross i:nth-child(4) { top:-1px; left:var(--gap); width:7px; height:2px; }
.ns-hit { left:50%; top:50%; width:22px; height:22px; margin:-11px 0 0 -11px; border:2.5px solid #fff; border-radius:2px; transform:rotate(45deg); opacity:.9; } .ns-hit.kill { border-color:#ff5f57; } .ns-hit[hidden] { display:none; }
.ns-bl { left:18px; bottom:18px; display:flex; flex-direction:column; gap:6px; padding:10px 14px; border-radius:8px; background:rgba(0,0,0,.42); min-width:200px; }
.ns-hprow { display:flex; align-items:center; gap:10px; } .ns-hpbar { width:150px; height:9px; border-radius:2px; background:rgba(255,255,255,.14); overflow:hidden; } .ns-hpbar i { display:block; height:100%; width:100%; background:#63e6be; transition:width .12s; }
.ns-hprow b { font-size:18px; font-weight:800; min-width:36px; text-align:right; }
.ns-perks { display:flex; gap:5px; min-height:16px; } .ns-perks i { display:inline-flex; width:16px; height:16px; border-radius:50%; background:var(--pc); color:#111; font-style:normal; font-size:9px; font-weight:800; align-items:center; justify-content:center; }
.ns-pts { font-size:26px; font-weight:800; color:#ffd166; letter-spacing:-.01em; }
.ns-br { right:18px; bottom:18px; text-align:right; padding:10px 14px; border-radius:8px; background:rgba(0,0,0,.42); display:flex; flex-direction:column; gap:2px; min-width:170px; }
.ns-wname { font-size:11px; letter-spacing:.14em; color:rgba(255,255,255,.75); } .ns-ammo { font-size:24px; font-weight:800; } .ns-sub { display:flex; justify-content:flex-end; gap:14px; font-size:11px; color:rgba(255,255,255,.55); } .ns-sub [data-gren] { color:#a7ffb0; }
.ns-banner { left:0; right:0; top:28%; text-align:center; font-size:48px; font-weight:800; letter-spacing:.06em; color:#ffd166; opacity:0; } .ns-banner.red { color:#ff3b3b; }
.ns-next { left:0; right:0; top:calc(28% + 58px); text-align:center; font-size:13px; color:rgba(255,255,255,.7); }
.ns-pu { left:0; right:0; top:60px; text-align:center; font-size:12px; letter-spacing:.1em; color:#ffd166; white-space:pre; }
.ns-prompt { left:50%; bottom:112px; transform:translateX(-50%); padding:7px 14px; border-radius:6px; background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.14); font-size:13px; font-weight:700; color:#ffd166; white-space:nowrap; } .ns-prompt.no { color:#ff5f57; } .ns-prompt[hidden] { display:none; }
.ns-msg { left:0; right:0; bottom:150px; text-align:center; font-size:13px; color:#fff; }
.ns-box { left:0; right:0; top:40%; text-align:center; font-size:22px; font-weight:800; letter-spacing:.12em; color:#8cc7ff; text-shadow:0 0 14px rgba(140,199,255,.8); } .ns-box[hidden] { display:none; }
.ns-hint { left:0; right:0; bottom:60px; text-align:center; font-size:12px; color:rgba(255,255,255,.55); transition:opacity .5s; }
.win.fs .ns-bl, .win.fs .ns-br { bottom:calc(18px + env(safe-area-inset-bottom, 0px)); }
/* front menu over the security-camera feed */
.gm-cv.fill.cctv.css-grade { filter:grayscale(.7) sepia(.35) hue-rotate(58deg) saturate(1.15) contrast(1.18) brightness(.92); }
.ns-menu { position:absolute; inset:0; font-family:-apple-system, BlinkMacSystemFont, Inter, "Segoe UI", Roboto, sans-serif; color:#f4f1ea; user-select:none; overflow:hidden; display:flex; align-items:stretch; }
.ns-menu[hidden] { display:none; } .ns-menu.gl-grade .ns-scan { display:none; }   /* the grade and the scanlines are drawn by the renderer's output pass when it runs; this CSS is the fallback */
.ns-menu::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(4,5,10,.92) 0, rgba(4,5,10,.82) 34%, rgba(4,5,10,.25) 62%, rgba(4,5,10,.15) 100%); pointer-events:none; }
.ns-cctv { position:absolute; inset:0; pointer-events:none; font-family:ui-monospace, Menlo, Consolas, monospace; font-size:12px; letter-spacing:.08em; color:rgba(230,240,225,.85); text-shadow:0 0 6px rgba(120,255,160,.35), 0 1px 1px rgba(0,0,0,.9); }
.ns-scan { position:absolute; inset:0; background:repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px); mix-blend-mode:multiply; opacity:.9; animation:nsScan 8s linear infinite; }
.ns-scan::after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 120px rgba(0,0,0,.75); background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.35) 100%); }
@keyframes nsScan { from { background-position:0 0; } to { background-position:0 24px; } }
.ns-cctv-top, .ns-cctv-bot { position:absolute; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:14px 18px; }
.ns-cctv-top { top:0; } .ns-cctv-bot { bottom:0; color:rgba(230,240,225,.6); }
.ns-rec { display:inline-flex; align-items:center; gap:7px; color:#ff5f57; font-weight:800; } .ns-rec i { width:10px; height:10px; border-radius:50%; background:#ff3b3b; box-shadow:0 0 10px #ff3b3b; animation:nsBlink 1.2s steps(1) infinite; }
@keyframes nsBlink { 50% { opacity:.15; } }
.ns-panel { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; gap:14px; width:min(46%, 460px); min-width:300px; padding:28px 34px 28px 40px; pointer-events:auto; }
.ns-panel[hidden] { display:none; }
.ns-panel h3 { margin:0; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:#ff8a00; }
.ns-sign { align-self:flex-start; padding:12px 30px; background:#1f4a3a; border:6px solid #17382c; box-shadow:inset 0 0 0 4px #c9a54a, 0 30px 80px rgba(0,0,0,.7); }
.ns-sign span { display:block; padding:10px 22px; background:#e9e2cf; color:#17181c; font-family:Georgia, "Times New Roman", serif; font-weight:900; font-size:40px; letter-spacing:.08em; box-shadow:inset 0 0 0 3px #c9a54a; background-image:linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px), linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px); background-size:8px 8px; }
.ns-tag { margin:0; font-size:13px; color:rgba(244,241,234,.75); display:flex; align-items:center; gap:10px; } .ns-tag b { display:inline-flex; flex:none; width:22px; height:22px; border-radius:50%; background:#1f4a3a; color:#fff; align-items:center; justify-content:center; font-size:13px; }
.ns-items { list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; }
.ns-items button { display:flex; align-items:baseline; gap:14px; width:100%; padding:10px 16px 10px 22px; border:0; border-left:3px solid transparent; border-radius:0 10px 10px 0; background:transparent; color:rgba(244,241,234,.72); text-align:left; cursor:pointer; font:inherit; transition:background .12s, color .12s, border-color .12s, transform .12s; }
.ns-items button b { font-size:22px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; } .ns-items button small { font-size:12px; color:rgba(244,241,234,.45); }
.ns-items button.sel { background:linear-gradient(90deg, rgba(255,138,0,.22), rgba(255,138,0,0)); color:#fff; border-left-color:#ff8a00; transform:translateX(4px); } .ns-items button.sel b { color:#ffb15c; text-shadow:0 0 18px rgba(255,138,0,.45); }
.ns-items button.sel small { color:rgba(244,241,234,.7); }
.ns-items.back { margin-top:10px; } .ns-items.back button b { font-size:16px; }
.ns-foot { margin:10px 0 0; font-size:12px; color:rgba(244,241,234,.45); } .ns-foot kbd, .ns-keys kbd { font-family:ui-monospace, Menlo, monospace; font-size:.9em; padding:1px 6px; border-radius:6px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); color:#f4f1ea; }
.ns-keys { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12px; color:rgba(244,241,234,.7); } .ns-keys.big { flex-direction:column; gap:8px; font-size:13px; } .ns-keys.big span { display:flex; gap:8px; align-items:center; }
.ns-set { display:grid; grid-template-columns:1fr; gap:10px; padding:14px 16px; border-radius:12px; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.1); }
.ns-opt { display:grid; grid-template-columns:104px 1fr 44px; align-items:center; gap:10px; font-size:13px; color:rgba(244,241,234,.85); text-align:left; }
.ns-opt input[type=range] { width:100%; accent-color:var(--orange); } .ns-opt input[type=checkbox] { justify-self:start; width:18px; height:18px; accent-color:var(--orange); } .ns-opt select { font:inherit; font-size:13px; background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.15); border-radius:6px; padding:3px 6px; } .ns-opt output { text-align:right; color:#ffd166; font-family:ui-monospace, Menlo, monospace; }
.ns-note { margin:0; font-size:12px; line-height:1.45; color:rgba(244,241,234,.5); }
.ns-rec-grid { display:grid; gap:10px; } .ns-rec-grid div { display:flex; flex-direction:column; gap:4px; padding:12px 14px; border-radius:10px; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.1); } .ns-rec-grid span { font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(244,241,234,.5); } .ns-rec-grid b { font-size:15px; font-family:ui-monospace, Menlo, monospace; color:#ffd166; } .ns-rec-grid small { display:block; font-size:12px; color:rgba(244,241,234,.55); font-family:inherit; margin-top:2px; }
@media (max-width:700px) { .ns-panel { width:100%; min-width:0; padding:56px 18px 40px; justify-content:flex-start; overflow:auto; } .ns-menu::before { background:rgba(4,5,10,.72); } .ns-sign span { font-size:28px; padding:8px 14px; } .ns-items button b { font-size:18px; } .ns-cctv-bot { display:none; } .ns-bl, .ns-br { min-width:0; padding:8px 10px; } .ns-hpbar { width:90px; } .ns-pts { font-size:20px; } .ns-ammo { font-size:18px; } .ns-banner { font-size:32px; } .ns-top { top:8px; padding:4px 10px; } }
/* the fade between chunks (riding the train, walking a tunnel stretch) and the end-of-shift card, which replaces the framework's game-over card */
.ns-fade { position:absolute; inset:0; background:#000; opacity:0; pointer-events:none; transition:none; }
.ns-end { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at center, rgba(20,0,0,.55) 0, rgba(0,0,0,.9) 70%); color:#f4f1ea; font-family:-apple-system, BlinkMacSystemFont, Inter, "Segoe UI", Roboto, sans-serif; user-select:none; animation:ns-end-in 1.6s ease-out both; }
.ns-end[hidden] { display:none; }
@keyframes ns-end-in { from { opacity:0; } to { opacity:1; } }
.ns-end-in { display:flex; flex-direction:column; align-items:center; gap:10px; width:min(80%, 560px); padding:28px 34px; border:1px solid rgba(255,59,59,.35); background:rgba(6,4,6,.82); box-shadow:0 30px 90px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.04); text-align:center; }
.ns-end-in small { font-size:11px; letter-spacing:.32em; color:#ff3b3b; }
.ns-end-in b { font-family:Georgia, "Times New Roman", serif; font-size:26px; letter-spacing:.06em; line-height:1.15; }
.ns-end-in > span { font-family:ui-monospace, Menlo, monospace; font-size:13px; color:rgba(244,241,234,.6); }
.ns-end-in p { margin:6px 0 0; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(244,241,234,.4); animation:ns-blink 1.4s steps(2) infinite; }
@keyframes ns-blink { to { opacity:.25; } }
.ns-end-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%; margin-top:8px; }
.ns-end-grid div { display:flex; flex-direction:column; gap:2px; padding:10px 12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); text-align:left; }
.ns-end-grid span { font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(244,241,234,.5); }
.ns-end-grid b { font-family:ui-monospace, Menlo, monospace; font-size:16px; font-weight:700; color:#ffd166; letter-spacing:0; }
/* ---------- Tanks: the DOM HUD over the WebGL canvas, the difficulty card, the shop ---------- */
.tk-hud { position:absolute; inset:0; pointer-events:none; font-family:ui-monospace, Menlo, Consolas, monospace; color:#f4f1ea; text-shadow:0 1px 2px rgba(0,0,0,.75); user-select:none; overflow:hidden; opacity:0; transition:opacity .25s; }
.tk-hud.on { opacity:1; }
.tk-hud > div { position:absolute; }
.tk-tags { inset:0; }
.tk-tag { position:absolute; left:0; top:0; width:72px; margin-left:-36px; margin-top:-30px; display:none; flex-direction:column; align-items:center; gap:3px; }
.tk-tag.on { display:flex; }
.tk-name { font-size:10px; color:rgba(255,255,255,.7); line-height:1; height:10px; }
.tk-hp, .tk-fu { width:60px; height:5px; border-radius:3px; background:rgba(0,0,0,.45); overflow:hidden; }
.tk-fu { height:3px; }
.tk-tag.me .tk-fu { display:none; }
.tk-hp i, .tk-fu i { display:block; height:100%; width:100%; background:#28c840; border-radius:3px; }
.tk-hp i.low { background:#ff5f57; }
.tk-fu i { background:#ffa94d; }
.tk-tl { left:14px; top:12px; display:flex; flex-direction:column; gap:5px; }
.tk-tl b { font-size:13px; color:#63e6be; }
.tk-bar { width:110px; height:6px; border-radius:3px; background:rgba(0,0,0,.4); overflow:hidden; }
.tk-bar i { display:block; height:100%; width:100%; background:#8fd46a; border-radius:3px; transition:width .12s linear; }
.tk-bar i.low { background:#ff8a00; }
.tk-tl span { font-size:10px; color:rgba(255,255,255,.7); }
.tk-nuke { font-weight:800; color:rgba(255,255,255,.6); pointer-events:auto; cursor:pointer; padding:4px 0; }   /* tappable: arms the nuke on touch */
.tk-nuke.armed { color:#ff5f57; animation:tkArmed .6s steps(2) infinite; }
@keyframes tkArmed { to { opacity:.35; } }
.tk-wind { left:50%; top:10px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:4px; }
.tk-wind span { font-size:10px; color:rgba(255,255,255,.7); }
.tk-gauge { position:relative; width:120px; height:6px; border-radius:3px; background:rgba(255,255,255,.14); }
.tk-gauge::before { content:""; position:absolute; left:50%; top:-3px; width:1px; height:12px; background:rgba(255,255,255,.5); }
.tk-gauge i { position:absolute; top:1px; height:4px; border-radius:2px; background:#fff; left:50%; width:0; transition:left .3s, width .3s; }
.tk-tr { right:14px; top:12px; text-align:right; display:flex; flex-direction:column; gap:3px; }
.tk-tr b { font-size:12px; color:#ffd166; }
.tk-tr span { font-size:12px; color:#ffd166; }
.tk-msg { left:0; right:0; top:13%; text-align:center; font-size:clamp(14px, 2.4vmin, 20px); font-weight:800; opacity:0; }
.tk-hint { left:0; right:0; top:23%; text-align:center; font-size:12px; color:rgba(255,255,255,.78); opacity:0; transition:opacity .3s; }
.tk-hint.on { opacity:1; }
.tk-cpu { left:0; right:0; bottom:18px; text-align:center; font-size:12px; color:rgba(255,255,255,.72); }
.tk-menu { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:-apple-system, BlinkMacSystemFont, Inter, "Segoe UI", Roboto, sans-serif; color:#f4f1ea; user-select:none; background:rgba(8,8,14,.6); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); overflow:auto; }
.tk-menu[hidden] { display:none; }
.tk-panel { width:min(92%, 520px); padding:22px 26px; display:flex; flex-direction:column; gap:10px; pointer-events:auto; }
.tk-panel[hidden] { display:none; }
.tk-panel h2 { margin:0; text-align:center; font-size:26px; font-weight:800; letter-spacing:.02em; }
.tk-sub { margin:0; text-align:center; font-size:13px; color:rgba(255,255,255,.7); }
.tk-coins { margin:0 auto; padding:6px 18px; border:2px solid #ffd166; border-radius:999px; background:#14120c; color:#ffd166; font-weight:800; font-size:15px; font-family:ui-monospace, Menlo, Consolas, monospace; }
.tk-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.tk-list button { all:unset; box-sizing:border-box; display:flex; align-items:center; gap:12px; width:100%; padding:8px 14px; border-radius:10px; background:rgba(255,255,255,.04); border:2px solid transparent; cursor:pointer; color:rgba(255,255,255,.8); text-align:left; }
.tk-list button:hover { background:rgba(255,255,255,.08); }
.tk-list button b { display:block; font-size:15px; font-weight:800; }
.tk-list button small { display:block; font-size:11px; color:rgba(255,255,255,.5); margin-top:2px; }
.tk-diffs button i { width:10px; height:10px; border-radius:50%; background:var(--c); flex:none; transition:transform .15s; }
.tk-diffs button.sel { background:rgba(255,255,255,.1); border-color:var(--c); color:#fff; }
.tk-diffs button.sel i { transform:scale(1.4); }
.tk-diffs button.sel small { color:rgba(255,255,255,.75); }
.tk-shop button { padding:6px 14px; justify-content:space-between; }
.tk-shop button.sel { background:rgba(255,209,102,.16); border-color:#ffd166; color:#fff; }
.tk-shop button b { font-size:13px; }
.tk-shop .tk-cost { text-align:right; flex:none; }
.tk-shop .tk-cost b { font-family:ui-monospace, Menlo, Consolas, monospace; font-size:12px; color:#ffd166; }
.tk-shop button[data-id="go"] .tk-cost b { color:#8fd46a; font-size:16px; }
.tk-shop .tk-cost small { color:rgba(255,120,110,.85); font-size:9px; }
.tk-shop button.off { color:rgba(255,255,255,.4); }
.tk-shop button.off .tk-cost b { color:rgba(255,255,255,.4); }
.tk-shop button.off small, .tk-shop button.maxed small { color:rgba(255,255,255,.3); }
.tk-shopmsg { margin:0; min-height:16px; text-align:center; font-size:12px; color:#ffd166; font-weight:700; }
.tk-foot { margin:0; text-align:center; font-size:11px; color:rgba(255,255,255,.6); }
/* the setup card: paint swatches, a cpu count, the difficulty list, a Roll out button */
.tk-row { display:flex; align-items:center; gap:12px; font-size:12px; color:rgba(255,255,255,.7); }
.tk-lab { flex:none; width:84px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:10.5px; color:rgba(255,255,255,.55); }
.tk-swatches { display:flex; gap:8px; flex-wrap:wrap; }
.tk-swatches button { all:unset; box-sizing:border-box; width:30px; height:30px; border-radius:50%; background:var(--c); border:3px solid transparent; box-shadow:inset 0 0 0 2px rgba(0,0,0,.35); cursor:pointer; transition:transform .15s; }
.tk-swatches button.sel { border-color:#fff; transform:scale(1.15); }
.tk-opts { display:flex; gap:6px; flex-wrap:wrap; }
.tk-opts button { all:unset; box-sizing:border-box; padding:6px 12px; min-width:34px; text-align:center; border-radius:999px; background:rgba(255,255,255,.06); border:2px solid transparent; color:rgba(255,255,255,.8); font-size:12px; font-weight:700; cursor:pointer; }
.tk-opts button.sel { background:rgba(143,212,106,.18); border-color:#8fd46a; color:#fff; }
.tk-play { all:unset; box-sizing:border-box; align-self:center; padding:10px 34px; border-radius:999px; background:#8fd46a; color:#10200c; font-weight:800; font-size:15px; letter-spacing:.03em; cursor:pointer; box-shadow:0 6px 18px rgba(143,212,106,.3); }
.tk-play:hover { filter:brightness(1.08); }
.tk-menu button, .tk-menu select { -webkit-tap-highlight-color:transparent; }
.tk-set { display:flex; justify-content:center; gap:18px; flex-wrap:wrap; font-size:11px; color:rgba(255,255,255,.65); }
.tk-set label { display:flex; align-items:center; gap:8px; }
.tk-set select, .tk-set input { accent-color:#8fd46a; font:inherit; color:#f4f1ea; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius:6px; padding:2px 6px; }
.tk-set input[type=range] { width:90px; padding:0; border:0; background:none; }
.tk-set output { min-width:32px; }
@media (max-height:460px) { .tk-panel { gap:6px; padding:12px 18px; } .tk-panel h2 { font-size:20px; } .tk-sub { display:none; } .tk-list button { padding:4px 12px; } .tk-list button small { display:none; } .tk-set { display:none; } .tk-swatches button { width:24px; height:24px; } .tk-opts button { padding:3px 10px; } .tk-play { padding:6px 26px; font-size:13px; } }
/* ---------- Ghost Run: the DOM HUD over the WebGL canvas and the title card ---------- */
.gr-hud { position:absolute; inset:0; pointer-events:none; font-family:ui-monospace, Menlo, Consolas, monospace; color:#f4f1ea; text-shadow:0 1px 2px rgba(0,0,0,.8); user-select:none; overflow:hidden; opacity:0; transition:opacity .25s; }
.gr-hud.on { opacity:1; }
.gr-hud > div { position:absolute; }
.gr-tl { left:14px; top:12px; display:flex; flex-direction:column; gap:4px; }
.gr-tl b { font-size:15px; color:#ffd166; }
.gr-tl span { font-size:11px; color:rgba(255,255,255,.72); }
.gr-tr { right:14px; top:12px; text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.gr-tr b { font-size:12px; color:#c9b8ff; font-weight:700; }
.gr-threat { width:96px; height:6px; border-radius:3px; background:rgba(255,255,255,.14); overflow:hidden; }
.gr-threat i { display:block; height:100%; width:0; background:#9a7cff; border-radius:3px; transition:width .12s linear, background .3s; }
.gr-threat i.hot { background:#ff5f57; animation:grHot .5s steps(2) infinite; }
@keyframes grHot { to { opacity:.5; } }
.gr-tlabel { font-size:9px; color:rgba(255,255,255,.5); letter-spacing:.06em; }
.gr-hint, .gr-fork, .gr-door { left:0; right:0; text-align:center; opacity:0; transition:opacity .3s; }
.gr-hint.on, .gr-fork.on, .gr-door.on { opacity:1; }
.gr-hint { top:16%; font-size:12px; color:rgba(255,255,255,.8); }
.gr-fork { top:22%; font-size:clamp(14px, 2.6vmin, 20px); font-weight:800; color:#ffd166; animation:grFork .7s steps(2) infinite; }
@keyframes grFork { to { color:#fff; } }
.gr-door { top:38%; display:flex; flex-direction:column; align-items:center; gap:4px; color:#f4f1ea; z-index:3; }
.gr-door b { font-size:44px; line-height:1; color:#f4e3b0; }
.gr-door span { font-size:clamp(15px, 2.8vmin, 22px); font-weight:800; }
.gr-door small { font-size:11px; color:rgba(255,255,255,.6); }
.gr-dark { position:absolute; inset:0; background:#020108; opacity:0; pointer-events:none; z-index:2; }   /* kept for the HUD's sake; the doorway no longer blacks out, so the frame holds it at 0 */
.gr-menu { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:-apple-system, BlinkMacSystemFont, Inter, "Segoe UI", Roboto, sans-serif; color:#f4f1ea; user-select:none; background:linear-gradient(rgba(8,6,14,.25), rgba(8,6,14,.7)); overflow:auto; }
.gr-menu[hidden] { display:none; }
.gr-panel { width:min(92%, 400px); padding:22px 26px; display:flex; flex-direction:column; align-items:center; gap:14px; pointer-events:auto; }
.gr-panel h2 { margin:0; text-align:center; font-size:34px; font-weight:800; letter-spacing:.04em; color:#e6dcff; text-shadow:0 0 18px rgba(154,124,255,.6), 0 2px 4px rgba(0,0,0,.8); }
.gr-sub { margin:0; text-align:center; font-size:13px; color:rgba(255,255,255,.72); }
.gr-play { all:unset; box-sizing:border-box; cursor:pointer; padding:10px 42px; border-radius:999px; background:#7c5cbf; color:#fff; font-size:17px; font-weight:800; letter-spacing:.04em; box-shadow:0 0 22px rgba(124,92,191,.6); transition:transform .12s, background .12s; }
.gr-play:hover { background:#8f70d4; transform:translateY(-1px); }
.gr-play:active { transform:translateY(1px); }
.gr-foot { margin:0; text-align:center; font-size:11px; color:rgba(255,255,255,.6); line-height:1.5; }
.gr-best { margin:0; text-align:center; font-size:12px; color:#ffd166; font-family:ui-monospace, Menlo, Consolas, monospace; min-height:14px; }
.gr-set { display:flex; justify-content:center; gap:18px; flex-wrap:wrap; font-size:11px; color:rgba(255,255,255,.65); }
.gr-set label { display:flex; align-items:center; gap:8px; }
.gr-set select, .gr-set input { accent-color:#9a7cff; font:inherit; color:#f4f1ea; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius:6px; padding:2px 6px; }
.gr-set input[type=range] { width:90px; padding:0; border:0; background:none; }
.gr-set output { min-width:32px; }
.gr-look { display:flex; flex-direction:column; gap:5px; width:100%; }   /* the runner's look: a row of swatches per part */
.gr-row { display:flex; align-items:center; gap:10px; min-height:26px; }
.gr-lab { width:64px; flex:none; text-align:right; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.gr-opts { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.gr-opts button.sw { all:unset; box-sizing:border-box; width:24px; height:24px; border-radius:50%; background:var(--c); border:3px solid transparent; box-shadow:inset 0 0 0 2px rgba(0,0,0,.35); cursor:pointer; transition:transform .15s; }
.gr-opts button.sw:hover { transform:scale(1.1); }
.gr-opts button.sw.sel { border-color:#fff; transform:scale(1.15); }
@media (max-height:560px) { .gr-panel { gap:8px; padding:12px 18px; } .gr-panel h2 { font-size:24px; } .gr-sub, .gr-foot { display:none; } .gr-row { min-height:20px; } .gr-opts button.sw { width:18px; height:18px; } }
/* ===== Game front menus (Mines first, now every canvas game through gameMenu() in games/00-setup.js): a DOM card over the canvas, the game's own backdrop behind it. --mnc is the game's accent ===== */
.mn-menu { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:-apple-system, BlinkMacSystemFont, Inter, "Segoe UI", Roboto, sans-serif; color:#f4f1ea; user-select:none; background:rgba(8,8,14,.58); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); overflow:auto; }
.mn-menu[hidden] { display:none; }
.mn-panel { --mnc:#ff5f57; width:min(94%, 560px); padding:18px 24px; display:flex; flex-direction:column; gap:8px; pointer-events:auto; }
.mn-panel h2 { margin:0; text-align:center; font-size:26px; font-weight:800; letter-spacing:.02em; }
.mn-sub { margin:0; text-align:center; font-size:13px; color:rgba(255,255,255,.7); }
.mn-rows { display:flex; flex-direction:column; gap:5px; margin-top:4px; }
.mn-row { display:flex; align-items:center; gap:10px; font-size:12px; color:rgba(255,255,255,.7); min-height:28px; }
.mn-lab { flex:none; width:66px; white-space:nowrap; font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:10.5px; color:rgba(255,255,255,.55); }
.mn-opts { display:flex; gap:5px; flex-wrap:wrap; align-items:center; }
.mn-opts button { all:unset; box-sizing:border-box; padding:4px 11px; min-width:34px; text-align:center; border-radius:999px; background:rgba(255,255,255,.06); border:2px solid transparent; color:rgba(255,255,255,.8); font-size:12px; font-weight:700; cursor:pointer; line-height:1.3; }
.mn-opts button:hover { background:rgba(255,255,255,.11); }
.mn-opts button.sel { background:color-mix(in srgb, var(--mnc) 18%, transparent); border-color:var(--mnc); color:#fff; }
.mn-opts button.sw { width:26px; height:26px; min-width:0; padding:0; border-radius:50%; background:var(--c); border:3px solid transparent; box-shadow:inset 0 0 0 2px rgba(0,0,0,.35); transition:transform .15s; }
.mn-opts button.sw:hover { background:var(--c); }
.mn-opts button.sw.sel { border-color:#fff; background:var(--c); transform:scale(1.15); }
.mn-vol { display:flex; align-items:center; gap:8px; font-size:11px; color:rgba(255,255,255,.65); }
.mn-vol input[type=range] { width:120px; accent-color:var(--mnc); }
.mn-vol output { min-width:34px; }
.mn-hint { margin:2px 0 0; min-height:2.6em; text-align:center; font-size:11.5px; line-height:1.3; color:rgba(255,255,255,.62); }
.mn-actions { display:flex; align-items:center; justify-content:center; gap:14px; }
.mn-play { all:unset; box-sizing:border-box; padding:10px 34px; border-radius:999px; background:var(--mnc); color:#1a1208; font-weight:800; font-size:15px; letter-spacing:.03em; cursor:pointer; box-shadow:0 6px 18px color-mix(in srgb, var(--mnc) 30%, transparent); }
.mn-play:hover { filter:brightness(1.08); }
.mn-reset { all:unset; box-sizing:border-box; padding:6px 12px; border-radius:999px; font-size:11px; font-weight:700; color:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.18); cursor:pointer; }
.mn-reset:hover { color:#fff; border-color:rgba(255,255,255,.4); }
.mn-reset[hidden] { display:none; }
.mn-foot { margin:0; text-align:center; font-size:11px; color:rgba(255,255,255,.6); }
.mn-menu button, .mn-menu input { -webkit-tap-highlight-color:transparent; }
@media (max-height:520px) { .mn-panel { gap:4px; padding:10px 16px; } .mn-panel h2 { font-size:20px; } .mn-sub, .mn-hint { display:none; } .mn-rows { gap:2px; } .mn-row { min-height:24px; } .mn-opts button { padding:2px 9px; font-size:11px; } .mn-opts button.sw { width:20px; height:20px; } .mn-play { padding:6px 26px; font-size:13px; } }
@media (max-width:420px) { .mn-panel { padding:14px 10px; } .mn-lab { width:60px; font-size:9px; letter-spacing:.04em; } .mn-opts button { padding:4px 9px; font-size:11px; } }
/* ===== `fps` counter and the `debug` overlay (terminal commands, 27-perf-debug.js) ===== */
.fps-hud { position:absolute; top:40px; right:10px; z-index:94; padding:3px 9px; border-radius:999px; background:rgba(8,8,14,.72); color:#28c840; font:700 12px/1.4 ui-monospace, Menlo, Consolas, monospace; letter-spacing:.02em; pointer-events:none; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); box-shadow:0 2px 10px rgba(0,0,0,.3); }
.fps-hud.meh { color:#ffd166; } .fps-hud.bad { color:#ff5f57; }
.fps-hud[hidden], .dbg-hud[hidden] { display:none; }
.dbg-hud { position:absolute; top:70px; right:10px; z-index:94; width:min(360px, calc(100vw - 20px)); max-height:calc(100vh - 90px); overflow:auto; padding:8px 10px 10px; border-radius:12px; background:rgba(8,8,14,.84); color:rgba(244,241,234,.86); font:500 11px/1.45 ui-monospace, Menlo, Consolas, monospace; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 10px 30px rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.08); user-select:text; }
.dbg-top { display:flex; align-items:center; gap:8px; margin-bottom:4px; } .dbg-top b { color:#fff; font-size:12px; } .dbg-top span { color:rgba(255,255,255,.55); margin-left:auto; }
.dbg-top button { all:unset; cursor:pointer; width:20px; height:20px; border-radius:50%; text-align:center; line-height:20px; color:rgba(255,255,255,.7); background:rgba(255,255,255,.08); font-size:13px; } .dbg-top button:hover { background:rgba(255,255,255,.16); color:#fff; }
.dbg-h { margin:7px 0 2px; font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--orange, #ff8a00); }
.dbg-row { display:flex; gap:10px; align-items:baseline; padding:1px 0; border-bottom:1px solid rgba(255,255,255,.04); } .dbg-row span { flex:none; width:84px; color:rgba(255,255,255,.5); } .dbg-row b { font-weight:500; color:rgba(244,241,234,.92); overflow-wrap:anywhere; }
.dbg-row i { font-style:normal; color:rgba(255,255,255,.45); } .dbg-row.bad b { color:#ff5f57; }
.light .dbg-hud, .light .fps-hud { background:rgba(255,255,255,.88); color:#1a1a1a; border-color:rgba(0,0,0,.08); } .light .dbg-top b, .light .dbg-row b { color:#1a1a1a; } .light .dbg-row span, .light .dbg-top span { color:rgba(0,0,0,.5); } .light .fps-hud { color:#0a7a0a; }
@media (max-width:760px) { .fps-hud { top:auto; bottom:96px; right:8px; } .dbg-hud { top:44px; right:8px; left:8px; width:auto; max-height:calc(100vh - 150px); } }