.main-container{max-width:1400px;margin:0 auto;padding:40px 20px 60px}.page-header{margin-bottom:1.5rem}.page-title{font-family:var(--calc-font-headline);color:var(--calc-text-primary);margin:0 0 .4rem;font-size:clamp(1.6rem,4vw,2.4rem)}.page-subtitle{color:var(--calc-text-faded);margin:0;font-size:.95rem;line-height:1.55}.outer-tab-bar{background:var(--calc-bg-card);border:1px solid var(--calc-border-default);border-radius:var(--calc-radius-lg);gap:4px;margin-bottom:1.25rem;padding:5px;display:flex}.outer-tab-btn{border-radius:calc(var(--calc-radius-lg) - 3px);color:var(--calc-text-faded);cursor:pointer;font-family:var(--calc-font-headline);letter-spacing:.01em;white-space:nowrap;background:0 0;border:none;flex:1;padding:.55rem .75rem;font-size:.82rem;font-weight:600;transition:background .18s,color .18s}.outer-tab-btn:hover{background:var(--calc-bg-glass);color:var(--calc-text-primary)}.outer-tab-btn.active{background:var(--calc-cyan);color:#000}.outer-tab-panel{display:none}.outer-tab-panel.active{display:block}.calc-grid{grid-template-columns:1fr 1fr;align-items:start;gap:1.25rem;display:grid}@media (width<=768px){.calc-grid{grid-template-columns:1fr}}.music-card{background:var(--calc-bg-card);border:1px solid var(--calc-border-default);border-radius:var(--calc-radius-lg);margin-bottom:1.25rem;overflow:hidden}.card-header-cyan{color:var(--calc-cyan);font-family:var(--calc-font-headline);letter-spacing:.06em;text-transform:uppercase;background:#22d3ee14;border-bottom:1px solid #22d3ee26;align-items:center;gap:.4rem;padding:.65rem 1.25rem;font-size:.8rem;font-weight:700;display:flex}.header-bpm-badge{font-family:var(--calc-font-mono);color:var(--calc-text-faded);letter-spacing:0;text-transform:none;margin-left:auto;font-size:.75rem;font-weight:400}.card-body{padding:1.25rem}.bpm-hero-section{padding:1.25rem 1.25rem 0}.bpm-main-row{align-items:flex-end;gap:1rem;display:flex}.bpm-control-group{flex:1}.field-label{color:var(--calc-text-faded);margin-bottom:.4rem;font-size:.8rem;font-weight:500;display:block}.bpm-stepper{border:1px solid var(--calc-border-strong);border-radius:var(--calc-radius-md);align-items:center;gap:0;display:flex;overflow:hidden}.stepper-btn{background:var(--calc-bg-glass);color:var(--calc-text-primary);cursor:pointer;user-select:none;border:none;padding:.6rem 1rem;font-size:1.2rem;font-weight:600;line-height:1;transition:background .15s}.stepper-btn:hover{background:var(--calc-bg-card-elevated)}.bpm-input{background:var(--calc-bg-input);border:none;border-left:1px solid var(--calc-border-default);border-right:1px solid var(--calc-border-default);color:var(--calc-cyan);font-family:var(--calc-font-mono);text-align:center;flex:1;width:100%;min-width:0;padding:.5rem;font-size:1.5rem;font-weight:700}.bpm-input:focus{background:var(--calc-bg-card-elevated);outline:none}.bpm-input::-webkit-inner-spin-button,.bpm-input::-webkit-outer-spin-button{-webkit-appearance:none}.bpm-input[type=number]{-moz-appearance:textfield}.preset-row{flex-wrap:wrap;align-items:center;gap:.4rem;padding:.75rem 1.25rem;display:flex}.preset-label{color:var(--calc-text-dim);flex-shrink:0;font-size:.75rem}.preset-chip{background:var(--calc-bg-glass);border:1px solid var(--calc-border-subtle);color:var(--calc-text-faded);cursor:pointer;border-radius:20px;padding:.3rem .75rem;font-size:.75rem;font-weight:600;transition:background .15s,border-color .15s,color .15s}.preset-chip:hover{border-color:var(--calc-cyan);color:var(--calc-cyan)}.preset-chip.active{border-color:var(--calc-cyan);color:var(--calc-cyan);background:#22d3ee1f}.form-fields{flex-direction:column;gap:.85rem;padding:0 1.25rem 1.25rem;display:flex}.field-row{flex-direction:column;gap:.35rem;display:flex}.glass-select,.glass-input{background:var(--calc-bg-input);border:1px solid var(--calc-border-strong);border-radius:var(--calc-radius-md);color:var(--calc-text-primary);font-family:var(--calc-font-mono);box-sizing:border-box;width:100%;padding:.55rem .75rem;font-size:.95rem;transition:border-color .15s}.glass-select:focus,.glass-input:focus{border-color:var(--calc-cyan);outline:none}.glass-input::-webkit-inner-spin-button,.glass-input::-webkit-outer-spin-button{-webkit-appearance:none}.glass-input[type=number]{-moz-appearance:textfield}.result-col{flex-direction:column;display:flex}.result-col .card-header-cyan{flex-shrink:0}.stat-grid{background:var(--calc-border-subtle);border-bottom:1px solid var(--calc-border-subtle);grid-template-columns:repeat(3,1fr);gap:1px;display:grid}.stat-cell{background:var(--calc-bg-card);flex-direction:column;gap:.2rem;padding:.9rem 1rem;display:flex}.stat-label{color:var(--calc-text-dim);text-transform:uppercase;letter-spacing:.04em;font-size:.72rem;font-weight:500}.stat-val{color:var(--calc-cyan);font-family:var(--calc-font-mono);font-size:1.05rem;font-weight:700}.bpm-variants{background:var(--calc-border-subtle);border-bottom:1px solid var(--calc-border-subtle);gap:1px;display:flex}.variant-row{background:var(--calc-bg-card);flex-direction:column;flex:1;gap:.2rem;padding:.75rem 1rem;display:flex}.variant-label{color:var(--calc-text-dim);text-transform:uppercase;letter-spacing:.04em;font-size:.72rem;font-weight:500}.variant-val{color:var(--calc-text-primary);font-family:var(--calc-font-mono);font-size:.95rem;font-weight:600}.selected-note-result{border-bottom:1px solid var(--calc-border-subtle);padding:.85rem 1rem}.result-row{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.result-label{color:var(--calc-text-faded);font-size:.8rem}.result-big{color:var(--calc-cyan);font-family:var(--calc-font-mono);font-size:1.3rem;font-weight:700}.pitch-quick{padding:.75rem 1rem}.pitch-row{justify-content:space-between;align-items:center;gap:.5rem;padding:.3rem 0;display:flex}.pitch-row+.pitch-row{border-top:1px solid var(--calc-border-subtle)}.pitch-label{color:var(--calc-text-faded);font-size:.8rem}.pitch-val{font-family:var(--calc-font-mono);color:var(--calc-text-primary);font-size:.9rem;font-weight:600}.alt-tuning .pitch-label{color:var(--calc-text-dim)}.alt-tuning .pitch-val{color:var(--calc-purple)}.action-bar{border-top:1px solid var(--calc-border-subtle);flex-wrap:wrap;gap:6px;margin-top:auto;padding:.85rem 1rem;display:flex}.action-btn{background:var(--calc-bg-glass);border:1px solid var(--calc-border-subtle);border-radius:var(--calc-radius-md);color:var(--calc-text-faded);cursor:pointer;padding:.4rem .75rem;font-size:.78rem;font-weight:600;transition:background .15s,border-color .15s,color .15s}.action-btn:hover{border-color:var(--calc-cyan);color:var(--calc-cyan);background:#22d3ee1a}.table-responsive{overflow-x:auto}.dur-table{border-collapse:collapse;width:100%;font-size:.85rem}.dur-table th,.dur-table td{border-bottom:1px solid var(--calc-border-subtle);text-align:right;white-space:nowrap;padding:.6rem 1rem}.dur-table th{background:var(--calc-bg-glass);color:var(--calc-text-faded);text-transform:uppercase;letter-spacing:.05em;font-size:.72rem;font-weight:600}.dur-table th:first-child,.dur-table td:first-child{text-align:left}.dur-table td{color:var(--calc-text-primary);font-family:var(--calc-font-mono)}.dur-table td.note-cell{color:var(--calc-cyan);font-family:var(--calc-font-headline);font-weight:600}.dur-table td.hz-cell{color:var(--calc-text-faded)}.dur-table tr:hover td{background:var(--calc-bg-glass)}.chart-card .card-header-cyan{padding:.65rem 1.25rem}.tuning-compare{background:var(--calc-border-subtle);border-bottom:1px solid var(--calc-border-subtle);grid-template-columns:1fr 1fr;gap:1px;display:grid}.tuning-col{background:var(--calc-bg-card);padding:1rem 1.25rem}.tuning-header{font-family:var(--calc-font-headline);margin-bottom:.5rem;font-size:.85rem;font-weight:700}.tuning-440 .tuning-header{color:var(--calc-cyan)}.tuning-432 .tuning-header{color:var(--calc-purple)}.tuning-desc{color:var(--calc-text-faded);font-size:.8rem;line-height:1.55}.tuning-note{color:var(--calc-text-dim);margin:0;padding:.75rem 1.25rem;font-size:.78rem;font-style:italic}@media (width<=480px){.tuning-compare{grid-template-columns:1fr}}.freq-grid-inner{padding:.75rem 1rem 1rem;overflow-x:auto}.freq-header-row,.freq-row{grid-template-columns:2rem repeat(3,1fr);align-items:center;gap:2px;margin-bottom:2px;display:grid}.freq-oct-group{flex-direction:column;align-items:stretch;display:flex}.freq-oct-header{background:var(--calc-bg-glass);color:var(--calc-text-dim);letter-spacing:.05em;text-align:center;text-transform:uppercase;padding:.25rem .4rem;font-size:.65rem;font-weight:600}.freq-tuning-pair{grid-template-columns:1fr 1fr;gap:2px;display:grid}.freq-note-label{color:var(--calc-text-faded);font-family:var(--calc-font-mono);padding:.2rem 0;font-size:.75rem;font-weight:700}.freq-tuning-sub{background:var(--calc-bg-glass);color:var(--calc-text-dim);text-align:center;white-space:nowrap;padding:.1rem .3rem;font-size:.6rem}.freq-tuning-sub.t432{color:var(--calc-purple);opacity:.7}.freq-val{color:var(--calc-text-primary);cursor:default;font-family:var(--calc-font-mono);text-align:right;white-space:nowrap;background:#ffffff05;border-radius:3px;padding:.25rem .35rem;font-size:.78rem;transition:background .1s;display:block}.freq-val:hover{background:#ffffff0f}.freq-val.t432{color:var(--calc-purple);opacity:.8}.freq-val.a4-ref{color:var(--calc-cyan);background:#22d3ee1a;font-weight:700}.freq-row-a .freq-note-label{color:var(--calc-cyan)}.calc-section{margin-top:2.5rem}.calc-section__title{color:var(--calc-text-primary);font-family:var(--calc-font-headline);margin:0 0 1rem;font-size:1.15rem;font-weight:700}@media (width<=1024px){.main-container{padding:24px 16px 48px}.stat-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=480px){.outer-tab-btn{padding:.45rem .4rem;font-size:.72rem}.stat-grid{grid-template-columns:repeat(2,1fr)}.bpm-input{font-size:1.2rem}}[data-theme=light] .outer-tab-bar{background:#fff;border-color:#0000001f}[data-theme=light] .outer-tab-btn:hover{color:#0f172a;background:#edf2f9}[data-theme=light] .outer-tab-btn.active{color:#fff;background:#0891b2}[data-theme=light] .music-card{background:#fff;border-color:#0000001f;box-shadow:0 1px 4px #0000000f}[data-theme=light] .card-header-cyan{color:#0891b2;background:#0e749014;border-bottom-color:#0e749026}[data-theme=light] .stat-grid{background:#0000000f}[data-theme=light] .stat-cell{background:#fff}[data-theme=light] .stat-val{color:#0891b2}[data-theme=light] .bpm-variants{background:#0000000f}[data-theme=light] .variant-row{background:#fff}[data-theme=light] .bpm-stepper{border-color:#0000002e}[data-theme=light] .stepper-btn{color:#0f172a;background:#edf2f9}[data-theme=light] .stepper-btn:hover{background:#e2eaf4}[data-theme=light] .bpm-input{color:#0891b2;background:#f0f4f9;border-left-color:#0000001a;border-right-color:#0000001a}[data-theme=light] .glass-select,[data-theme=light] .glass-input{color:#0f172a;background:#f0f4f9;border-color:#00000026}[data-theme=light] .preset-chip{color:#475569;background:#edf2f9;border-color:#0000001f}[data-theme=light] .preset-chip:hover,[data-theme=light] .preset-chip.active{color:#0891b2;background:#0e74901a;border-color:#0891b2}[data-theme=light] .result-big{color:#0891b2}[data-theme=light] .alt-tuning .pitch-val{color:#7c3aed}[data-theme=light] .action-btn{color:#475569;background:#edf2f9;border-color:#0000001f}[data-theme=light] .action-btn:hover{color:#0891b2;background:#0e74901a;border-color:#0891b2}[data-theme=light] .dur-table th{color:#475569;background:#edf2f9}[data-theme=light] .dur-table td{color:#0f172a}[data-theme=light] .dur-table td.note-cell{color:#0891b2}[data-theme=light] .dur-table td.hz-cell{color:#64748b}[data-theme=light] .dur-table tr:hover td{background:#f0f4f9}[data-theme=light] .tuning-compare{background:#0000000f}[data-theme=light] .tuning-col{background:#fff}[data-theme=light] .tuning-440 .tuning-header{color:#0891b2}[data-theme=light] .tuning-432 .tuning-header{color:#7c3aed}[data-theme=light] .freq-oct-header{color:#475569;background:#edf2f9}[data-theme=light] .freq-tuning-sub{color:#64748b;background:#f0f4f9}[data-theme=light] .freq-tuning-sub.t432{color:#7c3aed}[data-theme=light] .freq-val{color:#0f172a;background:#f8fafc}[data-theme=light] .freq-val:hover{background:#edf2f9}[data-theme=light] .freq-val.t432{color:#7c3aed}[data-theme=light] .freq-val.a4-ref{color:#0891b2;background:#0e74901a}[data-theme=light] .freq-row-a .freq-note-label{color:#0891b2}