/* ============ tokens ============ */
:root{
  --bg:#f3f4f9; --bg2:#e9ecf6; --surface:#ffffff; --surface2:#f7f8fc; --ink:#121831; --ink2:#2a3355; --muted:#5a6380; --line:#dfe3ef;
  --brand:#3a52d9; --navy:#22305a; --amber:#f2a630; --amber-ink:#2a1a00; --good:#0e8a68; --bad:#d6393a;
  --shadow:0 10px 30px rgba(24,34,84,.08); --shadow-lg:0 24px 60px rgba(24,34,84,.16);
  --display:"Sora","Segoe UI",system-ui,sans-serif; --body:"Source Sans 3","Segoe UI",system-ui,sans-serif; --mono:"JetBrains Mono",Consolas,"DejaVu Sans Mono",monospace;
  --r:18px; --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0b0f22; --bg2:#10163050; --surface:#141a35; --surface2:#182043; --ink:#e8ebf8; --ink2:#c8cff0; --muted:#98a1c3; --line:#262e55;
    --brand:#8095f5; --navy:#c9d2ff; --amber:#f5b54a; --amber-ink:#241500; --good:#3cc79c; --bad:#ff7a7a;
    --shadow:0 10px 30px rgba(0,0,0,.35); --shadow-lg:0 24px 60px rgba(0,0,0,.5); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0b0f22; --bg2:#10163050; --surface:#141a35; --surface2:#182043; --ink:#e8ebf8; --ink2:#c8cff0; --muted:#98a1c3; --line:#262e55;
  --brand:#8095f5; --navy:#c9d2ff; --amber:#f5b54a; --amber-ink:#241500; --good:#3cc79c; --bad:#ff7a7a;
  --shadow:0 10px 30px rgba(0,0,0,.35); --shadow-lg:0 24px 60px rgba(0,0,0,.5); color-scheme:dark;
}

/* ============ base ============ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--body);-webkit-font-smoothing:antialiased;min-height:100vh;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea{-webkit-user-select:text;user-select:text}
img{max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:8px}
.mono{font-family:var(--mono)}
.eyebrow{font:600 12.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
.wrap{max-width:1200px;margin:0 auto;padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px))}
@media (min-width:700px){.wrap{padding-inline:32px}}
h1,h2,h3{font-family:var(--display);letter-spacing:-.02em;line-height:1.1;margin:0;text-wrap:balance}
@media print{html,body{display:none!important}}

/* ============ boot ============ */
.boot{min-height:100vh;display:grid;place-items:center}
.boot-grid{display:grid;grid-template-columns:repeat(4,22px);gap:5px}
.boot-grid i{height:18px;border-radius:5px;background:var(--navy);opacity:.25;animation:bootp 1.2s var(--ease) infinite}
.boot-grid i:nth-child(-n+4){background:var(--brand)}
.boot-grid i:nth-child(7){background:var(--amber)}
.boot-grid i:nth-child(n){animation-delay:calc(var(--d,0)*1ms)}
@keyframes bootp{50%{opacity:1;transform:scale(1.08)}}

