/* Goals and Journal (13 Oct 2026). Shared by goals.html and journal.html.
   Same tokens and components as progress.html so the three pages read as one. */
:root{
  --bg:#0C0C0E; --bg2:#111113; --surface:#141417; --surface2:#1A1A1E; --raise:#1F1F24;
  --accent:#BF512E; --accent-text:#E0744B; --accent-soft:rgba(191,81,46,0.12); --accent-line:rgba(224,116,75,0.28);
  --mark:#D0603A; --on-accent:#FFFFFF;
  --text:#F3F0EC; --dim:#CFC9C2; --muted:#A5A09A; --faint:#6F6A65;
  --line:rgba(243,240,236,0.08); --line2:rgba(243,240,236,0.14);
  --good:#9CC98A; --good-soft:rgba(156,201,138,0.10); --bad:#E8907F; --bad-soft:rgba(232,144,127,0.10);
  --bar:rgba(12,12,14,0.86);
  --r:14px; --r-s:10px; --r-xs:8px;
  --serif:'Mara Display','Playfair Display',Georgia,serif;
  --sans:'Mara Sans','Archivo','Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}
html[data-mara-theme="light"]{
  --bg:#FFFFFF; --bg2:#FBF8F3; --surface:#FFFFFF; --surface2:#F7F2EA; --raise:#F0E7DA;
  --accent-text:#B44A28; --accent-soft:rgba(191,81,46,0.08); --accent-line:rgba(191,81,46,0.30); --mark:#B44A28;
  --text:#0C0C0E; --dim:#3F3A36; --muted:#6E6A66; --faint:#9A948D;
  --line:#E9E4DC; --line2:#DDD5CA; --good:#3F7A2B; --good-soft:rgba(63,122,43,0.08); --bad:#A83A20; --bad-soft:rgba(168,58,32,0.07);
  --bar:rgba(255,255,255,0.9); color-scheme:light;
}
*{box-sizing:border-box}
html,body{overflow-x:hidden}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); font-weight:300; line-height:1.6; min-height:100vh; -webkit-font-smoothing:antialiased}
body::before{content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background:radial-gradient(900px 520px at 88% -8%, rgba(191,81,46,0.13), transparent 60%), radial-gradient(rgba(255,255,255,0.018) 1px, transparent 1px); background-size:auto, 3px 3px}
html[data-mara-theme="light"] body::before{opacity:.35}
.hidden{display:none!important}
button,input,select,textarea{font-family:inherit}
.appbar{position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:calc(14px + env(safe-area-inset-top,0px)) clamp(16px,4vw,40px) 14px; background:var(--bar); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
.appbar .brand img{height:26px; width:auto; display:block}
html[data-mara-theme="light"] .appbar .brand img{filter:invert(1)}
.appbar nav{display:flex; gap:6px; align-items:center}
.tab{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); text-decoration:none; padding:11px 12px; min-height:44px; display:inline-flex; align-items:center; border-radius:var(--r-xs)}
.tab:hover{color:var(--text)} .tab.on{color:var(--accent-text); background:var(--accent-soft)}
.back{display:inline-flex; align-items:center; gap:8px; font-weight:500; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-text); text-decoration:none; padding:11px 14px; min-height:44px; border:1px solid var(--accent-line); border-radius:var(--r-xs)}
.back:hover{background:var(--accent-soft)} .back svg{width:12px; height:12px}
@media(max-width:620px){.back span,.tab.opt{display:none}}
.wrap{position:relative; z-index:1; max-width:1120px; margin:0 auto; padding:0 clamp(16px,4vw,40px) 64px}
.eyebrow{font-family:var(--mono); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-text); display:flex; align-items:center; gap:10px}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--accent-text)}
.head{padding:clamp(28px,5vw,56px) 0 clamp(18px,3vw,26px)}
h1{font-family:var(--serif); font-weight:400; font-size:clamp(36px,5.4vw,58px); line-height:1.05; letter-spacing:-.01em; margin:16px 0 12px}
h1 em{font-style:normal; color:var(--accent-text)}
h2{font-family:var(--serif); font-weight:400; font-size:clamp(24px,3vw,32px); line-height:1.15; margin:0}
h3{font-family:var(--serif); font-weight:400; font-size:22px; line-height:1.2; margin:0}
.lede{font-size:clamp(15.5px,1.5vw,17.5px); color:var(--dim); max-width:600px; margin:0}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; font-size:12.5px; padding:14px 22px; min-height:48px; cursor:pointer; border:0; border-radius:var(--r-xs); background:var(--accent); color:var(--on-accent); text-decoration:none; box-shadow:0 10px 30px -14px rgba(191,81,46,.8)}
.btn:disabled{opacity:.45; cursor:default; box-shadow:none}
.btn.ghost{background:transparent; color:var(--accent-text); border:1px solid var(--accent-line); box-shadow:none} .btn.ghost:hover{background:var(--accent-soft)}
.btn.quiet{background:transparent; color:var(--dim); border:1px solid var(--line2); box-shadow:none}
.btn.sm{padding:9px 14px; min-height:40px; font-size:11px}
.linkbtn{background:none; border:0; color:var(--accent-text); font-size:14px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; padding:8px 0; min-height:36px}
.linkbtn.dim{color:var(--muted)}
.card{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:clamp(18px,2.6vw,26px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.03)}
.card.hl{border-color:var(--accent-line)}
.divider{display:flex; align-items:center; gap:14px; margin:clamp(34px,5vw,48px) 0 18px; font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-text)}
.divider::after{content:""; flex:1; height:1px; background:linear-gradient(90deg, var(--accent-line), transparent)}
.k{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.note-s{font-size:13.5px; color:var(--muted); margin:10px 0 0}
.row{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.row.end{justify-content:flex-end} .row.between{justify-content:space-between}
.typing{display:inline-flex; gap:4px} .typing i{width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.3; animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s} .typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,100%{opacity:.25}40%{opacity:1}}
.loading{display:flex; align-items:center; gap:12px; color:var(--accent-text); font-family:var(--serif); font-size:18px; padding:40px 0}
.tag{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:4px 9px; border-radius:999px; color:var(--muted); border:1px solid var(--line2); white-space:nowrap}
.tag.hi{color:var(--accent-text); border-color:var(--accent-line)}
.tag.good{color:var(--good); border-color:rgba(156,201,138,.35)}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{font-size:14px; color:var(--dim); background:transparent; border:1px solid var(--line2); border-radius:999px; padding:9px 15px; min-height:44px; cursor:pointer; transition:all .18s var(--ease); text-align:left}
.chip:hover{border-color:var(--accent-text); color:var(--text)}
.chip.on{background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:500}

/* fields */
label.f{display:block; margin-top:14px}
label.f > span{display:block; font-size:13px; color:var(--muted); margin-bottom:6px}
.in, textarea.in, select.in{width:100%; background:var(--surface2); border:1px solid var(--line); border-radius:var(--r-s); color:var(--text); font-weight:300; font-size:16px; padding:12px 14px; line-height:1.5}
textarea.in{min-height:96px; resize:vertical}
.in:focus{outline:none; border-color:var(--accent-text)}
select.in{appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position:calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size:5px 5px; background-repeat:no-repeat; padding-right:36px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 18px} @media(max-width:640px){.grid2{grid-template-columns:1fr}}
.scale{display:flex; gap:4px; flex-wrap:wrap}
.scale button{width:40px; height:40px; border-radius:8px; border:1px solid var(--line2); background:transparent; color:var(--dim); cursor:pointer; font-size:14px}
.scale button.on{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
@media(max-width:420px){.scale button{width:calc((100% - 36px)/10); min-width:28px}}
details.more summary{cursor:pointer; color:var(--accent-text); font-size:14px; list-style:none; padding:10px 0; min-height:44px; display:flex; align-items:center}
details.more summary::-webkit-details-marker{display:none}
details.more summary::before{content:"+"; font-family:var(--mono); margin-right:8px}
details.more[open] summary::before{content:"\2212"}

/* checklist */
.checks{list-style:none; margin:12px 0 0; padding:0}
.checks li{display:flex; align-items:flex-start; gap:12px; padding:10px 0; border-top:1px solid var(--line)}
.checks li:first-child{border-top:0}
.cb{flex:none; width:24px; height:24px; margin-top:1px; border-radius:6px; border:1.5px solid var(--line2); background:transparent; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; color:var(--on-accent); padding:0}
.cb svg{width:14px; height:14px; opacity:0}
.cb.on{background:var(--accent); border-color:var(--accent)} .cb.on svg{opacity:1}
.checks .t{flex:1; font-size:15.5px; color:var(--text)}
.checks li.done .t{color:var(--muted); text-decoration:line-through; text-decoration-color:var(--faint)}
.checks li.dropped .t{color:var(--faint)}
.checks .meta{display:block; font-size:12.5px; color:var(--muted); text-decoration:none}
.checks .x{flex:none; background:none; border:0; color:var(--faint); cursor:pointer; font-size:13px; padding:4px 6px; min-height:32px}
.checks .x:hover{color:var(--accent-text)}
.addline{display:flex; gap:8px; margin-top:12px} .addline .in{flex:1}
.meter{height:4px; border-radius:4px; background:var(--line2); overflow:hidden; margin-top:8px} .meter i{display:block; height:100%; background:var(--mark); border-radius:4px}

/* do tiles */
.tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:12px} @media(max-width:900px){.tiles{grid-template-columns:1fr 1fr}} @media(max-width:420px){.tiles{grid-template-columns:1fr}}
.tile{display:block; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px 18px 20px; cursor:pointer; color:var(--text); text-decoration:none; transition:border-color .18s var(--ease), transform .18s var(--ease); min-height:110px}
.tile:hover{border-color:var(--accent-line); transform:translateY(-1px)}
.tile b{display:block; font-family:var(--serif); font-weight:400; font-size:21px; margin-bottom:4px}
.tile span{font-size:14px; color:var(--dim)}
.tile svg{width:22px; height:22px; color:var(--accent-text); margin-bottom:10px}

/* Mara line */
.mara{display:flex; gap:14px; align-items:flex-start}
.mara img{width:30px; height:30px; flex:none; opacity:.9; margin-top:2px}
html[data-mara-theme="light"] .mara img, html[data-mara-theme="light"] .bubble.m img{filter:invert(1)}
.mara p{margin:0; font-family:var(--serif); font-size:clamp(18px,2vw,21px); line-height:1.45}

/* conversation */
.convo{display:flex; flex-direction:column; gap:14px}
.bubble{max-width:88%; font-size:16px; line-height:1.6; white-space:pre-wrap}
.bubble.u{align-self:flex-end; background:var(--surface2); border:1px solid var(--line); border-radius:14px 14px 4px 14px; padding:11px 14px; color:var(--text)}
.bubble.m{align-self:flex-start; display:flex; gap:12px}
.bubble.m img{width:22px; height:22px; flex:none; margin-top:3px; opacity:.9}
.bubble.m span{font-family:var(--serif); font-size:18px; color:var(--text)}
.bubble.crisis{align-self:stretch; max-width:none; background:var(--bad-soft); border:1px solid rgba(232,144,127,.35); border-radius:var(--r-s); padding:14px 16px; font-size:15px; color:var(--text)}
.composer{display:flex; gap:8px; align-items:flex-end; margin-top:14px}
.composer textarea{flex:1; min-height:52px; max-height:180px}

/* sheet */
.sheet{position:fixed; inset:0; z-index:90; display:flex; justify-content:flex-end; background:rgba(0,0,0,.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px)}
.sheet .panel{width:min(680px,100%); height:100%; overflow-y:auto; overscroll-behavior:contain; background:var(--bg2); border-left:1px solid var(--line); padding:calc(16px + env(safe-area-inset-top,0px)) clamp(16px,3.5vw,32px) calc(32px + env(safe-area-inset-bottom,0px))}
.sheet .top{display:flex; justify-content:space-between; align-items:center; gap:12px; position:sticky; top:calc(-16px - env(safe-area-inset-top,0px)); background:var(--bg2); padding:6px 0 12px; z-index:2; border-bottom:1px solid var(--line); margin-bottom:18px}
.close{background:none; border:1px solid var(--line2); color:var(--dim); border-radius:var(--r-xs); width:44px; height:44px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center}
.close svg{width:16px; height:16px}

/* lists */
.week{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin:26px 0 8px}
.entry{display:grid; grid-template-columns:76px 1fr; gap:18px; padding:16px 0; border-top:1px solid var(--line); cursor:pointer}
.entry:hover .e-body{color:var(--text)}
.entry .when{font-size:13px; color:var(--muted)} .entry .when b{display:block; font-family:var(--serif); font-weight:400; font-size:22px; color:var(--text); line-height:1.1}
@media(max-width:560px){.entry{grid-template-columns:1fr; gap:6px}.entry .when b{display:inline; font-size:16px; margin-right:6px}}
.e-top{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.e-top b{font-weight:500; font-size:15px}
.e-body{margin:6px 0 0; font-size:15.5px; color:var(--dim); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.pills{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.pill{font-size:12.5px; color:var(--dim); background:var(--surface2); border:1px solid var(--line); border-radius:999px; padding:4px 10px} .pill b{font-weight:500; color:var(--text)}
.goalrow{display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center; padding:16px 0; border-top:1px solid var(--line)}
.goalrow:first-child{border-top:0}
.goalrow h3{font-size:20px; cursor:pointer}
.goalrow .sub{font-size:13.5px; color:var(--muted); margin-top:4px}
.ins{padding:14px 0; border-top:1px solid var(--line)} .ins:first-child{border-top:0}
.ins p{margin:6px 0 0; font-size:15.5px; color:var(--text)}
.field-read{margin-top:14px} .field-read p{margin:4px 0 0; font-size:15.5px; color:var(--dim); white-space:pre-wrap}
.empty{text-align:center; padding:clamp(26px,5vw,48px) 20px}
.empty p{color:var(--dim); max-width:520px; margin:8px auto 18px}
.private{display:flex; align-items:center; justify-content:center; gap:10px; font-size:13px; color:var(--muted); margin:44px auto 0; text-align:center; max-width:660px}
.private svg{width:14px; height:14px; flex:none}
.toast{position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:120; background:var(--raise); border:1px solid var(--line2); color:var(--text); padding:12px 16px; border-radius:10px; font-size:14px; box-shadow:0 12px 30px -10px rgba(0,0,0,.5); max-width:calc(100% - 32px)}
.spark svg{display:block; width:100%; height:auto; overflow:visible}
.spark .grid{stroke:var(--line); stroke-width:1}
.spark .ln{fill:none; stroke:var(--mark); stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.spark .ln2{fill:none; stroke:var(--faint); stroke-width:2; stroke-dasharray:4 4}
.spark .pt{fill:var(--mark); stroke:var(--surface); stroke-width:2}
.spark .pt2{fill:var(--faint); stroke:var(--surface); stroke-width:2}
.spark .ax{font-family:var(--mono); font-size:9.5px; fill:var(--faint)}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}
button.tile{font:inherit; line-height:1.6; width:100%}
.chips.scroll{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; margin-left:-2px; padding:2px}
.chips.scroll::-webkit-scrollbar{display:none}
.chips.scroll .chip{flex:none; white-space:nowrap}
@media(min-width:721px){.chips.scroll{flex-wrap:wrap}}

/* goal setting section */
#setSection{margin:0 0 8px}
.setgrid{display:grid; grid-template-columns:300px 1fr; gap:16px; align-items:start}
.stages ol{list-style:none; margin:12px 0 0; padding:0; counter-reset:st}
.stages li{display:flex; gap:12px; align-items:flex-start; padding:9px 0; border-top:1px solid var(--line)}
.stages li:first-child{border-top:0}
.stages li i{flex:none; width:20px; height:20px; border-radius:50%; border:1.5px solid var(--line2); display:inline-flex; align-items:center; justify-content:center; margin-top:2px; color:var(--on-accent)}
.stages li i svg{width:11px; height:11px}
.stages li b{display:block; font-weight:500; font-size:14.5px; color:var(--dim)}
.stages li small{display:block; font-size:12.5px; color:var(--faint); line-height:1.45}
.stages li.done i{background:var(--good); border-color:var(--good)} .stages li.done b{color:var(--text)}
.stages li.on i{border-color:var(--accent-text); box-shadow:0 0 0 4px var(--accent-soft)} .stages li.on b{color:var(--accent-text)}
.stagemini{display:none}
.setconvo{max-height:min(56vh,560px); overflow-y:auto; margin-top:18px; padding-right:4px}
@media(max-width:860px){
  .setgrid{grid-template-columns:1fr}
  .stages{display:none}
  .stagemini{display:block; margin-top:14px}
  .stagemini span{font-size:13px; color:var(--dim); margin-right:10px}
  .setconvo{max-height:none}
}

/* ── photography (13 Oct 2026) ── */
.hero{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(20px,4vw,48px); align-items:center; padding:clamp(24px,4vw,48px) 0 clamp(20px,3vw,32px)}
.hero .head{padding:0}
.hero-img{position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:4/5; max-height:520px; width:100%; justify-self:end; border:1px solid var(--line); background:var(--surface)}
.hero-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.9) contrast(1.02)}
.hero-img::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(12,12,14,.65))}
.hero-img figcaption{position:absolute; left:18px; right:18px; bottom:16px; z-index:1; font-family:var(--serif); font-size:clamp(17px,1.7vw,20px); line-height:1.35; color:#F3F0EC}
.hero-img figcaption small{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(243,240,236,.7); margin-bottom:6px}
.hero .cta{margin-top:22px}
@media(max-width:820px){
  .hero{grid-template-columns:1fr}
  .hero-img{order:-1; aspect-ratio:16/10; max-height:none}
}
.tile.ph{padding:0; overflow:hidden; display:flex; flex-direction:column; min-height:0}
.tile.ph .ph-img{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--surface2)}
.tile.ph .ph-img img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease); filter:saturate(.9)}
.tile.ph:hover .ph-img img{transform:scale(1.04)}
.tile.ph .ph-img::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(12,12,14,.55))}
.tile.ph .ph-body{padding:16px 18px 18px}
.tile.ph svg{margin:0 0 6px}
@media(max-width:420px){.tile.ph{flex-direction:row}.tile.ph .ph-img{aspect-ratio:auto; width:38%; flex:none}}
.pcard{display:grid; grid-template-columns:200px 1fr; gap:0; padding:0; overflow:hidden}
.pcard .pc-img{position:relative; min-height:180px}
.pcard .pc-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.pcard .pc-body{padding:clamp(18px,2.6vw,26px)}
@media(max-width:560px){.pcard{grid-template-columns:1fr}.pcard .pc-img{min-height:150px}}
.empty-ph{max-width:340px; margin:0 auto 18px; border-radius:var(--r); overflow:hidden; aspect-ratio:4/3; border:1px solid var(--line)}
.empty-ph img{width:100%; height:100%; object-fit:cover; display:block}

