@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root { color-scheme:light; --ink:#182723; --muted:#66766f; --paper:#f6f1e8; --surface:#fffdf8; --line:#dcded5; --teal:#1f6f68; --gold:#e3b15b; --sin:#b3483f; --cos:#176e9c; --tan:#1f7860; --cot:#8d6331; --sec:#7350a3; --csc:#a53e76; font-family:Manrope,system-ui,sans-serif; }
* {box-sizing:border-box} body {margin:0;background:var(--paper);color:var(--ink);line-height:1.6} a {color:inherit;text-underline-offset:4px} button,input,select {font:inherit} button,a,input,select {touch-action:manipulation} button {cursor:pointer} :focus-visible {outline:3px solid var(--teal);outline-offset:4px} [hidden] {display:none!important}
.skip-link {position:absolute;left:20px;top:-80px;background:var(--surface);padding:12px;z-index:10}.skip-link:focus {top:12px}
.study-nav {background:#101c19;color:#f6f1e8}.study-nav>div {max-width:1200px;margin:auto;min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 28px}.study-nav a {text-decoration:none}.study-nav .brand {font-weight:800}.study-nav nav {display:flex;align-items:center;gap:24px;font-size:.86rem}.study-nav nav a {opacity:.8}.study-nav nav a[aria-current] {opacity:1;color:var(--gold)}
.study-page {max-width:1160px;margin:auto;padding:28px 28px 60px}.breadcrumbs {display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.76rem;color:var(--muted);margin-bottom:28px}.breadcrumbs a {text-decoration:none}.breadcrumbs span[aria-hidden] {opacity:.5}
.eyebrow {font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--teal);margin:0 0 10px} h1,h2,h3,p {margin-top:0} h1 {font-size:clamp(2rem,5vw,3.6rem);letter-spacing:-.055em;line-height:1.13;margin-bottom:16px;font-weight:800} h2 {font-size:1.6rem;letter-spacing:-.04em;line-height:1.25} h3 {font-size:1.1rem;letter-spacing:-.025em} .intro {max-width:680px;color:var(--muted);font-size:1rem;margin-bottom:32px}.study-header {margin-bottom:24px}.study-header .intro {margin-bottom:0}
.topic-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:20px;margin:32px 0}.topic-card {display:flex;flex-direction:column;gap:12px;align-items:flex-start;text-decoration:none;background:var(--surface);padding:30px;border:1px solid var(--line);border-radius:18px}.topic-card:hover {border-color:var(--teal)}.topic-card h2 {margin:0}.topic-card p {color:var(--muted);margin:0}.topic-mark {display:grid;place-items:center;width:48px;height:48px;background:#e4ece6;border-radius:12px;font-size:1.4rem;color:var(--teal)}.topic-card .visit {margin-top:auto;padding-top:16px;color:var(--teal);font-weight:700}
.reference-section {margin:44px 0}.reference-section>p {color:var(--muted);max-width:760px}.table-wrap {overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}table {border-collapse:collapse;width:100%;text-align:left;font-size:.86rem}th,td {padding:14px 18px;border-bottom:1px solid var(--line)}th {font-weight:800;background:#eef0e8}tbody tr:last-child td {border-bottom:0}.math {font-family:Georgia,'Times New Roman',serif;font-size:1.12em;white-space:nowrap}.reference-columns {display:grid;grid-template-columns:1fr 1fr;gap:28px}.reference-note {padding:20px 24px;border-left:3px solid var(--teal);background:#eaf0e8;border-radius:0 12px 12px 0}.reference-note p:last-child {margin:0}.study-footer {border-top:1px solid var(--line);padding-top:22px;margin-top:50px;font-size:.8rem;color:var(--muted);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.tool-heading {display:flex;justify-content:space-between;align-items:start;gap:20px}.tool-heading h1 {font-size:clamp(2rem,4vw,3rem);margin-bottom:8px}.version-links {display:flex;gap:6px;align-items:center;font-size:.76rem;flex-shrink:0}.version-links a {padding:8px 12px;text-decoration:none;border-radius:8px}.version-links [aria-current] {background:var(--ink);color:var(--paper)}
.lab {margin-top:26px;background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden}.lab-toolbar {display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid var(--line);align-items:center}.segmented {display:flex;gap:3px;flex-wrap:wrap;padding:3px;background:#edf0e9;border-radius:10px}.segmented button {border:0;background:transparent;color:var(--muted);border-radius:8px;padding:8px 12px;font-weight:700;font-size:.76rem}.segmented button[aria-pressed=true] {background:var(--surface);color:var(--ink);box-shadow:0 1px 4px #18272316}.units {display:flex;align-items:center;gap:8px;font-size:.76rem}.units select {background:transparent;border:1px solid var(--line);border-radius:8px;padding:7px;color:var(--ink)}
.angle-controls {display:grid;grid-template-columns:auto minmax(140px,1fr) auto;gap:18px;align-items:center;padding:20px;border-bottom:1px solid var(--line)}.angle-field {display:flex;align-items:center;gap:8px;font-size:.83rem}.angle-field input {width:95px;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:8px;color:var(--ink);font-variant-numeric:tabular-nums} input[type=range] {width:100%;accent-color:var(--teal);min-height:28px}.motion-controls {display:flex;gap:8px;align-items:center}.button {display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 14px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);text-decoration:none;font-weight:700;font-size:.8rem}.button:hover {background:#edf0e9}.button.primary {background:var(--teal);color:#fff;border-color:var(--teal)}.motion-controls select {border:1px solid var(--line);border-radius:8px;padding:8px;background:var(--surface);color:var(--ink);font-size:.8rem}
.explorer {display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,1fr)}.circle-panel {padding:20px 20px 18px;min-width:0}.diagram-meta {display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:.74rem;color:var(--muted)}.diagram-meta output {font-variant-numeric:tabular-nums}.circle-plot {width:100%;display:block;touch-action:none;user-select:none}.circle-plot text,.trig-plot text {font-family:Manrope,system-ui,sans-serif;fill:var(--muted);font-size:12px;paint-order:stroke;stroke:var(--surface);stroke-width:4px;stroke-linejoin:round}.circle-plot .direct {fill:var(--ink);font-weight:700}.point-controls {display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}.point-controls button {padding:7px 9px;font-size:.72rem}.point-controls button[aria-pressed=true] {background:var(--ink);border-color:var(--ink);color:var(--surface)}.diagram-hint {font-size:.72rem;color:var(--muted);margin:6px 0 0}.readout-panel {padding:22px;border-left:1px solid var(--line);background:#faf9f3;min-width:0}.function-picker {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.function-card {text-align:left;border:1px solid var(--line);border-radius:11px;background:var(--surface);padding:12px 10px;color:var(--ink);min-width:0}.function-card[aria-pressed=true] {border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}.function-name {display:flex;gap:6px;align-items:center;font-size:.72rem;font-weight:700}.swatch {display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--series);flex-shrink:0}.function-value {display:block;margin-top:6px;font-variant-numeric:tabular-nums;font-size:.94rem;font-weight:800;overflow-wrap:anywhere}.function-detail {margin-top:24px}.function-detail h2 {font-size:1.3rem;margin-bottom:10px}.formula {font-family:Georgia,serif;font-size:1.4rem;margin-bottom:14px}.function-detail p {font-size:.84rem;color:var(--muted)}.function-detail .numeric {color:var(--ink);font-variant-numeric:tabular-nums;font-size:.82rem;padding-top:8px}.properties {display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:.74rem}.properties dt {color:var(--muted)}.properties dd {margin:0;text-align:right}.selected-status {font-size:.75rem;color:var(--muted);min-height:1.6em;margin:14px 0 0}.graphs-panel {padding:24px 20px;border-top:1px solid var(--line)}.graph-heading {display:flex;justify-content:space-between;align-items:baseline;gap:20px}.graph-heading h2 {font-size:1.2rem;margin-bottom:8px}.graph-heading p {font-size:.75rem;color:var(--muted);margin-bottom:20px}.graph-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.graph-card {min-width:0}.graph-card h3 {display:flex;align-items:center;gap:8px;justify-content:space-between;font-size:.8rem;margin-bottom:4px}.graph-card h3 span:first-child {display:flex;gap:7px;align-items:center}.graph-card output {font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}.trig-plot {width:100%;display:block;touch-action:pan-y}.graph-card small {display:block;color:var(--muted);font-size:.68rem;margin-top:4px}.lab[data-view=graphs] .explorer {grid-template-columns:1fr}.lab[data-view=graphs] .circle-panel {display:none}.lab[data-view=graphs] .readout-panel {border-left:0;display:grid;grid-template-columns:1.1fr 1fr;gap:26px}.lab[data-view=graphs] .function-detail {margin-top:0}.lab[data-view=graphs] .selected-status {grid-column:1/-1}.lab[data-view=circle] .graphs-panel {display:none}.help-section {margin-top:34px}.help-section h2 {font-size:1.2rem}.help-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.help-grid h3 {font-size:.86rem;margin-bottom:8px}.help-grid p {font-size:.8rem;color:var(--muted)}.lab-noscript {padding:20px}.sr-only {position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:850px) {.explorer {grid-template-columns:1fr}.readout-panel {border-left:0;border-top:1px solid var(--line)}.readout-panel .function-picker {grid-template-columns:repeat(6,minmax(0,1fr))}.lab[data-view=graphs] .readout-panel {display:block}.lab[data-view=graphs] .function-detail {margin-top:24px}.angle-controls {grid-template-columns:auto 1fr}.motion-controls {grid-column:1/-1;justify-content:flex-end}.circle-panel {max-width:600px;width:100%;margin:auto}}
@media(max-width:580px) {.study-nav>div {padding:12px 18px;min-height:60px}.study-nav nav {gap:14px;font-size:.76rem}.study-nav nav .optional {display:none}.study-page {padding:20px 16px 36px}.breadcrumbs {margin-bottom:22px}.tool-heading {flex-wrap:wrap;gap:12px}.tool-heading .version-links {margin-left:auto}.lab {margin-top:18px;border-radius:14px}.lab-toolbar {padding:12px;gap:10px}.segmented button {padding:9px 8px;font-size:.71rem}.angle-controls {padding:14px;gap:10px}.angle-field input {width:78px}.circle-panel {padding:16px 10px}.readout-panel {padding:18px 14px}.readout-panel .function-picker {grid-template-columns:repeat(3,minmax(0,1fr))}.function-card {padding:12px}.graphs-panel {padding:20px 14px}.graph-grid {grid-template-columns:1fr}.graph-heading {display:block}.help-grid,.reference-columns {grid-template-columns:1fr;gap:16px}.topic-card {padding:24px}.intro {font-size:.92rem}.tool-heading .intro {margin-bottom:0}.diagram-meta {font-size:.7rem}}
.function-value.is-undefined {font-size:.72rem;white-space:nowrap}
@media(prefers-reduced-motion:no-preference) {.button,.function-card,.topic-card {transition:background .15s,border-color .15s}}