.df-pics{min-width:0;min-height:0;display:grid;position:relative;overflow:hidden}.df-pics[data-tone=dark]{background:var(--bg)}.df-view{touch-action:none;cursor:crosshair;outline:none;min-width:0;min-height:0;position:relative;overflow:hidden}.df-view:focus-visible{box-shadow:inset 0 0 0 2px var(--focus,var(--c-a))}.df-view.off-map{cursor:default}.df-view.grabbing{cursor:grabbing}.df-view>canvas{pointer-events:none;width:100%;height:100%;display:block;position:absolute;inset:0}.df-zoomread{z-index:2;right:calc(var(--sq-r,14px) + 8px);top:calc(var(--sq-t,14px) + 8px + var(--hud-push,0px));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:.06em;color:var(--text-2);border-radius:2px;position:absolute}.df-pics>.df-vb{z-index:3;right:calc(var(--sq-r,14px) + 8px);bottom:calc(var(--sq-b,40px) + 8px);position:absolute}.df-pics:has(.df-hint.long.on)>.df-vb{bottom:max(calc(var(--sq-b,40px) + 8px), calc(var(--caption-h,0px) + 20 * var(--g)))}.df-pics .stage-readout[data-corner=tr]{right:calc(var(--sq-r,14px) + 8px);top:calc(var(--sq-t,14px) + 34px + var(--hud-push,0px))}.df-hud{z-index:4;pointer-events:none;position:absolute;inset:0}.df-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}.df .hl-nav{pointer-events:auto;max-width:100%}.df .hl-nav.idle{display:none}.df-hint,.df-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%)}.df-hint.on,.df-toast.on{opacity:1;transition-duration:var(--dur-state)}@media (width>=761px){.df-hint:not(.long){left:calc(var(--sq-l,14px) + 12 * var(--g));top:calc(var(--sq-t,14px) + 12 * var(--g));text-align:left;max-width:max(calc(var(--sq-p,600px) / 2 - 40px), 260px);transform:none}}.df-hint.long{top:auto;bottom:calc(12 * var(--g));width:min(calc(600 * var(--g)), calc(100% - 32px));text-align:left;max-width:none;line-height:1.5}.df-hud:has(.df-toast.on) .df-hint:not(.long){opacity:0}.df-panel{color:var(--text);display:grid}.df-sec{min-width:0;display:grid}.df-inset{aspect-ratio:1.6;width:100%}.df-inset>canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.df-inset-note{margin-top:calc(6 * var(--g))}.df-val{font-variant-numeric:tabular-nums}.df-line{margin:calc(4 * var(--g)) 0 0;font-variant-numeric:tabular-nums;min-height:1.45em}.df-sub{color:var(--text-2);font-size:var(--fs-xs)}.df-row{align-items:center;gap:calc(8 * var(--g)) calc(12 * var(--g));flex-wrap:wrap;display:flex}.df-next{margin-top:calc(6 * var(--g))}.df-next>.df-line{min-height:0;margin:0}.df-note{margin:calc(6 * var(--g)) 0 0;color:var(--text-3);font-size:var(--fs-xs);line-height:1.45}.df-note:empty{display:none}.df-go{align-items:start;column-gap:var(--panel-inner-gap);grid-template-columns:repeat(2,minmax(0,1fr))}.df-proc{grid-template-rows:var(--control-primary) auto;place-items:center start;gap:calc(4 * var(--g));min-width:0;display:grid}.df-proc>.df-note{margin:0}.df-gotime{font-family:var(--font-mono);font-size:var(--fs-s);color:var(--text-2)}.df-look{position:relative}.df-look .sdr-tray{left:0;right:0;bottom:calc(100% + 4 * var(--g));z-index:5;position:absolute}.df .hbtn,.df .hl-step{min-height:24px}@media (width>=761px) and (height<=960px){.df-inset{aspect-ratio:2.2}.df-inset-note:empty{display:none}}@media (width<=760px) and (orientation:portrait){.df-pics{border-block:1px solid var(--line);background:var(--bg)}.df-inset{aspect-ratio:1.5}.ph-mobile-process[data-arrangement=beside] .df-inset{aspect-ratio:1}.df-hint{white-space:normal;width:calc(100% - 24px);max-width:none}}