/* Shared navigation and responsive framing for the original teaching pages. */
body{padding:0}.lab-page{padding:28px 20px 40px}.masthead{background:#1b293a;color:#fff;font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif}.head-inner{max-width:1600px;margin:auto;padding:20px 30px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}.brand{display:flex;align-items:center;gap:13px;color:white;text-decoration:none;flex-shrink:0}.brand img{border:1px solid #718192;border-radius:9px;object-fit:cover}.brand strong{display:block;font-size:20px;line-height:1.4;letter-spacing:.08em;font-weight:650}.brand small{display:block;color:#eeb994;font-size:12px;letter-spacing:.04em;margin-top:3px}.masthead nav{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;max-width:100%;gap:8px}.masthead nav a{color:#c9d2de;text-decoration:none;font-size:14px;border:1px solid transparent;border-radius:6px;padding:8px 12px;white-space:nowrap}.masthead nav a:hover{background:#ffffff0d}.masthead nav a[aria-current]{color:#eeb994;border-color:#65707c;background:#ffffff06}:is(a,button,select):focus-visible{outline:3px solid #eeb994;outline-offset:4px}.skip{position:absolute;top:-100px;left:16px;color:#1b293a;background:white;padding:12px;z-index:5}.skip:focus{top:12px}.lab-footer,.lab-extra{text-align:center;margin:24px auto 0;color:#fff;font-size:14px;line-height:1.8}.lab-footer a,.lab-extra a{color:inherit}.lab-extra a{display:inline-block;padding:12px 18px;border:1px solid #ffffff80;border-radius:8px;background:#1b293a50}.lab-page img{max-width:100%}.lab-page :is(.demo-card,.experiment-card,.interval-card,.genus-info,.comparison-card,.timeline-content){min-width:0}.demos-grid,.experiments-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,350px),1fr))}.intervals-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}.comparison-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}.term-item{max-width:100%;flex-wrap:wrap}.term-select{max-width:100%}.remove-term-btn{flex-shrink:0}.lab-page :is(.rule-formula,.example-formula,.calculation-formula,.calculation-steps,.notes-display){overflow-wrap:anywhere}
@media(max-width:760px){.head-inner{padding:16px 20px;gap:14px}.brand strong{font-size:18px}.brand img{width:42px;height:42px}.masthead nav{gap:4px}.masthead nav a{padding:6px 9px;font-size:12px}.lab-page{padding:18px 12px 30px}.lab-page .content{padding:24px}.lab-page .header{padding:26px 18px}.lab-page .header h1{font-size:2em;overflow-wrap:anywhere}.lab-page .header p{font-size:1em;line-height:1.8}}
@media(max-width:480px){.head-inner{padding:14px 17px}.brand{gap:10px}.brand strong{font-size:17px}.brand small{font-size:10px}.brand img{width:38px;height:38px}.masthead nav{justify-content:flex-start}.masthead nav a{font-size:11px;padding:6px 7px}.lab-page .container{border-radius:14px}.lab-page > .container:has(> h1){padding:24px 16px}.lab-page .content{padding:16px}.lab-page .header{padding:24px 14px}.lab-page .header h1{font-size:26px;line-height:1.5}.lab-page :is(.intro-card,.timeline,.intro-box,.rules-section,.calculator-section,.examples-section,.monochord-container,.frequency-comparison,.principle-box,.experiment-card,.genus-section,.genus-info,.comparison-section,.historical-note,.tips-section,.tuning-card,.example-card){padding:18px 14px}.lab-page :is(.demo-content,.genus-header){padding:18px 14px}.lab-page .demo-icon{padding:22px}.lab-page .timeline-item{padding:16px 12px;gap:12px}.lab-page :is(.timeline-number,.experiment-number,.genus-number){flex-shrink:0}.lab-page :is(.rule-box,.expression-display,.calculation-display,.calculation-result,.term-item){padding:14px 10px}.lab-page .term-select{min-width:0;width:100%;font-size:14px;padding:8px}.lab-page .term-item{width:100%}.lab-page .operator-select{max-width:100%}.lab-page :is(.ratio-row,.freq-bar-label){gap:10px;flex-wrap:wrap}.lab-page .genus-content{gap:16px}.lab-page :is(.notes-display,.interval-structure){font-size:15px;line-height:1.8}.lab-page .control-btn{font-size:15px;padding:12px 16px}.lab-page .play-button{font-size:15px}.lab-page :is(.intro-card h2,.timeline h2,.calculator-title,.rules-section h2){font-size:24px;line-height:1.5}.lab-page .calculation-result{font-size:24px}.lab-page .result-ratio{font-size:32px}.lab-page table{font-size:12px}.lab-page th,.lab-page td{padding:10px 6px}}
@media(prefers-reduced-motion:reduce){.lab-page *{animation:none!important;transition:none!important}}
@media print{.masthead,.skip,.lab-footer,.lab-extra{display:none}.lab-page{padding:0}body{background:#fff}}