:root { --ink:#061827; --ink-2:#0c293c; --panel:#12354b; --cyan:#52d1de; --cyan-soft:#a3f2ed; --sand:#e9d4a2; --coral:#ea8a70; --paper:#e9f4f3; --line:rgba(163,242,237,.24); --footer-h:clamp(70px,7vw,160px); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:84px; }
body { margin:0; background:var(--ink); color:var(--paper); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height:1.65; }
a { color:inherit; }
.skip-link { position:fixed; left:1rem; top:-4rem; padding:.65rem 1rem; z-index:20; background:var(--sand); color:var(--ink); border-radius:.25rem; }
.skip-link:focus { top:1rem; }
.site-header { position:sticky; top:0; z-index:10; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem clamp(1.2rem,4vw,4rem); border-bottom:1px solid var(--line); background:rgba(6,24,39,.91); backdrop-filter:blur(14px); }
.brand { display:flex; align-items:center; gap:.55rem; text-decoration:none; font:700 .78rem/1 ui-monospace,Consolas,monospace; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.brand-mark { width:27px; height:27px; flex:none; overflow:visible; }
.brand-book { fill:#0b2d41; stroke:var(--cyan); stroke-width:2; stroke-linejoin:round; }
.brand-page { fill:none; stroke:#a3f2ed; stroke-width:1.5; stroke-linecap:square; }
.brand-wave { fill:none; stroke:#52d1de; stroke-width:2; stroke-linecap:square; stroke-linejoin:round; }
.brand-bubble { fill:#e9d4a2; }
.brand-name span { color:var(--cyan-soft); }
.brand:hover .brand-book { fill:#12465d; }
nav { display:flex; gap:1.25rem; }
nav a,.text-link { color:var(--cyan-soft); font-size:.84rem; text-decoration:none; }
nav a:hover,.text-link:hover { color:var(--sand); }
.side-index { display:none; position:fixed; z-index:9; top:68px; bottom:0; left:0; width:186px; overflow:hidden; border-right:1px solid var(--line); background:linear-gradient(180deg,rgba(6,24,39,.98),rgba(8,34,51,.96)); backdrop-filter:blur(12px); }
.side-index-inner { display:grid; grid-template-rows:auto minmax(0,1fr); height:100%; padding:1.1rem .6rem .85rem; }
.side-index-title { margin:0 0 .55rem; color:#8facad; font:700 .62rem/1.25 ui-monospace,Consolas,monospace; letter-spacing:.1em; text-transform:uppercase; }
.side-index-route { position:relative; min-height:0; }
.side-index-line { position:absolute; z-index:0; top:7.14%; bottom:7.14%; left:19px; width:2px; overflow:hidden; background:var(--line); transform:translateX(-50%); }
.side-index-line span { display:block; width:100%; height:0; background:linear-gradient(var(--cyan),var(--sand)); }
.side-index-line span[data-stage="1"] { height:16.67%; }
.side-index-line span[data-stage="2"] { height:33.33%; }
.side-index-line span[data-stage="3"] { height:50%; }
.side-index-line span[data-stage="4"] { height:66.67%; }
.side-index-line span[data-stage="5"] { height:83.33%; }
.side-index-line span[data-stage="6"] { height:100%; }
.side-index-list { position:relative; z-index:2; display:grid; grid-template-rows:repeat(7,minmax(0,1fr)); height:100%; gap:0; }
.side-index-link { display:grid; grid-template-columns:48px minmax(0,1fr); align-items:center; gap:.28rem; min-height:0; color:#89a9ab; font:650 .7rem/1.15 ui-monospace,Consolas,monospace; letter-spacing:.01em; text-decoration:none; transition:color .2s ease,background .2s ease; }
.side-index-link:hover,.side-index-link:focus-visible { color:var(--sand); background:rgba(82,209,222,.06); outline:none; }
.side-index-node { display:grid; place-items:center; width:28px; height:28px; margin-left:5px; border:1px solid var(--line); border-radius:50%; background:var(--ink); color:#91afb2; font-size:.58rem; transition:border-color .2s ease,color .2s ease,box-shadow .2s ease; }
.side-index-link.is-active { color:var(--cyan-soft); }
.side-index-link.is-active .side-index-node { border-color:var(--cyan); color:var(--cyan); box-shadow:0 0 0 4px rgba(82,209,222,.1); }
.side-diver { position:absolute; z-index:4; top:7.14%; left:72px; width:170px; height:113px; filter:drop-shadow(0 0 8px rgba(82,209,222,.55)); transform:translate(-50%,-50%); transition:top .08s linear; pointer-events:none; }
.side-diver[data-stage="1"] { top:21.43%; }
.side-diver[data-stage="2"] { top:35.72%; }
.side-diver[data-stage="3"] { top:50%; }
.side-diver[data-stage="4"] { top:64.29%; }
.side-diver[data-stage="5"] { top:78.57%; }
.side-diver[data-stage="6"] { top:92.86%; }
.side-diver img { display:block; width:100%; height:100%; object-fit:contain; image-rendering:pixelated; }
.diver-suit,.diver-leg,.diver-arm { fill:#17455c; stroke:#071d2e; stroke-width:.8; }
.diver-head { fill:#d1a184; stroke:#071d2e; stroke-width:.8; }
.diver-tank { fill:#63d0d4; stroke:#071d2e; stroke-width:.8; }
.diver-tank-highlight { fill:#b6ffff; opacity:.72; }
.diver-tank-shade { fill:#277d90; }
.diver-tank-band { fill:#e9d4a2; }
.diver-valve,.diver-boot { fill:#cad9d4; stroke:#071d2e; stroke-width:.75; }
.diver-valve-detail { fill:#f4d97f; }
.diver-bcd { fill:#0d3045; stroke:#071d2e; stroke-width:.75; }
.diver-bcd-panel { fill:#1f5669; stroke:#071d2e; stroke-width:.75; }
.diver-strap { fill:#77a0a1; }
.diver-buckle { fill:#f4d97f; }
.diver-suit-highlight { fill:#3b6b7e; }
.diver-suit-seam { fill:#092838; }
.diver-knee,.diver-fin-rib,.diver-arm-detail { fill:none; stroke:#3b6b7e; stroke-width:1.1; }
.diver-glove { fill:#183a4b; stroke:#071d2e; stroke-width:.75; }
.diver-mask { fill:#092838; stroke:#9ff4ef; stroke-width:.8; }
.diver-mask-glint { fill:#d5ffff; }
.diver-mask-strap { fill:#0a2739; }
.diver-regulator { fill:#cad9d4; stroke:#071d2e; stroke-width:.75; }
.diver-mouthpiece { fill:#0a2739; }
.diver-hose,.diver-octo-hose,.diver-spg-hose { fill:none; stroke:#9ff4ef; stroke-width:.8; }
.diver-octo { fill:#f4d97f; stroke:#071d2e; stroke-width:.75; }
.diver-spg { fill:#f3f6e4; stroke:#071d2e; stroke-width:.8; }
.diver-spg-mark { fill:none; stroke:#ea8a70; stroke-width:1; }
.diver-fin { fill:#0a2739; stroke:#071d2e; stroke-width:.8; }
.diver-light { fill:#f4d97f; stroke:#071d2e; stroke-width:.75; }
.diver-light-beam { fill:#d5ffff; opacity:.9; }
.diver-bubble { fill:var(--cyan-soft); }
.dive-console { position:fixed; z-index:12; left:16px; bottom:12px; display:grid; grid-template-columns:154px; gap:.38rem; align-items:end; width:154px; color:#d8ece8; font-family:ui-monospace,Consolas,monospace; filter:drop-shadow(0 12px 18px rgba(0,0,0,.32)); }
.dive-computer,.pressure-gauge { border:4px solid #061018; border-radius:15px; background:linear-gradient(145deg,#233440,#091720); box-shadow:inset 0 0 0 2px #41606a,inset 0 0 18px rgba(0,0,0,.72); }
.dive-computer { padding:.45rem; }
.dive-computer-top { display:flex; align-items:center; gap:.35rem; padding:0 .15rem .38rem; color:#8ab3b7; font-size:.48rem; font-weight:800; letter-spacing:.05em; }
.dive-sim { margin-left:auto; color:#f4d97f; }
.dive-reset { width:19px; height:19px; padding:0; border:1px solid #53747b; border-radius:50%; background:#102833; color:#a3f2ed; font:700 .85rem/1 system-ui; cursor:pointer; }
.dive-reset:hover,.dive-reset:focus-visible { border-color:var(--cyan); color:#fff; outline:none; }
.dive-panel-close { display:grid; place-items:center; width:26px; height:26px; padding:0; border:1px solid #53747b; border-radius:50%; background:#102833; color:#d8ece8; font:700 1rem/.8 system-ui; cursor:pointer; }
.dive-panel-close:hover,.dive-panel-close:focus-visible { border-color:var(--coral); color:#fff; outline:none; }
.dive-panel-open { width:100%; padding:.48rem .6rem; border:2px solid #061018; border-radius:12px; background:linear-gradient(145deg,#233440,#091720); color:#d8ece8; box-shadow:inset 0 0 0 1px #41606a; font:700 .61rem/1.2 ui-monospace,Consolas,monospace; cursor:pointer; }
.dive-panel-open:hover,.dive-panel-open:focus-visible { border-color:var(--cyan); color:#fff; outline:none; }
.dive-screen { min-height:145px; padding:.52rem .58rem .42rem; border:2px solid #071018; border-radius:7px; background:linear-gradient(160deg,#b8e5d8,#6dbbb6 70%,#438e91); color:#06222b; box-shadow:inset 0 0 0 2px rgba(225,255,239,.35),inset 0 0 20px rgba(5,45,48,.25); }
.dive-label { display:block; font-size:.52rem; font-weight:900; letter-spacing:.08em; }
.dive-screen>strong { display:block; margin:.03rem 0; font-size:2.15rem; line-height:.9; letter-spacing:-.12em; }
.dive-screen>strong small { margin-left:.17rem; font-size:.72rem; letter-spacing:0; }
.dive-chart { margin:.2rem 0 .24rem; padding:.18rem .2rem .1rem; border:1px solid rgba(6,34,43,.35); background:rgba(218,255,235,.18); }
.dive-chart>div { display:flex; justify-content:space-between; margin-bottom:.03rem; font-size:.4rem; font-weight:900; letter-spacing:.08em; }
.dive-chart svg { display:block; width:100%; height:29px; overflow:visible; }
.dive-chart-grid { fill:none; stroke:rgba(6,34,43,.2); stroke-width:1; stroke-dasharray:2 2; }
.dive-chart-line { fill:none; stroke:#073e4a; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.dive-chart-point { fill:#f4d97f; stroke:#073e4a; stroke-width:1.2; }
.dive-screen-row { display:flex; justify-content:space-between; gap:.35rem; padding-top:.36rem; border-top:1px solid rgba(6,34,43,.35); font-size:.47rem; font-weight:800; }
.dive-screen-row b { display:block; margin-top:.06rem; font-size:.65rem; }
.dive-screen p { margin:.4rem 0 0; font-size:.49rem; font-weight:900; letter-spacing:.08em; }
.pressure-gauge { padding:.38rem .45rem .28rem; text-align:center; }
.gauge-title { display:flex; align-items:baseline; gap:.3rem; padding:0 .2rem; font-size:.56rem; font-weight:800; }
.gauge-title strong { color:#f5f0d8; font-size:.95rem; }
.gauge-title small { color:#9dbec1; font-size:.5rem; }
.gauge-title .dive-panel-close { margin-left:auto; }
.gauge-face { display:block; width:100%; height:auto; margin:-.2rem auto -.8rem; overflow:visible; }
.gauge-arc { fill:none; stroke-width:9; stroke-linecap:round; }
.gauge-arc-base { stroke:#172831; }
.gauge-arc-safe { stroke:#5ebfb6; }
.gauge-arc-caution { stroke:#e9d47f; }
.gauge-arc-low { stroke:#df7768; }
.gauge-ticks { fill:none; stroke:#bddbd5; stroke-width:2; }
.gauge-scale { fill:#c9e4de; font:700 9px ui-monospace,monospace; }
.gauge-needle path { stroke:#f6e7a4; stroke-width:3; stroke-linecap:round; }
.gauge-needle circle { fill:#f4d97f; stroke:#071018; stroke-width:3; }
.pressure-gauge>p { margin:0; color:#89a9ab; font-size:.44rem; font-weight:800; letter-spacing:.08em; }
.dive-console.is-low-gas .dive-screen { background:linear-gradient(160deg,#e3b098,#c87862 70%,#9f453f); }
.dive-console.is-low-gas .gauge-title strong,.dive-console.is-low-gas .dive-screen p { color:#ffd6c5; }
@media (min-width:1200px) { .side-index-inner { padding-bottom:min(350px,42vh); } }
@media (min-width:1200px) and (max-height:800px) { .dive-console { transform:scale(.82); transform-origin:left bottom; } .side-index-inner { padding-bottom:270px; } }
@media (max-width:1199px) { .dive-console { left:auto; right:.65rem; bottom:.65rem; transform:scale(.86); transform-origin:right bottom; } }
.hero { min-height:calc(100vh - 68px); max-width:1440px; margin:auto; display:grid; grid-template-columns:minmax(0, .9fr) minmax(0,1.1fr); align-items:center; gap:clamp(2rem,6vw,7rem); padding:clamp(3rem,8vw,8rem) clamp(1.25rem,5vw,5rem); }
.hero-copy { max-width:580px; }
.eyebrow { margin:0 0 .85rem; color:var(--cyan); font:700 .72rem/1.3 ui-monospace,Consolas,monospace; letter-spacing:.14em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:8ch; margin-bottom:1.2rem; font-size:clamp(3.4rem,8vw,7rem); line-height:.94; letter-spacing:-.065em; }
h2 { max-width:16ch; font-size:clamp(2rem,4.5vw,4.25rem); line-height:1.02; letter-spacing:-.052em; }
h3 { font-size:1.18rem; letter-spacing:-.02em; }
.lead { max-width:52ch; color:#c9dddb; font-size:clamp(1.05rem,1.5vw,1.25rem); }
.hero-actions { display:flex; align-items:center; gap:1.3rem; margin:2rem 0; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:.75rem 1.1rem; border:1px solid transparent; border-radius:.2rem; font-weight:700; text-decoration:none; cursor:pointer; }
.button-primary { background:var(--cyan); color:var(--ink); }
.button-secondary { background:transparent; color:var(--paper); border-color:var(--line); }
.notice { max-width:52ch; margin:0; color:#91afb2; font-size:.78rem; }
.hero-art { position:relative; margin:0; min-height:360px; }
.hero-art::after { content:""; position:absolute; inset:10% 3% -5%; z-index:-1; background:radial-gradient(circle,rgba(82,209,222,.2),transparent 65%); filter:blur(24px); }
.hero-art img,.image-band img,.feature-card img,.illustrated-card img { width:100%; display:block; object-fit:cover; }
.hero-art img { min-height:420px; border:1px solid var(--line); }
.section-shell { width:min(1120px,calc(100% - 2.5rem)); margin-inline:auto; }
.intro { padding:7rem 0 5rem; }
.chapter-grid { display:grid; grid-template-columns:repeat(7,1fr); margin-top:2.5rem; border-block:1px solid var(--line); }
.chapter-grid a { min-height:160px; display:flex; flex-direction:column; gap:.45rem; padding:1.15rem; border-right:1px solid var(--line); text-decoration:none; transition:background .2s ease; }
.chapter-grid a:first-child { border-left:1px solid var(--line); }
.chapter-grid a:hover { background:rgba(82,209,222,.08); }
.chapter-grid span { color:var(--cyan); font:700 .7rem ui-monospace,Consolas,monospace; }
.chapter-grid strong { margin-top:auto; font-size:1rem; }
.chapter-grid small { color:#a6c1c1; font-size:.76rem; line-height:1.35; }
.chapter { padding:7rem 0; overflow:hidden; }
.chapter-dark { background:var(--ink-2); }
.chapter-head { display:grid; grid-template-columns:1fr 1fr; gap:3rem; margin-bottom:3rem; }
.chapter-head .eyebrow { grid-column:1/-1; margin-bottom:-1rem; }
.chapter-head p:last-child { align-self:end; max-width:54ch; color:#c1d4d5; }
.image-band { width:min(1320px,calc(100% - 2rem)); max-height:520px; margin:0 auto 4rem; overflow:hidden; border:1px solid var(--line); }
.image-band img { max-height:520px; }
.article-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
.article-grid article { padding:1.6rem; border-top:1px solid var(--line); }
.article-grid article p { color:#bbd0d0; }
.feature-card { display:grid; grid-template-columns:minmax(240px,.9fr) 1fr; align-items:center; gap:clamp(1.5rem,5vw,5rem); margin-top:4rem; padding:1rem; border:1px solid var(--line); background:rgba(255,255,255,.018); }
.feature-card.reverse { grid-template-columns:1fr minmax(240px,.9fr); }
.feature-card.reverse img { grid-column:2; }
.feature-card.reverse div { grid-column:1; grid-row:1; }
.feature-card img { aspect-ratio:1.55; }
.feature-card div { padding:1.2rem; }
.feature-card h3 { max-width:14ch; font-size:clamp(1.6rem,2.6vw,2.5rem); line-height:1.05; letter-spacing:-.04em; }
.feature-card p:last-child { color:#bdd1d0; }
.illustrated-card { padding:0 !important; overflow:hidden; border:1px solid var(--line) !important; background:rgba(255,255,255,.02); }
.illustrated-card img { aspect-ratio:1.75; }
.illustrated-card h3,.illustrated-card p { padding-inline:1.5rem; }
.illustrated-card h3 { margin-top:1.5rem; }
.illustrated-card p { padding-bottom:.7rem; }
.test-preview { margin-block:7rem; padding:clamp(2rem,6vw,5rem); border:1px solid var(--line); background:linear-gradient(110deg,rgba(82,209,222,.12),rgba(234,138,112,.08)); }
.test-preview h2 { max-width:13ch; }
.test-preview p:not(.eyebrow) { max-width:56ch; color:#c5d8d7; }
.technical-appendix { padding:7rem 0; background:#041421; }
.technical-appendix h2 { max-width:15ch; }
.technical-intro { max-width:72ch; color:#c1d4d4; }
.technical-list { margin-top:2.5rem; border-top:1px solid var(--line); }
.technical-card { border-bottom:1px solid var(--line); }
.technical-card summary { display:grid; grid-template-columns:1fr 26px; gap:1rem; align-items:start; padding:1.45rem .25rem; cursor:pointer; list-style:none; }
.technical-card summary::-webkit-details-marker { display:none; }
.technical-card summary strong { display:block; color:var(--sand); font-size:1.1rem; }
.technical-card summary small { display:block; max-width:75ch; margin-top:.35rem; color:#abc5c5; font-size:.9rem; line-height:1.5; }
.technical-card[open] .study-plus { transform:rotate(45deg); }
.technical-body { max-width:76ch; padding:0 2rem 1.7rem 0; color:#cadbda; }
.technical-body p { margin:0 0 1rem; }
.technical-body p:last-child { margin-bottom:0; }
.formula { display:inline-block; padding:.55rem .75rem; border:1px solid rgba(233,212,162,.3); background:rgba(233,212,162,.08); color:var(--sand); font:600 1rem/1.2 ui-monospace,Consolas,monospace; }
.sources-note { margin-top:3.5rem; padding:1.5rem; border:1px solid var(--line); background:rgba(82,209,222,.05); }
.sources-note p:not(.eyebrow) { max-width:72ch; color:#bbd2d1; }
.sources-note ul { margin:1rem 0 0; padding-left:1.1rem; }
.sources-note li { margin:.55rem 0; }
.sources-note a { color:var(--cyan-soft); }
.deep-study { padding-block:7rem 2rem; }
.deep-study h2 { max-width:12ch; }
.deep-study-intro { max-width:64ch; color:#bdd1d0; }
.inline-study { margin-top:4.5rem; }
.fichas-label { margin:0 0 .8rem; color:var(--cyan); font:700 .72rem ui-monospace,Consolas,monospace; letter-spacing:.12em; text-transform:uppercase; }
.study-filter { display:flex; flex-wrap:wrap; gap:.55rem; margin:2rem 0; }
.filter-chip { border:1px solid var(--line); border-radius:100vmax; padding:.5rem .8rem; background:transparent; color:var(--paper); font-size:.8rem; cursor:pointer; }
.filter-chip:hover,.filter-chip.is-selected { border-color:var(--cyan); background:rgba(82,209,222,.12); color:var(--cyan-soft); }
.study-list { border-top:1px solid var(--line); }
.study-card { border-bottom:1px solid var(--line); }
.study-card summary { display:grid; grid-template-columns:1fr 26px; gap:1rem; align-items:start; padding:1.3rem .25rem; cursor:pointer; list-style:none; }
.study-card summary::-webkit-details-marker { display:none; }
.study-glossary { margin:2.25rem 0; border:1px solid rgba(82,209,222,.3); background:rgba(8,31,49,.48); }
.study-glossary summary { display:grid; grid-template-columns:1fr 26px; gap:1rem; align-items:start; padding:1.2rem 1.3rem; cursor:pointer; list-style:none; }
.study-glossary summary::-webkit-details-marker { display:none; }
.study-glossary summary strong,.study-glossary summary small,.glossary-label { display:block; }
.study-glossary summary strong { margin:.28rem 0 .35rem; color:var(--sand); }
.study-glossary summary small { color:#9eb9b8; line-height:1.45; }
.glossary-label { color:var(--cyan); font:700 .68rem ui-monospace,Consolas,monospace; letter-spacing:.12em; text-transform:uppercase; }
.glossary-body { padding:0 1.3rem 1.35rem; border-top:1px solid rgba(82,209,222,.18); }
.glossary-body dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin:1.25rem 0 1rem; background:var(--line); }
.glossary-body dl > div { padding:1rem; background:#0a2035; }
.glossary-body dt { margin-bottom:.38rem; color:var(--cyan-soft); font-weight:700; }
.glossary-body dd { margin:0; color:#b8cece; font-size:.9rem; line-height:1.55; }
.glossary-body > p { margin:0; color:#9eb9b8; font-size:.85rem; line-height:1.5; }
.study-card summary strong { display:block; font-size:1.05rem; }
.study-card summary small { display:block; max-width:68ch; margin-top:.3rem; color:#a9c1c1; font-size:.87rem; line-height:1.45; }
.study-tag { display:inline-flex; width:max-content; margin-bottom:.45rem; padding:.22rem .48rem; border:1px solid rgba(233,212,162,.34); color:var(--sand); font:700 .65rem ui-monospace,Consolas,monospace; letter-spacing:.06em; text-transform:uppercase; }
.study-card--progression { border-left:2px solid rgba(233,212,162,.42); padding-left:.75rem; }
.study-number { color:var(--cyan); font:700 .75rem ui-monospace,Consolas,monospace; letter-spacing:.08em; }
.study-plus { color:var(--cyan); font-size:1.4rem; line-height:1; transition:transform .2s ease; }
.study-card[open] .study-plus { transform:rotate(45deg); }
.study-body { max-width:75ch; padding:0 2rem 1.5rem 0; color:#c1d4d4; }
.study-body p { margin:0 0 1rem; }
.orientation-study { display:grid; gap:.85rem; margin:1.3rem 0; }
.orientation-study section { padding:1rem 1.1rem; border-left:2px solid rgba(82,209,222,.5); background:rgba(82,209,222,.045); }
.orientation-study h4 { margin:0 0 .45rem; color:var(--cyan-soft); font-size:.96rem; }
.orientation-study section p { margin:0; }
.orientation-study dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem 1rem; margin:0; }
.orientation-study dl div { padding:.65rem .75rem; border:1px solid rgba(149,183,187,.2); background:rgba(4,19,33,.28); }
.orientation-study dt { color:var(--sand); font-weight:700; }
.orientation-study dd { margin:.25rem 0 0; color:#bdd0d0; line-height:1.5; }
.orientation-note { padding:.9rem 1rem; border:1px solid rgba(233,212,162,.3); background:rgba(233,212,162,.07); color:#d7e4e1; }
.skill-progression { margin:1.3rem 0; }
.skill-progression ol { display:grid; gap:.65rem; margin:0; padding:0; list-style:none; counter-reset:skill; }
.skill-progression li { display:grid; grid-template-columns:2.25rem 1fr; gap:.75rem; padding:.9rem 1rem; border:1px solid rgba(82,209,222,.16); background:rgba(4,19,33,.28); counter-increment:skill; }
.skill-progression li::before { content:counter(skill,decimal-leading-zero); display:grid; place-items:center; width:2.1rem; height:2.1rem; border:1px solid rgba(82,209,222,.4); color:var(--cyan); font:700 .72rem ui-monospace,Consolas,monospace; }
.skill-progression h4 { margin:0 0 .32rem; color:var(--paper); font-size:.98rem; }
.skill-progression p { margin:0; color:#bdd0d0; }
.skill-progression small { display:block; margin-top:.45rem; color:#91adad; line-height:1.45; }
.practice-guide { margin-top:3.5rem; padding:1.8rem 2rem; border:1px solid rgba(233,212,162,.28); background:linear-gradient(135deg,rgba(233,212,162,.07),rgba(82,209,222,.035)); }
.practice-guide h3,.surface-signals h3,.planning-lab h3,.compass-lab h3 { margin:.35rem 0 .7rem; font-size:clamp(1.35rem,2.2vw,1.9rem); }
.practice-guide > p:not(.eyebrow),.surface-signals-head p,.planning-lab > p,.compass-lab > p { max-width:72ch; color:#b8cece; }
.practice-guide ol { display:grid; grid-template-columns:repeat(5,1fr); gap:1px; margin:1.4rem 0 0; padding:1px; background:var(--line); list-style:none; }
.practice-guide li { min-height:142px; padding:1rem; background:#0b2034; }
.practice-guide li span { color:var(--cyan); font:700 .72rem ui-monospace,Consolas,monospace; }
.practice-guide li strong,.practice-guide li small { display:block; }
.practice-guide li strong { margin:.55rem 0 .35rem; color:var(--sand); }
.practice-guide li small { color:#9eb9b8; line-height:1.45; }
.learning-journey { margin-top:2rem; overflow:hidden; border:1px solid rgba(82,209,222,.28); background:#071d30; }
.learning-journey img { display:block; width:100%; height:auto; background:#071d30; }
.learning-journey figcaption { padding:.75rem 1rem; border-top:1px solid rgba(82,209,222,.2); color:#a9c7c6; font-size:.82rem; line-height:1.45; }
.study-visual { max-width:38rem; margin:1.35rem 0 .2rem; overflow:hidden; border:1px solid rgba(82,209,222,.25); background:#071d30; }
.study-visual img { display:block; width:100%; aspect-ratio:16 / 10; object-fit:cover; }
.study-visual figcaption { padding:.7rem .85rem; border-top:1px solid rgba(82,209,222,.2); color:#a9c7c6; font-size:.78rem; line-height:1.45; }
.study-visual--portrait { max-width:22rem; }
.study-visual--portrait img { aspect-ratio:2 / 3; object-fit:contain; }
.equipment-system { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:3rem; margin-top:3.5rem; padding:2rem; border:1px solid var(--line); background:rgba(9,31,42,.45); }
.equipment-system h3 { margin:.3rem 0 .9rem; font-size:clamp(1.45rem,2.3vw,2.1rem); }
.equipment-system > div > p:last-child { max-width:42ch; color:#c1d4d4; line-height:1.6; }
.equipment-flow { display:grid; gap:0; margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.equipment-flow li { display:grid; grid-template-columns:2.8rem 1fr; gap:.75rem; padding:1rem 0; border-bottom:1px solid var(--line); }
.equipment-flow span { color:var(--cyan); font:700 .72rem ui-monospace,Consolas,monospace; letter-spacing:.08em; padding-top:.2rem; }
.equipment-flow strong { display:block; color:var(--sand); }
.equipment-flow p { margin:.3rem 0 0; color:#b8cece; font-size:.9rem; line-height:1.5; }
.signal-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:3.5rem; border:1px solid var(--line); background:var(--line); }
.signal-card { min-height:148px; padding:1.25rem; background:rgba(6,24,39,.78); cursor:help; outline:none; transition:background .18s ease,box-shadow .18s ease; }
.signal-card:hover,.signal-card:focus-visible { position:relative; z-index:1; background:rgba(17,58,72,.94); box-shadow:inset 0 0 0 1px var(--cyan); }
.signal-card img { display:block; width:100%; aspect-ratio:1; margin-bottom:.8rem; border:1px solid rgba(82,209,222,.22); object-fit:cover; background:#071d30; image-rendering:auto; }
.signal-gesture { display:block; min-height:2.5em; color:#8facad; font-size:.74rem; line-height:1.4; }
.signal-card strong { display:block; margin:.6rem 0 0; color:var(--cyan-soft); font:700 .78rem ui-monospace,Consolas,monospace; letter-spacing:.08em; text-transform:uppercase; }
.signal-meaning { max-height:0; margin:0; overflow:hidden; color:#def0ee; font-size:.87rem; line-height:1.5; opacity:0; transform:translateY(4px); transition:max-height .2s ease,margin .2s ease,opacity .2s ease,transform .2s ease; }
.signal-card:hover .signal-meaning,.signal-card:focus-visible .signal-meaning { max-height:8rem; margin-top:.7rem; opacity:1; transform:none; }
.signal-match { margin-top:3.5rem; padding:1.8rem 2rem; border:1px solid var(--line); background:rgba(6,24,39,.32); }
.signal-match h3 { margin:.35rem 0 .7rem; font-size:clamp(1.35rem,2.2vw,1.9rem); }
.signal-match > p:not(.eyebrow) { max-width:68ch; margin-bottom:1.4rem; color:#b8cece; }
.match-score { display:flex; justify-content:space-between; align-items:center; padding:.75rem 0; border-block:1px solid var(--line); color:#a9c5c3; font-size:.86rem; }
.match-score strong { color:var(--cyan-soft); font:700 .9rem ui-monospace,Consolas,monospace; }
.match-board { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:1.4rem; }
.match-label { margin:0 0 .6rem; color:var(--cyan); font:700 .7rem ui-monospace,Consolas,monospace; letter-spacing:.08em; text-transform:uppercase; }
.match-signals { display:grid; grid-template-columns:repeat(3,1fr); gap:.55rem; }
.match-signal,.match-meaning { border:1px solid var(--line); background:rgba(6,24,39,.5); color:var(--paper); font:inherit; cursor:pointer; transition:border-color .16s ease,background .16s ease,transform .16s ease; }
.match-signal { padding:.35rem; text-align:left; }
.match-signal img { display:block; width:100%; aspect-ratio:1; object-fit:cover; }
.match-signal span { display:block; padding:.45rem .15rem .05rem; color:#abc5c5; font-size:.7rem; }
.match-meanings { display:grid; gap:.55rem; }
.match-meaning { min-height:calc((100% - 2.75rem) / 6); padding:.7rem .8rem; text-align:left; font-size:.88rem; line-height:1.35; }
.match-signal:hover:not(:disabled),.match-signal:focus-visible,.match-meaning:hover:not(:disabled),.match-meaning:focus-visible { border-color:var(--cyan); background:rgba(82,209,222,.1); outline:none; }
.match-signal.is-selected,.match-meaning.is-selected { border-color:var(--sand); background:rgba(235,213,164,.12); transform:translateY(-1px); }
.match-signal.is-matched,.match-meaning.is-matched { border-color:#73dfa4; background:rgba(115,223,164,.14); color:#e5ffef; }
.match-signal.is-wrong,.match-meaning.is-wrong { border-color:var(--coral); background:rgba(234,138,112,.14); }
.match-signal:disabled,.match-meaning:disabled { cursor:default; }
.match-feedback { min-height:1.5rem; margin:1rem 0; color:#c1d4d4; font-size:.9rem; }
.match-restart { border:1px solid var(--cyan); background:transparent; color:var(--cyan-soft); padding:.65rem .8rem; font:inherit; font-size:.86rem; cursor:pointer; }
.match-restart:hover,.match-restart:focus-visible { background:rgba(82,209,222,.1); outline:none; }
.match-round { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.65rem; color:#9eb9b8; font-size:.8rem; }
.match-round strong { color:var(--sand); font-family:ui-monospace,Consolas,monospace; }
.surface-signals { margin-top:3.5rem; }
.surface-signals-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:1.3rem; padding:1px; background:var(--line); }
.surface-signals-grid article { display:grid; grid-template-columns:180px 1fr; gap:1rem; align-items:center; padding:1rem; background:#0a2035; }
.surface-signals-grid img { display:block; width:100%; aspect-ratio:1; object-fit:cover; border:1px solid rgba(82,209,222,.2); }
.surface-signals-grid strong { color:var(--cyan-soft); }
.surface-signals-grid p { margin:.45rem 0 0; color:#b8cece; line-height:1.55; }
.planning-lab,.compass-lab { margin-top:3.5rem; padding:1.8rem 2rem; border:1px solid var(--line); background:rgba(6,24,39,.32); }
.planning-models { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:1.4rem 0; padding:1px; background:var(--line); }
.planning-models article { padding:1rem; background:#0a2035; }
.planning-models strong,.planning-models span { display:block; }
.planning-models strong { margin-bottom:.4rem; color:var(--sand); font:700 .78rem ui-monospace,Consolas,monospace; }
.planning-models span { color:#a9c1c1; font-size:.86rem; line-height:1.5; }
.planning-chain-progress { display:grid; grid-template-columns:repeat(5,1fr); gap:.45rem; min-height:5.5rem; margin:1rem 0; }
.planning-chain-step { display:flex; align-items:center; padding:.75rem; border:1px solid rgba(82,209,222,.28); color:#d9e8e6; font-size:.82rem; line-height:1.4; }
.planning-chain-step.is-empty { border-style:dashed; color:#698889; }
.planning-chain-options { display:flex; flex-wrap:wrap; gap:.55rem; }
.planning-chain-options button { border:1px solid var(--line); padding:.68rem .8rem; background:#0a2035; color:var(--paper); font:inherit; cursor:pointer; }
.planning-chain-options button:hover,.planning-chain-options button:focus-visible { border-color:var(--cyan); outline:none; }
.planning-chain-options button:disabled { opacity:.35; cursor:default; }
.planning-chain-feedback { min-height:1.6em; margin:.8rem 0 0; color:var(--cyan-soft); }
.lab-warning { margin:1.2rem 0 0!important; padding:.85rem 1rem; border-left:2px solid var(--sand); background:rgba(233,212,162,.06); color:#cbd9d7!important; font-size:.86rem; }
.compass-controls { display:grid; grid-template-columns:minmax(150px,1fr) 120px auto; gap:.7rem; align-items:end; max-width:720px; margin:1.3rem 0; }
.compass-controls label { color:var(--paper); font-weight:700; }
.compass-controls label span { display:block; color:#88a5a5; font-size:.75rem; font-weight:400; }
.compass-controls input { width:100%; border:1px solid var(--line); padding:.75rem; background:#071a2b; color:var(--paper); font:700 1rem ui-monospace,Consolas,monospace; }
.compass-result { display:grid; grid-template-columns:1fr auto 1fr; gap:1rem; align-items:center; max-width:720px; min-height:90px; padding:1rem; border:1px solid rgba(82,209,222,.25); background:#071a2b; }
.compass-result div { text-align:center; }
.compass-result span,.compass-result strong { display:block; }
.compass-result span { color:#8eaaaa; font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; }
.compass-result strong { margin-top:.25rem; color:var(--cyan-soft); font:700 1.65rem ui-monospace,Consolas,monospace; }
.compass-result i { color:var(--sand); font-style:normal; }
.study-body p:last-child { margin-bottom:0; color:#a9c5c3; }
.chapter-quiz { margin-top:3.5rem; padding:1.8rem 2rem; border:1px solid var(--line); background:rgba(6,24,39,.28); }
.chapter-quiz h3 { margin:.3rem 0 1rem; font-size:clamp(1.35rem,2.2vw,1.9rem); }
.chapter-quiz-intro { margin:0 0 1.2rem; color:#b8cece; font-size:.92rem; }
.chapter-quiz-intro strong { color:var(--cyan-soft); font-family:ui-monospace,Consolas,monospace; }
.chapter-quiz-list { display:grid; gap:1.35rem; }
.chapter-question { padding-top:1.25rem; border-top:1px solid var(--line); }
.chapter-question h4 { margin:0 0 .8rem; max-width:70ch; font-size:1rem; line-height:1.45; }
.chapter-answers { display:grid; gap:.45rem; }
.chapter-answers button { width:100%; border:1px solid var(--line); background:rgba(6,24,39,.4); color:var(--paper); padding:.72rem .85rem; text-align:left; font:inherit; font-size:.9rem; line-height:1.4; cursor:pointer; }
.chapter-answers button:hover:not(:disabled),.chapter-answers button:focus-visible { border-color:var(--cyan); background:rgba(82,209,222,.1); }
.chapter-answers button:disabled { cursor:default; }
.quiz-review { max-width:620px; margin:1.25rem auto; padding:1rem; border:1px solid var(--line); text-align:left; }
.quiz-review h4 { margin:0 0 .7rem; color:var(--sand); }
.quiz-review ul { display:grid; gap:.45rem; margin:0; padding:0; list-style:none; }
.quiz-review li { display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0; border-top:1px solid rgba(149,183,187,.14); }
.quiz-review a { color:var(--cyan-soft); }
.quiz-review span { color:#91adad; font-size:.82rem; }
.quiz-perfect { color:var(--cyan-soft); }
.chapter-answers button.is-correct { border-color:#73dfa4; background:rgba(115,223,164,.15); }
.chapter-answers button.is-incorrect { border-color:var(--coral); background:rgba(234,138,112,.15); }
.chapter-feedback { margin:.7rem 0 0; color:#b8cece; font-size:.88rem; line-height:1.5; }
.chapter-feedback strong { color:var(--sand); }
.technical-quiz { margin:3rem 0 0; }
.quiz { max-width:720px; margin-top:2rem; }
.quiz-start { padding:1.35rem; border:1px solid var(--line); background:rgba(6,24,39,.3); }
.quiz-start p { margin-bottom:1rem; }
.quiz-progress { display:flex; flex-direction:column; gap:.55rem; margin-bottom:1.4rem; color:var(--cyan-soft); font:700 .72rem ui-monospace,Consolas,monospace; letter-spacing:.07em; text-transform:uppercase; }
.quiz-progress > div { height:4px; background:rgba(255,255,255,.12); }
.quiz-progress i { display:block; width:0; height:100%; background:var(--cyan); transition:width .25s ease; }
.quiz-progress.step-1 i { width:3.333%; }.quiz-progress.step-2 i { width:6.667%; }.quiz-progress.step-3 i { width:10%; }.quiz-progress.step-4 i { width:13.333%; }.quiz-progress.step-5 i { width:16.667%; }.quiz-progress.step-6 i { width:20%; }.quiz-progress.step-7 i { width:23.333%; }.quiz-progress.step-8 i { width:26.667%; }.quiz-progress.step-9 i { width:30%; }.quiz-progress.step-10 i { width:33.333%; }.quiz-progress.step-11 i { width:36.667%; }.quiz-progress.step-12 i { width:40%; }.quiz-progress.step-13 i { width:43.333%; }.quiz-progress.step-14 i { width:46.667%; }.quiz-progress.step-15 i { width:50%; }.quiz-progress.step-16 i { width:53.333%; }.quiz-progress.step-17 i { width:56.667%; }.quiz-progress.step-18 i { width:60%; }.quiz-progress.step-19 i { width:63.333%; }.quiz-progress.step-20 i { width:66.667%; }.quiz-progress.step-21 i { width:70%; }.quiz-progress.step-22 i { width:73.333%; }.quiz-progress.step-23 i { width:76.667%; }.quiz-progress.step-24 i { width:80%; }.quiz-progress.step-25 i { width:83.333%; }.quiz-progress.step-26 i { width:86.667%; }.quiz-progress.step-27 i { width:90%; }.quiz-progress.step-28 i { width:93.333%; }.quiz-progress.step-29 i { width:96.667%; }.quiz-progress.step-30 i { width:100%; }
.quiz h3 { max-width:28ch; margin-bottom:1rem; font-size:clamp(1.35rem,2.3vw,2rem); line-height:1.2; }
.answers { display:grid; gap:.65rem; }
.answers button { width:100%; border:1px solid var(--line); background:rgba(6,24,39,.38); color:var(--paper); padding:1rem; text-align:left; font:inherit; line-height:1.4; cursor:pointer; }
.answers button:hover:not(:disabled),.answers button:focus-visible { border-color:var(--cyan); background:rgba(82,209,222,.1); }
.answers button:disabled { cursor:default; }
.answers button.is-correct { border-color:#73dfa4; background:rgba(115,223,164,.15); }
.answers button.is-incorrect { border-color:var(--coral); background:rgba(234,138,112,.15); }
.quiz-feedback { margin-top:1rem; padding:1rem; border-left:3px solid var(--cyan); background:rgba(6,24,39,.42); }
.quiz-feedback p { margin-bottom:.65rem; }
.quiz-feedback a { color:var(--cyan-soft); margin-right:1rem; font-size:.9rem; }
.quiz-feedback .button { margin-top:.75rem; }
.quiz-result { padding:1.5rem; border:1px solid var(--cyan); background:rgba(82,209,222,.08); }
.quiz-result > strong { display:block; margin-bottom:.35rem; color:var(--sand); font-size:clamp(2.5rem,6vw,4.5rem); line-height:1; }
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem clamp(1.2rem,4vw,4rem); border-top:1px solid var(--line); background:#061827; color:#a9c1c3; font-size:.78rem; }
.site-footer p { margin:0; }
.site-footer nav { display:flex; flex-wrap:wrap; gap:.9rem; }
.site-footer a { color:var(--cyan-soft); text-decoration:none; }
.site-footer a:hover,.site-footer a:focus-visible { color:var(--sand); text-decoration:underline; outline:none; }
.legal-page { max-width:900px; padding-top:4rem; padding-bottom:5rem; }
.legal-page h1 { max-width:14ch; }
.legal-page section { margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--line); }
.legal-page section p { max-width:76ch; }
.legal-notice { margin-top:2rem; padding:1rem 1.15rem; border-left:3px solid var(--sand); background:rgba(233,212,162,.09); }
.legal-reference { margin-top:3rem; color:#a9c1c3; font-size:.86rem; }
.legal-reference a { color:var(--cyan-soft); }
.reveal { opacity:0; transform:translateY(16px); transition:opacity .6s ease,transform .6s ease; }
.reveal.is-visible { opacity:1; transform:none; }
@media (min-width:1200px) { .side-index { display:block; } main { margin-left:186px; } }
@media (max-width:820px) { :root { --footer-h:70px; } .site-header { padding:.85rem 1rem; } nav { display:none; } .brand { font-size:.68rem; } .hero { min-height:auto; grid-template-columns:1fr; padding-top:4rem; } .hero-art { min-height:0; } .hero-art img { min-height:260px; } .chapter-grid { grid-template-columns:repeat(2,1fr); } .chapter-grid a:nth-child(3) { border-left:1px solid var(--line); } .chapter-head { grid-template-columns:1fr; gap:.6rem; } .chapter-head .eyebrow { margin-bottom:.25rem; } .article-grid { grid-template-columns:1fr; } .feature-card,.feature-card.reverse { grid-template-columns:1fr; gap:0; } .feature-card.reverse img { grid-column:1; } .feature-card.reverse div { grid-column:1; grid-row:auto; } .equipment-system { grid-template-columns:1fr; gap:1.5rem; padding:1.35rem; } .practice-guide ol { grid-template-columns:1fr; } .practice-guide li { min-height:0; } .signal-grid { grid-template-columns:repeat(2,1fr); margin-top:2rem; } .signal-card { min-height:138px; padding:1rem; } .signal-card:focus-visible .signal-meaning { max-height:8rem; margin-top:.7rem; opacity:1; transform:none; } .surface-signals-grid,.planning-models,.glossary-body dl { grid-template-columns:1fr; } .surface-signals-grid article { grid-template-columns:110px 1fr; } .signal-match { margin-top:2rem; padding:1.35rem; } .match-board { grid-template-columns:1fr; } .match-meanings { grid-template-columns:1fr; } .match-meaning { min-height:auto; } .planning-chain-progress { grid-template-columns:1fr; } .compass-controls { grid-template-columns:1fr; } .orientation-study dl { grid-template-columns:1fr; } .chapter-quiz { padding:1.35rem; } .site-footer { align-items:flex-start; flex-direction:column; } .site-footer nav { display:flex; } }
@media (hover:none) { .signal-meaning { max-height:8rem; margin-top:.7rem; opacity:1; transform:none; } .signal-card { min-height:0; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:0.01ms!important; animation-duration:0.01ms!important; } .reveal { opacity:1; transform:none; } }