.vt-shell{background:var(--gp1);gap:1rem;max-width:1200px;margin:0 auto;padding:1rem;display:grid}.vt-shell *,.vt-shell :before,.vt-shell :after{box-sizing:border-box}.vt-title{font-size:clamp(2.2rem,5vw,4.5rem);font-weight:400;line-height:.96;font-family:var(--font-family-serif);color:var(--text-primary);margin:2px 0 0}.vt-hero{background:var(--bg-base);border-radius:12px;gap:1rem;padding:1.5rem;display:grid}.vt-subtitle{color:var(--text-secondary);max-width:100ch;margin:0;line-height:1.6}.vt-layout{grid-template-columns:1fr;gap:1rem;display:grid}.vt-panel{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid #1e3a5f29;border-radius:7px;padding:0;box-shadow:0 20px 60px #1e3a5f24}.vt-panel h3{font-size:1.5rem;font-weight:700}.vt-visual-panel{border:none;gap:1rem;padding:0;display:grid}.vt-canvas-topbar{background-color:var(--p00);border-radius:7px;grid-template-columns:auto auto auto;justify-content:center;align-items:center;gap:16px;padding:1rem;display:grid}.vt-canvas-metric-block{justify-items:center;gap:6px;display:grid}.vt-canvas-metric{text-align:center;min-width:95px}.vt-canvas-metric-label{color:#64748b;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;font-size:.72rem;line-height:1}.vt-canvas-metric-value{color:var(--p90);font-size:clamp(1.2rem,2.2vw,1.5rem);font-weight:500;line-height:1}.vt-canvas-metric-match-value{color:var(--p90);margin-top:8px;font-size:clamp(1rem,1.9vw,1.3rem);line-height:1}.vt-canvas-note-stack{display:block}.vt-canvas-note{text-align:center;min-width:120px;padding:10px 14px;position:relative}.vt-canvas-note-value{color:var(--p90);font-size:3rem;font-weight:700;line-height:1}.vt-canvas-note-sub{color:#64748b;margin-top:6px;font-size:1rem;line-height:1}.vt-canvas-stability{background:#17313b1a;border:1px solid #17313b14;border-radius:999px;width:100%;height:8px;margin-top:8px;overflow:hidden}.vt-canvas-stability-fill{border-radius:inherit;background:linear-gradient(90deg,#3b82f6,#60a5fa);height:100%;transition:width .1s}.vt-canvas-wrap{background:var(--p00)fff;border:1px solid #1e3a5f29;border-radius:7px;display:grid;position:relative}.vt-canvas{aspect-ratio:12/10;border-radius:7px;grid-area:1/1;width:100%;display:block}.vt-canvas-mic-button{z-index:2;grid-area:1/1;place-self:end start;margin:12px}.vt-zoom-controls{z-index:2;background:0 0;border-radius:7px;grid-area:1/1;place-self:end;align-items:center;gap:4px;margin:12px;padding:4px;display:flex}.vt-zoom-btn{border:2px solid var(--p20);background:var(--p00);width:40px;height:40px;color:var(--p90);cursor:pointer;border-radius:7px;justify-content:center;align-items:center;font-size:1.2rem;font-weight:600;transition:transform .14s,background .14s;display:flex}.vt-zoom-btn:hover:not(:disabled){background:var(--p00);transform:translateY(-1px)}.vt-zoom-btn:disabled{opacity:.4;cursor:not-allowed}.vt-zoom-value{text-align:center;min-width:36px;color:var(--text-primary);font-size:.8rem;font-weight:600}.vt-canvas-control-row{background-color:var(--p00);border-radius:7px;justify-content:center;align-items:center;gap:2rem;padding:1rem;display:flex}.vt-canvas-control-group{justify-items:center;gap:6px;display:grid}.vt-canvas-control-title{color:#64748b;letter-spacing:.08em;text-transform:uppercase;font-size:.72rem}.vt-canvas-stepper{gap:6px}.vt-canvas-stepper .vt-stepper-btn,.vt-canvas-stepper input[type=number]{text-align:center;flex:0 0 40px;width:40px;min-width:40px;height:40px;padding:0}.vt-canvas-stepper input[type=number]{background:var(--p00);width:70px;min-width:50px;color:var(--p90);border-radius:7px;flex-basis:70px;font-weight:600;line-height:40px}.vt-controls{gap:16px;padding:0;display:grid}.vt-controls-row{background:#fff;border-radius:7px;grid-template-columns:repeat(2,minmax(0,1fr));align-items:flex-start;gap:1rem;padding:1rem;display:grid}.vt-section{justify-items:center;gap:14px;width:100%;padding:0;display:grid;overflow:hidden}.vt-field{justify-self:normal}.vt-section-title{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;width:100%;display:flex}.vt-section-title h3{margin:0;font-size:1.5rem}.vt-section-title span{color:#64748b;font-size:.88rem}.vt-grid{grid-template-columns:1fr;gap:12px;display:grid}.vt-sound-octave-row{justify-content:center;align-items:center;gap:24px;margin-bottom:8px;display:flex}.vt-sound-octave-row .vt-field{margin:0}.vt-guide-vertical-controls{justify-content:center;align-items:center;padding-top:0;display:flex}.vt-field{gap:6px;display:grid}.vt-field label{color:#64748b;text-align:center;font-size:.84rem}.vt-field-inline-controls .vt-stepper{justify-content:center}.vt-sound-buttons{grid-template-columns:repeat(3,40px);justify-content:center;gap:2px;display:grid}.vt-sound-button{border:2px solid var(--p20);background:var(--p00);width:40px;height:40px;color:var(--p90);cursor:pointer;border-radius:7px;font-weight:700;transition:transform .14s,background .14s,border-color .14s}.vt-sound-button:hover{border-color:#17313b47;transform:translateY(-1px)}.vt-sound-button.is-active{background:var(--gp1);color:var(--p00);border-color:#0000}.vt-stepper{align-items:center;gap:4px;display:flex}.vt-stepper-btn{border:2px solid var(--p20);background:var(--p00);width:40px;height:40px;color:var(--p90);cursor:pointer;border-radius:7px;justify-content:center;align-items:center;font-size:1.2rem;font-weight:600;transition:transform .14s,background .14s;display:flex}.vt-stepper-btn:hover{background:var(--p00);transform:translateY(-1px)}.vt-stepper input[type=number]{text-align:center;border:2px solid var(--p20);background:var(--p00);min-width:50px;height:40px;color:var(--p90);-moz-appearance:textfield;border-radius:7px;flex:1;padding:0 8px;font-weight:600}.vt-stepper input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.vt-stepper input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.vt-octave-stepper input[type=number]{flex:0 0 40px;min-width:40px;max-width:40px}.vt-stepper-centered{justify-content:center}.vt-icon-button{width:48px;height:48px;color:var(--p90);cursor:pointer;background:#17313b14;border:1px solid #17313b24;border-radius:7px;place-items:center;transition:transform .14s,background .14s;display:inline-grid;position:relative}.vt-icon-button:hover{transform:translateY(-1px)}.vt-icon-button svg{width:22px;height:22px}.vt-icon-button .vt-icon-off,.vt-icon-button.is-active .vt-icon-on{display:none}.vt-icon-button.is-active .vt-icon-off{display:inline-flex}.vt-icon-button-primary{background:var(--gp1);color:#fff;border-color:#0000}.vt-actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;display:flex}.vt-footer-note{color:#64748b;max-width:36ch;font-size:.88rem;line-height:1.45}.vt-piano{--vt-piano-pad:12px;--vt-white-key-width:calc((100% - (var(--vt-piano-pad) * 2)) / 7);--vt-black-key-width:calc(var(--vt-white-key-width) * .62);min-height:190px;padding:10px;position:relative;overflow:hidden}.vt-piano-key{box-sizing:border-box;left:calc(var(--vt-piano-pad) + (var(--key-pos) * var(--vt-white-key-width)));border:2px solid var(--p20);cursor:pointer;border-radius:0 0 7px 7px;justify-content:center;align-items:end;padding:10px 4px;transition:transform .14s,background .14s;display:flex;position:absolute}.vt-piano-key:hover{transform:translateY(-1px)}.vt-piano-key.is-active{border-color:#157a6ec7;box-shadow:0 0 0 1px #157a6e2e}.vt-piano-key-white{--key-pos:0;width:var(--vt-white-key-width);color:var(--p90);background:#fff;border-radius:3px 3px 7px 7px;top:12px;bottom:12px}.vt-piano-key-white:first-child{--key-pos:0}.vt-piano-key-white:nth-child(3){--key-pos:1}.vt-piano-key-white:nth-child(5){--key-pos:2}.vt-piano-key-white:nth-child(6){--key-pos:3}.vt-piano-key-white:nth-child(8){--key-pos:4}.vt-piano-key-white:nth-child(10){--key-pos:5}.vt-piano-key-white:nth-child(12){--key-pos:6}.vt-piano-key-white.is-active{background:var(--gp1);color:var(--p00)}.vt-piano-key-black.is-active{color:var(--p00);background:linear-gradient(#58f,#1e40af)}.vt-piano-key-black{--key-pos:0;margin-left:calc(var(--vt-black-key-width) / -40);width:var(--vt-black-key-width);color:#0000;z-index:2;background:linear-gradient(#313e44,#121b20);border-color:#11181ccc;border-radius:0 0 7px 7px;height:58%;top:12px}.vt-piano-key-black:nth-child(2){--key-pos:.68}.vt-piano-key-black:nth-child(4){--key-pos:1.68}.vt-piano-key-black:nth-child(7){--key-pos:3.68}.vt-piano-key-black:nth-child(9){--key-pos:4.68}.vt-piano-key-black:nth-child(11){--key-pos:5.68}.vt-piano-label{letter-spacing:.04em;font-size:.72rem;font-weight:700}@media (width<=1080px){.vt-layout{grid-template-columns:1fr}}@media (width<=720px){.vt-visual-panel{background:0 0;padding:0}.vt-hero{padding:1rem}.vt-grid,.vt-controls-row{grid-template-columns:1fr}.vt-canvas-topbar{grid-template-columns:1fr 1fr 1fr;place-items:center;gap:0;padding:0}.vt-section-title{margin:0;padding:0}.vt-controls{padding:2px}.vt-controls-row{padding:1rem 10px}.vt-canvas-control-row{flex-wrap:wrap}.vt-actions{flex-direction:column}.vt-piano{min-height:160px}.vt-canvas-note{font-size:1.05rem}.vt-canvas-stepper .vt-stepper-btn,.vt-canvas-stepper input[type=number]{flex-basis:36px;height:36px}.vt-canvas-stepper input[type=number]{flex-basis:42px;line-height:36px}}