/* What of the Future — BENTO GRID (all-black, unified hairline grid)
   Single grid, identical 4·5·3 columns every row → every line aligns top-to-bottom.
   One design system → bento landing + all app pages. */
:root {
  --bg: #0a0a0a;
  --cell: #0d0d0d;
  --card: #131313;
  --ink: #f2f2ee;
  --ink-soft: #b6b6ae;
  --muted: #8a8a82;
  --muted-2: #5c5c55;
  --line: rgba(255,255,255,0.16);
  --grid-line: #34343a;     /* the unifying hairline */
  --accent: #ef4b34;        /* coral */
  /* legacy aliases */
  --acid:#ef4b34; --acid-glow:rgba(239,75,52,.18); --neon:#ef4b34; --neon-2:#ef4b34;
  --paper:#0a0a0a; --dark:#0d0d0d;
  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
  --font-mono:'Space Mono', ui-monospace, monospace;
  --font-read:'Inter', system-ui, sans-serif;
  --radius:0px;
}
* { box-sizing:border-box; }
::selection{ background:var(--accent); color:#fff; }

section.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
section.reveal.is-in{opacity:1;transform:none}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important}*{animation:none!important}}

/* ===================== BASE ===================== */
body,.wotf-app{ margin:0; min-height:100vh; background:var(--bg); color:var(--ink); font-family:var(--font-body); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a{ color:inherit; }
.wotf-wrap{ max-width:1180px; margin:0 auto; padding:0 22px; position:relative; }

/* ===================== TYPE ===================== */
.h-eyebrow{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); font-weight:700; }
.h-title{ font-family:var(--font-display); font-weight:700; font-size:clamp(30px,4.6vw,52px); line-height:1.02; letter-spacing:-.02em; text-transform:uppercase; margin:12px 0 0; }
.h-sub{ color:var(--ink-soft); font-size:16px; line-height:1.68; margin-top:14px; max-width:560px; }
.mono{font-family:var(--font-mono)} .muted{color:var(--muted)} .center{text-align:center}
.lbl{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

/* ===================== NAV ===================== */
.wotf-nav{ position:sticky; top:0; z-index:50; background:rgba(10,10,10,.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.wotf-nav .wotf-wrap{ display:flex; align-items:center; justify-content:space-between; height:60px; max-width:1340px; padding:0 16px;}
.wotf-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.wotf-brand .mark{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:#0d0d0d; font-family:var(--font-display); font-weight:700; font-size:13px; }
.wotf-brand .name{ font-family:var(--font-display); letter-spacing:.16em; font-weight:700; font-size:14px; }
.wotf-navlinks{ display:flex; align-items:center; gap:22px; }
.wotf-navlinks a{ font-family:var(--font-mono); text-decoration:none; color:var(--ink-soft); font-size:12px; letter-spacing:.04em; text-transform:uppercase; transition:color .2s; }
.wotf-navlinks a:hover,.wotf-navlinks a.active{ color:var(--accent); }
@media (max-width:820px){ .wotf-navlinks a.hide-sm{display:none} }

/* ===================== BUTTONS ===================== */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--font-mono); font-size:12.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; text-decoration:none; cursor:pointer; padding:12px 20px; border:1px solid var(--line); border-radius:999px; transition:transform .12s, background .2s, color .2s, border-color .2s; }
.btn:active{transform:translateY(1px)}
.btn-primary{ background:var(--ink); color:#0d0d0d; border-color:var(--ink); }
.btn-primary:hover{ background:#fff; }
.btn-accent{ background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-accent:hover{ filter:brightness(.94); }
.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn-sm{ padding:8px 14px; font-size:11.5px; }
.btn[disabled]{opacity:.45;cursor:not-allowed}
.arrow{ width:26px; height:26px; border-radius:50%; display:inline-grid; place-items:center; border:1px solid currentColor; font-size:12px; }

/* ===================== PANELS / FORM (app) ===================== */
.panel{ position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:28px; }
.panel-2{ background:#1a1a1a; }
.bracket::before,.bracket::after{content:"";position:absolute;width:10px;height:10px;border:1.5px solid var(--accent)}
.bracket::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.bracket::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.field{ display:block; margin-bottom:18px; }
.field>label{ font-family:var(--font-mono); display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.input,.textarea,.select{ width:100%; background:#070707; border:1px solid var(--line); border-radius:var(--radius); color:var(--ink); font-family:var(--font-body); font-size:15px; padding:13px 15px; outline:none; transition:border-color .2s, box-shadow .2s; }
.textarea{ min-height:170px; resize:vertical; line-height:1.65; }
.input:focus,.textarea:focus,.select:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(239,75,52,.18); }
.hint{ font-family:var(--font-mono); font-size:11.5px; color:var(--muted); margin-top:8px; }
.seg{ display:inline-flex; border:1px solid var(--line); border-radius:999px; padding:4px; flex-wrap:wrap; background:#070707; }
.seg button{ border:0; background:transparent; color:var(--ink-soft); padding:9px 16px; cursor:pointer; font-family:var(--font-mono); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; transition:.15s; border-radius:999px; }
.seg button.active{ background:var(--ink); color:#0d0d0d; }

/* pills */
.pill{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:5px 10px; border:1px solid; border-radius:999px; }
.pill-locked{ color:var(--muted); border-color:var(--line); }
.pill-ready{ color:#0d0d0d; border-color:var(--accent); background:var(--accent); }
.pill-opened{ color:var(--ink); border-color:var(--ink); }
.pill-draft{ color:var(--muted); border-color:var(--line); }

/* capsule grid / stat / countdown / letter (app) */
.cap-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
.cap-card{ position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px; cursor:pointer; overflow:hidden; transition:transform .15s, box-shadow .2s; }
.cap-card:hover{ transform:translateY(-2px); box-shadow:6px 6px 0 var(--accent); }
.cap-card .glow{display:none}
.cap-card h4{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; margin:14px 0 8px; font-size:17px; line-height:1.15; }
.cap-card p{ margin:0; color:var(--ink-soft); font-size:13.5px; line-height:1.55; }
.cap-meta{ display:flex; align-items:center; justify-content:space-between; margin-top:18px; font-family:var(--font-mono); font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); border:1px solid var(--line); overflow:hidden; background:var(--card); }
.stat{ padding:22px; border-right:1px solid var(--line); }
.stat:last-child{border-right:0}
.stat .n{ font-family:var(--font-display); font-size:34px; font-weight:700; letter-spacing:-.02em; }
.stat .l{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:6px; }
.countdown{ display:flex; gap:10px; flex-wrap:wrap; }
.cd-unit{ min-width:76px; text-align:center; background:#070707; border:1px solid var(--line); padding:13px 8px; }
.cd-unit .v{ font-family:var(--font-display); font-size:30px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.cd-unit .k{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:5px; }
.letter{ font-size:18px; line-height:1.85; color:#e7e7df; white-space:pre-wrap; }
.letter-sig{ margin-top:22px; font-family:var(--font-mono); color:var(--accent); }

/* util */
.spacer-xl{height:64px}.spacer-l{height:40px}.spacer-m{height:22px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.between{justify-content:space-between}.grow{flex:1}.hidden{display:none!important}
.gate{max-width:440px;margin:8vh auto}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:#1b1b1b;border:1px solid var(--line);color:var(--ink);font-family:var(--font-mono);font-size:12.5px;padding:13px 20px;opacity:0;pointer-events:none;transition:.3s;z-index:100;text-transform:uppercase;letter-spacing:.04em}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.spin{width:18px;height:18px;border:2px solid rgba(255,255,255,.22);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================================================ */
/* ============== BENTO LANDING — one unified grid ============ */
/* ============================================================ */
.bento{ max-width:1360px; margin:0 auto; padding:16px; position:relative; }
/* animated link layer that ties the cells together */
#netlinks{ position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.55; }
/* orange space-invader mark */
.invader{ display:inline-block; image-rendering:pixelated; vertical-align:middle; animation:invbob 1.1s steps(2) infinite; }
@keyframes invbob{ 50%{ transform:translateY(-2px); } }
/* every row = 4fr 5fr 3fr → all vertical lines run continuously */
.grid{ display:grid; grid-template-columns:4fr 5fr 3fr; gap:1px; background:var(--grid-line); padding:1px; }
.cell{ background:var(--cell); color:var(--ink); padding:28px; position:relative; min-height:210px; display:flex; flex-direction:column; overflow:hidden; }
.cell.img{ padding:0; background-size:cover; background-position:center; }
.cell.pad-img{ background-size:cover; background-position:center; }
.cell h2,.cell h3{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:-.02em; margin:0; }
.cell .big{ font-size:clamp(30px,2.9vw,46px); line-height:.98; }
.cell .mid{ font-size:clamp(20px,2vw,28px); line-height:1.08; }
.cell .tiny{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.cell .desc{ color:var(--ink-soft); font-size:15px; line-height:1.6; }
.push{ margin-top:auto; }
.linkx{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:2px; }
@media(max-width:860px){ .grid{ grid-template-columns:1fr; } .cell{min-height:auto} }

/* vertical brand word */
.vbrand{ position:absolute; top:24px; left:24px; font-family:var(--font-display); font-weight:700; font-size:40px; letter-spacing:.05em; writing-mode:vertical-rl; transform:rotate(180deg); color:rgba(255,255,255,.95); }

/* circular dotted + arrow circles */
.dotcircle{ border:1.5px dashed var(--muted); border-radius:50%; display:grid; place-items:center; text-align:center; color:var(--muted); }
.circ{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; font-size:15px; flex:0 0 auto; transition:.2s; cursor:pointer; color:var(--ink); }
.circ:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.svc{ display:inline-flex; align-items:center; gap:10px; background:var(--ink); color:#0d0d0d; border-radius:999px; padding:6px 6px 6px 18px; font-family:var(--font-mono); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; text-decoration:none; }
.svc .circ{ width:30px; height:30px; background:#0d0d0d; color:#fff; border:0; }

/* oval promo */
.oval{ border-radius:200px/120px; overflow:hidden; aspect-ratio:16/9; background-size:cover; background-position:center; position:relative; }
.play{ position:absolute; inset:0; margin:auto; width:62px; height:62px; border-radius:50%; background:var(--ink); display:grid; place-items:center; font-size:18px; color:#0d0d0d; }

/* pie / donut */
.pie-wrap{ outline:1.5px dashed var(--line); outline-offset:10px; border-radius:50%; margin:8px auto; width:170px; }
.pie{ width:170px; aspect-ratio:1; border-radius:50%; position:relative;
  background:conic-gradient(var(--ink) 0 65%, var(--accent) 65% 85%, #4a4a48 85% 100%); }
.pie::after{ content:""; position:absolute; inset:30%; border-radius:50%; background:var(--cell); }

/* avatar */
.ava{ width:80px; height:80px; border-radius:50%; background-size:cover; background-position:center; background-color:#222; }
.ava-sm{ width:34px; height:34px; border-radius:50%; background-size:cover; border:2px solid var(--cell); margin-left:-10px; background-color:#222; }

/* counter */
.counter{ display:flex; align-items:flex-end; gap:10px; }
.counter .num{ font-family:var(--font-display); font-weight:700; font-size:54px; line-height:.8; }

/* steps */
.steps{ display:flex; flex-wrap:wrap; gap:18px; align-items:center; }
.step-dot{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:18px; display:flex; align-items:center; gap:10px; }
.step-dot .n{ width:30px;height:30px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:13px; }

/* token */
.dial{ position:relative; width:190px; aspect-ratio:1; margin:0 auto; border-radius:50%; border:1.5px dashed var(--muted); display:grid; place-items:center; text-align:center; }
.dial .d{ font-family:var(--font-display); font-weight:700; font-size:50px; line-height:.85; }
.dial .dl{ font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:4px; }
.dial .clock{ font-family:var(--font-mono); font-size:13px; color:var(--accent); margin-top:6px; }
.ca-box{ display:flex; align-items:center; gap:12px; justify-content:space-between; border:1px dashed var(--line); padding:12px 14px; font-family:var(--font-mono); margin-top:16px; }
.ca-box .val{ color:var(--accent); letter-spacing:.08em; font-size:13px; }
.tok-line{ display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); font-family:var(--font-mono); font-size:12px; }
.tok-line:last-child{border-bottom:0}
.tok-line .k{ color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.tok-line .v{ font-family:var(--font-display); font-weight:700; }

/* ===== animated FX (modern, free-moving backgrounds + elements) ===== */
.cell > .fx{ z-index:0; }
.cell > *:not(.fx){ position:relative; z-index:1; }
.fx{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.fx-aurora{ background:#0b0916; }
.fx-aurora b{ position:absolute; border-radius:50%; filter:blur(48px); opacity:.7; mix-blend-mode:screen; }
.fx-aurora b:nth-child(1){ width:75%;height:75%; background:radial-gradient(circle,#7c3aed,transparent 62%); top:-22%; left:-14%; animation:auA 15s ease-in-out infinite; }
.fx-aurora b:nth-child(2){ width:70%;height:70%; background:radial-gradient(circle,#4f46e5,transparent 62%); bottom:-26%; right:-16%; animation:auB 19s ease-in-out infinite; }
.fx-aurora b:nth-child(3){ width:48%;height:48%; background:radial-gradient(circle,#ef4b34,transparent 62%); top:32%; left:36%; opacity:.42; animation:auC 23s ease-in-out infinite; }
@keyframes auA{50%{transform:translate(30%,22%) scale(1.28)}}
@keyframes auB{50%{transform:translate(-26%,-16%) scale(1.22)}}
@keyframes auC{50%{transform:translate(-22%,20%) scale(1.32)}}
.fx-dots i{ position:absolute; width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.75);animation:flo 9s ease-in-out infinite }
.fx-dots i:nth-child(1){left:16%;top:28%} .fx-dots i:nth-child(2){left:74%;top:20%;background:rgba(239,75,52,.95);animation-delay:1.4s}
.fx-dots i:nth-child(3){left:62%;top:70%;animation-delay:3s} .fx-dots i:nth-child(4){left:30%;top:74%;animation-delay:4.4s}
.fx-dots i:nth-child(5){left:86%;top:56%;animation-delay:2.2s}
@keyframes flo{50%{transform:translateY(-18px);opacity:.4}}

/* radar / sonar (GHOST-LENS style), centered */
.fx-radar{ position:relative; width:160px; aspect-ratio:1; margin:auto; }
.fx-radar .ring{ position:absolute; inset:0; border:1px solid var(--line); border-radius:50%; }
.fx-radar .ring:nth-child(2){ inset:19%; } .fx-radar .ring:nth-child(3){ inset:38%; }
.fx-radar .ping{ position:absolute; inset:0; border:1px solid var(--accent); border-radius:50%; opacity:0; animation:ping 3s ease-out infinite; }
.fx-radar .sweep{ position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg, transparent, rgba(124,58,237,.55) 60deg, transparent 120deg); animation:spin 4.5s linear infinite; }
.fx-radar .core{ position:absolute; inset:0; margin:auto; width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 16px var(--accent); }
.fx-radar .orb{ position:absolute; inset:0; animation:spin 7s linear infinite; }
.fx-radar .orb span{ position:absolute; top:6%; left:50%; transform:translateX(-50%); width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff; }
.fx-radar .orb.b{ animation-duration:11s; animation-direction:reverse; }
.fx-radar .orb.b span{ top:auto; bottom:14%; left:22%; background:#7c3aed; box-shadow:0 0 10px #7c3aed; }
@keyframes ping{ 0%{opacity:.7;transform:scale(.35)} 100%{opacity:0;transform:scale(1)} }

/* subtle futuristic backdrops (for a FEW cells, not all) */
.fx-soft{ background:#0b0b14; }
.fx-soft b{ position:absolute; border-radius:50%; filter:blur(58px); mix-blend-mode:screen; }
.fx-soft b:nth-child(1){ width:62%;height:62%; background:radial-gradient(circle,#4f46e5,transparent 64%); top:-12%; right:-12%; opacity:.42; animation:auB 20s ease-in-out infinite; }
.fx-soft b:nth-child(2){ width:52%;height:52%; background:radial-gradient(circle,#ef4b34,transparent 64%); bottom:-16%; left:-12%; opacity:.26; animation:auC 26s ease-in-out infinite; }
.fx-grid{ background:#0a0a12; }
.fx-grid::before{ content:""; position:absolute; left:-50%; right:-50%; top:0; bottom:-60%;
  background-image:linear-gradient(rgba(124,58,237,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(124,58,237,.14) 1px,transparent 1px);
  background-size:40px 40px; transform:perspective(340px) rotateX(60deg); transform-origin:top center;
  animation:gridmove 5s linear infinite; -webkit-mask:linear-gradient(#000,transparent 82%); mask:linear-gradient(#000,transparent 82%); }
@keyframes gridmove{ to{ background-position:0 40px; } }

/* orbit system (replaces the static pie) */
.fx-orbits{ position:relative; width:180px; aspect-ratio:1; margin:6px auto; }
.fx-orbits .ringo{ position:absolute; border:1px solid var(--line); border-radius:50%; }
.fx-orbits .ringo:nth-of-type(1){ inset:0; } .fx-orbits .ringo:nth-of-type(2){ inset:17%; } .fx-orbits .ringo:nth-of-type(3){ inset:35%; }
.fx-orbits .oc{ position:absolute; inset:0; margin:auto; width:16px;height:16px;border-radius:50%;background:var(--accent);box-shadow:0 0 18px var(--accent); }
.fx-orbits .od{ position:absolute; inset:0; animation:spin linear infinite; }
.fx-orbits .od.o1{ animation-duration:7s; } .fx-orbits .od.o2{ inset:17%; animation-duration:10s; animation-direction:reverse; } .fx-orbits .od.o3{ inset:35%; animation-duration:14s; }
.fx-orbits .od i{ position:absolute; top:-5px; left:50%; transform:translateX(-50%); width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff; }
.fx-orbits .od.o2 i{ background:#7c3aed; box-shadow:0 0 10px #7c3aed; }
.fx-orbits .od.o3 i{ background:var(--accent); box-shadow:0 0 10px var(--accent); }

/* animated countdown dial (keeps #cdDays/#cdClock) */
.cd-dial{ position:relative; width:210px; aspect-ratio:1; margin:0 auto; display:grid; place-items:center; }
.cd-ring{ position:absolute; inset:0; border-radius:50%; background:conic-gradient(var(--accent),#7c3aed,#4f46e5,#ef4b34); -webkit-mask:radial-gradient(transparent 67%,#000 68%); mask:radial-gradient(transparent 67%,#000 68%); animation:spin 9s linear infinite; opacity:.9; }
.cd-ping{ position:absolute; inset:10%; border:1px solid var(--accent); border-radius:50%; opacity:0; animation:ping 2.8s ease-out infinite; }
.cd-num{ position:relative; text-align:center; }
.cd-num .d{ font-family:var(--font-display); font-weight:700; font-size:58px; line-height:.8; }
.cd-num .dl{ font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:6px; }
.cd-num .clock{ font-family:var(--font-mono); font-size:14px; color:var(--accent); margin-top:8px; letter-spacing:.06em; }

/* footer */
.foot{ border-top:1px solid var(--line); }
.foot a{ font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); text-decoration:none; text-transform:uppercase; letter-spacing:.05em; display:block; padding:5px 0; }
.foot a:hover{ color:var(--accent); }

/* ===================== AI PICKER MODAL ===================== */
.modal{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:20px; }
.modal.open{ display:flex; }
.modal-bg{ position:absolute; inset:0; background:rgba(5,5,8,.8); backdrop-filter:blur(6px); }
.modal-card{ position:relative; z-index:1; width:min(700px,100%); background:#0d0d0d; border:1px solid var(--line-2); border-radius:6px; padding:32px; box-shadow:0 30px 80px rgba(0,0,0,.6); animation:popin .25s ease; }
@keyframes popin{ from{opacity:0;transform:translateY(14px) scale(.98)} to{opacity:1;transform:none} }
.modal-x{ position:absolute; top:14px; right:14px; width:32px; height:32px; border:1px solid var(--line); background:transparent; color:var(--ink); border-radius:50%; cursor:pointer; font-size:13px; }
.modal-x:hover{ border-color:var(--accent); color:var(--accent); }
.pick-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media(max-width:640px){ .pick-grid{ grid-template-columns:1fr; } }
.pick{ display:flex; flex-direction:column; gap:6px; text-decoration:none; border:1px solid var(--line); border-radius:6px; padding:18px; background:rgba(255,255,255,.02); transition:transform .18s, border-color .18s, box-shadow .18s; }
.pick:hover{ border-color:var(--c); box-shadow:0 0 0 1px var(--c), 0 14px 30px -12px var(--c); transform:translateY(-3px); }
.pick-tag{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--c); }
.pick strong{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:16px; }
.pick-d{ color:var(--muted); font-size:12.5px; line-height:1.5; }
.pick-go{ margin-top:6px; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--c); }