/* ============================================================
   Minecraft Progression Tracker — thème « Blocks » (clair / sombre)
   Direction : GUI Minecraft (bevels, pixels), palette par dimension,
   structure qui encode le contenu (séquence → numéros, référence → lignes).
   ============================================================ */

/* ---------- fonts ---------- */
@font-face{font-family:'Silkscreen';font-weight:400;src:url('../assets/fonts/silkscreen-400.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Silkscreen';font-weight:700;src:url('../assets/fonts/silkscreen-700.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Space Grotesk';font-weight:400;src:url('../assets/fonts/sg-400.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Space Grotesk';font-weight:500;src:url('../assets/fonts/sg-500.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Space Grotesk';font-weight:700;src:url('../assets/fonts/sg-700.woff2') format('woff2');font-display:swap}

/* ---------- tokens : nuit (défaut) ---------- */
:root{
  --bg:#0e120d; --glow1:rgba(111,207,92,.07); --glow2:rgba(77,159,232,.05);
  --panel:#151b13; --panel2:#1b2318; --card:#19211a; --card-hover:#1e271c;
  --line:#2a3527; --line2:#3a4a35;
  --txt:#e9f0e3; --muted:#a3b39c; --faint:#7b8a75;
  --accent:#6fcf5c; --accent-deep:#3f7a37; --accent-txt:#0c1409;
  --amber:#e0b04a; --violet:#a273e8; --red:#e0705f; --blue:#4d9fe8; --orange:#d9823c;
  --gridline:rgba(255,255,255,.035);
  --bevel:inset 2px 2px 0 rgba(255,255,255,.05), inset -2px -2px 0 rgba(0,0,0,.35);
  --bevel-strong:inset 2px 2px 0 rgba(255,255,255,.10), inset -2px -2px 0 rgba(0,0,0,.45);
  --bevel-press:inset 2px 2px 0 rgba(0,0,0,.4);
  --done-bg:#16220f; --done-line:#3c6132;
  --tab-story:#6fcf5c; --tab-nether:#e0705f; --tab-end:#a98cf0; --tab-adventure:#52c2cd; --tab-husbandry:#e0b04a;
  --r:10px;
}
/* ---------- tokens : jour ---------- */
:root[data-theme="light"]{
  --bg:#edf1e8; --glow1:rgba(61,139,55,.06); --glow2:rgba(36,113,180,.05);
  --panel:#f6f9f2; --panel2:#fcfdfa; --card:#fbfdf8; --card-hover:#f2f7ec;
  --line:#dbe4d2; --line2:#bccbb2;
  --txt:#1e2a1c; --muted:#5b6b56; --faint:#7d8c78;
  --accent:#3d8b37; --accent-deep:#2c6b28; --accent-txt:#f4fbf1;
  --amber:#96690f; --violet:#6b46c0; --red:#b3452f; --blue:#2c6ea8; --orange:#a05a17;
  --gridline:rgba(31,42,29,.05);
  --bevel:inset 2px 2px 0 rgba(255,255,255,.9), inset -2px -2px 0 rgba(31,42,29,.09);
  --bevel-strong:inset 2px 2px 0 rgba(255,255,255,1), inset -2px -2px 0 rgba(31,42,29,.14);
  --bevel-press:inset 2px 2px 0 rgba(31,42,29,.16);
  --done-bg:#e9f4e1; --done-line:#9cc98c;
  --tab-story:#2f7d33; --tab-nether:#b3402c; --tab-end:#6b46c0; --tab-adventure:#1f7f8a; --tab-husbandry:#8f6a12;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1100px 480px at 15% -10%, var(--glow1), transparent 60%),
    radial-gradient(900px 420px at 100% 0%, var(--glow2), transparent 55%),
    var(--bg);
  color:var(--txt);
  font-family:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:14px; line-height:1.5; min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none; border-bottom:1px solid transparent}
a:hover{border-bottom-color:currentColor}
button{font-family:inherit; color:inherit; background:none; border:none; cursor:pointer; font-size:inherit}
.px{image-rendering:pixelated}
::selection{background:var(--accent); color:var(--accent-txt)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
.num{font-family:'Silkscreen',monospace}

/* ---------- header ---------- */
.hdr{position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 16px; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.brand{display:flex; align-items:center; gap:9px; white-space:nowrap}
.brand img{width:22px; height:22px}
.wordmark{font-family:'Silkscreen'; font-size:12.5px; letter-spacing:.02em}
.vchip{font-family:'Silkscreen'; font-size:9px; color:var(--muted); border:1px solid var(--line2); border-radius:6px;
  padding:3px 6px; background:var(--panel2); box-shadow:var(--bevel)}
.worldpick{display:flex; align-items:center; gap:8px; padding:7px 11px; border:1px solid var(--line2); border-radius:var(--r);
  background:var(--panel2); box-shadow:var(--bevel); font-weight:500; font-size:13px; max-width:250px}
.worldpick:hover{border-color:var(--accent-deep)}
.worldpick .wname{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.worldpick img{width:17px; height:17px}
.worldpick .caret{opacity:.55; font-style:normal}
.hspace{flex:1}
.search{width:210px; max-width:32vw; padding:8px 12px; border-radius:var(--r); border:1px solid var(--line2);
  background:var(--panel); color:var(--txt); outline:none; font-size:13px; box-shadow:var(--bevel-press)}
.search::placeholder{color:var(--faint)}
.search:focus{border-color:var(--accent)}
.iconbtn{width:36px; height:36px; display:grid; place-items:center; border-radius:var(--r); border:1px solid var(--line2);
  background:var(--panel2); box-shadow:var(--bevel); font-size:15px; line-height:1; color:var(--muted)}
.iconbtn:hover{color:var(--txt); border-color:var(--accent-deep)}
.iconbtn:active{box-shadow:var(--bevel-press)}
.iconbtn.on{background:var(--accent); border-color:var(--accent-deep); color:var(--accent-txt)}
.hdrright{display:flex; align-items:center; gap:10px}
.gring{display:flex; align-items:center; gap:9px}
.gtxt{display:flex; flex-direction:column; line-height:1.2}
.gtxt b{font-family:'Silkscreen'; font-size:12px; font-weight:700}
.gtxt span{font-size:10.5px; color:var(--muted)}
.saved{font-size:11px; color:var(--accent); opacity:0; transition:opacity .3s; min-width:78px}
.saved.show{opacity:1}

/* ---------- ring ---------- */
.ring text{font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-.02em}
.ring .val{transition:stroke-dashoffset .9s cubic-bezier(.25,.8,.3,1)}

/* ---------- world menu ---------- */
.wmenu{display:none; position:absolute; top:58px; left:16px; width:330px; max-width:92vw;
  background:var(--panel2); border:1px solid var(--line2); border-radius:14px; padding:10px; z-index:60;
  box-shadow:0 18px 50px rgba(0,0,0,.30), var(--bevel)}
.wmenu.open{display:block}
.mtitle{font-size:11.5px; color:var(--muted); padding:4px 8px 8px}
.wlist{display:flex; flex-direction:column; gap:4px; max-height:230px; overflow:auto}
.wrow{display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center; text-align:left;
  padding:8px 10px; border-radius:8px; border:1px solid transparent}
.wrow:hover{background:var(--card-hover)}
.wrow.cur{border-color:var(--accent-deep); background:var(--card-hover)}
.wrow .wn{font-weight:500; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.wrow .wp{font-family:'Silkscreen'; font-size:10px; color:var(--accent)}
.wrow .wd{font-size:10.5px; color:var(--faint)}
.msep{height:1px; background:var(--line); margin:8px 4px}
.mrow{display:block; width:100%; text-align:left; padding:8px 10px; border-radius:8px; font-size:13px}
.mrow:hover{background:var(--card-hover)}
.mrow.danger{color:var(--red)}
.mnote{font-size:11px; color:var(--muted); padding:8px 8px 2px; line-height:1.45}

/* ---------- nav ---------- */
.nav{display:flex; gap:6px; padding:10px 16px 4px; overflow-x:auto}
.tab{display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:var(--r); border:1px solid transparent;
  font-weight:500; font-size:13px; color:var(--muted); white-space:nowrap}
.tab img{width:18px; height:18px; opacity:.85}
.tab:hover{color:var(--txt); background:var(--card)}
.tab.on{color:var(--txt); background:var(--panel2); border-color:var(--line2); box-shadow:var(--bevel)}
.tab.on img{opacity:1}

/* ---------- layout ---------- */
.view{padding:8px 16px 60px; max-width:1500px; margin:0 auto}
.page{display:flex; flex-direction:column; gap:16px}
.page.wide{gap:10px}

/* ---------- hero ---------- */
.hero{display:flex; gap:22px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:20px 22px}
.hero.small{padding:16px 20px}
.heroTxt{max-width:800px}
.heroTxt h1,.heroTxt h2{margin:0 0 6px; font-size:21px; font-weight:700; letter-spacing:-.01em}
.heroTxt p{margin:0; color:var(--muted); font-size:13.5px; max-width:74ch}
.heroRing{display:flex; flex-direction:column; align-items:center; gap:7px}
.heroSub{font-size:11.5px; color:var(--muted)}
.nextstep{margin-top:12px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px;
  background:var(--card); border:1px solid var(--line2); border-radius:var(--r); padding:9px 12px; box-shadow:var(--bevel)}
.nextstep img{width:20px; height:20px}
.nextstep .lbl{color:var(--muted); font-size:12px}

/* ---------- small buttons ---------- */
.mini{padding:6px 10px; font-size:11.5px; font-weight:500; border:1px solid var(--line2); border-radius:8px;
  background:var(--panel2); box-shadow:var(--bevel); color:var(--txt)}
.mini:hover{border-color:var(--accent-deep)}
.mini:active{box-shadow:var(--bevel-press)}
.mini.link{border-color:transparent; background:none; box-shadow:none; color:var(--accent); padding:3px 1px; font-weight:500}
.mini.link:hover{border-bottom:1px solid currentColor; border-radius:0}

/* ---------- phases / roadmap ---------- */
.phases{display:flex; flex-direction:column; gap:14px}
.phase{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:16px 18px}
.phase.sp-gold{border-color:var(--amber)}
.phase.sp-elytra{border-color:var(--violet); background:linear-gradient(170deg, var(--card), var(--panel))}
.phase header{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.pnum{font-family:'Silkscreen'; font-size:13px; background:var(--panel2); border:1px solid var(--line2); border-radius:8px;
  padding:8px 10px; box-shadow:var(--bevel)}
.sp-gold .pnum{color:var(--amber); border-color:var(--amber)}
.sp-elytra .pnum{color:var(--violet); border-color:var(--violet)}
.pt{flex:1; min-width:180px}
.pt h3{margin:0; font-size:15.5px; font-weight:700}
.pt span{font-size:12px; color:var(--muted)}
.pt .pcount{font-family:'Silkscreen'; font-size:10px; color:var(--faint); margin-left:8px}
.pbar{width:150px}
.pintro{margin:10px 0 12px; color:var(--muted); font-size:12.5px; max-width:82ch}

.bar{height:8px; background:var(--bg); border-radius:99px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--bevel-press)}
.bar i{display:block; height:100%; background:var(--accent); border-radius:99px; transition:width .4s}
.sp-elytra .bar i{background:var(--violet)}
.sp-gold .bar i{background:var(--amber)}

.rows{display:flex; flex-direction:column; gap:6px}
.row{display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:var(--r);
  background:var(--card); border:1px solid var(--line); cursor:pointer; transition:border-color .15s, background .15s}
.row:hover{border-color:var(--line2); background:var(--card-hover)}
.row.done{background:var(--done-bg); border-color:var(--done-line)}
.row img.px{width:22px; height:22px}
.row.done .rt b{color:var(--muted); text-decoration:line-through; text-decoration-color:var(--line2)}
.rt{flex:1; min-width:0}
.rt b{display:block; font-size:13px; font-weight:500}
.rt span{display:block; font-size:11.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rgo{font-size:10.5px; color:var(--muted); border:1px solid var(--line2); padding:2px 8px; border-radius:999px; white-space:nowrap}

/* ---------- checks / chips ---------- */
.check{width:20px; height:20px; min-width:20px; border-radius:5px; border:1px solid var(--line2);
  background:var(--panel2); box-shadow:var(--bevel); color:transparent; font-size:12px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; transition:background .15s, border-color .15s}
.check:hover{border-color:var(--accent)}
.check.on{background:var(--accent); border-color:var(--accent-deep); color:var(--accent-txt)}
.check.sm{width:18px; height:18px; min-width:18px; font-size:11px}
.check.bt{position:absolute; top:7px; right:7px; width:18px; height:18px; min-width:18px; font-size:10px}
.chip{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; border:1px solid var(--line2); border-radius:999px;
  padding:2px 9px; color:var(--muted); background:var(--panel); white-space:nowrap}
.chip.k-goal{border-color:var(--amber); color:var(--amber)}
.chip.k-farm{border-color:var(--accent-deep); color:var(--accent)}
.chip.k-step{border-color:var(--violet); color:var(--violet)}
.chip.frame-challenge{border-color:var(--red); color:var(--red)}
.chip.frame-goal{border-color:var(--amber); color:var(--amber)}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip.linkchip{cursor:pointer}
.chip.linkchip:hover{border-color:var(--accent); color:var(--accent)}
.en{opacity:.75; font-style:italic}

/* ---------- trees ---------- */
.subnav{display:flex; gap:6px; overflow-x:auto; padding-bottom:2px}
.subtab{display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:var(--r); border:1px solid var(--line);
  background:var(--panel); font-weight:500; font-size:12.5px; color:var(--muted); white-space:nowrap}
.subtab img{width:20px; height:20px; opacity:.9}
.subtab b{font-family:'Silkscreen'; font-size:9px; color:var(--faint); font-weight:400}
.subtab:hover{border-color:var(--line2); color:var(--txt)}
.subtab.on{color:var(--txt); border-color:var(--tc); box-shadow:inset 0 -3px 0 var(--tc)}
.treebar{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.tstats{display:flex; align-items:center; gap:11px}
.tstats b{display:block; font-size:14px; font-weight:700}
.tstats span{font-size:11.5px; color:var(--muted)}
.tctl{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.legend{display:flex; gap:12px; align-items:center; font-size:11px; color:var(--muted); margin-left:8px; flex-wrap:wrap}
.lg{width:11px; height:11px; border-radius:3px; display:inline-block; border:1px solid var(--line2); box-shadow:var(--bevel)}
.lg.adv{background:var(--panel2)}
.lg.goal{background:var(--panel2); border-left:3px solid var(--amber)}
.lg.farm{background:var(--panel2); border-left:3px solid var(--accent)}
.lg.done{background:var(--accent); border-color:var(--accent-deep)}

.treewrap{position:relative; overflow:hidden; border-radius:14px; border:1px solid var(--line);
  background-color:var(--bg); background-image:
    linear-gradient(var(--gridline) 1px, transparent 1px),
    linear-gradient(90deg, var(--gridline) 1px, transparent 1px);
  background-size:34px 34px;
  height:calc(100vh - 262px); min-height:440px; touch-action:none; cursor:grab}
.treewrap:active{cursor:grabbing}
.tinner{position:absolute; left:0; top:0; transform-origin:0 0}
.edges{position:absolute; left:0; top:0; pointer-events:none}
.edge{fill:none; stroke:var(--line2); stroke-width:2.5}
.edge.edone{stroke:var(--accent-deep)}
.node{position:absolute; width:186px; min-height:64px; transform:translate(-50%,0);
  display:flex; align-items:center; gap:9px; padding:10px 28px 10px 10px; border-radius:8px;
  background:var(--card); border:1px solid var(--line2); border-left:4px solid var(--tc,var(--line2));
  box-shadow:var(--bevel); cursor:pointer; transition:border-color .12s, background .12s}
.node:hover{border-color:var(--accent); background:var(--card-hover); z-index:3}
.node img.px{width:26px; height:26px; flex:none}
.node .ntxt{font-size:11.5px; font-weight:500; line-height:1.3; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.node.done{background:var(--done-bg); border-color:var(--done-line)}
.node.done .ntxt{color:var(--muted)}
.node.k-goal{border-left-style:dashed; border-left-color:var(--amber)}
.node.k-farm{border-left-color:var(--accent)}
.node.hit{outline:2px solid var(--amber); outline-offset:2px}
.node.dim{opacity:.2}
.node.secret .ntxt{filter:blur(4px)}
.node.final{border-color:var(--amber); box-shadow:var(--bevel-strong), 0 0 0 2px var(--amber); animation:glow 3s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:var(--bevel-strong), 0 0 0 2px var(--amber)}50%{box-shadow:var(--bevel-strong), 0 0 0 3px var(--amber)}}
.crown{position:absolute; top:-11px; left:-11px; font-size:15px}
.noicon{display:inline-block; border-radius:4px; background:var(--line); flex:none}
/* mode « icônes » (zoom arrière) */
.tinner.mini .node{width:56px; min-height:56px; padding:0; justify-content:center}
.tinner.mini .node .ntxt{display:none}
.tinner.mini .node img.px{width:30px; height:30px}
.tinner.mini .node .check{width:14px; height:14px; min-width:14px; top:3px; right:3px; font-size:9px; border-radius:3px}
.tinner.mini .crown{font-size:13px; top:-9px; left:-9px}

/* ---------- sections / cards ---------- */
.sech{margin:18px 0 10px; font-size:14px; font-weight:700; display:flex; align-items:center; gap:10px}
.sech::before{content:""; width:12px; height:12px; background:var(--c,var(--accent)); border-radius:3px; box-shadow:var(--bevel); flex:none}
.sech span{font-size:11.5px; color:var(--muted); font-weight:400}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:12px}
.card{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:13px 14px;
  display:flex; flex-direction:column; cursor:pointer; transition:border-color .15s}
.card:hover{border-color:var(--accent-deep)}
.card.done{border-color:var(--done-line); background:var(--done-bg)}
.card.done b{color:var(--muted)}
.cardhead{display:flex; align-items:center; gap:9px}
.cardhead img.px{width:28px; height:28px}
.cardhead b{flex:1; font-size:13.5px; font-weight:700}
.card p{margin:8px 0 0; color:var(--muted); font-size:12.5px; flex:1}
.cardfoot{display:flex; align-items:center; gap:8px; margin-top:11px; flex-wrap:wrap}

/* ---------- path (base & construction) ---------- */
.path{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px}
.pitem{display:flex; align-items:center; gap:12px; padding:10px 12px; background:var(--card);
  border:1px solid var(--line); border-radius:12px; cursor:pointer; transition:border-color .15s}
.path .pitem:hover{border-color:var(--accent-deep)}
.pnum2{font-family:'Silkscreen'; font-size:12px; min-width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  background:var(--panel2); border:1px solid var(--line2); border-radius:8px; box-shadow:var(--bevel); flex:none}
.pitem img.px{width:26px; height:26px; flex:none}
.pitem .ptxt{flex:1; min-width:0}
.pitem .ptxt b{display:block; font-size:13.5px; font-weight:500}
.pitem .ptxt span{display:block; font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pitem.done{background:var(--done-bg); border-color:var(--done-line)}
.pitem.done .ptxt b{color:var(--muted)}
.pitem.static{cursor:default}
.pitem.static:hover{border-color:var(--line)}
.pitem.static .ptxt{font-size:13px}

/* ---------- mods rows ---------- */
.modrows{display:flex; flex-direction:column; gap:6px}
.modrow{display:grid; grid-template-columns:225px 1fr auto; gap:2px 16px; padding:11px 13px;
  background:var(--card); border:1px solid var(--line); border-radius:12px; align-items:baseline}
.modrow .mname{font-weight:700; font-size:13.5px}
.modrow p{margin:0; color:var(--muted); font-size:12.5px}
.modrow .mfoot{grid-column:1 / -1; display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:7px}
.vbadge{font-family:'Silkscreen'; font-size:8.5px; padding:3px 8px; border-radius:6px; border:1px solid var(--accent-deep);
  color:var(--accent); background:var(--panel2); box-shadow:var(--bevel); white-space:nowrap}
.vbadge.soon{border-color:var(--amber); color:var(--amber)}

/* ---------- tips ---------- */
.tips{display:flex; flex-direction:column; gap:7px}
.tipitem{background:var(--card); border:1px solid var(--line); border-left:3px solid var(--c,var(--accent)); border-radius:10px; padding:11px 13px}
.tipitem b{font-size:13px; font-weight:700}
.tipitem p{margin:4px 0 0; color:var(--muted); font-size:12.5px; max-width:90ch}

/* ---------- detail ---------- */
.detail{position:fixed; top:0; right:0; bottom:0; width:430px; max-width:96vw; background:var(--panel);
  border-left:1px solid var(--line2); padding:18px 20px 40px; overflow:auto; z-index:70;
  transform:translateX(105%); transition:transform .25s ease; box-shadow:-24px 0 60px rgba(0,0,0,.28)}
.detail.open{transform:translateX(0)}
.detail .close{position:absolute; top:12px; right:14px; width:32px; height:32px; border-radius:8px;
  border:1px solid var(--line); background:var(--panel2); box-shadow:var(--bevel); font-size:14px; color:var(--muted)}
.detail .close:hover{color:var(--txt); border-color:var(--line2)}
.dhead{display:flex; gap:12px; align-items:flex-start; padding-left:12px; border-left:4px solid var(--c,var(--accent)); margin-top:4px}
.dhead img.px{width:38px; height:38px}
.dhead h3{margin:0 0 7px; font-size:16.5px; font-weight:700}
.dbody{margin-top:14px}
.desc{font-size:13px; margin:0}
h4{margin:20px 0 8px; font-size:12.5px; font-weight:700; color:var(--muted)}
.how{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px}
.how li{font-size:13px; line-height:1.5; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:9px 11px}
.how li::before{content:"▸ "; color:var(--accent)}
.bigbtn{display:block; width:100%; margin-top:22px; padding:12px; border-radius:var(--r); border:1px solid var(--accent-deep);
  background:var(--accent); color:var(--accent-txt); font-weight:700; font-size:14px; box-shadow:var(--bevel-strong)}
.bigbtn:hover{filter:brightness(1.05)}
.bigbtn:active{box-shadow:var(--bevel-press)}
.bigbtn.on{background:var(--panel2); color:var(--muted); border-color:var(--line2); box-shadow:var(--bevel)}
.subtle{color:var(--muted); font-size:12px}

/* ---------- misc ---------- */
.welcome{position:fixed; left:50%; bottom:22px; transform:translate(-50%,16px); opacity:0; transition:.35s;
  background:var(--panel2); border:1px solid var(--line2); border-radius:14px; padding:12px 16px; z-index:80;
  max-width:680px; font-size:13px; box-shadow:0 14px 40px rgba(0,0,0,.3), var(--bevel)}
.welcome.show{opacity:1; transform:translate(-50%,0)}
.footer{max-width:1500px; margin:0 auto; padding:0 16px 30px; color:var(--faint); font-size:11.5px}

@media (max-width:900px){
  .modrow{grid-template-columns:1fr}
  .hdr{gap:8px; padding:9px 10px}
  .wordmark{display:none}
  .search{width:136px; max-width:30vw}
  .view{padding:8px 10px 60px}
  .treewrap{height:64vh; min-height:360px}
  .detail{width:100%; max-width:100%}
  .hero{padding:14px}
  .heroTxt h1,.heroTxt h2{font-size:17px}
  .pbar{width:110px}
  .wmenu{left:8px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none !important; animation:none !important}
}