/* coming up */
.coming{margin-top:8px}
.cu-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:4px}
.cu-row{display:grid; grid-template-columns:76px 1fr; gap:18px; padding:16px 0; border-top:1px solid var(--line)}
.cu-head + .cu-row{border-top:0}
.cu-date{border:1px solid var(--line2); border-radius:10px; text-align:center; padding:8px 4px; align-self:start}
.cu-date b{display:block; font-family:var(--serif); font-weight:400; font-size:26px; line-height:1}
.cu-date span{display:block; font-size:11.5px; color:var(--muted); margin-top:4px; line-height:1.3}
.cu-row.hi .cu-date{border-color:var(--accent-line)} .cu-row.hi .cu-date b{color:var(--accent-text)}
.cu-row.after .cu-date{border-style:dashed}
.cu-title{font-family:var(--serif); font-size:20px; line-height:1.3; color:var(--text)}
.cu-title span{color:var(--dim)}
.cu-why{margin:8px 0 0; font-size:14.5px; color:var(--dim)}
.cu-prac{margin:8px 0 0; font-size:14.5px; color:var(--text); padding:10px 12px; background:var(--surface2); border-radius:var(--r-s); border:1px solid var(--line)}
.cu-prac .k{margin-right:6px}
.cu-act{margin-top:12px; gap:10px}
.cu-empty{display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap}
.cu-empty p{margin:6px 0 0; color:var(--dim); font-size:15px; max-width:620px}
@media(max-width:520px){.cu-row{grid-template-columns:58px 1fr; gap:12px}.cu-date b{font-size:22px}}

/* goal setting areas */
.areas{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:14px}
@media(max-width:980px){.areas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.areas{grid-template-columns:1fr}}
.area-btn{text-align:left; background:var(--surface2); border:1px solid var(--line); border-radius:var(--r-s); padding:12px 14px; cursor:pointer; color:var(--text); min-height:60px; transition:border-color .18s var(--ease), background .18s var(--ease)}
.area-btn:hover{border-color:var(--accent-line); background:var(--accent-soft)}
.area-btn b{display:block; font-family:var(--serif); font-weight:400; font-size:17px; line-height:1.25}
.area-btn span{display:block; font-size:12.5px; color:var(--muted); margin-top:2px; line-height:1.4}
.area-btn.quiet b{color:var(--dim)}
.stages li.area{border-top:0; padding-bottom:12px}
.stages li.area b{font-family:var(--serif); font-weight:400; font-size:19px; color:var(--accent-text)}
.stages li.deep small::before{content:"Deeper \00B7  "; font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-text)}
.note-pick{display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-top:1px solid var(--line); cursor:pointer; font-size:15px; color:var(--text)}
.note-pick input{width:18px; height:18px; margin-top:3px; accent-color:var(--accent); flex:none}