.ts-shell{--ts-dial:clamp(188px, min(58vw, 36dvh), 280px);--ts-night:#0f1a31;border:2px solid var(--color-primary-tint);border-radius:var(--radius-xl);background:radial-gradient(circle at 1px 1px, #2f6fed17 1.5px, transparent 0) 0 0 / 22px 22px, linear-gradient(180deg, var(--color-surface), var(--color-primary-tint));box-shadow:var(--shadow-lg);min-height:clamp(420px,66dvh,600px);padding:var(--space-3) var(--space-4) var(--space-5);align-content:center;display:grid;position:relative}.ts-stage{align-content:center;justify-items:center;row-gap:var(--space-6);grid-template-columns:minmax(0,1fr);grid-template-areas:"info""main""best""share""hint";min-height:0;display:grid}.ts-shell[data-state=result] .ts-stage{row-gap:var(--space-4);grid-template-areas:"info""best""main""share"}.ts-shell:not([data-play-mode]) .ts-status,.ts-shell:not([data-play-mode]) .ts-keyhint{display:none}.ts-shell:not([data-play-mode]) .ts-stage{row-gap:var(--space-5);grid-template-areas:"main""best"}.ts-shell:not([data-play-mode]) .ts-main{font-size:clamp(1.6rem,7vw,2.1rem)}.ts-keyhint{color:var(--ts-muted,var(--color-text-muted));grid-area:hint;margin:0;font-size:.85rem}@media (hover:none),(pointer:coarse){.ts-keyhint{display:none}}.ts-status{text-align:center;max-width:22em;min-height:3em;color:var(--ts-text,var(--color-text));grid-area:info;justify-content:center;align-items:center;margin:0;font-size:1.1rem;display:flex}.ts-shell[data-state=running] .ts-status{color:var(--ts-muted,var(--color-stop-strong));font-weight:700}.ts-shell[data-state=running] .ts-status:before{content:"";background:var(--color-stop);border-radius:50%;flex:none;width:.65em;height:.65em;margin-right:.6em}.ts-shell[data-state=result] .ts-status{display:none}.ts-main{width:var(--ts-dial);height:var(--ts-dial);--ts-face:radial-gradient(circle at 38% 28%, #82adff 0%, #4580f5 42%, #2d66dc 78%, #2457c4 100%);--ts-side:var(--color-primary-strong);--ts-depth:8px;--ts-bezel-w:12px;background:var(--ts-face);color:var(--on-primary);text-shadow:0 1px 1px #0a1e5a4d;font:inherit;letter-spacing:.04em;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;box-shadow:inset 0 2px 1px #ffffff61, inset 0 -14px 28px #08164642, 0 var(--ts-depth) 0 var(--ts-side), 0 0 0 var(--ts-bezel-w) var(--ts-bezel,#e4eaf5), 0 0 0 calc(var(--ts-bezel-w) + 1px) var(--ts-bezel-line,#17202f17), 0 calc(var(--ts-depth) + 26px) 38px -6px var(--ts-ground,#172c6442);border:0;border-radius:50%;grid-area:main;font-size:clamp(2rem,9vw,2.75rem);font-weight:800;transition:translate 70ms ease-out,box-shadow 70ms ease-out}.ts-main:active{--ts-depth:3px;translate:0 5px}.ts-shell[data-state=running] .ts-main{--ts-face:radial-gradient(circle at 38% 28%, #f88a92 0%, #ea4b57 42%, #d62f3c 78%, #bf2532 100%);--ts-side:var(--color-stop-strong)}.ts-shell[data-state=result] .ts-main{border-radius:var(--radius-full);letter-spacing:.02em;background:var(--color-primary);width:min(100%,320px);height:68px;text-shadow:none;box-shadow:0 5px 0 var(--color-primary-strong);font-size:1.35rem}.ts-shell[data-state=result] .ts-main:active{box-shadow:0 2px 0 var(--color-primary-strong);translate:0 3px}.ts-result{align-items:center;gap:var(--space-2);text-align:center;flex-direction:column;grid-area:info;animation:.32s cubic-bezier(.2,.8,.2,1) ts-rise;display:flex}.ts-result p{margin:0}.ts-comment{color:var(--ts-muted,var(--color-text-muted));font-size:1.1rem;font-weight:800}.ts-result[data-tier=great] .ts-comment{color:var(--ts-accent,var(--color-accent-strong))}.ts-result[data-tier=good] .ts-comment{color:var(--ts-primary,var(--color-primary-strong))}.ts-label{color:var(--ts-muted,var(--color-text-muted));font-size:.85rem;font-weight:700;display:block}.ts-time__value{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-size:clamp(3rem,17vw,4.75rem);font-weight:800;line-height:1.05;display:block}.ts-unit{letter-spacing:0;margin-left:.15em;font-size:.4em}.ts-diff{align-items:baseline;gap:var(--space-3);display:inline-flex}.ts-diff .ts-label{display:inline}.ts-diff .ts-unit{font-size:.7em}.ts-diff__value{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:1.5rem;font-weight:800}.ts-badge{color:var(--ts-accent,var(--color-accent-strong));font-weight:800;animation:.42s cubic-bezier(.2,.9,.3,1.3) .18s both ts-pop}@keyframes ts-rise{0%{opacity:0;translate:0 10px}to{opacity:1;translate:0}}@keyframes ts-pop{0%{opacity:0;scale:.8}to{opacity:1;scale:1}}.ts-best{color:var(--ts-muted,var(--color-text-muted));font-variant-numeric:tabular-nums;grid-area:best;margin:0;font-weight:800}.ts-shell:not([data-play-mode]) .ts-best{padding:var(--space-1) var(--space-4);border-radius:var(--radius-full);background:var(--color-surface);border:1px solid var(--color-border)}.ts-share{align-items:center;gap:var(--space-1);flex-direction:column;grid-area:share;width:min(100%,320px);display:flex}.ts-secondary{border:2px solid var(--ts-primary,var(--color-primary));border-radius:var(--radius-full);width:100%;min-height:56px;color:var(--ts-primary,var(--color-primary-strong));font:inherit;cursor:pointer;background:0 0;font-weight:800}.ts-share-status{min-height:1.6em;color:var(--ts-muted,var(--color-text-muted));margin:0;font-size:.9rem}.ts-shell[data-play-mode=on]{--ts-text:#e8eefc;--ts-muted:#9fb0d4;--ts-accent:#5eead4;--ts-primary:#8db4ff;--play-ink:#dbe5fb;--play-icon-bg:#ffffff17;--play-icon-bg-active:#fff3;--ts-dial:clamp(200px, min(66vw, 42dvh), 340px);--ts-bezel:#1a2644;--ts-bezel-line:#ffffff12;--ts-ground:#0000008c;box-shadow:none;min-height:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);color:var(--ts-text);background:radial-gradient(ellipse 38% 55% at 50% -4%, #aac4ff1c, transparent 72%), radial-gradient(ellipse 80% 60% at 50% 46%, #1a2a4f 0%, var(--ts-night) 72%);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;border:0;border-radius:0;grid-template-rows:auto minmax(0,1fr);align-content:stretch;animation:.24s ease-out ts-fade;position:fixed}@keyframes ts-fade{0%{opacity:0}to{opacity:1}}.ts-shell[data-play-mode=on] .ts-stage{padding:0 var(--space-4) var(--space-5)}.ts-shell[data-play-mode=on] .ts-best{font-size:.95rem}.ts-shell[data-play-mode=on] .ts-secondary:active{background:#8db4ff24}.ts-shell[data-play-mode=on][data-state=running] .play-bar{opacity:.55}.ts-shell[data-play-mode=on][data-state=running] .ts-best,.ts-shell[data-play-mode=on][data-state=running] .ts-keyhint{display:none}@media (orientation:landscape) and (height<=520px){.ts-shell{--ts-dial:clamp(120px, 52dvh, 180px);min-height:0}.ts-shell[data-play-mode=on]{--ts-dial:clamp(130px, 56dvh, 210px)}.ts-stage,.ts-shell[data-state=result] .ts-stage{align-items:center;column-gap:var(--space-6);row-gap:var(--space-2);grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"info main""best main"}.ts-shell[data-state=result] .ts-stage{grid-template-areas:"info main""best share"}.ts-shell:not([data-play-mode]) .ts-stage{grid-template-columns:minmax(0,1fr);grid-template-areas:"main""best"}.ts-main{--ts-depth:5px;--ts-bezel-w:8px;margin:var(--space-2)}.ts-main:active{--ts-depth:2px}.ts-shell[data-state=result] .ts-main{width:220px;box-shadow:0 5px 0 var(--color-primary-strong)}.ts-shell[data-state=result] .ts-main:active{box-shadow:0 2px 0 var(--color-primary-strong)}.ts-result{gap:var(--space-1)}.ts-comment{font-size:1rem}.ts-time__value{font-size:clamp(2.4rem,9vw,3rem)}.ts-diff__value{font-size:1.25rem}.ts-status{min-height:0}.ts-keyhint{display:none}}@media (height<=640px) and (orientation:portrait){.ts-stage{row-gap:var(--space-5)}.ts-status{min-height:2.4em}}@media (prefers-reduced-motion:reduce){.ts-main:active{translate:none}}