/* ============ top bar ============ */
.top{position:sticky;top:0;z-index:30;padding-top:env(safe-area-inset-top,0px);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
  background:color-mix(in srgb,var(--bg) 78%,transparent);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.top .wrap{display:flex;align-items:center;gap:14px;height:64px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font:700 17px/1 var(--display);letter-spacing:-.01em;min-width:0}
.brand span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-grid{display:grid;grid-template-columns:repeat(3,8px);gap:2px;flex:none}
.mini-grid i{height:8px;border-radius:2px;background:var(--navy);opacity:.55;transition:background .3s,opacity .3s}
.mini-grid i:nth-child(-n+3){background:var(--brand);opacity:1}
.mini-grid i.on{background:var(--amber);opacity:1}
.top .sp{flex:1}
.searchbtn{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px 0 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--muted);cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s}
.searchbtn:hover{border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 14%,transparent)}
.searchbtn kbd{font:600 12px/1 var(--mono);padding:4px 6px;border-radius:6px;background:var(--surface2);border:1px solid var(--line)}
.searchbtn .lbl{font-size:15px}
@media (max-width:640px){.searchbtn .lbl,.searchbtn kbd{display:none}.searchbtn{padding:0 10px}}
.iconbtn{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--line);background:var(--surface);cursor:pointer;transition:transform .25s var(--ease),border-color .2s}
.iconbtn:hover{border-color:var(--brand);transform:rotate(-12deg)}
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ============ view transitions ============ */
#view{animation:viewIn .55s var(--ease) both}
@keyframes viewIn{from{opacity:.001;transform:translateY(16px)}to{opacity:1;transform:none}}
.st{animation:rise .7s var(--ease) both;animation-delay:calc(var(--i,0)*70ms + 60ms)}
@keyframes rise{from{opacity:.001;transform:translateY(22px)}to{opacity:1;transform:none}}
.reveal{transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js-reveal .reveal:not(.in){opacity:.001;transform:translateY(26px)}

/* ============ hero ============ */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 88%,transparent) 42%,color-mix(in srgb,var(--bg) 20%,transparent) 100%);pointer-events:none}
.hero .wrap{position:relative;z-index:2;padding-block:72px 64px}
.hero h1{font-size:clamp(40px,6.4vw,80px);font-weight:800;max-width:14ch;margin-top:18px}
.hero h1 .ch{display:inline-block;animation:charIn .8s var(--ease) both;animation-delay:calc(var(--c)*28ms + 150ms)}
@keyframes charIn{from{opacity:.001;transform:translateY(.5em) rotate(6deg)}to{opacity:1;transform:none}}
.hero p.tag{font-size:clamp(17px,2vw,21px);color:var(--ink2);max-width:52ch;margin:18px 0 0}
.stats{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.stat{display:flex;align-items:baseline;gap:10px;padding:12px 18px;border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.stat b{font:800 28px/1 var(--display);font-variant-numeric:tabular-nums;color:var(--brand)}
.stat span{font:600 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

.btn{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 20px;border-radius:14px;border:1.5px solid var(--brand);background:var(--brand);color:#fff;font-weight:700;text-decoration:none;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s,background .2s}
:root[data-theme="dark"] .btn{color:#0b0f22}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn{color:#0b0f22}}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px color-mix(in srgb,var(--brand) 35%,transparent)}
.btn.ghost{background:transparent;color:var(--brand)}
.btn .ico{width:18px;height:18px}

/* ============ sections ============ */
section.blk{padding-block:56px 10px}
.sechead{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.sechead h2{font-size:clamp(26px,3vw,34px);font-weight:700}
.sechead .note{color:var(--muted);font-size:15px}

/* course cards */
.courses{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:22px}
.ccard{--c:var(--brand);position:relative;display:flex;flex-direction:column;gap:14px;min-height:300px;padding:28px;border-radius:24px;text-decoration:none;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;isolation:isolate;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0));transition:transform .5s var(--ease),box-shadow .4s,border-color .3s}
.ccard:hover{--ty:-4px;box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--c) 45%,var(--line))}
.ccard::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(420px circle at var(--mx,70%) var(--my,0%),color-mix(in srgb,var(--c) 22%,transparent),transparent 60%);transition:opacity .4s}
.ccard .pattern{position:absolute;right:-30px;top:-30px;display:grid;grid-template-columns:repeat(5,34px);gap:6px;opacity:.9;z-index:-1;transform:rotate(-8deg)}
.ccard .pattern i{height:34px;border-radius:8px;background:color-mix(in srgb,var(--c) 14%,transparent);transition:background .5s,transform .5s var(--ease)}
.ccard .pattern i.on{background:var(--amber);transform:scale(.9)}
.ccard:hover .pattern i:nth-child(odd){background:color-mix(in srgb,var(--c) 30%,transparent)}
.ccard .cicon{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;background:var(--c);color:#fff;box-shadow:0 10px 24px color-mix(in srgb,var(--c) 40%,transparent);transition:transform .5s var(--ease)}
.ccard:hover .cicon{transform:rotate(-8deg) scale(1.06)}
.ccard .cicon .ico{width:28px;height:28px}
.ccard h3{font-size:clamp(26px,3vw,32px);font-weight:800;margin-top:8px}
.ccard p{margin:0;color:var(--ink2);max-width:46ch}
.ccard .meta{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;font:600 12.5px/1 var(--mono);background:var(--surface2);border:1px solid var(--line);color:var(--ink2);white-space:nowrap}
.chip.c{background:color-mix(in srgb,var(--c) 14%,transparent);border-color:color-mix(in srgb,var(--c) 30%,transparent);color:var(--c)}
.chip.new{background:var(--amber);border-color:var(--amber);color:var(--amber-ink)}
.chip .ico{width:14px;height:14px}
.ccard .go{margin-left:auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--surface2);border:1px solid var(--line);transition:transform .4s var(--ease),background .3s,color .3s}
.ccard:hover .go{transform:translateX(4px);background:var(--c);color:#fff;border-color:var(--c)}

/* recent / continue list */
.rows{display:grid;gap:12px}
.row{--c:var(--brand);display:flex;align-items:center;gap:16px;padding:14px 18px;border-radius:16px;background:var(--surface);border:1px solid var(--line);text-decoration:none;transition:transform .35s var(--ease),border-color .25s,box-shadow .3s}
.row:hover{transform:translateX(6px);border-color:color-mix(in srgb,var(--c) 45%,var(--line));box-shadow:var(--shadow)}
.row .idx{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font:700 16px/1 var(--mono);background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c)}
.row .tx{min-width:0;flex:1}
.row .tx b{display:block;font:700 18px/1.25 var(--display);letter-spacing:-.01em}
.row .tx span{display:block;color:var(--muted);font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .ico.arr{color:var(--muted);transition:transform .3s var(--ease)}
.row:hover .ico.arr{transform:translateX(4px);color:var(--c)}

/* ============ course page ============ */
.band{--c:var(--brand);position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--c) 10%,var(--bg)),var(--bg))}
.band canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.band .wrap{position:relative;padding-block:34px 44px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14.5px;color:var(--muted)}
.crumbs a{text-decoration:none;color:var(--muted);transition:color .2s}
.crumbs a:hover{color:var(--c,var(--brand))}
.band h1{font-size:clamp(36px,5.4vw,64px);font-weight:800;margin-top:22px;max-width:18ch}
.band p.desc{font-size:clamp(17px,1.8vw,20px);color:var(--ink2);max-width:60ch;margin:14px 0 0}
.band .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}

