/* ============================================================
   Black Layer Labs · shared site styles (marketing & resources)
   ============================================================ */
:root{
  --bg:#ffffff; --fg:#0a0a0a; --soft:#fafafa; --soft-2:#f4f5f7; --muted:#646a73; --dim:#9aa0a8;
  --line:#ededed; --line-2:#e3e3e6; --blue:#2563eb; --green:#16a34a; --amber:#d97706; --violet:#7c3aed;
  --sans:"Geist","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; font-family:var(--sans); color:var(--fg); background:var(--bg); -webkit-font-smoothing:antialiased; line-height:1.6; letter-spacing:-.011em; font-weight:400;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
.read{max-width:880px; margin:0 auto; padding:0 28px;}

.btn{display:inline-flex; align-items:center; gap:7px; font-family:var(--sans); font-weight:500; font-size:14.5px; padding:10px 18px; border-radius:999px; cursor:pointer; transition:background .16s,border-color .16s,color .16s,transform .08s; white-space:nowrap; border:1px solid transparent;}
.btn-dark{background:#0a0a0a; color:#fff;} .btn-dark:hover{background:#2a2a2a; transform:translateY(-1px);}
.btn-outline{background:#fff; color:#0a0a0a; border-color:var(--line-2);} .btn-outline:hover{background:var(--soft); border-color:#d4d4d8;}

/* ---- skip link ---- */
.skip-link{position:absolute; top:-100%; left:16px; background:var(--fg); color:#fff; padding:10px 18px; border-radius:8px; font-size:14px; font-weight:500; z-index:100; transition:top .15s;}
.skip-link:focus{top:12px;}

/* ---- header ---- */
.site-nav{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.85); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--line);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:60px;}
.logo{font-size:19px; font-weight:500; letter-spacing:-.04em; color:var(--fg);}
.nav-links{display:flex; align-items:center; gap:26px; font-size:14.5px; color:var(--muted); font-weight:450;}
.nav-links a:not(.btn){padding:4px 0;} .nav-links a:not(.btn):hover{color:var(--fg);}
.nav-links a.active{color:var(--fg);}

/* ---- page header ---- */
.page-head{padding:64px 0 40px; border-bottom:1px solid var(--line);}
.ey{font-family:var(--mono); text-transform:uppercase; letter-spacing:.06em; font-size:12px; color:var(--dim); margin:0 0 14px;}
.page-head h1{font-size:clamp(34px,4.6vw,52px); line-height:1.05; letter-spacing:-.04em; font-weight:450; margin:0 0 16px;}
.page-head p{font-size:18px; color:var(--muted); margin:0; max-width:640px;}

/* ---- footer ---- */
.site-foot{border-top:1px solid var(--line); margin-top:80px; padding:54px 0 36px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px;}
.foot-brand .logo{display:inline-block; margin-bottom:10px;}
.foot-brand p{color:var(--muted); font-size:14px; margin:0; max-width:260px;}
.foot-col h4{font-size:12px; font-family:var(--mono); text-transform:uppercase; letter-spacing:.05em; color:var(--dim); margin:0 0 14px; font-weight:500;}
.foot-col a{display:block; font-size:14.5px; color:var(--muted); padding:5px 0;} .foot-col a:hover{color:var(--fg);}
.foot-bottom{display:flex; align-items:center; justify-content:space-between; margin-top:42px; padding-top:22px; border-top:1px solid var(--line); font-size:13px; color:var(--dim);}
.foot-bottom a:hover{color:var(--muted);}

/* ---- roadmap ---- */
.board{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:56px 0 0;}
.col h3{display:flex; align-items:center; gap:9px; font-size:14px; font-weight:500; margin:0 0 16px; letter-spacing:-.01em;}
.col .pill{font-family:var(--mono); font-size:11px; padding:2px 9px; border-radius:999px; border:1px solid var(--line-2); color:var(--muted);}
.dotg{width:8px;height:8px;border-radius:50%;}
.dotg.s{background:var(--green);} .dotg.p{background:var(--amber);} .dotg.l{background:var(--dim);}
.rcard{border:1px solid var(--line-2); border-radius:12px; background:#fff; padding:16px 17px; margin-bottom:12px; transition:border-color .15s, box-shadow .15s;}
.rcard:hover{border-color:#d4d4d8; box-shadow:0 8px 24px -18px rgba(10,10,10,.3);}
.rcard h4{margin:0 0 6px; font-size:15px; font-weight:500; letter-spacing:-.01em;}
.rcard p{margin:0; font-size:13.5px; color:var(--muted); line-height:1.55;}
.rcard .tag{display:inline-block; margin-top:11px; font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--dim); border:1px solid var(--line); border-radius:999px; padding:2px 8px;}

/* ---- changelog ---- */
.log{padding:46px 0 0;}
.entry{display:grid; grid-template-columns:180px 1fr; gap:30px; padding:34px 0; border-top:1px solid var(--line);}
.entry:first-child{border-top:none;}
.entry .meta .ver{font-size:18px; font-weight:500; letter-spacing:-.02em;}
.entry .meta .date{font-family:var(--mono); font-size:12.5px; color:var(--dim); margin-top:4px;}
.entry .body h3{margin:0 0 12px; font-size:18px; font-weight:450; letter-spacing:-.02em;}
.entry ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px;}
.entry li{display:flex; gap:11px; font-size:15px; color:var(--fg); line-height:1.5;}
.badge{flex:0 0 auto; font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; padding:2px 8px; border-radius:999px; height:fit-content; margin-top:1px;}
.badge.new{background:#eaf3ff; color:#1d4ed8;} .badge.imp{background:#eafaf0; color:#15803d;} .badge.fix{background:#fdeee9; color:#c2410c;}
.entry li span.txt{color:var(--muted);}

/* ---- report form ---- */
.form{max-width:680px; margin:44px auto 0;}
.field{margin-bottom:20px;}
.field label{display:block; font-size:14px; font-weight:500; margin-bottom:8px;}
.field .hint{color:var(--dim); font-weight:400;}
.field input, .field textarea, .field select{width:100%; font-family:var(--sans); font-size:15px; color:var(--fg); background:#fff; border:1px solid var(--line-2); border-radius:11px; padding:12px 14px; outline:none; transition:border-color .15s, box-shadow .15s;}
.field textarea{min-height:150px; resize:vertical; line-height:1.55;}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.14);}
.seg{display:flex; gap:8px;}
.seg label{flex:1; border:1px solid var(--line-2); border-radius:11px; padding:12px; text-align:center; cursor:pointer; font-size:14.5px; color:var(--muted); transition:all .14s;}
.seg input{position:absolute; opacity:0; pointer-events:none;}
.seg input:checked + span{color:var(--fg);}
.seg label:has(input:checked){border-color:#0a0a0a; background:var(--soft); color:var(--fg);}
.form-actions{display:flex; align-items:center; gap:14px; margin-top:8px;}
.form-note{font-size:13px; color:var(--green);}
.field input:invalid:not(:placeholder-shown), .field textarea:invalid:not(:placeholder-shown){border-color:#e0443b;}
.field select{position:relative;}

/* ---- learn layout ---- */
.learn{display:grid; grid-template-columns:248px 1fr; gap:0; align-items:start;}
.learn-side{position:sticky; top:60px; align-self:start; height:calc(100vh - 60px); overflow-y:auto; border-right:1px solid var(--line); padding:30px 26px 40px;}
.learn-side .grp{font-family:var(--mono); text-transform:uppercase; font-size:11px; letter-spacing:.05em; color:var(--dim); margin:18px 0 10px;}
.learn-side a{display:block; font-size:14px; color:var(--muted); padding:6px 0; line-height:1.4;}
.learn-side a:hover{color:var(--fg);}
.learn-side a.on{color:var(--blue); font-weight:500;}
.learn-main{padding:42px 0 60px; min-width:0;}
.learn-main .inner{max-width:760px; margin:0 auto; padding:0 32px;}
.lesson{padding:18px 0 56px; border-bottom:1px solid var(--line); margin-bottom:14px;}
.lesson:last-child{border-bottom:none;}
.lesson .num{font-family:var(--mono); font-size:12px; color:var(--dim);}
.lesson h2{font-size:30px; font-weight:450; letter-spacing:-.03em; margin:8px 0 14px;}
.lesson p{font-size:16.5px; color:#2b2f36; line-height:1.7; margin:0 0 16px;}
.lesson p code, .lesson li code{font-family:var(--mono); font-size:14px; background:var(--soft-2); border:1px solid var(--line); padding:1px 6px; border-radius:6px; color:#0a0a0a;}
.lesson ul{margin:0 0 16px; padding-left:20px;} .lesson li{font-size:16.5px; color:#2b2f36; line-height:1.7; margin:4px 0;}
.callout{border-left:3px solid var(--blue); background:#f6f9ff; padding:14px 16px; border-radius:0 10px 10px 0; font-size:15px; color:#33414f; margin:0 0 18px;}

/* ---- practice runner ---- */
.practice{border:1px solid var(--line-2); border-radius:14px; overflow:hidden; background:#fff; margin:18px 0 6px; box-shadow:0 10px 30px -24px rgba(10,10,10,.3);}
.pr-head{display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--soft); border-bottom:1px solid var(--line); font-size:12px; color:var(--muted); font-family:var(--mono);}
.pr-head .dot{width:9px;height:9px;border-radius:50%;}
.pr-head .lbl{margin-left:auto; text-transform:uppercase; letter-spacing:.04em; font-size:10.5px; color:var(--dim);}
.pr-editor .CodeMirror{height:auto; font-family:var(--mono); font-size:13.5px; line-height:1.7; background:#fff;}
.pr-editor .CodeMirror-lines{padding:12px 0;}
.pr-bar{display:flex; align-items:center; gap:12px; padding:10px 14px; border-top:1px solid var(--line); background:var(--soft);}
.pr-run{display:inline-flex; align-items:center; gap:7px; font-family:var(--sans); font-weight:500; font-size:13.5px; background:#0a0a0a; color:#fff; border:none; padding:8px 16px; border-radius:999px; cursor:pointer;}
.pr-run:hover{background:#2a2a2a;} .pr-run:disabled{opacity:.6; cursor:default;}
.pr-status{font-size:12px; color:var(--dim); font-family:var(--mono);}
.pr-out{border-top:1px solid var(--line); padding:14px; display:none; flex-direction:column; gap:12px; background:#fff;}
.pr-out.show{display:flex;}
.pr-stream{margin:0; font-family:var(--mono); font-size:12.5px; line-height:1.6; white-space:pre-wrap; word-break:break-word; color:#0a0a0a;}
.pr-stream .err{color:#c2410c;}
.pr-figs{display:flex; flex-wrap:wrap; gap:12px;}
.pr-figs img{max-width:100%; border:1px solid var(--line-2); border-radius:10px;}

/* ---- mobile lesson nav ---- */
.learn-mobile-nav{display:none;}
.learn-mobile-nav summary{font-size:14px; font-weight:500; padding:14px 0; cursor:pointer; color:var(--fg); list-style:none;}
.learn-mobile-nav summary::-webkit-details-marker{display:none;}
.learn-mobile-nav summary::after{content:" ▾"; color:var(--dim);}
.learn-mobile-nav[open] summary::after{content:" ▴";}
.learn-mobile-nav .mob-links{display:flex; flex-direction:column; gap:4px; padding-bottom:14px;}
.learn-mobile-nav .mob-links a{font-size:14px; color:var(--muted); padding:6px 0;}
.learn-mobile-nav .mob-links a:hover{color:var(--fg);}
.learn-mobile-nav .mob-links .grp{font-family:var(--mono); text-transform:uppercase; font-size:11px; letter-spacing:.05em; color:var(--dim); margin:10px 0 4px;}

@media (max-width:900px){
  .foot-grid{grid-template-columns:1fr 1fr;}
  .board{grid-template-columns:1fr;}
  .entry{grid-template-columns:1fr; gap:12px;}
  .learn{grid-template-columns:1fr;}
  .learn-side{display:none;}
  .learn-mobile-nav{display:block; border-bottom:1px solid var(--line); margin-bottom:10px;}
  .nav-links a:not(.btn){display:none;}
}