/* Life Made Easy Hacks — "clay" design system
   Style: Claymorphism (soft 3D, chunky, thick borders, double shadows, soft press)
   per the UI UX Pro Max design-system recommendation.
   Themes are set with data-palette on <html>; app.js saves the visitor's choice. */

:root, :root[data-palette="sunny"]{
  --bg:#FFF8E8; --bg-2:#FFEFC7; --surface:#FFFFFF; --ink:#1F2A44; --ink-soft:#444D63;
  --edge:#1F2A44; --line:#EADFC4;
  --primary:#FFC93C; --primary-ink:#1F2A44; --primary-deep:#D99A00;
  --accent:#2EC4B6; --accent-ink:#06302C; --accent-deep:#16897F;
  --soft:#FFF1C9; --soft-ink:#5A4300;
  --stage:#E8F5F1; --glow:255,190,40; --glow-strength:.38; --shadow:rgba(31,42,68,.16);
  --leaf:#0E7A6F; --confetti-1:#FFC93C; --confetti-2:#2EC4B6; --confetti-3:#FF7A59;
  color-scheme:light;
}
:root[data-palette="ocean"]{
  --bg:#EEF5FF; --bg-2:#D9E9FF; --surface:#FFFFFF; --ink:#0F2140; --ink-soft:#384866;
  --edge:#0F2140; --line:#CCDCF2;
  --primary:#2563EB; --primary-ink:#FFFFFF; --primary-deep:#1E3A8A;
  --accent:#22D3EE; --accent-ink:#062A33; --accent-deep:#0891B2;
  --soft:#DCEBFF; --soft-ink:#173E7A;
  --stage:#E3F0FF; --glow:59,130,246; --glow-strength:.30; --shadow:rgba(15,33,64,.16);
  --leaf:#1D4ED8; --confetti-1:#3B82F6; --confetti-2:#22D3EE; --confetti-3:#FACC15;
  color-scheme:light;
}
:root[data-palette="berry"]{
  --bg:#FFF0F6; --bg-2:#FFDCEB; --surface:#FFFFFF; --ink:#3B0A2A; --ink-soft:#5C3453;
  --edge:#3B0A2A; --line:#F3CFE0;
  --primary:#D61F69; --primary-ink:#FFFFFF; --primary-deep:#8E1043;
  --accent:#7C3AED; --accent-ink:#FFFFFF; --accent-deep:#4C1D95;
  --soft:#FCE1EE; --soft-ink:#7A1347;
  --stage:#FCE9F2; --glow:236,72,153; --glow-strength:.28; --shadow:rgba(59,10,42,.16);
  --leaf:#A21357; --confetti-1:#EC4899; --confetti-2:#8B5CF6; --confetti-3:#FBBF24;
  color-scheme:light;
}
:root[data-palette="mint"]{
  --bg:#EEFBF3; --bg-2:#D4F5E0; --surface:#FFFFFF; --ink:#0B3320; --ink-soft:#30503F;
  --edge:#0B3320; --line:#C9EAD6;
  --primary:#22C55E; --primary-ink:#052E16; --primary-deep:#15803D;
  --accent:#FDBA74; --accent-ink:#431407; --accent-deep:#EA7A1C;
  --soft:#D9F7E4; --soft-ink:#14532D;
  --stage:#E1F7EA; --glow:34,197,94; --glow-strength:.30; --shadow:rgba(11,51,32,.16);
  --leaf:#15803D; --confetti-1:#22C55E; --confetti-2:#FDBA74; --confetti-3:#38BDF8;
  color-scheme:light;
}
:root[data-palette="citrus"]{
  --bg:#FFF7ED; --bg-2:#FFE4C7; --surface:#FFFFFF; --ink:#431407; --ink-soft:#5E3720;
  --edge:#431407; --line:#FED7AA;
  --primary:#F97316; --primary-ink:#1A0B02; --primary-deep:#C2410C;
  --accent:#2563EB; --accent-ink:#FFFFFF; --accent-deep:#1E3A8A;
  --soft:#FFE8CF; --soft-ink:#7C2D12;
  --stage:#FFF0DE; --glow:249,115,22; --glow-strength:.30; --shadow:rgba(67,20,7,.16);
  --leaf:#C2410C; --confetti-1:#F97316; --confetti-2:#2563EB; --confetti-3:#FACC15;
  color-scheme:light;
}
:root[data-palette="midnight"]{
  --bg:#0F1430; --bg-2:#171E45; --surface:#1A2147; --ink:#EEF1FF; --ink-soft:#C3CAEA;
  --edge:#060918; --line:#2D3768;
  --primary:#A78BFA; --primary-ink:#160F33; --primary-deep:#6D4FD8;
  --accent:#34D399; --accent-ink:#052E1F; --accent-deep:#0F9F6E;
  --soft:#262F63; --soft-ink:#DCD3FF;
  --stage:#E6E9F8; --glow:167,139,250; --glow-strength:.45; --shadow:rgba(0,0,0,.45);
  --leaf:#7EE7BF; --confetti-1:#A78BFA; --confetti-2:#34D399; --confetti-3:#FDE68A;
  color-scheme:dark;
}

