.tp-pics{min-width:0;min-height:0;display:grid;position:relative;overflow:hidden}.tp-view{min-width:0;min-height:0;position:relative;overflow:hidden}.tp-view>canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.tp-ov{touch-action:none;cursor:none;outline:none}.tp-ov:focus-visible{box-shadow:inset 0 0 0 2px var(--focus,var(--c-h))}@media (pointer:coarse){.tp-ov:not(.armed){touch-action:pan-y}}.tp-pics[data-tone=dark]{background:var(--bg)}.tp-source{z-index:2;right:calc(10 * var(--g));top:calc(10 * var(--g));pointer-events:none;max-width:calc(100% - 20 * var(--g));font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.06em;color:var(--text-3);justify-items:end;gap:1px;display:grid;position:absolute}.tp-source>span{padding:1px calc(5 * var(--g));background:color-mix(in srgb, var(--plot-bg) 72%, transparent);border-radius:2px}.tp-source>span:empty,.tp-source>span[hidden]{display:none}.tp-pics.hl-open .tp-source,.tp-pics:has(.tp-hint.on) .tp-source{visibility:hidden}.tp-result{z-index:3;left:calc(18 * var(--g));bottom:calc(16 * var(--g));width:min(calc(600 * var(--u)), calc(100% - 110 * var(--g)));pointer-events:none;position:absolute}.tp-line{margin:0}.tp-line[hidden]{display:none}.tp-sub{color:var(--text-2);font-size:var(--fs-xs)}.tp-hud{z-index:4;pointer-events:none;position:absolute;inset:0}.tp-hlbox{left:calc(12 * var(--g));top:calc(12 * var(--g));z-index:3;align-items:flex-start;gap:calc(8 * var(--g));max-width:calc(100% - 24 * var(--g));flex-wrap:wrap;display:flex;position:absolute}.tp .hl-nav{pointer-events:auto;max-width:100%}.tp .hl-nav.idle{display:none}.tp .tp-back{pointer-events:auto;min-height:28px;padding:0 calc(10 * var(--g));background:color-mix(in srgb, var(--plot-bg) 82%, transparent)}.tp .tp-back[hidden]{display:none}.tp-hint,.tp-toast{left:50%;top:calc(16 * var(--g));z-index:4;width:max-content;max-width:calc(100% - 150px);padding:calc(7 * var(--g)) calc(14 * var(--g));text-align:center;border:1px solid var(--line);background:var(--plot-bg);backdrop-filter:blur(10px);color:var(--text);font-size:var(--fs-s);pointer-events:none;opacity:0;transition:opacity .6s var(--ease-out);border-radius:2px;line-height:1.45;position:absolute;transform:translate(-50%)}.tp-hint.on,.tp-toast.on{opacity:1;transition-duration:var(--dur-state)}.tp-hint.long{top:calc(56 * var(--g));width:min(calc(600 * var(--g)), calc(100% - 32px));text-align:left;max-width:none;line-height:1.5}.tp-hud:has(.tp-toast.on) .tp-hint:not(.long){opacity:0}.tp-panel{color:var(--text);display:grid}.tp-sec{min-width:0;display:grid}.tp-inset{aspect-ratio:1.6;width:100%}.tp-inset>canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.tp-row{align-items:center;gap:calc(8 * var(--g));flex-wrap:wrap;display:flex}.tp-row+.tp-row{margin-top:calc(8 * var(--g))}.tp-lab{min-width:calc(40 * var(--u));color:var(--text-3)}.tp-krow{align-items:center;gap:calc(10 * var(--g)) calc(18 * var(--g));flex-wrap:wrap;display:flex}.tp-khead{gap:calc(4 * var(--g));display:grid}.tp-kval{align-items:baseline;gap:.4em;display:flex}.tp-unit{font-family:var(--font-mono);font-size:var(--fs-s);color:var(--text-2)}.tp-note{margin:calc(6 * var(--g)) 0 0;color:var(--text-3);font-size:var(--fs-xs);line-height:1.45}.tp-go{align-content:start;justify-items:end;gap:calc(6 * var(--g));text-align:center;grid-template-rows:auto auto;display:grid}.tp-go>.tp-note{max-width:calc(300 * var(--u));margin:0}.tp-look{position:relative}.tp-look .sdr-tray{left:0;right:0;bottom:calc(100% + 4 * var(--g));z-index:5;position:absolute}.tp .hbtn,.tp .hl-step{min-height:24px}@media (width>=761px) and (height<=860px){.tp-inset{aspect-ratio:2}}@media (width<=760px){.tp-pics{border-block:1px solid var(--line);background:var(--bg)}.tp-panel{grid-template-columns:minmax(0,1fr);grid-template-areas:"inset""d""restart""pic""shape""speed""go""bar"}.tp-inset{aspect-ratio:1.4;grid-area:inset;align-self:center;min-height:240px}.tp-go{grid-area:go;align-self:center}.tp-sec-d{grid-area:d}.tp-sec-restart{grid-area:restart}.tp-sec-pic{grid-area:pic}.tp-sec-shape{grid-area:shape}.tp-sec-speed{grid-area:speed}.tp-panel>.tp-look{grid-area:bar}.tp-result{left:calc(10 * var(--g));bottom:calc(8 * var(--g));width:calc(100% - 64 * var(--g))}.tp-hint{white-space:normal;width:calc(100% - 24px);max-width:none}.tp-hint.long{top:calc(10 * var(--g))}.tp-hlbox{top:auto;bottom:calc(96 * var(--g));left:auto;right:calc(10 * var(--g))}}
