.sp-pics{min-width:0;min-height:0;display:grid;position:relative;overflow:hidden}.sp-view{min-width:0;min-height:0;position:relative;overflow:hidden}.sp-view>canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.sp-gl{transition:opacity var(--dur-state) var(--ease-out)}.sp-gl.dim{opacity:.3}.sp-ov{touch-action:none;cursor:crosshair;outline:none}.sp-ov.grabbing{cursor:grabbing}.sp-ov.over-funnel,.sp-ov.dragging{cursor:move}.sp-ov:focus-visible{box-shadow:inset 0 0 0 2px var(--focus,var(--c-h))}.sp-pics[data-tone=dark]{background:var(--bg)}.sp-handles{pointer-events:none;position:absolute;inset:0}.sp-source{z-index:2;right:calc(10 * var(--g));top:calc(10 * var(--g));pointer-events:none;padding:1px calc(5 * var(--g));background:color-mix(in srgb, var(--plot-bg) 72%, transparent);font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.08em;color:var(--text-3);border-radius:2px;position:absolute}.sp-pics:has(.sp-hint.on) .sp-source,.sp-pics.hl-open .sp-source{visibility:hidden}.sp .sp-vb{right:calc(12 * var(--g));bottom:calc(12 * var(--g));z-index:2;position:absolute}.sp-result{z-index:3;left:calc(18 * var(--g));bottom:calc(16 * var(--g));width:min(calc(560 * var(--u)), calc(100% - 120 * var(--g)));pointer-events:none;position:absolute}.sp-line{margin:0}.sp-line[hidden]{display:none}.sp-sub{color:var(--text-2);font-size:var(--fs-xs)}.sp-key{align-items:center;gap:0 calc(8 * var(--g));color:var(--text-2);font-size:var(--fs-2xs);flex-wrap:wrap;display:flex}.sp-sw{align-items:center;gap:calc(3 * var(--g));font-family:var(--font-mono);display:inline-flex}.sp-sw>i{border:1px solid color-mix(in srgb, var(--text) 30%, transparent);width:.9em;height:.9em;display:inline-block}.sp-sw>i.sp-ramp{width:calc(56 * var(--g))}.sp-hud{z-index:4;pointer-events:none;position:absolute;inset:0}.sp .hl-nav{left:calc(12 * var(--g));top:calc(12 * var(--g));z-index:3;max-width:calc(100% - 24 * var(--g));pointer-events:auto;position:absolute}.sp .hl-nav.idle{display:none}.sp-hint,.sp-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%)}.sp-hint.on,.sp-toast.on{opacity:1;transition-duration:var(--dur-state)}.sp-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}.sp-hud:has(.sp-toast.on) .sp-hint:not(.long){opacity:0}.sp-panel{color:var(--text);display:grid}.sp-sec{min-width:0;display:grid}.sp-twin{gap:calc(5 * var(--g))}.sp-inset{aspect-ratio:1.2;width:100%}.sp-inset>canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.sp-tag,.sp-twin-foot{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.06em;color:var(--text-2);margin:0}.sp-twin-foot{justify-content:space-between;gap:calc(8 * var(--g));min-height:1.4em;display:flex}.sp-verdict{color:var(--text)}.sp-orow{align-items:center;gap:calc(10 * var(--g)) calc(14 * var(--g));flex-wrap:wrap;display:flex}.sp-orow>.pkeys{flex-wrap:wrap;flex:100%}.sp-orow .pkey{min-width:max-content}.sp-nrow{align-items:center;gap:calc(10 * var(--g)) calc(18 * var(--g));flex-wrap:wrap;display:flex}.sp-nhead{white-space:nowrap;align-items:baseline;gap:.5em;display:flex}.sp-sym{font-family:var(--font-mono);font-size:var(--fs-s);color:var(--text-2)}.sp-note{color:var(--text-3);font-size:var(--fs-xs);margin:0;line-height:1.45}.sp-go{align-content:start;justify-items:center;gap:calc(6 * var(--g));text-align:center;display:grid}@media (width>=761px){.sp-panel{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"twin twin""n key""note note""order order""start start""show show""bar bar"}.sp-twin{grid-area:twin}.sp-sec-n{grid-area:n}.sp-go{display:contents}.sp-go>:first-child{grid-area:key;align-self:end}.sp-go>.sp-note{margin-top:calc(-4 * var(--g));text-align:start;grid-area:note}.sp-nrow{gap:calc(8 * var(--g));flex-wrap:nowrap}.sp-twin{padding-bottom:var(--panel-gap);border-bottom:1px solid var(--line)}.sp-panel.panel-layout>.sp-sec-n.panel-section{border-top:0;padding-top:0}.sp-sec-order{grid-area:order}.sp-sec-start{grid-area:start}.sp-sec-show{grid-area:show}.sp-panel>.sp-look{grid-area:bar}@container phenomenon-column (width<380px){.sp-sec-n{grid-template-columns:minmax(0,1fr) auto;align-items:center}.sp-sec-n>.sec-head{grid-area:1/1}.sp-nrow{display:contents}.sp-nhead{grid-area:1/2}.sp-nrow>.knob{grid-area:2/1/3/3;justify-self:start}.sp-go>:first-child{align-self:center}}@container phenomenon-column (width<270px){.sp-panel{column-gap:calc(12 * var(--g));grid-template-columns:auto minmax(0,1fr);grid-template-areas:"twin twin""n n""key note""order order""start start""show show""bar bar"}.sp-go>.sp-note{align-self:center;margin-top:0}}}.sp-look{position:relative}.sp-look .sdr-tray{left:0;right:0;bottom:calc(100% + 4 * var(--g));z-index:5;position:absolute}.sp .dkeys .dk-name:empty{visibility:hidden}.sp .dkeys{gap:calc(6 * var(--g)) calc(14 * var(--g));flex-wrap:wrap;display:flex}.sp .hbtn,.sp .hl-step{min-height:24px}@media (width>=761px) and (height<=860px){.sp-inset{aspect-ratio:1.45}}@media (width<=760px){.sp-pics{border-block:1px solid var(--line);background:var(--bg)}.sp-panel{column-gap:calc(12 * var(--g));grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"twin go""n n""order order""start start""show show""bar bar"}.sp-twin{grid-area:twin;align-self:center}.sp-inset{aspect-ratio:1.15}.sp-go{grid-area:go;align-self:center}.sp-panel.panel-layout>.sp-go.panel-section{border-top:0;padding-top:0}.sp-go .sp-note{display:none}.sp-sec-start{grid-area:start}.sp-sec-n{grid-area:n}.sp-sec-order{grid-area:order}.sp-sec-show{grid-area:show}.sp-panel>.sp-look{grid-area:bar}.sp-result{left:calc(10 * var(--g));bottom:calc(8 * var(--g));width:calc(100% - 100px)}.sp-hint{white-space:normal;width:calc(100% - 24px);max-width:none}.sp-hint.long{top:calc(10 * var(--g))}.sp .hl-nav{top:auto;bottom:calc(var(--sp-notes-height,80px) + 16 * var(--g));left:auto;right:calc(10 * var(--g))}.sp .sp-vb{right:calc(8 * var(--g));bottom:calc(8 * var(--g))}.sp .sp-vb>button:not(.sp-cells){display:none}}@media (width<=980px) and (height<=500px) and (orientation:landscape){.sp .sp-vb>button:not(.sp-cells){display:none}}