:root{
  --font-head:"Fredoka","Nunito",ui-rounded,system-ui,sans-serif;
  --font-body:"Nunito",ui-rounded,system-ui,sans-serif;
  --wrap:1180px; --r-lg:26px; --r-md:18px; --r-sm:12px;
  --press:200ms cubic-bezier(.2,.8,.3,1.2);
  --a-ink:#17323A;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:1.125rem;line-height:1.6;
  background-image:radial-gradient(circle at 12% 0%,var(--bg-2) 0,transparent 40%),radial-gradient(circle at 100% 30%,var(--bg-2) 0,transparent 35%);
  background-attachment:fixed;min-height:100vh;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit}
a,button,label,summary,[role="button"],input[type="checkbox"]{cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:10px}
h1,h2,h3{font-family:var(--font-head);line-height:1.1;margin:0 0 .5em;font-weight:600;text-wrap:balance}
h1{font-size:clamp(2.3rem,5.6vw,4.1rem);font-weight:700;letter-spacing:-.01em}
h2{font-size:clamp(1.55rem,3vw,2.2rem)}
h3{font-size:1.28rem}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--primary);color:var(--primary-ink);padding:8px 14px;border-radius:10px;z-index:30;font-weight:800}
.skip:focus{left:12px}
main,.top,.foot{position:relative;z-index:1}

/* ---------- cursor glow (page background) ---------- */
.cursor-glow{position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(var(--glow),var(--glow-strength)) 0%,rgba(var(--glow),0) 65%);
  opacity:0;transition:opacity .4s ease;will-change:transform}
.cursor-glow.on{opacity:1}

/* ---------- glow inside interactive surfaces ---------- */
.glow{position:relative;isolation:isolate}
.glow::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .25s ease;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(var(--glow),.45),transparent 70%)}
.glow:hover::after,.glow.lit::after{opacity:1}

/* ---------- clay buttons ---------- */
.btn{--face:var(--primary);--face-ink:var(--primary-ink);--deep:var(--primary-deep);
  position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:700 1.05rem/1 var(--font-head);letter-spacing:.01em;padding:15px 24px;border-radius:16px;
  border:3px solid var(--edge);background:var(--face);color:var(--face-ink);text-decoration:none;
  box-shadow:0 6px 0 var(--deep),0 6px 0 3px var(--edge),0 14px 24px var(--shadow),inset 0 3px 0 rgba(255,255,255,.45),inset 0 -4px 0 rgba(0,0,0,.08);
  transform:translateY(0);transition:transform var(--press),box-shadow var(--press),filter .2s;margin-bottom:9px;overflow:hidden}
.btn svg{width:20px;height:20px;flex:none}
.btn::before{content:"";position:absolute;inset:-40% auto -40% -60%;width:40%;transform:skewX(-20deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transition:left .6s ease;left:-60%}
.btn:hover{transform:translateY(-3px);filter:saturate(1.1) brightness(1.04);
  box-shadow:0 9px 0 var(--deep),0 9px 0 3px var(--edge),0 20px 30px var(--shadow),0 0 26px rgba(var(--glow),.55),inset 0 3px 0 rgba(255,255,255,.5),inset 0 -4px 0 rgba(0,0,0,.08)}
.btn:hover::before{left:130%}
.btn:active{transform:translateY(5px);transition-duration:80ms;
  box-shadow:0 1px 0 var(--deep),0 1px 0 3px var(--edge),0 4px 8px var(--shadow),inset 0 3px 0 rgba(255,255,255,.3)}
.btn.alt{--face:var(--accent);--face-ink:var(--accent-ink);--deep:var(--accent-deep)}
.btn.plain{--face:var(--surface);--face-ink:var(--ink);--deep:var(--line)}
.btn.small{padding:10px 16px;font-size:.95rem;border-radius:13px}
.btn .glow-dot{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .2s;
  background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.7),transparent 70%)}
.btn:hover .glow-dot{opacity:1}

/* ---------- header ---------- */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:8;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:3px solid var(--line)}
.top-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;padding-bottom:10px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--font-head);font-weight:700;font-size:1.35rem;line-height:1}
.logo-mark{width:40px;height:40px;flex:none;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.logo:hover .logo-mark{transform:rotate(-12deg) scale(1.08)}
.logo small{display:block;font-family:var(--font-body);font-weight:700;font-size:.78rem;color:var(--ink-soft);margin-top:3px}
.top-actions{display:flex;align-items:center;gap:10px}
.top-actions .btn{margin-bottom:6px}
.cats{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 14px;scrollbar-width:none;scroll-snap-type:x proximity}
.cats::-webkit-scrollbar{display:none}
.chip{flex:none;scroll-snap-align:start;display:inline-flex;align-items:center;gap:7px;padding:8px 15px 8px 11px;border-radius:999px;
  border:2.5px solid var(--edge);background:var(--surface);color:var(--ink);font-weight:800;font-size:.95rem;text-decoration:none;white-space:nowrap;
  box-shadow:0 4px 0 var(--edge);transition:transform var(--press),box-shadow var(--press),background .2s;margin-bottom:4px}
.chip svg{width:18px;height:18px}
.chip:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--edge),0 0 18px rgba(var(--glow),.5);background:var(--soft)}
.chip:active{transform:translateY(3px);box-shadow:0 1px 0 var(--edge)}
.chip[aria-current="page"]{background:var(--primary);color:var(--primary-ink)}

/* theme picker */
.theme-pop{position:relative}
.theme-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:20;width:min(300px,calc(100vw - 32px));padding:16px;border-radius:var(--r-md);
  background:var(--surface);border:3px solid var(--edge);box-shadow:0 8px 0 var(--edge),0 24px 40px var(--shadow)}
.theme-menu h2{font-size:1.1rem;margin-bottom:10px}
.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.swatch{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px 8px;border-radius:14px;border:2.5px solid var(--line);
  background:var(--bg);color:var(--ink);font:800 .85rem var(--font-body);box-shadow:0 3px 0 var(--line);transition:transform var(--press),box-shadow var(--press)}
.swatch:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--line),0 0 16px rgba(var(--glow),.45)}
.swatch[aria-checked="true"]{border-color:var(--edge);box-shadow:0 3px 0 var(--edge)}
.swatch i{display:block;width:44px;height:26px;border-radius:9px;border:2px solid rgba(0,0,0,.25);background:linear-gradient(135deg,var(--a) 0 50%,var(--b) 50% 100%)}

/* ---------- stage (animation panel) ---------- */
.stage{background:var(--stage);border-radius:var(--r-lg);position:relative;overflow:hidden;border:3px solid var(--edge);
  box-shadow:inset 0 -6px 0 rgba(0,0,0,.05),inset 0 4px 0 rgba(255,255,255,.6)}
.stage .anim{width:100%;height:auto;aspect-ratio:320/220}
.stage:has(.play){padding-bottom:50px}
.play{position:absolute;right:12px;bottom:10px;display:inline-flex;align-items:center;gap:6px;border:2.5px solid #17323A;border-radius:999px;
  background:#17323A;color:#fff;font:800 .9rem var(--font-body);padding:6px 14px 6px 11px;box-shadow:0 3px 0 #000;transition:transform var(--press),box-shadow var(--press)}
.play svg{width:14px;height:14px}
.play:hover{transform:translateY(-2px);box-shadow:0 5px 0 #000}
.play:active{transform:translateY(2px);box-shadow:0 1px 0 #000}

/* animation paint classes (drawings keep their own fixed colors in every theme) */
.anim .s{stroke:var(--a-ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.anim .s2{stroke-width:2}
.anim .n{fill:none}
.anim .f-w{fill:#fff}.anim .f-y{fill:#FFCF3D}.anim .f-l{fill:#2BA57E}.anim .f-c{fill:#F2665A}
.anim .f-s{fill:#CFE7F5}.anim .f-i{fill:#17323A}.anim .f-t{fill:#EBD9B0}.anim .f-d{fill:#B98C5A}
.anim .f-g{fill:#9FB3B8}.anim .f-p{fill:#F6FAF9}
.anim *{animation-fill-mode:both}
.anim text{font-family:var(--font-body);font-weight:800;fill:#17323A}
.anim.paused *, .anim.paused{animation-play-state:paused !important}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;padding:48px 0 56px}
.hero h1{max-width:13ch}
.hello{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--soft-ink);background:var(--soft);border:2.5px solid var(--edge);
  border-radius:999px;padding:5px 14px;margin-bottom:18px;box-shadow:0 3px 0 var(--edge);font-size:.98rem}
.hello svg{width:18px;height:18px}
.lead{font-size:1.25rem;color:var(--ink-soft);max-width:36ch}
.stats{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 4px;padding:0;list-style:none}
.stats li{background:var(--surface);border:2.5px solid var(--edge);border-radius:14px;padding:6px 14px;font-weight:700;box-shadow:0 3px 0 var(--edge)}
.stats b{font-family:var(--font-head);font-size:1.25rem;margin-right:4px}
.search{display:flex;gap:12px;max-width:520px;margin-top:24px;align-items:flex-start}
.search input{flex:1;min-width:0;font:inherit;font-size:1.08rem;font-weight:600;padding:14px 18px;border-radius:16px;border:3px solid var(--edge);
  background:var(--surface);color:var(--ink);box-shadow:inset 0 4px 0 rgba(0,0,0,.06)}
.search input::placeholder{color:var(--ink-soft)}
.search input:focus{outline:none;box-shadow:inset 0 4px 0 rgba(0,0,0,.06),0 0 0 4px rgba(var(--glow),.55)}
.try{margin-top:10px;font-size:1rem;color:var(--ink-soft);display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.try button{font:800 .92rem var(--font-body);background:var(--surface);color:var(--ink);border:2px solid var(--edge);border-radius:999px;padding:4px 12px;
  box-shadow:0 3px 0 var(--edge);transition:transform var(--press),box-shadow var(--press)}
.try button:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--edge),0 0 14px rgba(var(--glow),.5)}
.try button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--edge)}
.featured .stage{box-shadow:10px 10px 0 var(--primary),10px 10px 0 3px var(--edge)}
.featured-body{margin-top:24px}
.featured-cat{font-weight:800;color:var(--leaf);font-size:1rem}
.featured h2{font-size:clamp(1.4rem,2.4vw,1.8rem);margin:.2em 0 .7em}
.featured-actions{display:flex;flex-wrap:wrap;gap:14px}
.progress-note{margin-top:18px;font-weight:700;color:var(--soft-ink);background:var(--soft);border-radius:14px;padding:10px 14px;display:inline-flex;gap:8px;align-items:center}
.progress-note svg{width:20px;height:20px}

/* ---------- sections ---------- */
.section{padding:44px 0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.section-head h2{margin:0}
.count{color:var(--ink-soft);font-size:1rem;font-weight:700;margin:0}
.areas{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.area{display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:var(--r-md);background:var(--surface);text-decoration:none;
  border:3px solid var(--edge);box-shadow:0 6px 0 var(--edge),0 14px 24px var(--shadow);transition:transform var(--press),box-shadow var(--press)}
.area:hover{transform:translateY(-4px) rotate(-.6deg);box-shadow:0 10px 0 var(--edge),0 22px 32px var(--shadow)}
.area:active{transform:translateY(3px);box-shadow:0 2px 0 var(--edge)}
.area-icon{width:50px;height:50px;border-radius:15px;background:var(--primary);color:var(--primary-ink);display:grid;place-items:center;border:2.5px solid var(--edge);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.45),inset 0 -3px 0 rgba(0,0,0,.1)}
.area:nth-child(even) .area-icon{background:var(--accent);color:var(--accent-ink)}
.area-icon svg{width:27px;height:27px}
.area h3{margin:0;font-size:1.15rem}
.area p{margin:0;font-size:.95rem;color:var(--ink-soft);line-height:1.45}
.area .n{font-weight:800;font-size:.85rem;color:var(--leaf)}

/* ---------- hack grid & cards ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 26px}
.card{display:flex;flex-direction:column;text-decoration:none;background:var(--surface);border:3px solid var(--edge);border-radius:var(--r-lg);padding:12px 12px 18px;
  box-shadow:0 7px 0 var(--edge),0 18px 30px var(--shadow);transition:transform .25s cubic-bezier(.2,.8,.3,1.2),box-shadow .25s;transform-style:preserve-3d}
.card:hover{box-shadow:0 11px 0 var(--edge),0 26px 40px var(--shadow),0 0 0 4px rgba(var(--glow),.35)}
.card:active{transform:translateY(4px) !important;box-shadow:0 2px 0 var(--edge)}
.card .stage{margin-bottom:14px;border-width:2.5px}
.card .anim *{animation-play-state:paused;animation-delay:var(--poster,0s)}
.card:hover .anim *,.card:focus-visible .anim *{animation-play-state:running}
.card-body{padding:0 6px}
.card-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:.82rem;font-weight:800;padding:2px 10px;border-radius:999px;background:var(--soft);color:var(--soft-ink)}
.pill.cat{background:transparent;padding-left:0;color:var(--leaf)}
.pill.free{background:var(--accent);color:var(--accent-ink)}
.pill.tried{background:var(--primary);color:var(--primary-ink)}
.pill svg{width:13px;height:13px}
.card h3{margin:0 0 6px}
.card p{margin:0;color:var(--ink-soft);font-size:1rem;line-height:1.5}
.empty{padding:40px;border:3px dashed var(--line);border-radius:var(--r-lg);text-align:center;color:var(--ink-soft);font-weight:700}

/* ---------- page head ---------- */
.page-head{padding:40px 0 26px;max-width:780px}
.crumbs{font-size:.98rem;font-weight:700;color:var(--ink-soft);margin-bottom:14px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.crumbs a{color:var(--ink-soft);text-decoration-color:var(--primary);text-decoration-thickness:.15em;text-underline-offset:.2em}
.crumbs a:hover{color:var(--ink)}
.page-head .lead{margin:0}
.intro{margin:14px 0 0;color:var(--ink-soft);max-width:62ch}
.updated{margin:14px 0 0;font-size:.92rem;font-weight:700;color:var(--ink-soft)}
.meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.tag{display:inline-flex;align-items:center;gap:6px;padding:5px 13px;border-radius:999px;background:var(--surface);border:2.5px solid var(--edge);
  font-weight:800;font-size:.95rem;text-decoration:none;box-shadow:0 3px 0 var(--edge)}
.tag svg{width:16px;height:16px}
a.tag{transition:transform var(--press),box-shadow var(--press)}
a.tag:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--edge),0 0 14px rgba(var(--glow),.5)}

/* ---------- hack page ---------- */
.hack-stage{max-width:820px}
.hack-body{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;padding:40px 0 20px;max-width:1080px}
.hack-body > *{min-width:0}
.steps-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.steps-head h2{margin:0}
.steps-tip{color:var(--ink-soft);font-weight:700;font-size:.98rem;margin:0 0 12px}
.meter{height:16px;border-radius:999px;background:var(--surface);border:2.5px solid var(--edge);overflow:hidden;margin:4px 0 16px;box-shadow:inset 0 3px 0 rgba(0,0,0,.08)}
.meter span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--primary));transition:width .45s cubic-bezier(.2,.8,.3,1.2)}
.meter-label{font-weight:800;font-size:.95rem;color:var(--soft-ink)}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.step{display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:center;padding:14px 16px;border-radius:var(--r-md);background:var(--surface);
  border:3px solid var(--edge);box-shadow:0 5px 0 var(--edge);transition:transform var(--press),box-shadow var(--press),background .25s;position:relative}
.step input{position:absolute;opacity:0;width:1px;height:1px}
.step:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--edge),0 0 18px rgba(var(--glow),.4)}
.step:active{transform:translateY(3px);box-shadow:0 2px 0 var(--edge)}
.step:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:3px}
.step .num{font-family:var(--font-head);font-weight:700;font-size:1.4rem;width:48px;height:48px;border-radius:50%;background:var(--primary);color:var(--primary-ink);
  display:grid;place-items:center;border:2.5px solid var(--edge);box-shadow:inset 0 3px 0 rgba(255,255,255,.5),inset 0 -3px 0 rgba(0,0,0,.1)}
