:root {
    --bio-ink:#f8f5ec;
    --bio-muted:#b7c4d6;
    --bio-canvas:#070b12;
    --bio-surface:#101a2a;
    --bio-raised:#16263b;
    --bio-line:#334760;
    --bio-cyan:#67dff1;
    --bio-green:#61e294;
    --bio-amber:#ffd36a;
    --bio-coral:#ff918e;
    --bio-bone:#f2e9d8;
    --bio-page:1220px;
    color-scheme:dark;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:7rem; }
body { min-width:320px; margin:0; color:var(--bio-ink); background:var(--bio-canvas); font-family:Inter,"Segoe UI",system-ui,-apple-system,sans-serif; line-height:1.58; }
body::before { position:fixed; z-index:-1; inset:0; content:""; background:radial-gradient(circle at 8% 5%,rgba(103,223,241,.1),transparent 26rem),radial-gradient(circle at 95% 32%,rgba(97,226,148,.08),transparent 30rem); pointer-events:none; }
img { max-width:100%; height:auto; }
a { color:inherit; }
:is(a,button):focus-visible { outline:3px solid var(--bio-amber); outline-offset:4px; }
.skip-link { position:fixed; z-index:100; top:8px; left:8px; padding:12px 16px; border-radius:10px; color:#071219; background:var(--bio-amber); font-weight:850; transform:translateY(-160%); }
.skip-link:focus { transform:translateY(0); }
.lab-header { position:sticky; z-index:30; top:0; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:32px; min-height:82px; padding:10px max(22px,calc((100vw - var(--bio-page))/2)); border-bottom:1px solid transparent; background:rgba(7,11,18,.92); backdrop-filter:blur(16px); }
.lab-header[data-scrolled] { border-bottom-color:var(--bio-line); box-shadow:0 12px 36px rgba(0,0,0,.28); }
.lab-brand { display:inline-flex; align-items:center; gap:12px; text-decoration:none; }
.lab-brand img { width:46px; height:46px; }
.lab-brand span { display:grid; line-height:1.1; }
.lab-brand strong { font-size:1.12rem; letter-spacing:-.03em; }
.lab-brand small { margin-top:5px; color:var(--bio-muted); font-size:.68rem; font-weight:700; }
.lab-nav { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.lab-nav > a:not(.lab-button) { min-height:44px; display:inline-flex; align-items:center; padding:9px 12px; color:#cad5e4; font-size:.9rem; font-weight:760; text-decoration:none; }
.lab-nav > a:not(.lab-button):hover { color:var(--bio-cyan); }
.menu-toggle { display:none; min-height:44px; align-items:center; justify-content:center; gap:8px; padding:8px 13px; border:1px solid var(--bio-line); border-radius:12px; color:var(--bio-ink); background:var(--bio-surface); font:inherit; font-weight:800; cursor:pointer; }
.bio-hero { position:relative; max-width:var(--bio-page); min-height:calc(100svh - 82px); display:grid; grid-template-columns:minmax(0,1fr) minmax(310px,.52fr); gap:clamp(50px,8vw,120px); align-items:center; margin:auto; padding:clamp(70px,9vw,125px) 22px; overflow:hidden; }
.bio-hero::after { position:absolute; z-index:-1; right:-120px; bottom:20px; width:520px; height:520px; border:1px solid rgba(103,223,241,.13); border-radius:50%; content:""; box-shadow:0 0 0 58px rgba(103,223,241,.035),0 0 0 116px rgba(103,223,241,.025); }
.bio-hero__copy { max-width:770px; }
.back-link { display:inline-flex; align-items:center; gap:8px; margin-bottom:42px; color:var(--bio-cyan); font-weight:800; text-decoration:none; }
.eyebrow { margin:0 0 16px; color:var(--bio-cyan); font-size:.74rem; font-weight:900; letter-spacing:.15em; text-transform:uppercase; }
.eyebrow--green { color:var(--bio-green); }
.eyebrow--cyan { color:var(--bio-cyan); }
.eyebrow--amber { color:var(--bio-amber); }
.eyebrow--coral { color:var(--bio-coral); }
h1,h2,h3 { margin-top:0; letter-spacing:-.04em; line-height:1.04; }
h1 { max-width:840px; margin-bottom:26px; font-size:clamp(3.1rem,6.4vw,6.3rem); }
h2 { font-size:clamp(2.25rem,4.8vw,4.7rem); }
h3 { font-size:1.35rem; }
.bio-intro { max-width:710px; margin:0 0 34px; color:var(--bio-muted); font-size:clamp(1.1rem,1.8vw,1.35rem); }
.bio-actions { display:flex; gap:12px; flex-wrap:wrap; }
.lab-button { min-height:52px; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:13px 20px; border:1px solid var(--bio-green); border-radius:15px; color:#07150d; background:linear-gradient(135deg,#78edaa,var(--bio-green)); box-shadow:0 8px 0 #237c4b,0 18px 35px rgba(67,209,122,.16); font-weight:900; text-decoration:none; transition:transform .16s ease,filter .16s ease,box-shadow .16s ease; }
.lab-button:hover { filter:brightness(1.04); transform:translateY(-2px); }
.lab-button--ghost { border-color:var(--bio-line); color:var(--bio-cyan); background:rgba(103,223,241,.08); box-shadow:none; }
.lab-button--small { min-height:42px; padding:9px 16px; border-radius:12px; box-shadow:0 5px 0 #237c4b; font-size:.88rem; }
.bio-meta { display:flex; gap:9px; flex-wrap:wrap; margin:34px 0 0; padding:0; list-style:none; }
.bio-meta li { padding:7px 11px; border:1px solid var(--bio-line); border-radius:999px; color:#ccd6e4; font-size:.72rem; font-weight:850; letter-spacing:.04em; text-transform:uppercase; }
.bio-device { position:relative; justify-self:center; width:min(100%,350px); margin:0; padding:13px; border:1px solid rgba(255,255,255,.16); border-radius:34px; background:linear-gradient(145deg,#273a54,#111a2a); box-shadow:0 34px 80px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.12); transform:rotate(1.5deg); }
.bio-device img { display:block; width:100%; border-radius:23px; }
.bio-device figcaption { position:absolute; right:-16px; bottom:54px; padding:9px 13px; border:1px solid rgba(103,223,241,.35); border-radius:10px; color:var(--bio-cyan); background:#0b1422; font-size:.7rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.bio-index { max-width:var(--bio-page); display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:0 auto; padding:0 22px; background:var(--bio-line); }
.bio-index a { display:grid; gap:25px; min-height:132px; padding:24px; background:var(--bio-surface); font-weight:850; text-decoration:none; }
.bio-index a:hover { background:var(--bio-raised); }
.bio-index span { color:var(--bio-cyan); font-size:.72rem; letter-spacing:.08em; }
.bio-section { max-width:var(--bio-page); display:grid; grid-template-columns:minmax(10rem,.28fr) minmax(0,1fr); gap:clamp(44px,8vw,120px); margin:0 auto; padding:clamp(90px,11vw,150px) 22px; border-bottom:1px solid var(--bio-line); }
.bio-section--panel { max-width:min(var(--bio-page),calc(100% - 44px)); padding-inline:clamp(26px,5vw,65px); border:1px solid var(--bio-line); border-radius:28px; background:linear-gradient(145deg,rgba(22,38,59,.9),rgba(16,26,42,.94)); box-shadow:0 28px 70px rgba(0,0,0,.25); }
.bio-section__marker { display:flex; gap:18px; color:var(--bio-muted); font-size:.74rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.bio-section__marker span { color:var(--bio-cyan); }
.bio-section__marker p { margin:0; }
.bio-section__body { max-width:900px; }
.bio-section__body > h2 { max-width:850px; }
.bio-columns { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin:50px 0; border:1px solid var(--bio-line); background:var(--bio-line); }
.bio-columns article { min-height:220px; padding:32px; background:var(--bio-surface); }
.bio-columns h3 { margin-bottom:13px; color:var(--bio-bone); }
.bio-columns p { margin:0; color:var(--bio-muted); }
.bio-section blockquote { margin:0; padding:8px 0 8px 30px; border-left:6px solid var(--bio-green); color:var(--bio-bone); font-size:clamp(1.5rem,3vw,2.35rem); font-weight:780; line-height:1.32; }
.bio-flow { display:grid; gap:0; margin:52px 0 0; padding:0; border-top:1px solid var(--bio-line); list-style:none; }
.bio-flow li { display:grid; grid-template-columns:64px 1fr; gap:24px; padding:28px 0; border-bottom:1px solid var(--bio-line); }
.bio-flow li > span { display:grid; width:44px; height:44px; place-items:center; border:1px solid rgba(103,223,241,.45); border-radius:14px; color:var(--bio-cyan); background:rgba(103,223,241,.08); font-weight:900; }
.bio-flow h3,.bio-flow p { margin:0; }
.bio-flow p { margin-top:8px; color:var(--bio-muted); }
.tip-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:50px; }
.tip-grid article { min-height:230px; padding:28px; border:1px solid var(--bio-line); border-radius:20px 20px 20px 4px; background:var(--bio-surface); }
.tip-grid article > span { display:inline-block; margin-bottom:40px; color:var(--bio-amber); font-size:.7rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.tip-grid h3 { margin-bottom:10px; }
.tip-grid p { margin:0; color:var(--bio-muted); }
.world-band { display:grid; grid-template-columns:minmax(0,.8fr) minmax(20rem,1fr); gap:clamp(55px,9vw,130px); align-items:center; margin:clamp(85px,10vw,140px) 0; padding:clamp(70px,9vw,120px) max(22px,calc((100vw - var(--bio-page))/2)); color:#07150d; background:var(--bio-green); }
.world-band h2 { margin-bottom:18px; }
.world-band p:not(.eyebrow) { max-width:580px; font-size:1.08rem; }
.world-band .eyebrow { color:#174f35; }
.world-band ul { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin:0; padding:0; border:1px solid rgba(7,21,13,.35); background:rgba(7,21,13,.25); list-style:none; }
.world-band li { min-height:145px; display:grid; align-content:center; gap:4px; padding:24px; background:rgba(255,255,255,.28); }
.world-band strong { font-size:2.2rem; }
.world-band span { font-size:.82rem; font-weight:800; }
.bio-note { margin:48px 0 0; padding:24px 28px; border:1px solid rgba(255,145,142,.48); border-left-width:6px; border-radius:4px 16px 16px 4px; color:#f1d6d4; background:rgba(255,145,142,.08); }
.bio-cta { max-width:min(var(--bio-page),calc(100% - 44px)); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:45px; align-items:center; margin:100px auto; padding:clamp(48px,7vw,90px); border:1px solid rgba(103,223,241,.4); border-radius:30px; background:radial-gradient(circle at 85% 20%,rgba(103,223,241,.14),transparent 18rem),var(--bio-surface); }
.bio-cta h2 { margin-bottom:12px; }
.bio-cta p:not(.eyebrow) { margin:0; color:var(--bio-muted); }
.lab-footer { display:grid; grid-template-columns:auto 1fr auto; gap:40px; align-items:center; padding:42px max(22px,calc((100vw - var(--bio-page))/2)); border-top:1px solid var(--bio-line); color:var(--bio-muted); background:#05080d; font-size:.82rem; }
.lab-footer > a { color:var(--bio-ink); font-size:1.1rem; font-weight:900; text-decoration:none; }
.lab-footer p { justify-self:center; margin:0; }
.lab-footer nav { display:flex; gap:18px; flex-wrap:wrap; justify-content:flex-end; }
.lab-footer nav a { text-underline-offset:4px; }

@media (max-width:900px) {
    .lab-header { grid-template-columns:1fr auto; padding-inline:16px; }
    .menu-toggle { display:inline-flex; }
    .has-js .lab-nav { position:absolute; top:calc(100% + 1px); right:14px; left:14px; display:none; flex-direction:column; align-items:stretch; padding:12px; border:1px solid var(--bio-line); border-radius:16px; background:var(--bio-surface); box-shadow:0 24px 60px rgba(0,0,0,.45); }
    .has-js .lab-nav[data-open="true"] { display:flex; }
    .lab-nav a { justify-content:center; }
    .bio-hero { min-height:auto; grid-template-columns:1fr; padding-block:80px; }
    .bio-device { width:min(78vw,350px); }
    .bio-index { grid-template-columns:repeat(2,1fr); }
    .bio-section,.world-band { grid-template-columns:1fr; }
    .bio-section { gap:34px; }
    .bio-cta { grid-template-columns:1fr; }
    .lab-footer { grid-template-columns:1fr; align-items:start; }
    .lab-footer p { justify-self:start; }
    .lab-footer nav { justify-content:flex-start; }
}

@media (max-width:620px) {
    .lab-brand small { display:none; }
    .menu-toggle__label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
    h1 { font-size:clamp(2.75rem,14vw,4.15rem); }
    h2 { font-size:clamp(2.1rem,11vw,3.25rem); }
    .bio-hero { padding:64px 16px 76px; }
    .bio-actions .lab-button { width:100%; }
    .bio-meta { display:grid; grid-template-columns:1fr 1fr; }
    .bio-index { grid-template-columns:1fr; padding-inline:12px; }
    .bio-index a { min-height:0; grid-template-columns:3rem 1fr; gap:8px; padding:18px; }
    .bio-section { padding:76px 16px; }
    .bio-section--panel { max-width:calc(100% - 24px); padding-inline:20px; }
    .bio-columns,.tip-grid { grid-template-columns:1fr; }
    .bio-columns article,.tip-grid article { min-height:0; padding:25px 22px; }
    .tip-grid article > span { margin-bottom:24px; }
    .bio-flow li { grid-template-columns:48px 1fr; gap:14px; }
    .world-band { padding-inline:16px; }
    .world-band ul { grid-template-columns:1fr; }
    .world-band li { min-height:110px; }
    .bio-cta { max-width:calc(100% - 24px); margin-block:70px; padding:38px 24px; }
    .bio-cta .lab-button { width:100%; }
}

@media (prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
    .lab-button:hover { transform:none; }
}