.tonal-hero{width:min(calc(100% - 32px),1280px);margin:auto;padding:clamp(48px,7vw,84px) 0 34px;text-align:center}.tonal-hero h1{margin:14px auto 0;color:#f5ecdb;font:800 clamp(48px,7vw,86px)/1 var(--font-b);letter-spacing:-.055em}.tonal-hero>p:last-child{width:min(900px,100%);margin:24px auto 0;color:#aea08f;font-size:clamp(16px,1.8vw,20px);line-height:1.7}.tonal-layout{width:min(calc(100% - 32px),1400px);margin:0 auto 90px;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(350px,.8fr);gap:24px;align-items:start}.tonal-card,.tonal-panel{border:1px solid rgba(234,215,185,.1);border-radius:30px;background:linear-gradient(155deg,rgba(33,23,16,.96),rgba(14,9,7,.98));box-shadow:0 28px 82px rgba(0,0,0,.48)}.tonal-card{min-width:0;padding:18px}.tonal-wheel-wrap{position:relative;width:min(100%,840px);margin:auto;aspect-ratio:1}.tonal-pointer{position:absolute;z-index:3;top:4px;left:50%;border-left:15px solid transparent;border-right:15px solid transparent;border-top:30px solid #fff0d1;transform:translateX(-50%);filter:drop-shadow(0 0 9px #d2a45a)}#tonalWheel{width:100%;height:100%;overflow:visible}.tonal-disc{fill:#140d0a;stroke:rgba(234,215,185,.42);stroke-width:2}.tonal-line{fill:none;stroke:rgba(255,255,255,.09);stroke-width:1.3}.tonal-tick{stroke:rgba(234,215,185,.16)}.tonal-tick.major{stroke:rgba(234,215,185,.48);stroke-width:2}.tonal-sign-sector{fill:rgba(234,215,185,.035);stroke:rgba(255,255,255,.06)}.tonal-sign.active .tonal-sign-sector{fill:rgba(234,215,185,.18);filter:drop-shadow(0 0 12px rgba(210,164,90,.35))}.tonal-number-sector{fill:rgba(90,168,161,.06);stroke:rgba(90,168,161,.08)}.tonal-number.active .tonal-number-sector{fill:rgba(90,168,161,.25);filter:drop-shadow(0 0 12px rgba(90,168,161,.35))}.tonal-glyph,.tonal-sign-name,.tonal-num,.tonal-num-label{text-anchor:middle;dominant-baseline:central}.tonal-glyph{font-size:28px}.tonal-sign-name{fill:#d5c7b2;font:800 8px var(--font-h)}.tonal-num-circle{fill:#ad533f}.tonal-num{fill:#fff2dd;font:900 18px var(--font-b)}.tonal-num-label{fill:#8fc8c1;font:800 8px var(--font-h)}.tonal-sign.active .tonal-glyph,.tonal-sign.active .tonal-sign-name{filter:drop-shadow(0 0 7px #d2a45a)}.tonal-number.active .tonal-num-circle{fill:#d16c53;filter:drop-shadow(0 0 8px #b85843)}.tonal-paper{fill:#f1e3c7;stroke:#d0a965;stroke-width:2}.tonal-center-glyph{font-size:58px;text-anchor:middle}.tonal-center-num{fill:#fff5e7;font:900 29px var(--font-b);text-anchor:middle}.tonal-center-badge{fill:#b85843}.tonal-center-name{fill:#3d2a1f;font:900 23px var(--font-b);text-anchor:middle}.tonal-center-meaning{fill:#745744;font:800 9px var(--font-h);text-anchor:middle}.tonal-controls{padding:22px;border-top:1px solid rgba(255,255,255,.07)}.tonal-date,.tonal-select{display:grid;grid-template-columns:1fr auto;gap:10px;margin-bottom:10px}.tonal-controls input[type=date],.tonal-controls select{min-width:0;padding:11px 13px;border:1px solid rgba(255,255,255,.11);border-radius:12px;color:#f5ecdb;color-scheme:dark;background:#0e0a08}.tonal-controls button{min-height:44px;padding:10px 16px;border:1px solid rgba(234,215,185,.15);border-radius:12px;color:#160e09;background:linear-gradient(180deg,#b7e7e0,#66b6af);cursor:pointer;font-weight:850}.tonal-controls>p{margin:0 0 16px;color:#d2a45a;font-size:12px;font-weight:700}.tonal-sequence{display:flex;justify-content:space-between;margin-top:17px;color:#eee}.tonal-sequence span{color:#98ddd6;font-weight:850}.tonal-slider{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;margin-top:12px}.tonal-slider input{width:100%;accent-color:#b85843}.tonal-slider button:not(#tonalPlay){color:#eee;background:#17100b}.tonal-panel{position:sticky;top:88px;padding:28px}.tonal-kicker{color:#98ddd6;font:800 11px var(--font-h);letter-spacing:.15em;text-transform:uppercase}.tonal-panel h2{margin-top:10px;color:#fff;font:800 clamp(32px,3.5vw,45px)/1.05 var(--font-b)}.tonal-sub{margin-top:10px;color:#ead7b9;font-weight:800}.tonal-status{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}.tonal-status>div{padding:15px;border:1px solid rgba(255,255,255,.07);border-radius:15px;background:rgba(255,255,255,.025)}.tonal-status span{display:block;color:#95887a;font:700 9px var(--font-h);letter-spacing:.1em;text-transform:uppercase}.tonal-status strong{display:block;margin-top:7px;color:#eee}.tonal-meaning{margin-top:20px;color:#c8c0b0;line-height:1.7}.tonal-traits{margin-top:18px;display:grid;gap:10px}.tonal-traits section{padding:15px;border:1px solid rgba(255,255,255,.07);border-radius:14px}.tonal-traits section:first-child{background:rgba(90,168,161,.07)}.tonal-traits section:last-child{background:rgba(184,88,67,.07)}.tonal-traits h3{color:#98ddd6;font:800 10px var(--font-h);text-transform:uppercase}.tonal-traits section:last-child h3{color:#e58f78}.tonal-traits ul{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;list-style:none}.tonal-traits li{padding:6px 8px;border-radius:8px;color:#c8c0b0;background:rgba(255,255,255,.055);font-size:11px}.tonal-mechanic{margin-top:18px;padding:16px;border-left:3px solid #b85843;border-radius:0 12px 12px 0;color:#d8cdbd;background:rgba(184,88,67,.07);font-size:13px;line-height:1.65}.tonal-mechanic strong{color:#ffd8c9}.tonal-strip-title{margin-top:20px;color:#eee;font-size:13px}.tonal-strip{display:grid;grid-template-columns:repeat(13,minmax(60px,1fr));gap:7px;margin-top:10px;overflow-x:auto;padding-bottom:5px}.tonal-mini{padding:8px 5px;border:1px solid rgba(255,255,255,.07);border-radius:10px;color:#aaa096;background:rgba(255,255,255,.025);text-align:center;cursor:pointer}.tonal-mini.active{border-color:#5aa8a1;background:rgba(90,168,161,.12)}.tonal-mini strong,.tonal-mini span,.tonal-mini small{display:block}.tonal-mini strong{color:#ffe9d1}.tonal-mini span{font-size:17px}.tonal-mini small{font-size:8px}.tonal-note{margin-top:16px;color:#82776b;font-size:11px;line-height:1.55}@media(max-width:980px){.tonal-layout{grid-template-columns:1fr}.tonal-panel{position:static}}@media(max-width:620px){.tonal-hero h1{font-size:clamp(40px,13vw,55px)}.tonal-card{padding:7px;border-radius:20px}.tonal-panel{padding:22px;border-radius:20px}.tonal-glyph{font-size:21px}.tonal-sign-name{font-size:6.5px}.tonal-date,.tonal-select{grid-template-columns:1fr}.tonal-slider{grid-template-columns:auto 1fr auto}.tonal-slider #tonalPlay{grid-column:1/-1}.tonal-status{grid-template-columns:1fr}}