.step .num svg{width:24px;height:24px;display:none}
.step:has(input:checked){background:var(--soft)}
.step:has(input:checked) .num{background:var(--accent);color:var(--accent-ink)}
.step:has(input:checked) .num b{display:none}
.step:has(input:checked) .num svg{display:block}
.step:has(input:checked) .txt{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:rgba(0,0,0,.25);color:var(--ink-soft)}
.cheer{margin-top:20px;padding:20px 22px;border-radius:var(--r-md);background:var(--primary);color:var(--primary-ink);border:3px solid var(--edge);
  box-shadow:0 6px 0 var(--edge);display:flex;gap:16px;align-items:center}
.cheer svg{width:46px;height:46px;flex:none}
.cheer h3{margin:0 0 2px;font-size:1.35rem}
.cheer p{margin:0;font-weight:700}
.cheer[hidden]{display:none}
.pop-in{animation:popIn .45s cubic-bezier(.2,1.4,.4,1) both}
@keyframes popIn{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.aside-card{background:var(--surface);border:3px solid var(--edge);border-radius:var(--r-md);padding:18px 20px;box-shadow:0 5px 0 var(--edge);margin-bottom:22px}
.aside-card h2{font-size:1.25rem;margin-bottom:.5em}
.aside-card p{margin:0}
.need{margin:0;padding:0;list-style:none}
.need li{padding:7px 0 7px 32px;position:relative;font-weight:600}
.need li + li{border-top:2px dashed var(--line)}
.need li::before{content:"";position:absolute;left:2px;top:13px;width:16px;height:16px;border-radius:5px;background:var(--primary);border:2px solid var(--edge)}
.caution{border:3px solid var(--edge);background:var(--soft);color:var(--ink);padding:14px 18px;border-radius:var(--r-md);margin-top:22px;box-shadow:0 4px 0 var(--edge);
  display:grid;grid-template-columns:28px 1fr;gap:10px}
.caution svg{width:26px;height:26px;color:var(--soft-ink)}
.caution b{display:block;font-family:var(--font-head);font-size:1.1rem}
.side-actions{display:flex;flex-wrap:wrap;gap:12px}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:12px 0 8px;max-width:1080px}
.pager a{display:flex;flex-direction:column;gap:2px;padding:14px 18px;border-radius:var(--r-md);background:var(--surface);border:3px solid var(--edge);
  box-shadow:0 5px 0 var(--edge);text-decoration:none;transition:transform var(--press),box-shadow var(--press);min-width:0}