.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:34px 0 22px}
.field{position:relative;flex:1;min-width:min(100%,260px)}
.field .ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted)}
.field input{width:100%;height:46px;padding:0 14px 0 44px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:16px var(--body);transition:border-color .2s,box-shadow .2s}
.field input:focus{outline:none;border-color:var(--c,var(--brand));box-shadow:0 0 0 4px color-mix(in srgb,var(--c,var(--brand)) 16%,transparent)}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.fbtn{height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font:600 13px/1 var(--mono);color:var(--ink2);cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:all .2s}
.fbtn .ico{width:15px;height:15px}
.fbtn:hover{border-color:var(--c,var(--brand))}
.fbtn.on{background:var(--c,var(--brand));border-color:var(--c,var(--brand));color:#fff}

/* timeline */
.timeline{position:relative;display:grid;gap:18px;padding-left:34px}
.timeline::before{content:"";position:absolute;left:11px;top:10px;bottom:10px;width:2px;background:linear-gradient(var(--c,var(--brand)),color-mix(in srgb,var(--c,var(--brand)) 10%,transparent));border-radius:2px;transform-origin:top;animation:grow 1.2s var(--ease) both}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.lcard{--c:var(--brand);position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;padding:22px 24px;border-radius:20px;background:var(--surface);border:1px solid var(--line);text-decoration:none;box-shadow:var(--shadow);transition:transform .4s var(--ease),border-color .3s,box-shadow .3s}
.lcard::before{content:"";position:absolute;left:-30px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--surface);border:3px solid var(--c);transition:transform .3s var(--ease),background .3s}
.lcard:hover{transform:translateX(6px);border-color:color-mix(in srgb,var(--c) 50%,var(--line));box-shadow:var(--shadow-lg)}
.lcard:hover::before{transform:scale(1.3);background:var(--c)}
.lcard.soon{opacity:.62;box-shadow:none;cursor:default}
.lcard.soon:hover{transform:none}
.lnum{width:74px;height:74px;border-radius:18px;display:grid;place-items:center;text-align:center;background:color-mix(in srgb,var(--c) 12%,transparent);color:var(--c)}
.lnum small{display:block;font:600 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.lnum b{display:block;font:800 30px/1 var(--display);margin-top:4px}
.lcard h3{font-size:clamp(20px,2.2vw,25px);font-weight:700}
.lcard p{margin:6px 0 0;color:var(--ink2);font-size:16px;max-width:70ch}
.lcard .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.ring{--p:0;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--c) calc(var(--p)*1%),var(--line) 0);transition:--p 1s}
.ring span{width:42px;height:42px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font:700 12px/1 var(--mono);color:var(--ink2)}
@media (max-width:640px){.lcard{grid-template-columns:auto 1fr;padding:18px}.lcard .ring{display:none}.lnum{width:58px;height:58px}.lnum b{font-size:24px}.timeline{padding-left:24px}.timeline::before{left:5px}.lcard::before{left:-25px}}

.empty{display:grid;justify-items:center;text-align:center;gap:14px;padding:60px 20px;border:2px dashed var(--line);border-radius:24px;color:var(--muted)}
.empty .eg{display:grid;grid-template-columns:repeat(4,26px);gap:6px}
.empty .eg i{height:26px;border-radius:7px;background:var(--line);animation:egp 2.4s var(--ease) infinite;animation-delay:calc(var(--i)*120ms)}
@keyframes egp{0%,100%{background:var(--line)}30%{background:var(--c,var(--brand))}}
.empty h3{color:var(--ink);font-size:22px}

/* ============ lecture page ============ */
.lhead{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end}
.lhead .ring{width:92px;height:92px}.lhead .ring span{width:74px;height:74px;font-size:16px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.summary{color:var(--ink2);font-size:18px;max-width:70ch}
.summary p{margin:12px 0 0}
.group-title{display:flex;align-items:center;gap:12px;margin:34px 0 14px;font:700 13px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.group-title::after{content:"";flex:1;height:1px;background:var(--line)}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px}
.mcard{--t:var(--brand);position:relative;display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:20px;background:var(--surface);border:1px solid var(--line);text-align:left;cursor:pointer;text-decoration:none;overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .35s,border-color .3s}
.mcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--t) 50%,var(--line))}
.mcard .ti{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:color-mix(in srgb,var(--t) 14%,transparent);color:var(--t);transition:transform .5s var(--ease),background .3s,color .3s}
.mcard:hover .ti{transform:rotate(-10deg) scale(1.08);background:var(--t);color:#fff}
.mcard .ti .ico{width:26px;height:26px}
.mcard b{font:700 18px/1.3 var(--display);letter-spacing:-.01em;overflow-wrap:anywhere}
.mcard .d{color:var(--muted);font-size:14.5px;margin-top:-6px}
.mcard .foot{display:flex;align-items:center;gap:8px;margin-top:auto;font:600 12px/1 var(--mono);color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.mcard .foot .seen{margin-left:auto;display:inline-flex;align-items:center;gap:5px;color:var(--good)}
.mcard .foot .seen .ico{width:15px;height:15px}
.mcard .ripple{position:absolute;border-radius:50%;background:color-mix(in srgb,var(--t) 30%,transparent);transform:scale(0);animation:ripple .6s ease-out forwards;pointer-events:none}
@keyframes ripple{to{transform:scale(4);opacity:0}}
.lnav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:48px}
.lnav a{display:flex;flex-direction:column;gap:4px;padding:18px 20px;border-radius:18px;border:1px solid var(--line);background:var(--surface);text-decoration:none;transition:transform .35s var(--ease),border-color .3s}
.lnav a:hover{border-color:var(--c,var(--brand))}
.lnav a.prev:hover{transform:translateX(-4px)}.lnav a.next:hover{transform:translateX(4px)}
.lnav a.next{text-align:right;grid-column:2}
.lnav small{font:600 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.lnav b{font:700 18px/1.3 var(--display)}

/* ============ viewer ============ */
.viewer{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;background:var(--bg);clip-path:circle(0 at var(--ox,50%) var(--oy,50%));transition:clip-path .65s var(--ease)}
.viewer.open{clip-path:circle(150% at var(--ox,50%) var(--oy,50%))}
.vbar{display:flex;align-items:center;gap:12px;padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));padding-top:calc(10px + env(safe-area-inset-top,0px));border-bottom:1px solid var(--line);background:var(--surface)}
.vbar .vt{min-width:0;flex:1}
.vbar .vt small{display:block;font:600 11.5px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.vbar .vt b{display:block;font:700 17px/1.3 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vctl{display:flex;align-items:center;gap:8px}
.vctl .cnt{font:600 13px/1 var(--mono);color:var(--muted);min-width:44px;text-align:center}
.vctl .sep{width:1px;height:26px;background:var(--line)}
@media (max-width:640px){.vctl .hide-sm{display:none}}
.vbody{position:relative;flex:1;min-height:0;overflow:hidden}
.vbody iframe{width:100%;height:100%;border:0;display:block;background:var(--bg)}
.vload{position:absolute;inset:0;z-index:3;display:grid;place-items:center;align-content:center;gap:18px;background:var(--bg);transition:opacity .4s}
.vload.gone{opacity:0;pointer-events:none}
.vload .lg{display:grid;grid-template-columns:repeat(4,20px);gap:5px}
.vload .lg i{height:20px;border-radius:5px;background:var(--brand);opacity:.2;animation:lgp 1s var(--ease) infinite;animation-delay:calc(var(--i)*70ms)}
@keyframes lgp{40%{opacity:1;background:var(--amber)}}
.vload .pb{width:220px;height:6px;border-radius:6px;background:var(--line);overflow:hidden}
.vload .pb i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--amber));transition:width .2s}
.vload span{font:600 13px/1 var(--mono);color:var(--muted);letter-spacing:.08em}
.verr{display:grid;place-items:center;height:100%;text-align:center;padding:24px;color:var(--muted)}
/* pdf */
.pdfv{height:100%;overflow:auto;padding:24px 16px 60px;background:var(--bg2)}
.pdfv .pg{margin:0 auto 18px;background:#fff;box-shadow:var(--shadow-lg);border-radius:6px;overflow:hidden;position:relative}
.pdfv .pg canvas{display:block;width:100%;height:100%;pointer-events:none}
.pdfv .pg .pn{position:absolute;right:10px;bottom:8px;font:600 11px/1 var(--mono);color:#8a93b3}
/* image */
.imgv{height:100%;display:grid;place-items:center;overflow:hidden;cursor:grab;touch-action:none;background:var(--bg2)}
.imgv:active{cursor:grabbing}
.imgv img{max-width:92%;max-height:92%;transform-origin:center;transition:transform .15s;pointer-events:none;border-radius:8px;box-shadow:var(--shadow-lg)}
.mediav{height:100%;display:grid;place-items:center;padding:20px;background:#05070f}
.mediav video{max-width:100%;max-height:100%;border-radius:10px}
.mediav audio{width:min(600px,100%)}

/* ============ search palette ============ */
.pal{position:fixed;inset:0;z-index:80;display:grid;justify-items:center;align-items:start;padding:12vh 16px 16px;background:color-mix(in srgb,#060918 55%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fade .25s both}
@keyframes fade{from{opacity:0}}
.pal .box{width:min(680px,100%);border-radius:22px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-lg);overflow:hidden;animation:palIn .35s var(--ease) both}
@keyframes palIn{from{opacity:0;transform:translateY(-16px) scale(.97)}}
.pal .field input{height:60px;border:0;border-bottom:1px solid var(--line);border-radius:0;font-size:19px;box-shadow:none!important}
.pal ul{list-style:none;margin:0;padding:8px;max-height:min(56vh,480px);overflow:auto}
.pal li{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:12px;cursor:pointer}
.pal li.on{background:color-mix(in srgb,var(--brand) 12%,transparent)}
.pal li .ti{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--t,var(--brand)) 14%,transparent);color:var(--t,var(--brand));flex:none}
.pal li b{display:block;font-weight:700}
.pal li span{display:block;font-size:13.5px;color:var(--muted)}
.pal .hint{padding:10px 18px;border-top:1px solid var(--line);font:600 12px/1 var(--mono);color:var(--muted);display:flex;gap:16px;flex-wrap:wrap}
.pal .none{padding:26px;text-align:center;color:var(--muted)}

/* ============ footer ============ */
footer{margin-top:80px;border-top:1px solid var(--line);padding-block:30px 40px;color:var(--muted);font-size:14.5px}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .viewer{clip-path:none!important}
}
.btn.ghost{color:var(--brand)!important}
.vctl .tools{display:flex;gap:8px;align-items:center}
#view{overflow-x:clip}

/* ===== neural motifs ===== */
.mini-nn{width:30px;height:26px;flex:none}
.mini-nn .ln line{stroke:var(--brand);stroke-width:1.1;opacity:.35}
.mini-nn .nd circle{fill:var(--brand);transition:fill .3s}
.mini-nn .nd circle.on{fill:var(--amber)}
.ccard{min-height:250px}
.ccard .pattern{position:absolute;right:-24px;top:-10px;width:230px;height:auto;z-index:-1;opacity:.85;transform:none;display:block;grid-template-columns:none}
.ccard .pattern .ln line{stroke:var(--c);stroke-width:1.4;opacity:.22;transition:opacity .4s}
.ccard:hover .pattern .ln line{opacity:.4}
.ccard .pattern .nd circle{fill:var(--surface);stroke:var(--c);stroke-width:2.2;opacity:.6;transition:fill .5s,opacity .3s}
.ccard .pattern .nd circle.on{fill:var(--amber);stroke:var(--amber);opacity:1}
@keyframes sig{to{stroke-dashoffset:-195}}
.hero .wrap{padding-block:120px 110px}
.hero h1{margin-top:0;max-width:none}
.hero .cta{margin-top:34px}
.hero::after{background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 85%,transparent) 30%,color-mix(in srgb,var(--bg) 10%,transparent) 70%)}
.band::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 6%,var(--bg)) 0%,color-mix(in srgb,var(--bg) 70%,transparent) 38%,transparent 75%)}
.band .wrap{z-index:2}
/* outline panel */
.outline{position:relative;height:min(78vh,860px);border-radius:22px;overflow:hidden;border:1px solid var(--line);background:var(--bg2);box-shadow:var(--shadow)}
.outline .pdfv{height:100%}
.otools{display:flex;align-items:center;gap:8px}
.otools .cnt{font:600 13px/1 var(--mono);color:var(--muted);min-width:44px;text-align:center}
.mcard .grp{font:600 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:-6px}
section.blk .sechead .note{max-width:48ch}

