/* self-hosted, same subsets the portfolio serves, no external requests */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/inter-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/inter-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/newsreader-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/newsreader-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
:root{--bg:#fbfaf7;--panel:#ffffff;--soft:#f4f1ea;--text:#14181c;--muted:#565c63;--faint:#6f767e;--line:#e4e0d8;--accent:#1f7a75;--accent2:#a06a1f;--accentsoft:rgba(31,122,117,.13);--good:#2c6b52;--goodsoft:#e7f1ec;--bad:#a33a41;--badsoft:#f7ecec;--warn:#8a5a12;--warnsoft:#f8f0e2;--code:#14181c;--codetext:#f2efe9;--shadow:0 10px 28px rgba(20,24,28,.07);--glass:color-mix(in srgb,var(--panel) 80%,transparent);--hm0:var(--line);--hm1:#bcd8d5;--hm2:#8cc0bb;--hm3:#4b9d97;--hm4:#1f7a75;--star:#c9862f;--display:"Newsreader",Georgia,"Times New Roman",serif;--sans:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;--mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace}
[data-theme=dark]{--bg:#16191d;--panel:#1c2025;--soft:#23272c;--text:#e8e4dc;--muted:#a8adb4;--faint:#8d939a;--line:#2c3137;--accent:#4bb3ac;--accent2:#dda053;--accentsoft:rgba(75,179,172,.15);--good:#6fbf95;--goodsoft:#1c2f27;--bad:#e08a8a;--badsoft:#332223;--warn:#dda053;--warnsoft:#312717;--code:#101317;--codetext:#f2efe9;--shadow:0 12px 30px rgba(0,0,0,.3);--glass:color-mix(in srgb,var(--panel) 74%,transparent);--hm1:#254a48;--hm2:#356e6a;--hm3:#4b9d97;--hm4:#7fd0c9;--star:#dda053;}
/* difficulty scale, ordinal Low->Complex; every badge also carries its text
   label, so identity is never colour-alone. All 8 pairs pass WCAG AA 4.5:1. */
:root{--dl-fg:#1f6b56;--dl-bg:#e8f1ec;--dm-fg:#8a5a12;--dm-bg:#f8f0e2;--dh-fg:#a2551f;--dh-bg:#f9ede4;--dc-fg:#a33a41;--dc-bg:#f8ecec;--dl-s:#2c8069;--dm-s:#a06a1f;--dh-s:#b56526;--dc-s:#b8474e}
[data-theme=dark]{--dl-fg:#7fd0b6;--dl-bg:#1b2f28;--dm-fg:#dda053;--dm-bg:#312717;--dh-fg:#e5a173;--dh-bg:#33251b;--dc-fg:#e89096;--dc-bg:#332325;--dl-s:#7fd0b6;--dm-s:#dda053;--dh-s:#e5a173;--dc-s:#e89096}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:15.5px/1.62 var(--sans);-webkit-font-smoothing:antialiased}
button,input,select{font:inherit}
mark{background:color-mix(in srgb,var(--warn) 32%,transparent);color:inherit;border-radius:3px;padding:0 1px}
#readbar{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));z-index:60}

/* ============ aurora backdrop ============ */
.aurora{position:fixed;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.aurora i{position:absolute;border-radius:50%;filter:blur(96px);opacity:.42}
.aurora i:nth-child(1){width:52vw;height:52vw;left:-14vw;top:-18vw;background:radial-gradient(circle,rgba(31,122,117,.30),transparent 66%);animation:drift1 46s linear infinite alternate}
.aurora i:nth-child(2){width:46vw;height:46vw;right:-12vw;top:-8vw;background:radial-gradient(circle,rgba(201,134,47,.24),transparent 66%);animation:drift2 58s linear infinite alternate}
.aurora i:nth-child(3){width:42vw;height:42vw;left:28vw;bottom:-24vw;background:radial-gradient(circle,rgba(31,122,117,.18),transparent 66%);animation:drift3 52s linear infinite alternate}
[data-theme=dark] .aurora i{opacity:.30}
@keyframes drift1{to{transform:translate(9vw,7vh) scale(1.15)}}
@keyframes drift2{to{transform:translate(-8vw,10vh) scale(.9)}}
@keyframes drift3{to{transform:translate(-10vw,-8vh) scale(1.1)}}

/* ============ topbar ============ */
.topbar{position:sticky;top:0;z-index:50;display:flex;gap:11px;align-items:center;padding:11px clamp(14px,3vw,28px);background:var(--glass);border-bottom:1px solid var(--line);backdrop-filter:blur(16px)}
.brand{display:flex;gap:10px;align-items:center;margin-right:6px;text-decoration:none;color:inherit}
.logo{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:white;font-weight:900;font-size:14px}
.bname b{display:block;font-size:14px;line-height:1.15;letter-spacing:-.01em}
.bname small{color:var(--muted);font-size:11px}
.topbar .search{flex:1 1 200px;max-width:520px;padding:9px 13px;border:1px solid var(--line);border-radius:11px;background:var(--panel);color:var(--text);outline:none}
.search:focus,.select:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.tstreak{font-size:13px;font-weight:800;color:var(--muted);white-space:nowrap}
.oring{position:relative;width:36px;height:36px;flex:none}
.oring b{position:absolute;inset:0;display:grid;place-items:center;font-size:8.5px;font-weight:900;color:var(--muted)}

/* ============ rings ============ */
.ring{width:100%;height:100%;display:block}
.ring circle{fill:none;stroke-width:3.6}
.ring .rbg{stroke:var(--line)}
.ring .rfg{stroke:var(--accent);stroke-linecap:round;transform:rotate(-90deg);transform-origin:center;transition:stroke-dasharray .5s ease}
.ring.hue .rfg{stroke:hsl(var(--hue) 34% 42%)}
[data-theme=dark] .ring.hue .rfg{stroke:hsl(var(--hue) 38% 66%)}

/* ============ layout ============ */
main{min-width:0;padding:26px clamp(14px,3.5vw,44px) 60px;max-width:1240px;margin:0 auto}
.btn{padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);font-weight:750;font-size:13px;cursor:pointer}
.btn:hover{border-color:var(--accent);color:var(--accent)}
a.btn{text-decoration:none;display:inline-flex;align-items:center;white-space:nowrap}
.btn.primary{border:0;background:linear-gradient(135deg,var(--accent),var(--accent2));color:white}
.btn.big{padding:12px 18px;font-size:14px;border-radius:12px}
.badge{display:inline-block;padding:6px 11px;border-radius:99px;background:var(--accentsoft);color:var(--accent);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}

/* ============ dashboard ============ */
.dhero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:22px;align-items:stretch;margin-top:14px}
.dwelcome h1{margin:16px 0 10px;font-size:clamp(34px,5.4vw,58px);line-height:1.02;letter-spacing:-.045em;background:linear-gradient(110deg,var(--text) 40%,var(--accent) 75%,var(--accent2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.dsub{max-width:560px;color:var(--muted);font-size:16px;margin:0 0 20px}
.counters{display:flex;flex-wrap:wrap;gap:26px;margin:0 0 22px}
.counter b{display:block;font-size:30px;font-weight:900;letter-spacing:-.03em;line-height:1.1}
.counter span{color:var(--muted);font-size:12.5px}
.dactions{display:flex;gap:10px;flex-wrap:wrap}
.dpanel{padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--glass);backdrop-filter:blur(10px);box-shadow:var(--shadow);align-self:start}
.dpanel b{font-size:13.5px}
.dpanel small{color:var(--muted)}
.heatmap{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,11px);gap:3px;margin:11px 0 8px}
.hcell{width:11px;height:11px;border-radius:3px;background:var(--hm0)}
.hcell.l1{background:var(--hm1)}
.hcell.l2{background:var(--hm2)}
.hcell.l3{background:var(--hm3)}
.hcell.l4{background:var(--hm4)}
.dtitle{margin:34px 0 14px;font-size:19px;letter-spacing:-.02em}
.dnote{max-width:640px;margin:24px 0 18px;color:var(--muted);font-size:14px;line-height:1.6}
/* the tight negative margin is only right when it sits under a heading */
.dtitle + .dnote{margin-top:-12px}
.dtitle small{font-weight:400;color:var(--muted);font-size:13px;letter-spacing:0}

/* difficulty badges + legend */
.dbadge{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:99px;font-size:11px;font-weight:800;letter-spacing:.01em;vertical-align:1px}
.d-low{background:var(--dl-bg);color:var(--dl-fg)}
.d-med{background:var(--dm-bg);color:var(--dm-fg)}
.d-high{background:var(--dh-bg);color:var(--dh-fg)}
.d-cx{background:var(--dc-bg);color:var(--dc-fg)}
.dlegend{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.dchip{display:flex;gap:9px;align-items:baseline;padding:11px 16px;border:1px solid var(--line);border-radius:14px;background:var(--glass);backdrop-filter:blur(8px);cursor:pointer;transition:translate .16s ease,box-shadow .16s ease}
.dchip:hover{translate:0 -2px;box-shadow:var(--shadow)}
.dchip b{font-size:14px;font-weight:850}
.dchip span{color:var(--muted);font-size:12.5px;font-weight:650}
.dchip.d-low{border-left:4px solid var(--dl-s);background:var(--glass);color:var(--text)}
.dchip.d-med{border-left:4px solid var(--dm-s);background:var(--glass);color:var(--text)}
.dchip.d-high{border-left:4px solid var(--dh-s);background:var(--glass);color:var(--text)}
.dchip.d-cx{border-left:4px solid var(--dc-s);background:var(--glass);color:var(--text)}
.dchip.d-low b{color:var(--dl-fg)}
.dchip.d-med b{color:var(--dm-fg)}
.dchip.d-high b{color:var(--dh-fg)}
.dchip.d-cx b{color:var(--dc-fg)}

/* category colour-family legend */
.flegend{display:flex;gap:7px 15px;flex-wrap:wrap;margin:-4px 0 14px}
.fchip{display:inline-flex;gap:6px;align-items:center;color:var(--muted);font-size:12px}
.fchip i{width:9px;height:9px;border-radius:50%;background:hsl(var(--hue) 34% 42%)}
[data-theme=dark] .fchip i{background:hsl(var(--hue) 38% 66%)}

/* per-tile difficulty mix bar */
.tmix{display:flex;gap:2px;margin-top:6px;height:4px;border-radius:99px;overflow:hidden}
.tmix i{display:block;border-radius:99px}
.tmix .d-low{background:var(--dl-s)}
.tmix .d-med{background:var(--dm-s)}
.tmix .d-high{background:var(--dh-s)}
.tmix .d-cx{background:var(--dc-s)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:13px}
.tile{display:flex;gap:13px;align-items:center;padding:15px;border:1px solid var(--line);border-radius:16px;background:var(--glass);backdrop-filter:blur(8px);cursor:pointer;text-align:left;transition:translate .16s ease,box-shadow .16s ease,border-color .16s ease}
.tile:hover{translate:0 -3px;box-shadow:var(--shadow);border-color:hsl(var(--hue) 32% 46% / .55)}
.tile.done{background:color-mix(in srgb,hsl(var(--hue) 34% 48%) 7%,var(--glass))}
.tring{position:relative;width:46px;height:46px;flex:none}
.tring b{position:absolute;inset:0;display:grid;place-items:center;font-size:10.5px;font-weight:900;color:var(--muted)}
.tinfo{min-width:0}
.tinfo b{display:block;font-size:13.5px;line-height:1.3;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.tinfo small{color:var(--muted);font-size:11.5px}

/* ============ browse view ============ */
.bhead{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:8px 0 14px}
.btitle{display:flex;gap:11px;align-items:center;min-width:0}
.bring{width:34px;height:34px;flex:none}
.btitle h2{margin:0;font-size:clamp(20px,3vw,27px);letter-spacing:-.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btxt{min-width:0}
.bsub{display:block;margin-top:1px;font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--faint)}
.bsub:empty{display:none}
.bcount{color:var(--muted);font-size:13px;white-space:nowrap}
.tools{position:sticky;top:64px;z-index:4;margin-bottom:18px;padding:10px;display:flex;gap:9px;flex-wrap:wrap;border:1px solid var(--line);border-radius:15px;background:var(--glass);backdrop-filter:blur(14px);box-shadow:var(--shadow)}
.select{padding:9px 12px;border:1px solid var(--line);border-radius:11px;background:var(--panel);color:var(--text);outline:none}
.cards{display:grid;gap:16px}
.card{scroll-margin-top:130px;border:1px solid var(--line);border-top:3px solid hsl(var(--hue) 32% 46% / .5);border-radius:18px;background:var(--panel);box-shadow:var(--shadow);overflow:hidden;transition:translate .18s ease,box-shadow .18s ease}
.card:hover{translate:0 -2px;box-shadow:0 16px 38px rgba(20,24,28,.10)}
[data-theme=dark] .card:hover{box-shadow:0 18px 40px rgba(0,0,0,.35)}
.card[hidden]{display:none}
.card.flash{animation:flashring 1.2s ease}
@keyframes flashring{0%{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 55%,transparent)}100%{box-shadow:var(--shadow)}}
.head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:13px;align-items:start;padding:19px;cursor:pointer}
.num{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:hsl(var(--hue) 32% 93%);color:hsl(var(--hue) 38% 32%);font-weight:900;font-size:13px}
[data-theme=dark] .num{background:hsl(var(--hue) 22% 20%);color:hsl(var(--hue) 40% 74%)}
.head h2{font-size:20px;line-height:1.25;margin:0;letter-spacing:-.02em}
.head p{margin:4px 0 0;color:var(--muted);font-size:13px;display:flex;align-items:center;gap:6px}
.head p::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:hsl(var(--hue) 34% 42%)}
.head p .dbadge{margin-left:2px;flex:none}
[data-theme=dark] .head p::before{background:hsl(var(--hue) 38% 66%)}
.actions{display:flex;gap:8px;align-items:center}
.check{width:22px;height:22px;accent-color:var(--accent)}
.star{width:32px;height:32px;border:1px solid var(--line);border-radius:9px;background:var(--soft);color:var(--muted);cursor:pointer;font-size:15px;line-height:1}
.star:hover{border-color:var(--star);color:var(--star)}
.star.on{color:var(--star);border-color:color-mix(in srgb,var(--star) 45%,var(--line));background:color-mix(in srgb,var(--star) 13%,var(--soft))}
.chev{width:32px;height:32px;border:1px solid var(--line);border-radius:9px;background:var(--soft);color:var(--muted);transition:.2s;cursor:pointer}
.card.open .chev{transform:rotate(180deg)}
.body{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .3s ease,visibility 0s .3s}
.card.open .body{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .3s ease}
.bwrap{overflow:hidden;min-height:0;padding:0 19px 23px 70px}
.card:not(.open) .bwrap{padding-bottom:0}
.question{padding:14px 16px;margin-bottom:16px;border-left:4px solid var(--accent);border-radius:0 13px 13px 0;background:var(--accentsoft);font-weight:800}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.box{padding:15px;border:1px solid var(--line);border-radius:13px;background:var(--soft)}
.full{grid-column:1/-1}
.box h3{font-size:14px;margin:0 0 8px}
.box p{margin:0;color:var(--muted)}
ul{margin:7px 0 0;padding-left:20px}
li+li{margin-top:5px}
.layman{background:var(--goodsoft);border-color:color-mix(in srgb,var(--good) 25%,var(--line))}
.layman h3{color:var(--good)}
.bad{background:var(--badsoft);border-color:color-mix(in srgb,var(--bad) 25%,var(--line))}
.bad h3{color:var(--bad)}
.memo{background:var(--warnsoft);border-color:color-mix(in srgb,var(--warn) 25%,var(--line))}
.memo h3{color:var(--warn)}
.code{position:relative;grid-column:1/-1;border-radius:13px;background:var(--code);overflow:hidden}
.code pre{margin:0;padding:19px;color:var(--codetext);font:12.5px/1.6 var(--mono);overflow:auto}
.code i{font-style:normal}
.code .tk-c{color:#8f979e}
.code .tk-s{color:#a8cfae}
.code .tk-k{color:#8fd3cc}
.code .tk-n{color:#dda053}
.code .tk-p{color:#e3b978}
.copy{position:absolute;right:9px;top:9px;padding:6px 8px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:rgba(255,255,255,.09);color:white;font-size:12px;cursor:pointer}
.reveal{display:none;margin-bottom:14px}
.quiz .body .box,.quiz .body .code{filter:blur(8px);opacity:.38;pointer-events:none;user-select:none}
.quiz .card.revealed .body .box,.quiz .card.revealed .body .code{filter:none;opacity:1;pointer-events:auto;user-select:auto}
.quiz .reveal{display:inline-block}
.empty{display:none;padding:40px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:15px}
.foot{text-align:center;color:var(--muted);font-size:13px;padding:0 20px 40px;max-width:1240px;margin:0 auto}

/* ============ overlays ============ */
#toast{position:fixed;left:50%;bottom:26px;translate:-50% 20px;padding:12px 18px;border:1px solid var(--line);border-radius:13px;background:var(--panel);color:var(--text);font-weight:700;font-size:14px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.25s;z-index:65}
#toast.show{opacity:1;translate:-50% 0}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:70}
#resume{position:fixed;right:18px;bottom:18px;display:flex;gap:6px;align-items:stretch;z-index:40;max-width:min(430px,80vw)}
#resume .rgo{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);font-weight:700;font-size:13px;cursor:pointer;box-shadow:var(--shadow)}
#resume .rgo:hover{border-color:var(--accent);color:var(--accent)}
#resume .rx{padding:0 11px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--muted);cursor:pointer;box-shadow:var(--shadow)}
#palette{position:fixed;inset:0;background:color-mix(in srgb,var(--bg) 55%,transparent);backdrop-filter:blur(3px);z-index:80}
#palette[hidden]{display:none}
.pal{width:min(560px,92vw);margin:16vh auto 0;border:1px solid var(--line);border-radius:16px;background:var(--panel);box-shadow:var(--shadow);overflow:hidden}
.pal input{width:100%;padding:15px 17px;border:0;border-bottom:1px solid var(--line);background:var(--panel);color:var(--text);outline:none;font-size:15px}
.plist{max-height:46vh;overflow:auto;padding:6px}
.prow{display:flex;gap:9px;align-items:baseline;width:100%;padding:9px 11px;border:0;border-radius:10px;background:none;color:var(--text);font-size:14px;cursor:pointer;text-align:left}
.prow b{color:var(--muted);font-size:12px}
.prow span{margin-left:auto;flex:none;color:var(--muted);font-size:11.5px}
.prow:hover,.prow.sel{background:var(--accentsoft)}
.pempty{padding:18px;text-align:center;color:var(--muted)}
#flashcards{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;gap:16px;padding:20px;background:radial-gradient(circle at 88% 0,rgba(201,134,47,.14),transparent 30rem),var(--bg);z-index:75;overflow:auto}
#flashcards[hidden]{display:none}
#flashcards [hidden]{display:none!important}
.fctop{display:flex;gap:9px;align-items:center;width:min(760px,100%)}
.fccount{color:var(--muted);font-size:13px;font-weight:700}
.fcspacer{flex:1}
.fccard{width:min(760px,100%);padding:clamp(20px,4vw,34px);border:1px solid var(--line);border-radius:22px;background:var(--panel);box-shadow:var(--shadow)}
.fcmeta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fcdiff .dbadge{margin-left:0;padding:4px 10px;font-size:12px}
.fccat{display:inline-block;padding:5px 10px;border-radius:99px;background:hsl(var(--hue,226) 75% 94%);color:hsl(var(--hue,226) 60% 38%);font-size:12px;font-weight:800}
[data-theme=dark] .fccat{background:hsl(var(--hue,226) 45% 22%);color:hsl(var(--hue,226) 80% 78%)}
.fctitle{margin:12px 0 6px;font-size:clamp(20px,3.4vw,28px);letter-spacing:-.02em}
.fcq{color:var(--muted);font-size:16px;margin:0 0 6px}
.fcanswer{display:grid;gap:11px;margin-top:16px}
.fcctl{display:flex;gap:9px;align-items:center;flex-wrap:wrap;justify-content:center;padding-bottom:14px}
.fcjudge{display:flex;gap:9px}
.bootfail{max-width:620px;margin:14vh auto;padding:30px;border:1px solid var(--line);border-radius:18px;background:var(--panel);box-shadow:var(--shadow)}
.bootfail pre{padding:12px;border-radius:10px;background:var(--code);color:var(--codetext)}

/* ============ responsive ============ */
@media(max-width:900px){
.dhero{grid-template-columns:1fr}
.topbar{flex-wrap:wrap}
.topbar .search{order:9;flex-basis:100%;max-width:none}
.tools{top:110px}
.grid{grid-template-columns:1fr}
.full,.code{grid-column:1}
.bwrap{padding-left:18px}
}
@media(max-width:560px){
.head{grid-template-columns:auto minmax(0,1fr)}
.actions{grid-column:1/-1;justify-content:flex-end}
.bwrap{padding:0 13px 18px}
.card:not(.open) .bwrap{padding-bottom:0}
#resume{max-width:92vw}
.counters{gap:18px}
.counter b{font-size:25px}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.body,.card,.tile,.ring .rfg,#toast{transition:none}
.card.flash{animation:none}
.aurora i{animation:none}
}
@media print{
body{background:white;color:black}
.topbar,#dash,.aurora,.actions,.copy,.reveal,#readbar,#resume,#toast,#palette,#flashcards,.tools,.bhead .btn{display:none!important}
#browse[hidden]{display:block!important}
main{padding:0;max-width:none}
.card{box-shadow:none;break-inside:avoid;margin-bottom:12px;border-top-color:transparent}
.card[hidden]{display:block!important}
.body{display:block!important;visibility:visible!important}
.bwrap{overflow:visible;padding:0 0 12px 18px!important}
.code{background:#f4f4f4;border:1px solid #ddd}
.code pre{color:#111;white-space:pre-wrap}
.code i{color:#111!important}
}


/* ============ editorial type, matching the portfolio ============ */
h1,h2.dtitle,.dwelcome h1,.btitle h2{font-family:var(--display);font-weight:500;letter-spacing:-.018em}
.dwelcome h1{line-height:1.02}
.card h2{font-family:var(--display);font-weight:500;letter-spacing:-.012em}
.brand .bname b{font-family:var(--display);font-weight:500;letter-spacing:-.01em}
.badge,.num,.dbadge,.counter span,.bcount{font-family:var(--mono)}

/* ============ byline ============ */
.foot .by{display:inline-block;margin-bottom:6px;font-weight:600;color:var(--text)}
.foot .by a{color:var(--accent);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.foot .by a:hover{border-bottom-color:var(--accent)}
.foot .by a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}

/* ============ hands-on lab cards ============ */
.labs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-bottom:26px}
/* the card is a link plus a second, separate action, so it is two elements
   in one shell rather than a nested (invalid) link inside a link */
.labcell{position:relative;display:flex;flex-direction:column;border-radius:16px;
  box-shadow:var(--shadow);transition:translate .18s ease}
.labcell:hover{translate:0 -3px}
.lab{position:relative;display:block;flex:1;padding:20px 20px 18px;border:1px solid var(--line);
  border-radius:16px 16px 0 0;border-bottom:0;
  background:var(--panel);text-decoration:none;color:inherit;overflow:hidden;
  transition:border-color .18s ease}
.lab::after{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent2))}
.labcell:hover .lab,.labcell:hover .ltopics{border-color:var(--accent)}
.lab:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* related-topics strip: opens the browse view filtered to this lab's categories */
.ltopics{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:10px 20px;border:1px solid var(--line);border-radius:0 0 16px 16px;
  background:var(--soft);color:var(--muted);cursor:pointer;text-align:left;
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  transition:background .15s ease,color .15s ease,border-color .18s ease}
.ltopics:hover{background:var(--accentsoft);color:var(--accent)}
.ltopics:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ltopics .ltn::after{content:" \2192";opacity:.55}
.ltopics .ltc{flex:none;font-weight:600;color:var(--text);opacity:.75}
.ltopics:hover .ltc{color:var(--accent);opacity:1}
.lab .licon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;margin-bottom:12px;
  background:var(--accentsoft);color:var(--accent);font-size:18px}
.lab b{display:block;font-family:var(--display);font-size:19px;font-weight:500;letter-spacing:-.012em;margin-bottom:7px}
.lab small{display:block;color:var(--muted);font-size:13px;line-height:1.6}

/* The one line that says what the lab lets you do, and now the only prose on
   the card. Each one used to carry three or four sentences about the inside of
   the lab as well, which assumed the thing the lab teaches and made the page
   twice as tall as the number of decisions on it warranted. The detail lives in
   the lab; the card only has to be scannable alongside fourteen others. */
.lab .lgist{display:block;font-style:normal;color:var(--text);font-size:14px;
  line-height:1.55;margin-bottom:12px;font-weight:450}
.lab .lmeta{display:block;margin-top:12px;font-family:var(--mono);font-size:11px;color:var(--faint);
  letter-spacing:.04em}
.lab .lbrands{display:flex;align-items:center;gap:14px;margin-bottom:13px;min-height:26px}
.lab .lstep{position:absolute;top:14px;right:14px;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--mono);font-size:11px;font-weight:600;
  background:var(--soft);color:var(--muted);border:1px solid var(--line)}
.labcell:hover .lab .lstep{background:var(--accentsoft);color:var(--accent);border-color:var(--accent)}
.lab .lbrand{display:flex;align-items:center;gap:6px}
.lab .lbrand svg{display:block;height:22px;width:auto}
.lab .lbrand i{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;
  color:var(--muted);white-space:nowrap}
:root{--brand-aws:#ff9900;--brand-awstext:#232f3e;--brand-az:#0078d4;--brand-az2:#3aa0ea;
  --brand-g1:#4285f4;--brand-g2:#ea4335;--brand-g3:#fbbc04;--brand-g4:#34a853}
[data-theme=dark]{--brand-aws:#ffab2e;--brand-awstext:#e8e4dc;--brand-az:#4fa9e8;--brand-az2:#8ecdf5;
  --brand-g1:#7cabf7;--brand-g2:#f28b82;--brand-g3:#fdd663;--brand-g4:#81c995}
@media print{.labs{display:none}}

a.brand:hover .bname b{color:var(--accent)}
a.brand:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:10px}

/* ============ labs menu ============ */
.labmenu{position:relative}
.labpop{position:absolute;right:0;top:calc(100% + 8px);z-index:60;display:none;min-width:264px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:6px}
.labpop.on{display:block;animation:labpop .16s ease}
@keyframes labpop{from{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}
.labpop a{display:flex;gap:11px;align-items:center;padding:8px 10px;border-radius:10px;
  text-decoration:none;color:inherit}
.labpop a:hover,.labpop a:focus-visible{background:var(--soft);outline:none}
.labpop a i{font-style:normal;width:26px;height:26px;display:grid;place-items:center;border-radius:8px;
  background:var(--accentsoft);color:var(--accent);font-size:13px;flex:none}
.labpop a b{display:block;font-size:13px;font-weight:600}
.labpop a small{display:block;font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:1px}
.labpopsep{margin:8px 4px 4px;padding-top:8px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}

/* ============ motion ============ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* ---- motion ----
   The labs animate (lab.css, same language); the dashboard sat still. Three
   additions and nothing else: the hero and the lab cards enter with a stagger,
   the heatmap draws as a wave of days (delay set per cell in app.js), and the
   theme toggle crossfades instead of hard-cutting. Hover polish and the
   counter count-up already existed. All behind prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference){
  .dwelcome>*{animation:dashIn .5s cubic-bezier(.25,.7,.3,1) both}
  .dwelcome>*:nth-child(2){animation-delay:.06s}
  .dwelcome>*:nth-child(3){animation-delay:.12s}
  .dwelcome>*:nth-child(4){animation-delay:.18s}
  .dwelcome>*:nth-child(5){animation-delay:.24s}
  .dpanel{animation:dashIn .5s cubic-bezier(.25,.7,.3,1) .18s both}
  .dtitle,.dnote{animation:dashIn .45s ease both}
  .labcell{animation:dashIn .5s cubic-bezier(.25,.7,.3,1) both}
  .labs .labcell:nth-child(2){animation-delay:.07s}
  .labs .labcell:nth-child(3){animation-delay:.14s}
  .labs .labcell:nth-child(4){animation-delay:.21s}
  .labs .labcell:nth-child(5){animation-delay:.28s}
  .labs .labcell:nth-child(6){animation-delay:.35s}
  .labs .labcell:nth-child(7){animation-delay:.42s}
  .hcell{animation:hpop .3s ease both}
}
@keyframes dashIn{from{opacity:0;transform:translateY(9px)}}
@keyframes hpop{from{opacity:0;transform:scale(.4)}}
/* the theme switch: one class on <html> for the duration of the fade */
html.theme-fade, html.theme-fade *, html.theme-fade *::before, html.theme-fade *::after{
  transition:background-color .35s ease, color .35s ease, border-color .35s ease,
             fill .35s ease, stroke .35s ease, box-shadow .35s ease !important}

/* quiet destructive reset control in the study panel */
.resetprog{margin-top:12px;font-size:12px;padding:5px 11px;background:transparent;border:1px solid var(--line2,#d8d2c4);
  color:var(--muted,#6b6459);border-radius:8px;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.resetprog:hover{border-color:var(--red,#b3423a);color:var(--red,#b3423a);background:color-mix(in srgb,var(--red,#b3423a) 8%,transparent)}
.resetprog:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* dashboard: bookmarked labs and simulations strip */
.labbm{margin:4px 0 22px;padding:14px 16px;border:1px solid var(--line2,#d8d2c4);border-radius:12px;background:var(--panel,#fff)}
.labbm .bmhead{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.labbm .bmhead b{font-size:14px}
.labbm .bmcount{font:600 11px var(--mono,ui-monospace);color:#fff;background:var(--accent);border-radius:99px;padding:1px 8px}
.labbm .bmspacer{flex:1}
.labbm .bmclear{font-size:12px;padding:4px 10px;background:transparent;border:1px solid var(--line2,#d8d2c4);
  color:var(--muted,#6b6459);border-radius:8px;cursor:pointer}
.labbm .bmclear:hover{border-color:var(--red,#b3423a);color:var(--red,#b3423a)}
.labbm .bmchips{display:flex;flex-wrap:wrap;gap:8px}
.bmchip{display:inline-flex;align-items:center;gap:7px;text-decoration:none;font-size:12.5px;
  padding:6px 12px;border-radius:99px;border:1px solid var(--line2,#d8d2c4);color:var(--text,#2b2b2b);
  background:var(--panel2,#faf8f3);transition:border-color .15s,background .15s}
.bmchip:hover{border-color:var(--accent);background:var(--sel,#eef4f3)}
.bmchip i{font-style:normal;color:var(--accent);font-size:12px}
.bmchip.sim{border-style:dashed}
@media print{.labbm{display:none}}