.pager a:hover{transform:translateY(-3px);box-shadow:0 8px 0 var(--edge),0 0 20px rgba(var(--glow),.45)}
.pager a:active{transform:translateY(3px);box-shadow:0 2px 0 var(--edge)}
.pager small{font-weight:800;color:var(--leaf)}
.pager span{font-family:var(--font-head);font-weight:600;font-size:1.1rem;line-height:1.25}
.pager .next{text-align:right;grid-column:2}
.ad-slot{margin:28px 0;min-height:100px}

/* ---------- floating back-to-top ---------- */
.to-top{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:9;width:54px;height:54px;padding:0;border-radius:50%;
  opacity:0;pointer-events:none;transition:opacity .25s,transform var(--press),box-shadow var(--press)}
.to-top.show{opacity:1;pointer-events:auto}
.to-top svg{width:24px;height:24px}

/* ---------- confetti ---------- */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.confetti i{position:absolute;top:-20px;width:11px;height:16px;border-radius:3px;animation:fall var(--d,2.4s) cubic-bezier(.3,.6,.5,1) forwards}
@keyframes fall{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(var(--x,0),110vh) rotate(var(--r,540deg))}}

/* ---------- prose pages ---------- */
.prose{max-width:68ch;padding-bottom:40px}
.prose h2{font-size:1.5rem;margin-top:1.6em}
.prose ul{padding-left:1.2em}
.prose a{text-decoration-color:var(--primary);text-decoration-thickness:.15em;text-underline-offset:.2em}

