.tn{--tn-c:var(--muted-foreground);background:var(--card);max-width:820px;color:var(--foreground);border:1px solid var(--border);user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;--tn-off:#d63c53;border-radius:16px;margin:0 auto;overflow:hidden}.dark .tn{--tn-off:#f2607a}.tn.tn-ok{--tn-c:#059669}.tn.tn-near{--tn-c:#c2860a}.tn.tn-off{--tn-c:#d63c53}.dark .tn.tn-ok{--tn-c:#34d399}.dark .tn.tn-near{--tn-c:#f0b429}.dark .tn.tn-off{--tn-c:#f2607a}.tn .tn-body{flex-direction:column;display:flex}.tn .tn-stage{background:radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--foreground) 4%, var(--card)), var(--card) 72%);flex-direction:column;align-items:center;gap:10px;padding:18px 16px 20px;display:flex}.tn .tn-panel{padding:16px 16px calc(18px + env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--card);flex-direction:column;gap:12px;display:flex}@media (width>=768px){.tn .tn-body{flex-direction:row;align-items:stretch;min-height:560px}.tn .tn-stage{flex:auto;justify-content:center;padding:24px}.tn .tn-panel{border-top:0;border-left:1px solid var(--border);flex:0 0 320px;justify-content:center;gap:14px;padding:24px}}.tn .tn-read{font-variant-numeric:tabular-nums;opacity:.35;align-items:baseline;gap:10px;min-height:34px;transition:opacity .2s;display:flex}.tn:not(.tn-idle) .tn-read{opacity:1}.tn .tn-read-str{color:var(--muted-foreground);font-size:13px;font-weight:700}.tn .tn-read-note{letter-spacing:-.03em;color:var(--tn-c);font-size:28px;font-weight:300;line-height:1;transition:color .2s}.tn .tn-read-cents{color:var(--tn-c);font-size:13px;font-weight:600;transition:color .2s}.tn .tn-read-hz{color:var(--muted-foreground);font-size:12px}.tn .tn-head{width:100%;max-width:244px;height:auto;overflow:visible}@media (width>=768px){.tn .tn-head{max-width:272px}}.tn .tn-plate{fill:var(--muted);stroke:var(--border);stroke-width:2px;stroke-linejoin:round}.tn .tn-nut{fill:var(--muted-foreground);opacity:.75}.tn .tn-fret{fill:var(--foreground);opacity:.12}.tn .tn-string{fill:none;stroke:var(--muted-foreground);stroke-width:1.1px;opacity:.45}.tn .tn-shaft{stroke:var(--muted-foreground);stroke-width:2.5px;opacity:.4}.tn .tn-post{fill:var(--muted-foreground);opacity:.55;transition:fill .18s,opacity .18s}.tn .tn-peg{cursor:pointer}.tn .tn-ring{fill:var(--card);stroke:var(--border);stroke-width:2.5px;transition:stroke .18s,stroke-width .18s}.tn .tn-pegtext{text-anchor:middle;fill:var(--foreground);opacity:.55;pointer-events:none;font-family:inherit;font-size:10px;font-weight:700;transition:opacity .18s}.tn .tn-peg:hover .tn-ring{stroke:var(--muted-foreground)}.tn .tn-peg.tn-locked .tn-ring{stroke:var(--primary);stroke-width:4.5px}.tn .tn-peg.tn-locked .tn-pegtext{opacity:1}.tn .tn-peg.tn-on .tn-ring{stroke:var(--tn-c);stroke-width:4px}.tn .tn-peg.tn-locked.tn-on .tn-ring{stroke:var(--tn-c);stroke-width:4.5px}.tn .tn-peg.tn-on .tn-pegtext{opacity:1}.tn .tn-peg.tn-on .tn-post{fill:var(--tn-c);opacity:1}.tn .tn-peg:focus{outline:none}.tn .tn-peg:focus-visible .tn-ring{stroke:var(--primary);stroke-width:4px}.tn .tn-fine{width:100%;max-width:250px;height:20px;position:relative}.tn .tn-fine:before{content:"";background:var(--border);border-radius:1px;height:2px;margin-top:-1px;position:absolute;top:50%;left:0;right:0}.tn .tn-fine-mid{background:var(--muted-foreground);opacity:.5;border-radius:1px;width:2px;margin-left:-1px;position:absolute;top:2px;bottom:2px;left:50%}.tn .tn-fine-dot{background:var(--tn-c);border-radius:2px;width:4px;margin-left:-2px;transition:left .3s ease-out,background .2s,opacity .2s;position:absolute;top:0;bottom:0}.tn .tn-coach{background:var(--muted);border:1px solid var(--border);border-radius:12px;align-items:center;gap:12px;padding:12px 14px;display:flex}.tn .tn-turn{text-align:center;width:30px;color:var(--tn-c);flex:none;place-items:center;font-size:24px;line-height:1;transition:color .2s;display:grid}.tn .tn-coach-txt{min-width:0}.tn .tn-coach-txt b{font-size:14px;font-weight:700;display:block}.tn .tn-coach-txt span{color:var(--muted-foreground);font-size:12px;display:block}.tn .tn-warn-line{border:2px solid var(--tn-off);background:color-mix(in srgb, var(--tn-off) 12%, var(--card));color:color-mix(in srgb, var(--tn-off) 70%, var(--foreground));border-radius:10px;margin:0;padding:9px 12px;font-size:12.5px;line-height:1.5}.tn .tn-warn-line b{color:var(--tn-off);font-size:13.5px;font-weight:800;display:block}.tn .tn-arrow{fill:var(--primary)}.tn .tn-field{color:var(--muted-foreground);flex-direction:column;gap:5px;font-size:12px;font-weight:600;display:flex}.tn .tn-field select{background:var(--card);width:100%;height:40px;color:var(--foreground);border:1px solid var(--border);cursor:pointer;border-radius:8px;padding:0 10px;font-family:inherit;font-size:14px;font-weight:600}.tn .tn-field select:hover{background:var(--muted)}.tn .tn-ref{align-items:center;gap:10px;display:flex}.tn .tn-ref input{cursor:pointer;min-width:0;height:28px;accent-color:var(--primary);background:0 0;flex:1}.tn .tn-ref b{color:var(--foreground);font-variant-numeric:tabular-nums;flex:none;font-size:13px;font-weight:700}.tn .tn-btn{background:var(--card);border:1px solid var(--border);height:44px;color:var(--foreground);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;gap:8px;padding:0 16px;font-family:inherit;font-size:15px;font-weight:700;transition:background .12s;display:inline-flex}.tn .tn-btn:hover{background:var(--muted)}.tn .tn-btn:active{transform:scale(.97)}.tn .tn-main{background:var(--primary);border-color:var(--primary);color:var(--primary-foreground)}.tn .tn-main:hover{background:color-mix(in srgb, var(--primary) 90%, var(--foreground))}.tn .tn-main.tn-active{background:var(--card);border-color:var(--border);color:var(--foreground)}.tn .tn-main.tn-active:hover{background:var(--muted)}.tn .tn-break-note{color:var(--muted-foreground);margin:0;font-size:12px;line-height:1.6}.tn .tn-dialog{background:var(--card);max-width:min(420px,100vw - 32px);color:var(--foreground);border:1px solid var(--border);border-radius:14px;margin:auto;padding:20px 22px;box-shadow:0 10px 34px #00000047}.tn .tn-dialog b{font-size:15px;font-weight:700;display:block}.tn .tn-dialog p{color:var(--muted-foreground);margin:8px 0 16px;font-size:13.5px;line-height:1.7}.tn .tn-dialog .tn-btn{width:100%}.tn .tn-dialog::backdrop{background:#00000073}@media (prefers-reduced-motion:reduce){.tn .tn-fine-dot,.tn .tn-ring,.tn .tn-read-note,.tn .tn-read-cents,.tn .tn-turn{transition:none}}