.standalone-header, .explorer-content, footer { width: min(1180px, calc(100% - 2rem)); margin-inline: auto; }
:root { --bg:#f3f0e9; --surface:#fffdf8; --surface-soft:#f3f5f7; --text-primary:#15243b; --text-secondary:#5e6c7b; --maroon-900:#101d31; --maroon-700:#15243b; --maroon-500:#2d64d8; --accent:#f06d4f; --accent-soft:#ffede7; --line:#d9dfe5; --shadow:0 24px 70px rgba(21,36,59,.1); --radius-lg:24px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; color:var(--text-primary); background:var(--bg); font-family:Manrope,sans-serif; line-height:1.5; }
.page-bg { position:fixed; inset:0; z-index:-1; background:radial-gradient(circle at 15% 0%,rgba(184,135,68,.13),transparent 34%),linear-gradient(180deg,#fffdf8 0%,#f5efe7 58%,#eee5db 100%); }
.skip-link { position:absolute; left:.75rem; top:-3rem; z-index:30; padding:.45rem .65rem; border:1px solid var(--accent); border-radius:10px; color:var(--maroon-900); background:#fff; font-weight:700; }
.skip-link:focus { top:.75rem; }
.standalone-header { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; padding:2.4rem 0 1.2rem; }
.standalone-header h1 { margin:.2rem 0 .35rem; font-size:clamp(2rem,5vw,3.2rem); line-height:1.08; }
.eyebrow { margin:0; color:var(--maroon-700); font-size:.75rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.intro { margin:0; color:var(--text-secondary); font-size:1.02rem; }
.class-site-link { flex:none; padding:.55rem .75rem; border:1px solid var(--line); border-radius:9px; color:var(--maroon-700); background:rgba(255,255,255,.86); font-size:.75rem; font-weight:800; text-decoration:none; }
.explorer-content { max-width:1180px; padding-bottom:1.2rem; }
footer { padding:1rem 0 2rem; color:var(--text-secondary); font-size:.72rem; text-align:center; }
@media (max-width:640px) { .standalone-header { align-items:flex-start; padding-top:1.4rem; } .class-site-link { display:none; } }
.explorer-site-header { padding-top: 2.7rem; }
.explorer-content { max-width: 1180px; }
.explorer-shell { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; }
.expression-panel, .graph-column, .analysis-panel { border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgba(255,253,249,.96); box-shadow: var(--shadow); }
.expression-panel { grid-column: 1 / -1; padding: 1rem; }
.expression-form label { display: block; margin-bottom: .4rem; color: var(--maroon-700); font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.expression-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; overflow: hidden; border: 2px solid #cdb8a8; border-radius: 12px; background: white; }
.expression-row:focus-within { border-color: var(--maroon-500); box-shadow: 0 0 0 3px rgba(123,48,65,.13); }
.function-prefix { padding-left: .85rem; color: var(--maroon-700); font-weight: 800; }
#function-input { min-width: 0; padding: .8rem .55rem; border: 0; outline: 0; color: var(--text-primary); background: transparent; font: 600 1.08rem/1.2 Manrope,sans-serif; }
.graph-button { align-self: stretch; padding: 0 1.15rem; border: 0; background: var(--maroon-700); color: white; font-weight: 800; cursor: pointer; }
.input-help { margin: .55rem 0 0; color: var(--text-secondary); font-size: .78rem; }
.example-chip { margin: .1rem .08rem; padding: .13rem .38rem; border: 1px solid var(--line); border-radius: 5px; color: var(--maroon-700); background: var(--surface-soft); font: inherit; font-weight: 700; cursor: pointer; }
.input-message { min-height: 1.2em; margin: .25rem 0 0; color: #9b2737; font-size: .82rem; font-weight: 700; }
.feature-picker { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .65rem; margin-top: .7rem; }
.feature-button { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 54px; padding: .55rem; border: 1px solid var(--line); border-radius: 10px; color: var(--maroon-700); background: #fff; font: 700 .78rem/1.2 Manrope,sans-serif; cursor: pointer; }
.feature-button:hover { background: var(--surface-soft); }
.feature-button.active { border-color: var(--maroon-700); color: white; background: var(--maroon-700); box-shadow: 0 5px 13px rgba(90,28,42,.2); }
.feature-icon { display: grid; place-items: center; min-width: 29px; height: 29px; border-radius: 50%; background: var(--accent-soft); color: var(--maroon-700); font-size: .7rem; font-weight: 800; }
.graph-column { min-width: 0; padding: .75rem; }
.graph-toolbar { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding-bottom: .55rem; }
.graph-toolbar button { min-width: 34px; min-height: 32px; margin-right: .25rem; border: 1px solid var(--line); border-radius: 7px; color: var(--maroon-700); background: white; font-weight: 800; cursor: pointer; }
.graph-toolbar p { margin: 0; color: var(--text-secondary); font-size: .72rem; }
.canvas-wrap { position: relative; aspect-ratio: 16/10; overflow: hidden; border: 1px solid #dccfc3; border-radius: 10px; background: #fff; touch-action: none; }
#function-canvas { display: block; width: 100%; height: 100%; cursor: grab; }
#function-canvas:active { cursor: grabbing; }
.graph-hint { position: absolute; right: .45rem; bottom: .35rem; padding: .18rem .35rem; border-radius: 4px; color: #786966; background: rgba(255,255,255,.84); font-size: .65rem; pointer-events: none; }
.graph-legend { display: flex; flex-wrap: wrap; gap: .75rem; min-height: 30px; padding-top: .55rem; font-size: .72rem; font-weight: 700; }
.legend-item { display: inline-flex; align-items: center; gap: .32rem; }
.legend-swatch { width: 18px; height: 4px; border-radius: 4px; }
.analysis-panel { padding: 1rem; }
.analysis-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.analysis-kicker { margin: 0 0 .15rem; color: var(--accent); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.analysis-heading h2 { margin: 0; font-size: 1.18rem; }
.reveal-button { padding: .34rem .52rem; border: 1px solid var(--line); border-radius: 7px; color: var(--maroon-700); background: white; font: 700 .68rem Manrope,sans-serif; cursor: pointer; }
.result-group { padding: .85rem 0; border-bottom: 1px solid #eee3da; }
.result-group h3 { margin: 0 0 .3rem; font-size: .78rem; color: var(--maroon-700); }
.result-group p { margin: 0; font-size: .9rem; overflow-wrap: anywhere; }
.result-dot { display: inline-block; width: 9px; height: 9px; margin-right: .35rem; border-radius: 50%; }
.results-hidden .result-group p { filter: blur(7px); user-select: none; }
.approximation-note { margin: .8rem 0 0; padding: .65rem; border-radius: 8px; color: var(--text-secondary); background: var(--surface-soft); font-size: .7rem; }
@media (max-width: 840px) { .explorer-shell { grid-template-columns: 1fr; } .analysis-panel { grid-column: 1; } }
@media (max-width: 640px) { .explorer-site-header { padding-top: 1.5rem; } .feature-picker { grid-template-columns: 1fr 1fr; } .feature-button { justify-content: flex-start; } .expression-row { grid-template-columns: auto minmax(0,1fr); } .graph-button { grid-column: 1 / -1; min-height: 42px; } .graph-toolbar { align-items: flex-start; } .graph-toolbar p { max-width: 130px; text-align: right; } .canvas-wrap { aspect-ratio: 1/1; } }

/* Standalone visual identity */
body { min-width:320px; -webkit-font-smoothing:antialiased; background:var(--bg); }
.page-bg { background:radial-gradient(circle at 7% 3%,rgba(240,109,79,.14),transparent 25rem),radial-gradient(circle at 94% 24%,rgba(45,100,216,.11),transparent 30rem),linear-gradient(rgba(21,36,59,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(21,36,59,.028) 1px,transparent 1px),var(--bg); background-size:auto,auto,32px 32px,32px 32px,auto; }
.standalone-header { position:relative; align-items:center; min-height:370px; padding:4.4rem 0 3.2rem; border-bottom:1px solid rgba(21,36,59,.14); }
.hero-copy { position:relative; z-index:1; }
.standalone-header h1 { max-width:830px; margin:.55rem 0 1.65rem; font-size:clamp(3.2rem,7.2vw,6.8rem); font-weight:800; letter-spacing:-.06em; line-height:.89; }
.standalone-header h1 em { position:relative; display:inline-block; margin-right:.1em; color:#2d64d8; font-style:normal; }
.standalone-header h1 em::after { position:absolute; right:.02em; bottom:-.04em; left:.03em; height:.075em; border-radius:999px; background:var(--accent); content:""; transform:rotate(-1deg); }
.eyebrow { display:flex; align-items:center; gap:.55rem; color:var(--accent); letter-spacing:.15em; }
.eyebrow span { width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 6px rgba(240,109,79,.13); }
.intro { max-width:620px; color:var(--text-secondary); font-size:clamp(1rem,1.7vw,1.28rem); line-height:1.6; }
.hero-side { display:flex; flex-direction:column; align-items:center; gap:1.5rem; }
.function-mark { position:relative; width:190px; height:190px; border:1px solid rgba(21,36,59,.18); border-radius:50%; background:rgba(255,253,248,.58); box-shadow:inset 0 0 0 16px rgba(255,255,255,.34),0 24px 70px rgba(21,36,59,.09); transform:rotate(-5deg); }
.mark-axis { position:absolute; top:50%; left:50%; background:rgba(21,36,59,.28); transform:translate(-50%,-50%); }
.mark-axis-x { width:132px; height:1px; }
.mark-axis-y { width:1px; height:132px; }
.mark-curve { position:absolute; inset:0; display:grid; place-items:center; color:#2d64d8; font-family:Georgia,serif; font-size:7.8rem; font-style:italic; line-height:1; transform:translate(2px,-7px); }
.mark-dot { position:absolute; width:13px; height:13px; border:3px solid var(--surface); border-radius:50%; box-shadow:0 3px 9px rgba(21,36,59,.18); }
.dot-one { top:31px; left:116px; background:#198754; }
.dot-two { top:91px; left:74px; background:var(--accent); }
.dot-three { top:139px; left:109px; background:#8a4bb8; }
.class-site-link { display:inline-flex; align-items:center; gap:.45rem; min-height:44px; padding:0 1rem; border-color:rgba(45,100,216,.25); border-radius:999px; color:#2457be; background:rgba(255,253,248,.82); box-shadow:0 8px 24px rgba(45,100,216,.07); }
.class-site-link:hover { border-color:#2d64d8; transform:translateY(-1px); }
.explorer-content { padding-top:1.25rem; }
.explorer-shell { gap:1.15rem; }
.expression-panel,.graph-column,.analysis-panel { border-color:rgba(21,36,59,.12); background:rgba(255,253,248,.9); }
.expression-panel { position:relative; overflow:hidden; padding:1.2rem; }
.expression-panel::before { position:absolute; top:0; right:0; left:0; height:4px; background:linear-gradient(90deg,#2d64d8 0 25%,#198754 25% 50%,#f06d4f 50% 75%,#8a4bb8 75%); content:""; }
.expression-form label { color:#596879; letter-spacing:.12em; }
.expression-row { border:1px solid #cdd5dd; border-radius:14px; box-shadow:0 8px 26px rgba(21,36,59,.05); }
.expression-row:focus-within { border-color:#2d64d8; box-shadow:0 0 0 4px rgba(45,100,216,.11),0 8px 26px rgba(21,36,59,.05); }
.function-prefix { color:#2d64d8; font-size:1.05rem; }
#function-input { padding:1rem .6rem; font-size:1.13rem; }
.graph-button { min-width:105px; background:#15243b; transition:background 150ms ease; }
.graph-button:hover { background:#2d64d8; }
.example-chip { border-color:#d6dce3; border-radius:999px; color:#2457be; background:#f5f7fb; }
.feature-picker { gap:.75rem; margin-top:.9rem; }
.feature-button { min-height:62px; border-color:#d8dee5; border-radius:14px; color:#435268; transition:transform 150ms ease,border-color 150ms ease,box-shadow 150ms ease; }
.feature-button:hover { border-color:#aeb9c6; background:#fff; transform:translateY(-2px); }
.feature-button.active { border-color:#15243b; color:#fff; background:#15243b; box-shadow:0 10px 24px rgba(21,36,59,.2); }
.feature-icon { min-width:34px; height:34px; color:#2d64d8; background:#edf2ff; }
.feature-button.active .feature-icon { color:#15243b; background:#fff; }
.graph-column { padding:1rem; }
.graph-toolbar { padding:.05rem .1rem .75rem; }
.graph-toolbar button { border-color:#d8dee5; border-radius:9px; color:#33445b; }
.graph-toolbar button:hover { border-color:#2d64d8; color:#2d64d8; }
.canvas-wrap { border-color:#d5dbe1; border-radius:15px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.7); }
.graph-legend { padding:.75rem .15rem 0; color:#536275; }
.analysis-panel { position:relative; overflow:hidden; padding:1.15rem; }
.analysis-panel::after { position:absolute; right:-54px; bottom:-62px; width:150px; height:150px; border:22px solid rgba(45,100,216,.045); border-radius:50%; content:""; pointer-events:none; }
.analysis-kicker { color:var(--accent); letter-spacing:.13em; }
.analysis-heading h2 { font-size:1.35rem; letter-spacing:-.035em; }
.reveal-button { border-color:#d5dce4; border-radius:999px; color:#2457be; }
.result-group h3 { color:#536275; letter-spacing:.02em; }
.result-group p { color:#172840; font-size:.96rem; font-weight:650; }
.approximation-note { position:relative; z-index:1; border-left:3px solid var(--accent); border-radius:4px 10px 10px 4px; background:#fff4ef; }
footer { display:flex; justify-content:center; align-items:center; gap:.45rem; border-top:1px solid rgba(21,36,59,.1); }
footer span { color:#2d64d8; font-family:Georgia,serif; font-size:1.2rem; font-style:italic; }
button,a { transition:transform 150ms ease,box-shadow 150ms ease,border-color 150ms ease,background 150ms ease; }
button:focus-visible,a:focus-visible,#function-canvas:focus-visible { outline:3px solid rgba(45,100,216,.35); outline-offset:3px; }
@media (max-width:840px) { .standalone-header { min-height:310px; } .function-mark { width:150px; height:150px; } .mark-axis-x { width:104px; } .mark-axis-y { height:104px; } .mark-curve { font-size:6rem; } .dot-one { top:24px; left:91px; } .dot-two { top:71px; left:57px; } .dot-three { top:109px; left:85px; } }
@media (max-width:640px) { .standalone-header { min-height:0; padding:2.5rem 0 2rem; } .standalone-header h1 { font-size:clamp(3rem,14vw,4.3rem); } .hero-side { display:none; } .feature-button { min-height:66px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }