/* Original charcoal / brass palette, with a compact modern signal instrument. */
html { color-scheme:dark; }
body { background:radial-gradient(ellipse at 14% 8%,#a779181a,transparent 42%),radial-gradient(ellipse at 88% 52%,#c6a3440d,transparent 48%),#0a0a0a; }
[hidden] { display:none!important; }
.main-header { padding:76px 20px 5px; background:radial-gradient(ellipse at 50% 0,#99722620,transparent 75%); }
.main-header .glitch-text { font:700 clamp(2rem,4.2vw,3.45rem)/1.2 Georgia,serif!important; text-transform:none; letter-spacing:-.025em; margin-bottom:8px; color:#d4af37; text-shadow:0 0 28px #d4af3733; }
.subtitle { font-size:1rem; letter-spacing:.06em; }
.header-divider { margin:16px auto 8px; }
#container { max-width:1480px; padding-top:14px; }
.drawing-guide { max-width:1020px; margin:0 auto 22px; text-align:center; }
.drawing-guide > p:last-child { color:#beb9ad; font-size:.9rem; line-height:1.7; }
.study-eyebrow { font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:#d4af37; margin-bottom:6px; }
.mode-bar { display:flex; gap:14px; align-items:end; padding:15px 18px; border:1px solid #d4af375e; border-radius:14px 14px 0 0; background:linear-gradient(115deg,#a17b2824,transparent 55%),#151515; box-shadow:inset 0 1px #fff4b721,0 -4px 20px #d4af3706; }
.mode-bar > div { margin-right:auto; min-width:0; width:min(430px,100%); }
.mode-bar label { display:block; color:#c4bfae; font-size:.72rem; margin-bottom:6px; text-transform:uppercase; letter-spacing:.07em; }
select { color-scheme:dark; background:#1a1a1a; color:#f1ecdf; border:1px solid #b8860b; border-radius:7px; font:inherit; padding:10px 12px; }
option { background:#1a1a1a; color:#f1ecdf; }
.mode-bar select { width:100%; font-size:1rem; color:#f4d03f; border-color:#d4af3777; }
.study-link,.research-directions a { display:inline-block; border:1px solid #d4af374b; border-radius:7px; color:#e4c45d; background:#8e681110; padding:9px 13px; text-decoration:none; font-size:.79rem; transition:border-color .2s,box-shadow .2s; }
.study-link:hover,.research-directions a:hover { border-color:#d4af37; box-shadow:0 0 18px #d4af3722; }
.instrument-grid { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:16px; margin-top:16px; }
.viewport-column { min-width:0; }
.canvas-container { height:clamp(400px,48vw,535px); min-height:400px; margin-bottom:0; border:1px solid #b8860b; background:#0a0a0a; box-shadow:0 0 24px #d4af3712,inset 0 0 40px #0006; border-radius:12px; }
#epicycles-canvas { touch-action:none; }
.viewport-hint { position:absolute; top:14px; left:18px; right:18px; color:#c2b894; font-size:.74rem; pointer-events:none; text-align:center; }
.viewport-legend { position:absolute; bottom:13px; left:14px; right:14px; display:flex; gap:8px 20px; flex-wrap:wrap; justify-content:center; pointer-events:none; font-size:.69rem; }
.viewport-legend span::before { content:'━'; margin-right:7px; }
.legend-input { color:#57cf78; }.legend-window { color:#aaa58b; }.legend-reconstruction { color:#7c9fbf; }.legend-trace { color:#86c1ff; text-shadow:0 0 8px #4a9eff99; }.legend-vector { color:#f4d03f; }
.mode-caption { margin-top:12px; border-left:3px solid #d4af37; padding:9px 15px; color:#e9dcae; background:#d4af3708; font-size:.88rem; line-height:1.7; }
.view-options { display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; padding:12px 14px; border:1px solid #d4af3733; border-radius:9px; margin-top:12px; background:#181710; }
.view-options label { display:flex; gap:8px; align-items:center; color:#c7c0ad; font-size:.72rem; cursor:pointer; }
.view-options input[type=checkbox] { width:15px; height:15px; accent-color:#d4af37; }
.view-options input[type=range] { width:86px; height:5px; accent-color:#d4af37; }
.view-options input[type=range]::-webkit-slider-thumb { width:13px; height:13px; }
.coefficient-comparison { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin:13px 0; }
.coefficient-comparison>div { padding:11px 14px; border-left:2px solid #e59b5b; border-radius:0 8px 8px 0; background:#e59b5b0a; }
.coefficient-comparison>div:nth-child(2) { border-color:#4a9eff; background:#4a9eff09; }
.coefficient-comparison output { display:block; color:#e3cc84; font-size:1rem; }
.coefficient-comparison span { color:#b5ae9e; font-size:.68rem; }
.coefficient-comparison p { grid-column:1/-1; color:#b4ad9e; font-size:.73rem; line-height:1.7; margin:0; }
.timing-explanation { color:#ada58e; font-size:.67rem; line-height:1.65; margin-top:7px; }
.boundary-basis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:20px 0; }
.boundary-basis>span { border:1px solid #d4af374c; border-top:2px solid #d4af37; border-radius:9px; background:linear-gradient(125deg,#d4af370d,transparent); padding:14px; color:#e8cf7b; font:600 1rem/1.8 Georgia,serif; }
.boundary-basis>span:nth-child(2) { border-top-color:#57cf78; }.boundary-basis>span:nth-child(3) { border-top-color:#4a9eff; }.boundary-basis>span:nth-child(4) { border-top-color:#ac89e3; }
.boundary-basis b { color:#b6b0a0; font:400 .7rem/1.6 'Source Code Pro',monospace; }
.sine-explanation { margin:26px 0; }.sine-explanation>p { margin:13px 0; }
.boundary-explanations { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:20px 0; }
.boundary-explanations>div { padding:18px; border:1px solid #57cf7844; border-left:3px solid #57cf78; border-radius:10px; background:linear-gradient(135deg,#57cf780b,transparent); }
.boundary-explanations>div:nth-child(2) { border-color:#4a9eff44; border-left-color:#4a9eff; background:linear-gradient(135deg,#4a9eff0b,transparent); }
.boundary-explanations h3 { color:#e8d68a; font:600 1.1rem/1.4 Georgia,serif; margin:0 0 9px; }
.boundary-explanations p { margin:0; }.inline-equation { color:#f0ddb0; white-space:nowrap; }
@media(max-width:700px) { .boundary-explanations { grid-template-columns:1fr; } }
@media(max-width:650px) { .boundary-basis { grid-template-columns:1fr 1fr; }.view-options { gap:12px; }.coefficient-comparison { gap:7px; }.coefficient-comparison>div { padding:9px; } }
.controls-panel { margin-bottom:0; padding:17px; border:1px solid #b8860b80; background:linear-gradient(125deg,#fff3b509,transparent 45%),#151515; box-shadow:inset 0 1px #fff0b814,0 10px 28px #0004; }
.control-group { margin-bottom:13px; }.control-group label { font-size:.78rem; margin-bottom:5px; display:flex; justify-content:space-between; gap:12px; }.control-group select { padding:8px 9px; font-size:.8rem; }
.control-group input[type=range] { height:6px; }.control-group input[type=range]::-webkit-slider-thumb { width:16px; height:16px; }
.button-group { margin-top:14px; display:flex; flex-wrap:wrap; gap:8px; }.button-group button { padding:8px 12px; font-size:.76rem; flex:1; white-space:nowrap; border-width:1px; }
#draw-now { flex-basis:100%; }
.study-note { color:#a9a59a; font-size:.73rem; line-height:1.65; }
#stft-sampling { display:block; margin-top:7px; color:#b4b7a9; }
.inspector-panel { margin:20px 0 25px; padding:18px; border:1px solid #d4af374b; border-radius:12px; background:#131313; }
.inspector-heading { display:flex; gap:18px; align-items:center; margin-bottom:12px; }
.inspector-heading h2 { flex:0 0 auto; color:#e3c25a; font:600 1.25rem Georgia,serif; }
.inspector-heading p { color:#b3afa4; font-size:.76rem; line-height:1.7; }
#motion-inspector { width:100%; height:210px; display:block; border-radius:7px; }
.motion-readouts { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:12px 0; }
.motion-readouts > div { padding:8px 13px; background:#d4af3707; border-left:2px solid #d4af3760; }
.motion-readouts output { display:block; font-size:1.05rem; color:#f0d97d; }.motion-readouts span { font-size:.69rem; color:#aeaaa0; }
.study-route { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:20px 0; }
.study-route > div { border:1px solid #d4af3738; border-left:3px solid #d4af37; border-radius:9px; padding:15px; background:linear-gradient(120deg,#d4af370c,transparent),#151515; }
.study-route > div:nth-child(2) { border-left-color:#57cf78; }.study-route > div:nth-child(3) { border-left-color:#4a9eff; }
.study-route strong { color:#e7d48c; font-size:.83rem; }.study-route p,.info-panel .study-route p { font-size:.8rem; line-height:1.7; color:#b5b1a5; margin:8px 0 0; }
.guide-route { margin-bottom:30px; }
.info-panel,.math-panel { border-color:#b8860b80; background:linear-gradient(115deg,#fff0b006,transparent 55%),#151515; box-shadow:inset 0 1px #fff3bf12,0 14px 28px #0003; padding:28px; }
.info-panel h2,.math-panel h2 { color:#d4af37; font-size:1.65rem; }.info-panel p { font-size:.9rem; line-height:1.75; }
.frequency-study { scroll-margin-top:30px; }.frequency-controls { display:flex; flex-wrap:wrap; gap:18px; margin:20px 0 10px; }.frequency-controls label { display:grid; gap:7px; font-size:.8rem; color:#c0bbaa; }
.spectrogram-pair { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:16px 0; }.spectrogram-pair figure { min-width:0; margin:0; border:1px solid #d4af374d; border-radius:11px; overflow:hidden; background:#0a0a0a; }.spectrogram-pair canvas { width:100%; display:block; }.spectrogram-pair figcaption { padding:12px; font-size:.76rem; color:#b5b0a3; }
.frequency-insight { border-left:3px solid #d4af37; background:#d4af3708; padding:12px 16px; }
.frequency-details { border:1px solid #d4af3740; padding:16px 18px; border-radius:9px; margin:20px 0; background:#151515; }.frequency-details summary { color:#e3c765; cursor:pointer; }.frequency-details p { margin-top:13px; color:#bdb9ae; font-size:.88rem; line-height:1.8; }
.research-directions { margin-bottom:30px; }.research-directions a { padding:4px 8px; font-size:.75rem; }
button,select,a { transition:border-color .2s,box-shadow .2s,background-color .2s,color .2s; }
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible { outline:2px solid #f4d03f; outline-offset:3px; }
* { scrollbar-width:thin; scrollbar-color:#8b7026 #151515; }
@media(max-width:1050px) { .instrument-grid { grid-template-columns:minmax(0,1fr) 245px; }.mode-bar { flex-wrap:wrap; }.mode-bar .study-link { font-size:.7rem; padding:8px; } }
@media(max-width:800px) { .main-header { padding-top:80px; }.mode-bar > div { flex:1 1 100%; width:100%; }.instrument-grid { grid-template-columns:1fr; }.canvas-container { height:440px; }.controls-panel { display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; }.controls-panel .button-group { flex-direction:row; grid-column:1/-1; margin-top:0; }.button-group button { width:auto; }.control-group { margin-bottom:4px; }.study-route,.spectrogram-pair { grid-template-columns:1fr; }.inspector-heading { display:block; }.inspector-heading p { margin-top:9px; }.inspector-panel { padding:12px; } }
@media(max-width:500px) { #container { padding-left:10px; padding-right:10px; }.canvas-container { min-height:370px; height:370px; }.mode-bar { gap:8px; padding:12px; }.mode-bar .study-link { flex:1; text-align:center; }.controls-panel { padding:13px; }.motion-readouts { gap:5px; }.motion-readouts > div { padding:6px; }.motion-readouts output { font-size:.86rem; }.motion-readouts span { font-size:.6rem; }.inspector-heading p { font-size:.7rem; }.viewport-hint { font-size:.66rem; }.info-panel,.math-panel { padding:18px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }