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