@font-face{font-family:Gillius;src:url('./fonts/Gillius-Regular.woff') format('woff');font-display:swap}:root{--green:#00703c;--paper:#f2f8f5;--ink:#16382b;--muted:#5d7b6e;--line:#d6e5de;font-family:Gillius,'Gill Sans','Trebuchet MS',sans-serif;color:var(--ink);background:var(--paper)}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;color:inherit;background:none;border:0}header{height:90px;background:var(--green);color:var(--paper);display:flex;align-items:center;justify-content:space-between;padding:0 4.1vw;gap:30px}.brand{font-size:29px;display:flex;align-items:center;gap:16px}.brand-icon{font-family:Georgia;font-size:40px}nav{display:flex;gap:30px}nav a{font-size:17px;opacity:.65;position:relative}nav a[aria-current],nav a:hover{opacity:1}nav a[aria-current]:after{content:'';height:2px;background:#cce2d8;position:absolute;bottom:-15px;left:0;right:0}#explorer{min-height:calc(100svh - 90px);display:grid;grid-template-columns:minmax(0,1fr) 345px;padding:28px 5vw 25px 4vw;gap:4vw}.stage{min-width:0;display:flex;flex-direction:column}.stage-head{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:50px}h1{font-weight:400;font-size:28px;letter-spacing:-.5px;margin:0}#diagram{width:100%;height:min(68vh,650px);display:block;overflow:visible;margin:auto 0}svg text{font-family:Gillius,'Trebuchet MS',sans-serif;fill:var(--ink);font-size:18px}svg .minor{font-size:14px;fill:var(--muted)}svg .math{font-family:Georgia,serif;font-size:24px}svg .answer{font-family:Georgia,serif;font-size:42px;fill:var(--green)}.diagram-note{color:var(--muted);font-size:12px;text-align:center;min-height:20px}.surface-picker{border:1px solid #b4d0c0;display:flex;padding:3px;flex-shrink:0}.surface-picker button{font-size:12px;padding:7px 10px;color:var(--muted)}.surface-picker button[aria-pressed=true]{background:#cce2d8;color:var(--green)}aside{align-self:center;padding-top:20px}.cards{display:grid;gap:13px}.step-card{display:flex;gap:14px;align-items:baseline;text-align:left;border:1px solid #b8d1c4;background:#ffffff35;padding:20px 18px;width:100%;transition:background .2s,border-color .2s}.step-card:hover{background:#e4f0e9}.step-card[aria-pressed=true]{background:#dfede5;border-color:var(--green);box-shadow:inset 3px 0 var(--green)}.card-number{font-size:11px;letter-spacing:.08em;color:var(--muted)}h2{font-size:24px;font-weight:400;letter-spacing:-.3px;margin:0 0 9px;color:var(--green)}.step-card p{font-size:16px;line-height:1.4;color:var(--muted);margin:0}.card-arrow{margin-left:auto;color:var(--green);font-size:23px}.step-caption{font-size:17px;line-height:1.55;color:var(--muted);margin:26px 2px 0;min-height:106px}.playback{display:flex;align-items:center;gap:18px;margin:20px auto 0;width:min(520px,100%);padding:0 12px}.playback button{font-size:17px;min-width:28px;min-height:36px;color:var(--green)}#sequence{font-size:14px;white-space:nowrap}.progress{height:2px;background:#cce2d8;flex:1;overflow:hidden}.progress span{display:block;height:100%;background:var(--green);width:0}.fade{animation:appear .8s both;animation-delay:var(--delay)}.draw-lines{animation:appear .5s both;animation-delay:var(--delay)}.draw-lines line{stroke-dasharray:650;stroke-dashoffset:650;animation:draw 1.4s ease both;animation-delay:var(--delay)}@keyframes appear{from{opacity:0}to{opacity:1}}@keyframes draw{to{stroke-dashoffset:0}}.lore-wrap{max-width:800px;margin:65px auto;padding:0 30px 60px}.eyebrow{font-size:11px;letter-spacing:.2em;color:var(--muted);margin-bottom:20px}.lore-wrap h1{font-size:42px;margin-bottom:30px}.lore-wrap em{font-size:30px;font-style:normal;color:var(--green)}p{font-size:18px;line-height:1.55;color:var(--muted)}.history-diagram{border-block:1px solid var(--line);padding:32px 0;margin:35px 0;display:flex;justify-content:space-between;font-family:Georgia;font-size:25px;color:var(--green)}details{border-bottom:1px solid var(--line);padding:20px 0}summary{cursor:pointer;font-size:21px}details p{font-size:17px}.sources{margin-top:38px;display:grid;gap:16px;font-size:14px;color:var(--muted)}.sources>span{font-size:10px;letter-spacing:.16em}.sources a:hover{text-decoration:underline}:focus-visible{outline:2px solid var(--green);outline-offset:5px}[hidden]{display:none!important}@media(max-width:900px){header{height:auto;min-height:90px;flex-wrap:wrap;padding:18px 5vw;gap:18px}.brand{font-size:25px}nav a{font-size:15px}#explorer{grid-template-columns:1fr;padding:22px 5vw;gap:24px}.stage-head{align-items:flex-start}h1{font-size:23px}.surface-picker button{padding:6px 8px;font-size:11px}#diagram{height:auto;min-height:280px;max-height:55vh}.diagram-note{font-size:11px}.playback{margin-top:12px}aside{padding-top:0}.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.step-card{padding:16px 12px;gap:9px}h2{font-size:20px}.step-card p{font-size:14px}.card-arrow{display:none}.step-caption{min-height:0;font-size:16px;margin-top:20px}.history-diagram{font-size:17px}}@media(max-width:440px){.stage-head{flex-wrap:wrap;gap:10px}.cards{grid-template-columns:1fr}.step-card{padding:14px}.step-card h2{margin-bottom:5px}.step-card p{font-size:15px}}@media(prefers-reduced-motion:reduce){.fade,.draw-lines,.draw-lines line{animation-duration:.01s;animation-delay:0s}}

.brand{font-size:25px}.brand em{font-family:Georgia,serif;font-size:.91em;font-weight:normal}.stage-head h1{font-size:26px}@media(max-width:900px){.brand{font-size:21px;white-space:normal}.brand em{display:inline}.brand-icon{flex-shrink:0}}

#diagram[data-surface="grid"] line[stroke="#f2f8f5"]{stroke:#397553}#diagram[data-surface="grid"] text[style*="fill:#f2f8f5"]{fill:#235d3d!important;stroke:none!important}

.brand{font-size:29px}.stage-head{align-items:flex-start}.stage-head h1{font-size:26px;line-height:1.3;max-width:600px}.stage-head h1 em{font-family:Georgia,serif;font-size:.94em;font-weight:normal}.surface-picker{padding:2px;border:0;gap:4px}.surface-picker button{width:38px;height:38px;padding:5px;display:grid;place-items:center;border:1px solid transparent;border-radius:2px}.surface-picker button:hover{background:#e0ece4}.surface-picker button[aria-pressed=true]{border-color:#a6c4b2}.surface-picker svg{display:block;width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}@media(max-width:900px){.brand{font-size:27px}.stage-head h1{font-size:23px}.surface-picker button{width:34px;height:34px}.surface-picker svg{width:25px;height:25px}}

.step-card{align-items:center;min-height:80px}.step-card h2{margin:0}.cards{gap:16px}.playback{margin-top:20px}

.animal.sprite{shape-rendering:crispEdges}#diagram[data-surface="grid"] .animal *{fill:none!important;stroke:#376c4a!important;stroke-width:1.2!important}#diagram[data-surface="grid"] #well-scene path:not([fill="none"]),#diagram[data-surface="grid"] #well-scene ellipse{fill:none!important;stroke:#6e947a!important;stroke-width:1.2!important}#diagram[data-surface="solid"] .sprite{shape-rendering:geometricPrecision}#diagram[data-surface="grid"] #observer-balloon path{fill:none!important;stroke:#52795e!important}

#pause svg{width:18px;height:18px;display:block}#pause{display:grid;place-items:center;line-height:1}.animal.sprite{shape-rendering:crispEdges}

.animal{stroke-width:1;stroke-linecap:round;stroke-linejoin:round}.animal.sprite{shape-rendering:crispEdges}#diagram[data-surface="grid"] .animal *{fill:none!important;stroke:#376c4a!important;stroke-width:1!important}#diagram[data-surface="grid"] .animal>ellipse{opacity:.12}

.angles-page{padding:48px 6vw 90px}.angles-layout{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:190px minmax(0,800px);gap:65px;justify-content:center}.angle-toc{display:flex;flex-direction:column;align-self:start;position:sticky;top:30px;gap:0;border-left:1px solid #b9d0c1}.angle-toc a{padding:10px 18px;font-size:16px;color:var(--muted)}.angle-toc a:hover{color:var(--green);background:#e2eee6}.angles-content>h1{font-size:36px;margin:0 0 38px}.angle-section{padding:0 0 45px;margin-bottom:45px;border-bottom:1px solid var(--line);scroll-margin-top:30px}.angle-section h2{font-size:28px;margin:0 0 25px}.angle-section h3{font-size:22px;font-weight:400;margin:32px 0 20px;color:var(--green)}.angle-section p{font-size:18px;line-height:1.7;color:var(--ink);margin:18px 0}.definition{border-left:3px solid #00703c;background:#e4efe8;padding:2px 23px;margin:20px 0}.angle-formula{text-align:center;margin:23px 0;font-size:20px;line-height:1.8}.math{font-family:Georgia,'Times New Roman',serif}.angles-page .math{font-size:1.08em}.angles-page .roman{font-family:Gillius,'Trebuchet MS',sans-serif;font-size:.93em}.frac{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;line-height:1.2;margin:0 .18em}.frac>span{padding:0 .14em}.frac>span:first-child{border-bottom:1px solid currentColor;padding-bottom:2px}.frac>span:last-child{padding-top:2px}.angle-table{border-collapse:collapse;width:100%;margin:25px 0;font-size:18px;text-align:left}.angle-table th{color:var(--green);font-weight:400;border-bottom:1px solid #83af97;padding:14px 16px}.angle-table td{border-bottom:1px solid var(--line);padding:16px}.angle-table tr:nth-child(even){background:#e9f2ec}.angle-examples{display:flex;justify-content:space-around;gap:30px;padding:20px 0;margin:10px 0}.angle-examples>div{flex:1}.conversion-table{max-width:450px;margin:25px auto}.answer-line{display:inline-block;min-width:65px;border-bottom:1px solid #9db6a5;height:20px}.angle-exercises{padding-left:24px;font-size:18px;line-height:1.8}.angle-exercises li{margin:22px 0;padding-left:8px}.ray-notation{position:relative;font-style:italic;display:inline-block;padding-top:4px}.ray-notation:before{content:'⟶';position:absolute;top:-15px;left:0;right:0;text-align:center;font-style:normal}.angles-content strong{font-weight:600;color:var(--green)}@media(max-width:900px){.angles-page{padding:28px 6vw 60px}.angles-layout{grid-template-columns:1fr;gap:30px}.angle-toc{position:static;flex-direction:row;flex-wrap:wrap;border-left:0;border-bottom:1px solid var(--line);gap:2px}.angle-toc a{font-size:14px;padding:8px 12px}.angle-section p,.angle-exercises{font-size:17px}.angles-content>h1{font-size:30px}.angle-table{font-size:15px}.angle-table th,.angle-table td{padding:12px 8px}.angle-examples{gap:18px;flex-wrap:wrap}.definition{padding:2px 17px}}