/* ===== outline button & access codes ===== */
.band .outline-btn{background:var(--c);border-color:var(--c)}
.band .outline-btn:hover{box-shadow:0 12px 28px color-mix(in srgb,var(--c) 40%,transparent)}
.btn.disabled{opacity:.55;cursor:default;pointer-events:none}
.chip.lockbtn{cursor:pointer;transition:border-color .2s,color .2s}
.chip.lockbtn:hover{border-color:var(--c,var(--brand));color:var(--c,var(--brand))}
.lockcard{max-width:560px;margin:56px auto 0;padding:36px 34px;border-radius:26px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-lg);text-align:center}
.lockcard h2{font-size:28px;margin-top:18px}
.lockcard p{color:var(--ink2);margin:10px auto 22px;max-width:44ch}
.lockicon{width:78px;height:78px;margin:0 auto;border-radius:24px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c);animation:lockbob 2.6s var(--ease) infinite}
.lockicon .ico{width:36px;height:36px}
@keyframes lockbob{50%{transform:translateY(-5px)}}
.lockcard.ok .lockicon{background:var(--good);color:#fff;animation:pop .5s var(--ease)}
@keyframes pop{0%{transform:scale(.8)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.lockcard form{display:flex;gap:10px;flex-wrap:wrap}
.lockcard .field{flex:1;min-width:200px}
.lockcard .field input{font:600 17px var(--mono);letter-spacing:.06em}
.lockerr{min-height:24px;margin-top:12px;color:var(--bad);font-weight:600}
.lockcard.shake{animation:shake .45s}
@keyframes shake{20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
.small-empty{padding:26px 20px;border-width:1.5px}
.brand .logo{width:38px;height:38px;border-radius:10px;flex:none;box-shadow:0 0 0 1px color-mix(in srgb,#57dbe3 35%,transparent),0 4px 14px rgba(0,0,0,.18);transition:transform .4s var(--ease),box-shadow .4s}
.brand:hover .logo{transform:rotate(-6deg) scale(1.06);box-shadow:0 0 0 1px #57dbe3,0 0 22px color-mix(in srgb,#57dbe3 55%,transparent)}
.hero-brand{display:flex;align-items:center;gap:clamp(16px,2.4vw,30px)}
.hero-logo{width:clamp(72px,9vw,118px);height:auto;aspect-ratio:1;border-radius:clamp(18px,2vw,28px);flex:none;box-shadow:0 0 0 1px color-mix(in srgb,#57dbe3 40%,transparent),0 18px 40px rgba(0,0,0,.22),0 0 40px color-mix(in srgb,#57dbe3 25%,transparent);animation:logoGlow 3.6s ease-in-out infinite}
@keyframes logoGlow{50%{box-shadow:0 0 0 1px #57dbe3,0 18px 40px rgba(0,0,0,.22),0 0 60px color-mix(in srgb,#57dbe3 45%,transparent)}}