.tg-screen{display:grid;gap:12px;padding-bottom:18px}.tg-live-head{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:start}.tg-live-head h2{margin:4px 0 2px;font-size:clamp(22px,6vw,30px);letter-spacing:.04em}.tg-live-head p{margin:0;color:var(--muted,#6e6e73);font-size:13px}.tg-sync-badge{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;background:color-mix(in srgb,var(--accent,#4b5a58) 10%,transparent);color:var(--text,#1c1c1e);font-size:12px;font-weight:700;white-space:nowrap}.tg-sync-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:#56a56b;box-shadow:0 0 0 4px rgba(86,165,107,.12)}
.tg-compass-card{position:relative;overflow:hidden;padding:14px 12px 12px;border-radius:28px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface,#fff) 96%,var(--accent,#5c6b69) 4%),color-mix(in srgb,var(--surface2,#eef0ef) 88%,transparent));border:1px solid color-mix(in srgb,var(--border,#d8dbd7) 86%,transparent);box-shadow:0 18px 42px rgba(24,32,31,.10)}
.tg-forward{display:flex;justify-content:center;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--text,#1c1c1e);margin-bottom:7px}.tg-forward i{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:10px solid color-mix(in srgb,var(--accent,#4b5a58) 80%,#fff);filter:drop-shadow(0 2px 3px rgba(0,0,0,.18))}
.tg-dial{--heading:0deg;--heading-neg:0deg;position:relative;width:min(82vw,390px);aspect-ratio:1;margin:0 auto;border-radius:50%;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--surface,#fff) 97%,transparent) 0 36%,color-mix(in srgb,var(--surface2,#e8eceb) 78%,transparent) 62%,color-mix(in srgb,var(--accent,#4b5a58) 14%,var(--surface,#fff)) 100%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--border,#d8dbd7) 86%,transparent),inset 0 0 0 11px color-mix(in srgb,var(--surface,#fff) 66%,transparent),0 10px 24px rgba(22,30,29,.13)}
.tg-dial::before,.tg-dial::after{content:"";position:absolute;inset:9%;border-radius:50%;pointer-events:none}.tg-dial::before{border:1px solid color-mix(in srgb,var(--accent,#4b5a58) 22%,transparent)}.tg-dial::after{inset:25%;border:1px dashed color-mix(in srgb,var(--accent,#4b5a58) 18%,transparent)}
.tg-rotor{position:absolute;inset:0;border-radius:50%;transform:rotate(var(--heading-neg));transition:transform .16s linear;will-change:transform}.tg-tick{position:absolute;left:50%;top:50%;width:1px;height:48%;transform-origin:50% 0;transform:rotate(var(--angle));background:linear-gradient(to bottom,color-mix(in srgb,var(--text,#1c1c1e) 48%,transparent) 0 3px,transparent 3px)}.tg-tick.major{width:2px;background:linear-gradient(to bottom,color-mix(in srgb,var(--text,#1c1c1e) 72%,transparent) 0 8px,transparent 8px)}
.tg-branch{--angle:0deg;position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--angle)) translateY(calc(0px - min(35vw,167px)))}.tg-branch span{position:absolute;display:grid;place-items:center;width:31px;height:31px;left:-15.5px;top:-15.5px;border-radius:50%;background:color-mix(in srgb,var(--surface,#fff) 90%,transparent);border:1px solid color-mix(in srgb,var(--border,#d8dbd7) 78%,transparent);box-shadow:0 3px 9px rgba(15,20,20,.07);font-size:14px;font-weight:800;transform:rotate(calc(var(--angle-neg) + var(--heading)))}
.tg-cardinal{--angle:0deg;position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--angle)) translateY(calc(0px - min(27.5vw,132px)))}.tg-cardinal b{position:absolute;left:-12px;top:-9px;width:24px;text-align:center;font-size:10px;letter-spacing:.08em;color:color-mix(in srgb,var(--text,#1c1c1e) 58%,transparent);transform:rotate(calc(var(--angle-neg) + var(--heading)))}
.tg-axis{position:absolute;left:50%;top:50%;width:2px;height:72%;transform:translate(-50%,-50%) rotate(var(--angle));background:linear-gradient(to bottom,rgba(190,77,57,.58),rgba(190,77,57,.06) 45%,rgba(55,135,97,.06) 55%,rgba(55,135,97,.58));border-radius:999px;filter:drop-shadow(0 0 4px rgba(0,0,0,.08))}
.tg-marker{--angle:0deg;position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--angle)) translateY(calc(0px - min(22.5vw,108px)));z-index:5}.tg-marker em{position:absolute;left:-34px;top:-22px;width:68px;min-height:44px;display:grid;place-items:center;padding:4px 6px;border-radius:14px;font-style:normal;text-align:center;font-size:10px;font-weight:800;line-height:1.05;transform:rotate(calc(var(--angle-neg) + var(--heading)));box-shadow:0 6px 16px rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.38)}.tg-marker em strong{display:block;font-size:17px;line-height:1.05}.tg-marker.gang em{color:#fff;background:linear-gradient(145deg,#b84b38,#7f241a)}.tg-marker.qi em{color:#fff;background:linear-gradient(145deg,#368762,#1f5f46)}
.tg-center{position:absolute;inset:36%;display:grid;place-items:center;text-align:center;border-radius:50%;background:linear-gradient(145deg,color-mix(in srgb,var(--surface,#fff) 94%,transparent),color-mix(in srgb,var(--surface2,#e7e9e8) 92%,transparent));border:1px solid color-mix(in srgb,var(--border,#d8dbd7) 78%,transparent);box-shadow:0 8px 20px rgba(16,24,23,.12),inset 0 1px 0 rgba(255,255,255,.55);z-index:8}.tg-center small{display:block;font-size:9px;letter-spacing:.12em;color:var(--muted,#6e6e73)}.tg-center strong{display:block;font-size:18px;margin:2px 0}.tg-center span{font-size:10px;color:var(--muted,#6e6e73)}
.tg-heading-line{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:10px;font-size:12px;color:var(--muted,#6e6e73)}.tg-heading-line b{color:var(--text,#1c1c1e);font-variant-numeric:tabular-nums}.tg-sensor-actions{display:flex;gap:8px;justify-content:center;margin-top:9px}.tg-sensor-actions .btn{min-height:36px;padding:0 14px;font-size:12px}.tg-sensor-note{text-align:center;margin:7px 12px 0;font-size:11px;color:var(--muted,#6e6e73);line-height:1.45}
.tg-result-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.tg-position-card{position:relative;overflow:hidden;padding:14px;border-radius:20px;background:var(--surface,#fff);border:1px solid var(--border,#d8dbd7);min-width:0}.tg-position-card::after{content:"";position:absolute;right:-20px;top:-20px;width:72px;height:72px;border-radius:50%;opacity:.10}.tg-position-card.gang::after{background:#b84b38}.tg-position-card.qi::after{background:#368762}.tg-position-card small{display:block;color:var(--muted,#6e6e73);font-size:11px}.tg-position-card h3{margin:4px 0 2px;font-size:24px}.tg-position-card.gang h3{color:#a03c2d}.tg-position-card.qi h3{color:#2f7959}.tg-position-card b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tg-position-card span{display:block;margin-top:7px;font-size:11px;line-height:1.5;color:var(--muted,#6e6e73);font-variant-numeric:tabular-nums}
.tg-timing-card{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:13px 14px;border-radius:18px;background:color-mix(in srgb,var(--surface,#fff) 92%,transparent);border:1px solid var(--border,#d8dbd7)}.tg-timing-card small{display:block;color:var(--muted,#6e6e73);font-size:11px}.tg-timing-card b{display:block;margin-top:3px;font-size:13px}.tg-countdown{font-size:19px!important;font-variant-numeric:tabular-nums;letter-spacing:.04em}.tg-offline-note{padding:10px 12px;border-radius:14px;background:color-mix(in srgb,var(--accent,#4b5a58) 8%,transparent);font-size:11px;line-height:1.5;color:var(--muted,#6e6e73)}
@media(max-width:390px){.tg-compass-card{padding-left:8px;padding-right:8px}.tg-dial{width:min(88vw,350px)}.tg-branch{transform:rotate(var(--angle)) translateY(calc(0px - min(37.5vw,148px)))}.tg-cardinal{transform:rotate(var(--angle)) translateY(calc(0px - min(29.5vw,116px)))}.tg-marker{transform:rotate(var(--angle)) translateY(calc(0px - min(23.5vw,92px)))}.tg-position-card{padding:12px}.tg-position-card h3{font-size:21px}}
@media(prefers-reduced-motion:reduce){.tg-rotor{transition:none}}

.tg-mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tg-mode-btn{min-height:42px;border:1px solid var(--border,#d8dbd7);border-radius:16px;background:var(--surface,#fff);color:var(--text,#1c1c1e);font-size:13px;font-weight:800;letter-spacing:.03em;box-shadow:0 5px 14px rgba(20,28,27,.05)}.tg-mode-btn.active{background:color-mix(in srgb,var(--accent,#4b5a58) 16%,var(--surface,#fff));border-color:color-mix(in srgb,var(--accent,#4b5a58) 42%,var(--border,#d8dbd7));box-shadow:0 9px 20px rgba(20,28,27,.09)}.tg-marker em span{display:block;font-size:10px;line-height:1.05}.tg-practice-note{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:center;padding:12px 14px;border-radius:18px;background:color-mix(in srgb,#368762 10%,var(--surface,#fff));border:1px solid color-mix(in srgb,#368762 30%,var(--border,#d8dbd7))}.tg-practice-note b{font-size:15px;color:#2f7959}.tg-practice-note span{font-size:11px;line-height:1.45;color:var(--muted,#6e6e73)}.tg-method-line{padding:10px 12px;border-radius:14px;background:color-mix(in srgb,var(--accent,#4b5a58) 7%,transparent);font-size:11px;line-height:1.5;color:var(--muted,#6e6e73)}