/* ---------- footer ---------- */
.foot{margin-top:48px;border-top:3px solid var(--line);padding-block:40px 48px;font-size:1rem;background:color-mix(in srgb,var(--surface) 55%,transparent)}
.foot-grid{display:grid;grid-template-columns:1.3fr 2fr 1fr;gap:32px}
.foot h2{font-size:1.15rem;margin-bottom:.6em}
.foot ul{list-style:none;margin:0;padding:0;columns:2}
.foot li{margin-bottom:7px}
.foot ul a{text-decoration-color:var(--primary);text-decoration-thickness:.15em;text-underline-offset:.2em;font-weight:600}
.foot .fine{color:var(--ink-soft);font-size:.92rem;margin-top:28px}

/* ---------- responsive ---------- */
@media (max-width:1100px){.areas{grid-template-columns:repeat(3,1fr)}}
@media (max-width:960px){
  .hero{grid-template-columns:1fr;gap:40px;padding-top:30px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .hack-body{grid-template-columns:1fr;gap:12px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{font-size:1.06rem}
  .surprise-label{display:none}
  .grid{grid-template-columns:1fr}
  .areas{grid-template-columns:repeat(2,1fr);gap:14px}
  .area{padding:14px}
  .area p{display:none}
  .featured .stage{box-shadow:6px 6px 0 var(--primary),6px 6px 0 3px var(--edge)}
  .foot-grid{grid-template-columns:1fr}
  .search{flex-direction:column;align-items:stretch}
  .pager{grid-template-columns:1fr}
  .pager .next{grid-column:1}
  .logo small{display:none}
}
@media (hover:none){.cursor-glow{display:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0s !important}
  .card,.area,.btn,.chip{transform:none !important}
  .pop-in{animation:none}
  .confetti{display:none}
}


/* =========================================================
   Senior-friendly layer (UI UX Pro Max: Minimal & Direct pattern,
   large type, 48px+ targets, 8px+ gaps, high contrast, calm motion)
   ========================================================= */
body{font-size:1.25rem;line-height:1.65}
.btn{min-height:56px;font-size:1.15rem;padding:14px 24px}
.btn.small{min-height:50px;font-size:1.05rem;padding:10px 16px}
.btn svg{width:22px;height:22px}
.top-row{padding-top:12px;padding-bottom:12px}
.top-actions{gap:12px}
.logo{font-size:1.45rem}
.logo small{font-size:.85rem}
.pill{font-size:1rem;padding:3px 12px}
.card h3{font-size:1.4rem}
.card p{font-size:1.1rem}
.lead{font-size:1.35rem}
.tag{font-size:1.05rem;padding:7px 15px}
.step{grid-template-columns:56px 1fr;padding:16px 18px;font-size:1.2rem}
.need li{font-size:1.15rem}
.count{font-size:1.1rem}
.foot{font-size:1.1rem}
.foot li{margin-bottom:10px}
.card:hover{transform:translateY(-4px)}

/* big, obvious back button */
.back{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:10px 20px 10px 14px;margin-bottom:18px;border-radius:14px;
  background:var(--surface);color:var(--ink);border:3px solid var(--edge);box-shadow:0 4px 0 var(--edge);font:700 1.1rem var(--font-head);text-decoration:none;
  transition:transform var(--press),box-shadow var(--press)}
.back svg{width:24px;height:24px}
.back:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--edge),0 0 18px rgba(var(--glow),.45)}
.back:active{transform:translateY(3px);box-shadow:0 1px 0 var(--edge)}

/* ---------- one-screen home hub ---------- */
.hub{min-height:calc(100vh - 92px);min-height:calc(100dvh - 92px);display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,2.4vh,26px);padding-block:clamp(12px,2.5vh,32px)}
.hub-head{text-align:center;display:flex;flex-direction:column;align-items:center}
.hub-head .hello{margin-bottom:12px}
.hub h1{font-size:clamp(2rem,4.6vw,3.3rem);margin:0 0 6px}
.hub-lead{margin:0 auto;color:var(--ink-soft);font-size:clamp(1.05rem,1.5vw,1.25rem);max-width:58ch;font-weight:600;line-height:1.5}
.hub-search{margin:0 auto;width:100%;max-width:720px;align-items:stretch}
.hub-search input,.search input{font-size:1.2rem;min-height:60px}
.tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.tile{display:flex;align-items:center;gap:14px;min-height:clamp(78px,11vh,104px);padding:12px 16px;border-radius:var(--r-md);background:var(--surface);color:var(--ink);text-decoration:none;
  border:3px solid var(--edge);box-shadow:0 6px 0 var(--edge),0 12px 22px var(--shadow);transition:transform var(--press),box-shadow var(--press),background .2s}
.tile:hover{transform:translateY(-4px);background:var(--soft);box-shadow:0 10px 0 var(--edge),0 18px 30px var(--shadow),0 0 0 4px rgba(var(--glow),.35)}
.tile:active{transform:translateY(4px);box-shadow:0 2px 0 var(--edge)}
.tile .area-icon{flex:none;width:52px;height:52px}
.tile:nth-child(even) .area-icon{background:var(--accent);color:var(--accent-ink)}
.tile-text{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.tile b{font:600 1.3rem var(--font-head)}
.tile small{font-weight:800;font-size:1rem;color:var(--leaf);margin-top:3px}
.hub-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px}
.hub-actions .btn{margin-bottom:6px}
.hub-actions .progress-note{margin:0;width:100%;justify-content:center;background:transparent}

/* ---------- all hacks page ---------- */
#search{max-width:720px;margin:0 0 16px}
.filters{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:8px}
.filter{min-height:50px;padding:8px 18px;border-radius:999px;border:3px solid var(--edge);background:var(--surface);color:var(--ink);font:800 1.05rem var(--font-body);
  box-shadow:0 4px 0 var(--edge);transition:transform var(--press),box-shadow var(--press)}
.filter:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--edge),0 0 16px rgba(var(--glow),.45)}
.filter[aria-pressed="true"]{background:var(--primary);color:var(--primary-ink)}
#all{padding-top:16px}
#all .count{margin-bottom:18px}

@media (max-width:1100px){.tiles{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.tiles{grid-template-columns:repeat(2,1fr);gap:12px}}
@media (max-width:640px){
  body{font-size:1.15rem}
  .top-actions{gap:8px}
  .top-actions .btn.small{padding:8px 11px;font-size:.98rem;min-height:48px}
  .top-actions .btn.small svg{display:none}
  .logo span{display:none}
  .top-row{padding-top:8px;padding-bottom:8px}
  .hub{min-height:0;justify-content:flex-start;gap:12px;padding-block:10px}
  .hub h1{font-size:1.6rem;margin-bottom:4px}
  .tiles{gap:10px}
  .hub-lead{font-size:1rem;line-height:1.4}
  .hub-head .hello{font-size:.88rem;padding:3px 11px;margin-bottom:8px}
  .hub-search{flex-direction:row}
  .hub-search .btn{padding:12px 16px}
  .hub-search .btn span:first-of-type{display:none}
  .tile{min-height:54px;padding:6px 10px;gap:10px;box-shadow:0 4px 0 var(--edge)}
  .tile .area-icon{width:38px;height:38px;border-radius:11px}
  .tile .area-icon svg{width:22px;height:22px}
  .tile b{font-size:1.08rem}
  .tile small{font-size:.88rem}
  .hub-actions{gap:10px;flex-wrap:nowrap}
  .hub-actions .btn{flex:1;padding:10px 10px;font-size:1rem;min-height:54px}
  .hub-actions .btn svg{display:none}
  .hub-actions .progress-note{display:none}
  .search{flex-direction:row}
}
@media (max-width:640px){.wide-only{display:none}}
@media (min-width:641px){.narrow-only{display:none}}
@media (max-width:640px) and (max-height:700px){
  .top-row{padding-top:6px;padding-bottom:6px}
  .hub{gap:8px;padding-block:8px}
  .hub h1{font-size:1.4rem}
  .hub-lead{display:none}
  .hub-search input{min-height:52px}
  .hub-search .btn{min-height:52px}
  .tiles{gap:8px}
  .tile{min-height:50px;padding:5px 8px}
  .tile .area-icon{width:36px;height:36px}
  .tile small{display:none}
  .hub-actions .btn{min-height:50px}
}