/* ============================================================================
   /product: the layer, drawn as the homepage's dial (sub page system v1.1, approved 9 Oct 2026).
   The run is the system's (sub.css section 11): .run > .stage + section.ch[data-st] > .ch-h + .inst
   + .ch-b. Everything below is this page's instrument (.pdial). Its states are named mode:state, so a
   mode is [data-st^="mode:"]; the layer's four moments are data-st="layer" + data-s 0..3 (a live
   stage). sub.js sets the attributes; product.js turns the bezel and moves the names while they are
   faded. The face itself is ProductPage.DialSvg (product.aspx.vb), one square of 0..1000 units; its
   names are HTML (.fl), placed by the classes at the end of this file in % of that square, because
   the page may not carry style attributes (CSP). Generated from the approved mockup's page CSS
   (gen-css.js); tokens only (no hex outside tos-site.css).
   ============================================================================ */
.sp[data-pmap] .pdial .ins-c { container-type: inline-size; }
.sp[data-pmap] .pdial .dial { display: block; width: 100%; height: auto; overflow: visible; }
.sp[data-pmap] .pdial[data-kind="half"] .dial { overflow: hidden; }
.sp[data-pmap] .d-bezel { fill: none; stroke: var(--lp-rule-2); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.sp[data-pmap] .d-base { stroke: var(--lp-ink); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.sp[data-pmap] .d-rot { transform-box: view-box; transform-origin: 500px 500px; transform: rotate(var(--rot, 0deg)); transition: transform 1.1s var(--dl-ease); }
.sp[data-pmap] .d-ticks { transition: opacity .5s ease; }
.sp[data-pmap] .d-ticks line { stroke: var(--lp-rule-2); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.sp[data-pmap] .d-ticks line.h { stroke: var(--lp-ink-2); stroke-width: 1.5px; }
/* every mark on the face: grey = not yet, ink = kept, orange = now (the homepage's own code) */
.sp[data-pmap] .md, .sp[data-pmap] .ob, .sp[data-pmap] .ad, .sp[data-pmap] .gd, .sp[data-pmap] .tw { fill: var(--lp-dot-off); transform-box: fill-box; transform-origin: center; transform: scale(.77); transition: fill .35s ease, transform .35s ease; }
.sp[data-pmap] .md.ink, .sp[data-pmap] .pdial[data-st^="graph:"] .ob, .sp[data-pmap] .pdial[data-st^="gov:"] .gd { fill: var(--lp-ink); transform: scale(.86); }
.sp[data-pmap] .md.now { fill: var(--lp-accent); transform: none; }
.sp[data-pmap] .g-mods, .sp[data-pmap] .g-objs, .sp[data-pmap] .g-arch, .sp[data-pmap] .g-gov, .sp[data-pmap] .g-tw, .sp[data-pmap] .d-horizon, .sp[data-pmap] .d-hand, .sp[data-pmap] .d-wedge, .sp[data-pmap] .d-eng, .sp[data-pmap] .d-needle, .sp[data-pmap] .d-hub { opacity: 0; transition: opacity .5s ease; }
.sp[data-pmap] .pdial[data-st="layer"] .g-mods, .sp[data-pmap] .pdial[data-st^="def:"] .g-mods, .sp[data-pmap] .pdial[data-st^="pallas:"] .g-mods, .sp[data-pmap] .pdial[data-st^="mods:"] .g-mods { opacity: 1; }
.sp[data-pmap] .pdial[data-st^="arch:"] .d-ticks, .sp[data-pmap] .pdial[data-st^="graph:"] .d-ticks, .sp[data-pmap] .pdial[data-st^="clocks:"] .d-ticks, .sp[data-pmap] .pdial[data-st^="gov:"] .d-ticks, .sp[data-pmap] .pdial[data-st^="road:"] .d-ticks { opacity: .35; }
.sp[data-pmap] .pdial[data-st^="graph:"] .g-objs, .sp[data-pmap] .pdial[data-st^="arch:"] .g-arch, .sp[data-pmap] .pdial[data-st^="gov:"] .g-gov, .sp[data-pmap] .pdial[data-st^="road:"] .g-tw, .sp[data-pmap] .pdial[data-st^="clocks:"] .g-tw, .sp[data-pmap] .pdial[data-st^="arch:"] .d-horizon { opacity: 1; }
.sp[data-pmap] .pdial[data-st^="clocks:"] .d-hub, .sp[data-pmap] .pdial[data-st="pallas:models"] .d-hub, .sp[data-pmap] .pdial[data-kind="ring"] .d-hub { opacity: 1; }
/* the disc is the memory: it holds still; the graph shrinks it to a hub, two clocks and two engines need it clear */
.sp[data-pmap] .d-disc { fill: var(--lp-paper); stroke: var(--lp-rule-2); stroke-width: 1px; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; transition: transform .8s var(--dl-ease), opacity .5s ease; }
.sp[data-pmap] .pdial[data-st^="graph:"] .d-disc { transform: scale(.42); }
.sp[data-pmap] .pdial[data-st^="clocks:"] .d-disc, .sp[data-pmap] .pdial[data-st="pallas:models"] .d-disc { opacity: 0; }
.sp[data-pmap] .d-seal { fill: none; stroke: var(--lp-ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(1.06); transition: opacity .5s ease, transform .6s var(--dl-ease); }
.sp[data-pmap] .pdial[data-st="def:is"] .d-seal, .sp[data-pmap] .pdial[data-st="arch:layer"] .d-seal, .sp[data-pmap] .pdial[data-st="pallas:mem"] .d-seal, .sp[data-pmap] .pdial[data-st^="gov:"] .d-seal { opacity: 1; transform: none; }
/* the layer: a pulse from the module at twelve into the memory (contribute, relate), and out again (inherit) */
.sp[data-pmap] .d-pulse { fill: var(--lp-accent); opacity: 0; transform-box: view-box; }
.sp[data-pmap] .pdial[data-st="layer"][data-s="0"] .d-pulse { animation: product-in-0 1.6s var(--dl-ease) 1.15s both; }
.sp[data-pmap] .pdial[data-st="layer"][data-s="1"] .d-pulse { animation: product-in-1 1.6s var(--dl-ease) 1.15s both; }
.sp[data-pmap] .pdial[data-st="layer"][data-s="2"] .d-pulse { animation: product-out 1.6s var(--dl-ease) 1.15s both; }
@keyframes product-in-0 { 0% { opacity: 0; transform: translate(0, 0); } 18% { opacity: 1; } 80% { opacity: 1; transform: translate(0, 96px); } 100% { opacity: 0; transform: translate(0, 96px); } }
@keyframes product-in-1 { 0% { opacity: 0; transform: translate(0, 0); } 18% { opacity: 1; } 80% { opacity: 1; transform: translate(0, 96px); } 100% { opacity: 0; transform: translate(0, 96px); } }
@keyframes product-out { 0% { opacity: 0; transform: translate(0, 96px); } 18% { opacity: 1; } 80% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(0, 0); } }
/* reasoning reaches the whole layer: a line from the memory to every module */
.sp[data-pmap] .d-lines line { stroke: var(--lp-accent); stroke-width: 4; opacity: 0; transition: opacity .4s ease; }
.sp[data-pmap] .pdial[data-st="layer"][data-s="3"] .d-lines line, .sp[data-pmap] .pdial[data-st="pallas:orch"] .d-lines line { opacity: 1; }
.sp[data-pmap] .d-horizon { stroke-width: 1.5px; }
/* the graph: the memory at the centre, every object joined to it */
.sp[data-pmap] .sk { stroke: var(--lp-ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; opacity: .4; transition: opacity .4s ease, stroke .3s; }
/* two clocks: when it was true (ink), when the organization came to know it (orange) */
.sp[data-pmap] .d-hand { transform-box: view-box; transform-origin: 500px 500px; transform: rotate(0deg); transition: transform 1s var(--dl-ease), opacity .5s ease; }
.sp[data-pmap] .d-hand line { stroke-width: 10; stroke-linecap: round; }
.sp[data-pmap] .d-h-true line { stroke: var(--lp-ink); }
.sp[data-pmap] .d-h-learn line { stroke: var(--lp-accent); }
.sp[data-pmap] .pdial[data-st^="clocks:"] .d-hand { opacity: .22; }
.sp[data-pmap] .pdial[data-st^="clocks:"] .d-h-true { transform: rotate(-60deg); }
.sp[data-pmap] .pdial[data-st^="clocks:"] .d-h-learn { transform: rotate(30deg); }
.sp[data-pmap] .pdial[data-st="clocks:c1"] .d-h-true, .sp[data-pmap] .pdial[data-st="clocks:both"] .d-h-true, .sp[data-pmap] .pdial[data-st="clocks:c2"] .d-h-learn, .sp[data-pmap] .pdial[data-st="clocks:both"] .d-h-learn { opacity: 1; }
.sp[data-pmap] .d-wedge { fill: var(--dl-wedge); stroke: var(--lp-accent); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.sp[data-pmap] .pdial[data-st="clocks:both"] .d-wedge { opacity: 1; transition-delay: .6s; }
/* two engines, one memory: the hand is swapped, the marks stay */
.sp[data-pmap] .d-eng-a line { stroke: var(--lp-accent); stroke-width: 6; } .sp[data-pmap] .d-eng-a rect { fill: var(--lp-accent); }
.sp[data-pmap] .d-eng-b line { stroke: var(--lp-ink); stroke-width: 5; } .sp[data-pmap] .d-eng-b circle { fill: var(--lp-paper); stroke: var(--lp-ink); stroke-width: 5; }
.sp[data-pmap] .pdial[data-st="pallas:models"] .d-eng-a { animation: product-eng-a 3.2s ease both; }
.sp[data-pmap] .pdial[data-st="pallas:models"] .d-eng-b { animation: product-eng-b 3.2s ease both; }
@keyframes product-eng-a { 0% { opacity: 0; } 12%, 46% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes product-eng-b { 0%, 56% { opacity: 0; } 76%, 100% { opacity: 1; } }
/* governance: seven controls on the dial; the accountable one lit when the copy names it */
.sp[data-pmap] .pdial[data-st="gov:acc"] .gd-2 { fill: var(--lp-accent); transform: none; }
/* the roadmap: the mark fills, its needle on the newest dot */
.sp[data-pmap] .d-needle { transform-box: view-box; transform-origin: 500px 500px; transition: transform 1s var(--dl-ease), opacity .5s ease; }
.sp[data-pmap] .d-needle line { stroke: var(--lp-accent); stroke-width: 6; stroke-linecap: round; }
.sp[data-pmap] .d-hub { fill: var(--lp-ink); }
.sp[data-pmap] .pdial[data-st="graph:o0"] .ob-0 { fill: var(--lp-accent); transform: none; }
.sp[data-pmap] .pdial[data-st="graph:o0"] .sk-0 { stroke: var(--lp-accent); stroke-width: 2.5px; opacity: 1; }
.sp[data-pmap] .pdial[data-st="graph:o0"] .ol-0 { color: var(--lp-ink); text-decoration: underline; text-decoration-color: var(--lp-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.sp[data-pmap] .pdial[data-st="graph:o1"] .ob-1 { fill: var(--lp-accent); transform: none; }
.sp[data-pmap] .pdial[data-st="graph:o1"] .sk-1 { stroke: var(--lp-accent); stroke-width: 2.5px; opacity: 1; }
.sp[data-pmap] .pdial[data-st="graph:o1"] .ol-1 { color: var(--lp-ink); text-decoration: underline; text-decoration-color: var(--lp-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.sp[data-pmap] .pdial[data-st="graph:o2"] .ob-2 { fill: var(--lp-accent); transform: none; }
.sp[data-pmap] .pdial[data-st="graph:o2"] .sk-2 { stroke: var(--lp-accent); stroke-width: 2.5px; opacity: 1; }
.sp[data-pmap] .pdial[data-st="graph:o2"] .ol-2 { color: var(--lp-ink); text-decoration: underline; text-decoration-color: var(--lp-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.sp[data-pmap] .pdial[data-st="graph:o3"] .ob-3 { fill: var(--lp-accent); transform: none; }
.sp[data-pmap] .pdial[data-st="graph:o3"] .sk-3 { stroke: var(--lp-accent); stroke-width: 2.5px; opacity: 1; }
.sp[data-pmap] .pdial[data-st="graph:o3"] .ol-3 { color: var(--lp-ink); text-decoration: underline; text-decoration-color: var(--lp-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.sp[data-pmap] .pdial[data-st="graph:o4"] .ob-4 { fill: var(--lp-accent); transform: none; }
.sp[data-pmap] .pdial[data-st="graph:o4"] .sk-4 { stroke: var(--lp-accent); stroke-width: 2.5px; opacity: 1; }
.sp[data-pmap] .pdial[data-st="graph:o4"] .ol-4 { color: var(--lp-ink); text-decoration: underline; text-decoration-color: var(--lp-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.sp[data-pmap] .pdial[data-st="graph:o5"] .ob-5 { fill: var(--lp-accent); transform: none; }
.sp[data-pmap] .pdial[data-st="graph:o5"] .sk-5 { stroke: var(--lp-accent); stroke-width: 2.5px; opacity: 1; }
.sp[data-pmap] .pdial[data-st="graph:o5"] .ol-5 { color: var(--lp-ink); text-decoration: underline; text-decoration-color: var(--lp-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.sp[data-pmap] .pdial[data-st="graph:o6"] .ob-6 { fill: var(--lp-accent); transform: none; }
.sp[data-pmap] .pdial[data-st="graph:o6"] .sk-6 { stroke: var(--lp-accent); stroke-width: 2.5px; opacity: 1; }
.sp[data-pmap] .pdial[data-st="graph:o6"] .ol-6 { color: var(--lp-ink); text-decoration: underline; text-decoration-color: var(--lp-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.sp[data-pmap] .pdial[data-st="graph:o7"] .ob-7 { fill: var(--lp-accent); transform: none; }
.sp[data-pmap] .pdial[data-st="graph:o7"] .sk-7 { stroke: var(--lp-accent); stroke-width: 2.5px; opacity: 1; }
.sp[data-pmap] .pdial[data-st="graph:o7"] .ol-7 { color: var(--lp-ink); text-decoration: underline; text-decoration-color: var(--lp-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.sp[data-pmap] .pdial[data-st="road:near"] .tw-0, .sp[data-pmap] .pdial[data-st="road:near"] .tw-1, .sp[data-pmap] .pdial[data-st="road:near"] .tw-2 { fill: var(--lp-ink); transform: scale(.92); }
.sp[data-pmap] .pdial[data-st="road:near"] .tw-3 { fill: var(--lp-accent); transform: scale(1.12); }
.sp[data-pmap] .pdial[data-st="road:near"] .d-needle { opacity: 1; transform: rotate(90deg); }
.sp[data-pmap] .pdial[data-st="road:mid"] .tw-0, .sp[data-pmap] .pdial[data-st="road:mid"] .tw-1, .sp[data-pmap] .pdial[data-st="road:mid"] .tw-2, .sp[data-pmap] .pdial[data-st="road:mid"] .tw-3, .sp[data-pmap] .pdial[data-st="road:mid"] .tw-4, .sp[data-pmap] .pdial[data-st="road:mid"] .tw-5, .sp[data-pmap] .pdial[data-st="road:mid"] .tw-6 { fill: var(--lp-ink); transform: scale(.92); }
.sp[data-pmap] .pdial[data-st="road:mid"] .tw-7 { fill: var(--lp-accent); transform: scale(1.12); }
.sp[data-pmap] .pdial[data-st="road:mid"] .d-needle { opacity: 1; transform: rotate(210deg); }
.sp[data-pmap] .pdial[data-st="road:long"] .tw-0, .sp[data-pmap] .pdial[data-st="road:long"] .tw-1, .sp[data-pmap] .pdial[data-st="road:long"] .tw-2, .sp[data-pmap] .pdial[data-st="road:long"] .tw-3, .sp[data-pmap] .pdial[data-st="road:long"] .tw-4, .sp[data-pmap] .pdial[data-st="road:long"] .tw-5, .sp[data-pmap] .pdial[data-st="road:long"] .tw-6, .sp[data-pmap] .pdial[data-st="road:long"] .tw-7, .sp[data-pmap] .pdial[data-st="road:long"] .tw-8, .sp[data-pmap] .pdial[data-st="road:long"] .tw-9, .sp[data-pmap] .pdial[data-st="road:long"] .tw-10 { fill: var(--lp-ink); transform: scale(.92); }
.sp[data-pmap] .pdial[data-st="road:long"] .tw-11 { fill: var(--lp-accent); transform: scale(1.12); }
.sp[data-pmap] .pdial[data-st="road:long"] .d-needle { opacity: 1; transform: rotate(330deg); }
.sp[data-pmap] .pdial[data-st="arch:above"] .at-0, .sp[data-pmap] .pdial[data-st="arch:layer"] .at-0 { fill: var(--lp-ink); transform: scale(.9); transition-delay: 0.10s; }
.sp[data-pmap] .pdial[data-st="arch:below"] .ab-0, .sp[data-pmap] .pdial[data-st="arch:layer"] .ab-0 { fill: var(--lp-ink); transform: scale(.9); transition-delay: 0.46s; }
.sp[data-pmap] .pdial[data-st="arch:above"] .at-1, .sp[data-pmap] .pdial[data-st="arch:layer"] .at-1 { fill: var(--lp-ink); transform: scale(.9); transition-delay: 0.22s; }
.sp[data-pmap] .pdial[data-st="arch:below"] .ab-1, .sp[data-pmap] .pdial[data-st="arch:layer"] .ab-1 { fill: var(--lp-ink); transform: scale(.9); transition-delay: 0.34s; }
.sp[data-pmap] .pdial[data-st="arch:above"] .at-2, .sp[data-pmap] .pdial[data-st="arch:layer"] .at-2 { fill: var(--lp-ink); transform: scale(.9); transition-delay: 0.34s; }
.sp[data-pmap] .pdial[data-st="arch:below"] .ab-2, .sp[data-pmap] .pdial[data-st="arch:layer"] .ab-2 { fill: var(--lp-ink); transform: scale(.9); transition-delay: 0.22s; }
.sp[data-pmap] .pdial[data-st="arch:above"] .at-3, .sp[data-pmap] .pdial[data-st="arch:layer"] .at-3 { fill: var(--lp-ink); transform: scale(.9); transition-delay: 0.46s; }
.sp[data-pmap] .pdial[data-st="arch:below"] .ab-3, .sp[data-pmap] .pdial[data-st="arch:layer"] .ab-3 { fill: var(--lp-ink); transform: scale(.9); transition-delay: 0.10s; }
.sp[data-pmap] .pdial .d-lines line:nth-child(1) { transition-delay: 0.00s; }
.sp[data-pmap] .pdial .d-lines line:nth-child(2) { transition-delay: 0.06s; }
.sp[data-pmap] .pdial .d-lines line:nth-child(3) { transition-delay: 0.12s; }
.sp[data-pmap] .pdial .d-lines line:nth-child(4) { transition-delay: 0.18s; }
.sp[data-pmap] .pdial .d-lines line:nth-child(5) { transition-delay: 0.24s; }
.sp[data-pmap] .pdial .d-lines line:nth-child(6) { transition-delay: 0.30s; }
.sp[data-pmap] .pdial .d-lines line:nth-child(7) { transition-delay: 0.36s; }
.sp[data-pmap] .pdial .d-lines line:nth-child(8) { transition-delay: 0.42s; }
.sp[data-pmap] .pdial .d-lines line:nth-child(9) { transition-delay: 0.48s; }
.sp[data-pmap] .pdial .d-lines line:nth-child(10) { transition-delay: 0.54s; }
.sp[data-pmap] .pdial[data-st="layer"][data-s="0"] .hh-0 { opacity: 1; visibility: visible; transform: none; transition: opacity .26s ease .16s, transform .32s var(--dl-ease) .16s, visibility 0s linear .16s; }
.sp[data-pmap] .pdial[data-st="layer"][data-s="1"] .hh-1 { opacity: 1; visibility: visible; transform: none; transition: opacity .26s ease .16s, transform .32s var(--dl-ease) .16s, visibility 0s linear .16s; }
.sp[data-pmap] .pdial[data-st="layer"][data-s="2"] .hh-2 { opacity: 1; visibility: visible; transform: none; transition: opacity .26s ease .16s, transform .32s var(--dl-ease) .16s, visibility 0s linear .16s; }
.sp[data-pmap] .pdial[data-st="layer"][data-s="3"] .hh-3 { opacity: 1; visibility: visible; transform: none; transition: opacity .26s ease .16s, transform .32s var(--dl-ease) .16s, visibility 0s linear .16s; }

/* ---- the names on the face ---- */
.sp[data-pmap] .pdial .d-tags { position: absolute; inset: 0; pointer-events: none; }
.sp[data-pmap] .pdial .fl { font: 600 14px/1.15 var(--tos-font-body); letter-spacing: -.01em; color: var(--dl-dim); opacity: 0; background: var(--lp-paper); padding: 1px 4px; }
.sp[data-pmap] .pdial[data-kind="ring"] .fl { font-size: 12px; }
.sp[data-pmap] .pdial .ml.ink { color: var(--lp-ink-2); }
.sp[data-pmap] .pdial .ml.now { color: var(--lp-ink); text-decoration: underline; text-decoration-color: var(--lp-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.sp[data-pmap] .pdial[data-kind="stage"][data-st="layer"] .ml, .sp[data-pmap] .pdial[data-kind="stage"][data-st^="def:"] .ml, .sp[data-pmap] .pdial[data-kind="stage"][data-st^="pallas:"] .ml, .sp[data-pmap] .pdial[data-kind="stage"][data-st^="mods:"] .ml { opacity: 1; }
/* a phone band names only the module at twelve, above the face */
.sp[data-pmap] .pdial[data-kind="ring"][data-st="layer"] .ml.now, .sp[data-pmap] .pdial[data-kind="ring"][data-st^="pallas:"] .ml.now, .sp[data-pmap] .pdial[data-kind="ring"][data-st^="mods:"] .ml.now { opacity: 1; left: 50% !important; top: -4px !important; --tx: -50% !important; --ty: -100% !important; }
.sp[data-pmap] .pdial.turning .ml { opacity: 0 !important; transition-duration: .2s; }
.sp[data-pmap] .pdial[data-st^="graph:"] .ol { opacity: 1; color: var(--lp-ink-2); }
.sp[data-pmap] .pdial[data-st^="arch:"] .al { opacity: 1; }
.sp[data-pmap] .pdial[data-st="arch:above"] .al-t, .sp[data-pmap] .pdial[data-st="arch:layer"] .al-t, .sp[data-pmap] .pdial[data-st="arch:below"] .al-b, .sp[data-pmap] .pdial[data-st="arch:layer"] .al-b { color: var(--lp-ink); }
.sp[data-pmap] .pdial[data-st^="gov:"] .gl { opacity: 1; color: var(--lp-ink-2); }
.sp[data-pmap] .pdial[data-st="gov:acc"] .gl-2 { color: var(--lp-ink); text-decoration: underline; text-decoration-color: var(--lp-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---- readouts (the system's .ro-set; a title and a body inside .ro-x / .ls-x) ---- */
.sp[data-pmap] .pdial .ro-t { display: block; font-weight: 600; color: var(--lp-ink); }
.sp[data-pmap] .pdial .ro-b { display: block; margin-top: 4px; color: var(--lp-ink-2); }
.sp[data-pmap] .pdial .ro-s, .sp[data-pmap] .pdial .ls-s { color: var(--lp-muted); margin-top: 6px; }
/* the two words the old drawing stacked in its centre: two keys, two lines */
.sp[data-pmap] .pdial .ro-k .ro-kk { display: block; }
.sp[data-pmap] .pdial .ro-k:has(.ro-kk) { flex-direction: column; gap: 0; }
.sp[data-pmap] .inst.pdial:not(.is-hero) .ro-x .ro-t { font-size: 16px; line-height: 1.35; }
.sp[data-pmap] .inst.pdial:not(.is-hero) .ro-x .ro-b { font-size: 15px; }
/* the phone's hero: the half face and the module that acts, written large in its disc */
.sp[data-pmap] .inst.is-hero.pdial .ins-c { max-width: 460px; }
.sp[data-pmap] .hh-set { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); display: grid; justify-items: center; text-align: center; white-space: nowrap; }
.sp[data-pmap] .hh { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s ease, transform 0s linear .16s, visibility 0s linear .16s; }
.sp[data-pmap] .hh-t { font: 600 clamp(30px, 9vw, 40px)/1 var(--tos-font-body); letter-spacing: -.04em; color: var(--lp-ink); }
.sp[data-pmap] .hh-k { color: var(--lp-muted); margin-top: 6px; }
.sp[data-pmap] .inst.is-hero .ls-x .ro-t { font-size: 19px; line-height: 1.3; letter-spacing: -.015em; }
.sp[data-pmap] .inst.is-hero .ls-x .ro-b { font-size: 16px; }
.sp[data-pmap].js .inst.is-hero .ls-k { display: none; }
/* the hero's live controls: tabs sized by their words, so four of them and Pause fit a phone */
.sp[data-pmap] .pdial .tabs button { flex: 1 1 auto; padding: 0 6px; }
.sp[data-pmap] .hd > .inst.is-hero { margin-top: 22px; }
.sp[data-pmap] .inst.pdial:not(.is-hero) .ro-set, .sp[data-pmap].js .run .inst.pdial:not(.is-hero) .ro-set { margin-top: 30px; }
/* a phone chapter's band: a face small enough to leave its names room on a 320px screen */
@media (max-width: 1179px) {
  .sp[data-pmap].js .run .inst.pdial:not(.is-hero) { --ins-w: clamp(150px, calc(100vw - 200px), 250px); padding-top: 30px; }
  .sp[data-pmap] .inst.pdial:not(.is-hero) { --ins-w: clamp(150px, calc(100vw - 200px), 250px); }
}
/* without JS on a desktop, a chapter's still copy sits in the right column: the names need its sides */
@media (min-width: 1180px) { .sp[data-pmap]:not(.js) .inst.pdial:not(.is-hero) { --ins-w: calc(100% - 150px); } }

/* ---- chapter 01: what Timer is not ---- */
.sp[data-pmap] .product-not { border-top: 1px solid var(--lp-ink); }
.sp[data-pmap] .product-not-h { padding: 12px 0 6px; color: var(--lp-muted); }
.sp[data-pmap] .product-not ul { display: grid; grid-template-columns: minmax(0, 1fr); }
.sp[data-pmap] .product-not li { padding: 12px 0; border-bottom: 1px solid var(--lp-rule); font-size: 17px; line-height: 1.4; color: var(--lp-ink-2); text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: var(--lp-muted); }
@media (min-width: 600px) { .sp[data-pmap] .product-not ul { grid-template-columns: 1fr 1fr; column-gap: 24px; } }

/* ---- a caption's record line: the old figure's right-hand words, on a line of their own ---- */
.sp[data-pmap] .product-fc-k { display: block; color: var(--lp-muted); }
.sp[data-pmap] .product-fc-k + * { display: block; }

/* ---- chapter 02: the layer between what sits above it and below it ---- */
.sp[data-pmap] .product-edge { border-top: 1px solid var(--lp-ink); }
.sp[data-pmap] .product-edge > .step + .step { margin-top: 0; }
.sp[data-pmap] .product-st { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; row-gap: 4px; padding: 16px 0 18px; border-bottom: 1px solid var(--lp-rule); }
.sp[data-pmap] .product-st > .rec { color: var(--lp-muted); }
.sp[data-pmap] .product-st-t { font: 600 19px/1.3 var(--tos-font-body); letter-spacing: -.015em; color: var(--lp-ink); }
.sp[data-pmap] .product-st-u { font-size: 15px; line-height: 1.45; color: var(--lp-ink-2); }
.sp[data-pmap] .product-st-v { margin-top: 6px; font-size: 16px; line-height: 1.45; color: var(--lp-ink); }
.sp[data-pmap] .product-st.is-layer { border-top: 3px solid var(--lp-ink); border-bottom: 3px solid var(--lp-ink); padding: 22px 0 24px; margin-top: -1px; }
.sp[data-pmap] .product-st.is-layer > .rec { color: var(--lp-accent-text); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.sp[data-pmap] .product-st.is-layer > .rec::before { content: ""; width: 7px; height: 7px; background: var(--lp-accent); flex: none; }
.sp[data-pmap] .product-st.is-layer .product-st-t { font-size: 22px; }
.sp[data-pmap] .product-edge-dots { display: flex; justify-content: space-between; max-width: 420px; margin-top: 14px; }
.sp[data-pmap] .product-edge-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--lp-dot-off); }
.sp[data-pmap] .product-edge-dots i.on { width: 12px; height: 12px; margin-top: -1px; background: var(--lp-accent); }
@media (min-width: 600px) {
  .sp[data-pmap] .product-st { grid-template-columns: 130px minmax(0, 1fr); column-gap: 20px; }
  .sp[data-pmap] .product-st > .rec { grid-row: 1 / 6; padding-top: 4px; }
  .sp[data-pmap] .product-st > :not(.rec) { grid-column: 2; }
}

/* ---- chapter 03: objects and their edges, the two clocks ---- */
.sp[data-pmap] .product-obj .lg-x { font-weight: 600; }
.sp[data-pmap] .product-clocks { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--lp-ink); }
.sp[data-pmap] .product-clocks > .step + .step { margin-top: 0; }
.sp[data-pmap] .product-clock { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; align-items: center; align-content: start; padding: 14px 0; border-bottom: 1px solid var(--lp-rule); }
.sp[data-pmap] .product-clock svg { display: block; width: 48px; height: 48px; grid-row: 1 / 3; }
.sp[data-pmap] .product-clock .rec { color: var(--lp-muted); }
.sp[data-pmap] .product-clock p:not(.rec) { font-size: 17px; line-height: 1.4; font-weight: 600; color: var(--lp-ink); }

/* ---- chapter 05: the modules, each with its place on the bezel ---- */
.sp[data-pmap] .product-mod { border-top: 1px solid var(--lp-ink); }
.sp[data-pmap] .product-mod > .step + .step { margin-top: 0; }
.sp[data-pmap] .product-mod li { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; align-content: start; padding: 14px 0; border-bottom: 1px solid var(--lp-rule); align-items: start; }
.sp[data-pmap] .product-mod svg { width: 32px; height: 32px; display: block; grid-row: 1 / 3; margin-top: 2px; }
.sp[data-pmap] .product-mod .mi-off { fill: var(--lp-dot-off); }
.sp[data-pmap] .product-mod .mi-on, .sp[data-pmap] .product-mod .mi-hub { fill: var(--lp-ink); }
.sp[data-pmap].js .product-mod li.cur .mi-on { fill: var(--lp-accent); }
.sp[data-pmap] .product-mod b { font: 600 18px/1.3 var(--tos-font-body); letter-spacing: -.015em; color: var(--lp-ink); }
.sp[data-pmap] .product-mod span { font-size: 16px; line-height: 1.45; color: var(--lp-ink-2); }

/* ---- chapter 06, the surface drawn to scale (full width, between the two runs) ---- */
.sp[data-pmap] .product-x { margin-top: 36px; }
.sp[data-pmap] .product-win { border: 1px solid var(--lp-rule-2); background: var(--lp-paper); }
.sp[data-pmap] .product-win-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--lp-rule); }
.sp[data-pmap] .product-win-wm { font: 500 16px/1 var(--tos-font-mono); letter-spacing: -.04em; color: var(--lp-ink); }
.sp[data-pmap] .product-win-org { color: var(--lp-muted); display: inline-flex; align-items: center; gap: 8px; }
.sp[data-pmap] .product-win-org::before { content: ""; width: 7px; height: 7px; background: var(--lp-ink); }
.sp[data-pmap] .product-win-body { display: grid; grid-template-columns: minmax(0, 1fr); }
.sp[data-pmap] .product-rail { display: flex; flex-wrap: wrap; gap: 0 2px; padding: 8px 10px; border-bottom: 1px solid var(--lp-rule); }
.sp[data-pmap] .product-rail li { padding: 6px 8px; font-size: 14px; font-weight: 500; color: var(--lp-ink-2); }
.sp[data-pmap] .product-rail li.on { color: var(--lp-ink); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; background: var(--tos-surface-sunken); }
.sp[data-pmap] .product-rail li.on::before { content: ""; width: 7px; height: 7px; background: var(--lp-ink); }
.sp[data-pmap] .product-rail .more-apps { color: var(--lp-muted); font-size: 12px; align-self: center; }
.sp[data-pmap] .product-pane { padding: 14px; border-bottom: 1px solid var(--lp-rule); }
.sp[data-pmap] .product-pane-h { color: var(--lp-muted); padding-bottom: 8px; }
.sp[data-pmap] .product-graph-c { position: relative; height: 210px; margin: 6px 10px 0; }
.sp[data-pmap] .product-graph-c svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sp[data-pmap] .product-graph-c line { stroke: var(--lp-rule-2); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.sp[data-pmap] .product-gn { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; padding: 4px 8px; background: var(--lp-paper); border: 1px solid var(--lp-rule-2); font-size: 13px; font-weight: 500; color: var(--lp-ink); }
.sp[data-pmap] .product-gn.is-c { background: var(--lp-ink); color: var(--lp-paper); border-color: var(--lp-ink); font-weight: 600; }
.sp[data-pmap] .product-cap dl div { display: grid; grid-template-columns: minmax(0, 1fr); padding: 8px 0; border-top: 1px solid var(--lp-rule); }
.sp[data-pmap] .product-cap dt { color: var(--lp-muted); }
.sp[data-pmap] .product-cap dd { margin: 0; font-size: 15px; line-height: 1.4; color: var(--lp-ink); }
.sp[data-pmap] .product-hl-strip { display: grid; gap: 12px; border-bottom: 0; }
.sp[data-pmap] .product-hl-k { display: flex; align-items: center; gap: 8px; color: var(--lp-ink); font-weight: 600; }
.sp[data-pmap] .product-hl-k::before { content: ""; width: 8px; height: 8px; background: var(--lp-accent); }
.sp[data-pmap] .product-hl-x { margin-top: 6px; font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--lp-ink); }
.sp[data-pmap] .product-hl-s { margin-top: 4px; color: var(--lp-muted); }
.sp[data-pmap] .product-approve { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 18px; background: var(--lp-accent); color: var(--lp-on-accent); font: 600 12px/1 var(--tos-font-mono); letter-spacing: .08em; text-transform: uppercase; border-radius: 2px; justify-self: start; }
@media (min-width: 760px) {
  .sp[data-pmap] .product-cap dl div { grid-template-columns: 130px minmax(0, 1fr); column-gap: 12px; }
  .sp[data-pmap] .product-win-body { grid-template-columns: 180px minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: auto auto; }
  .sp[data-pmap] .product-rail { grid-row: 1 / 3; flex-direction: column; flex-wrap: nowrap; border-bottom: 0; border-inline-end: 1px solid var(--lp-rule); padding: 12px 8px; gap: 2px; }
  .sp[data-pmap] .product-rail .more-apps { align-self: auto; margin-top: 10px; }
  .sp[data-pmap] .product-graph { border-inline-end: 1px solid var(--lp-rule); }
  .sp[data-pmap] .product-graph-c { height: 250px; }
  .sp[data-pmap] .product-hl-strip { grid-column: 2 / 4; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .sp[data-pmap] .product-approve { justify-self: end; }
}

/* ---- chapter 07: the seven controls, two to a row on a phone, three beside the dial (a long
   word such as Authentifizierung needs a third of the column) ---- */
.sp[data-pmap] .product-runs-7 li { flex-basis: 50%; }
@media (min-width: 600px) { .sp[data-pmap] .product-runs-7 li { flex-basis: 33.33%; } }
.sp[data-pmap] .product-runs-7 b { font-size: 15px; letter-spacing: -.01em; overflow-wrap: anywhere; hyphens: auto; }

/* a ledger step reads from its top (the min-height of .ledger.steps > li.step stretched its grid rows apart) */
.sp[data-pmap] .run .ledger.steps > li.step { align-content: start; }

/* ---- the wordmark in the surface's window bar is a mark, not a sentence: it keeps its order in
   Arabic ("timer_", not "_timer") ---- */
.sp[data-pmap] .product-win-wm { direction: ltr; unicode-bidi: isolate; }
/* ---- the hero's big name: pt and ar carry the product's own name in brackets ("(Agenda) الأجندة"),
   so it is set a size smaller there to keep clear of the disc's edge ---- */
html:not([lang="en"]) .sp[data-pmap] .hh-t { font-size: clamp(24px, 7.2vw, 34px); }

/* ---- long words: a German heading on a phone ("Unternehmenssystemen") was cut mid-word with no
   mark; hyphenate by the page language instead ---- */
.sp[data-pmap] h1, .sp[data-pmap] h2, .sp[data-pmap] .callout .big, .sp[data-pmap] .product-st-t { -webkit-hyphens: auto; hyphens: auto; }

/* ---- the hero: the homepage's button pair ---- */
.sp[data-pmap] .hd .cta { margin-top: 28px; }

/* ---- desktop ---- */
@media (min-width: 1180px) {
  /* the stage's readout lives in the disc, sized by the face itself (as on the homepage) */
  .sp[data-pmap] .stage.pdial .ro-disc { position: absolute; left: 50%; top: 50%; width: 46cqw; margin: 0; min-height: 0; transform: translate(-50%, -50%); text-align: center; justify-items: center; align-content: center; }
  .sp[data-pmap] .stage.pdial .ro-disc > * { align-self: center; }
  .sp[data-pmap] .stage.pdial .ro-disc .ro-k, .sp[data-pmap] .stage.pdial .ro-disc .ls-k { justify-content: center; }
  .sp[data-pmap] .stage.pdial .ro-disc .ro-k:has(.ro-kk) { align-items: center; }
  .sp[data-pmap] .stage.pdial .ro-disc .ro-x, .sp[data-pmap] .stage.pdial .ro-disc .ls-x { font-size: clamp(14px, 2.7cqw, 17px); line-height: 1.45; margin-top: 8px; max-width: none; }
  .sp[data-pmap] .stage.pdial .ro-disc .ro-t { font-size: clamp(17px, 3.6cqw, 23px); line-height: 1.24; letter-spacing: -.02em; }
  .sp[data-pmap] .stage.pdial .ro-disc .ro-b { margin-top: 8px; }
  .sp[data-pmap] .stage.pdial .ro-disc .sm { max-width: 22cqw; justify-self: center; }
  .sp[data-pmap] .stage.pdial .ro-disc .sm .ro-t { font-size: clamp(15px, 2.9cqw, 18px); }
  .sp[data-pmap] .stage.pdial .ro-disc .sm .ro-x { margin-top: 4px; }
  .sp[data-pmap] .stage.pdial .ro-u .ro-t { font-size: 21px; letter-spacing: -.02em; }
  /* the names sit outward from the face; in pt, de and ar they are longer (pt and ar carry the
     product's own name in brackets, "Formulários (Forms)"), and at the approved size the outermost
     ran past the page edge by up to 40px (measured). Those languages get a face 150px narrower, so
     every name keeps the page; English keeps the approved size, where every name already fits. */
  html:not([lang="en"]) .sp[data-pmap] .stage.pdial { --ins-w: min(var(--fig-hero), calc(100% - 150px)); }
  /* the foot under the face: Pause and the moments while the layer plays, else the readout the face cannot hold */
  .sp[data-pmap] .stage.pdial .stage-foot { display: grid; margin-top: 14px; }
  .sp[data-pmap] .stage.pdial .stage-foot > * { grid-area: 1 / 1; }
  .sp[data-pmap] .stage.pdial .stage-foot .ro-u { margin: 0; min-height: 0; }
  .sp[data-pmap] .stage.pdial .stage-foot .live-ctl { margin: 0 auto; align-self: start; }
  /* the steps read past the instrument one at a time */
  .sp[data-pmap] .run .product-obj.steps > li.step { min-height: 10vh; padding-top: 14px; }
  .sp[data-pmap] .run .product-clocks > .step { min-height: 22vh; }
  .sp[data-pmap] .run .product-mod.steps > li.step { min-height: 11vh; }
  .sp[data-pmap] .run .product-edge > .step { min-height: 24vh; }
  .sp[data-pmap] .run .product-edge > .step:last-child, .sp[data-pmap] .run .product-clocks > .step:last-child { min-height: 0; }
  /* the surface sits between the runs, at full width */
  .sp[data-pmap] .ch.product-wide { row-gap: 72px; }
  /* its head reads with its own words, never sticky over the full-width drawing below */
  .sp[data-pmap] .ch.product-wide > .ch-h { position: static; }
  .sp[data-pmap] .ch.product-wide > .product-x { grid-column: 1 / -1; margin-top: 0; }
  .sp[data-pmap] .product-win-body { grid-template-columns: 220px minmax(0, 1.25fr) minmax(0, 1fr); }
  .sp[data-pmap] .product-pane { padding: 18px 22px; }
  .sp[data-pmap] .product-graph-c { height: 300px; }
  .sp[data-pmap] .product-gn { font-size: 14px; }
}

/* ---- right to left: the instrument keeps its left-to-right geometry (sub.css), but the words
   that sit inside it (the stage's readout in the disc, the hero's big name) read in their own
   direction ---- */
[dir="rtl"] .sp[data-pmap] .pdial .ro-set, [dir="rtl"] .sp[data-pmap] .pdial .hh-set { direction: rtl; }

/* ---- reduced motion: the states, never the travel ---- */
@media (prefers-reduced-motion: reduce) {
  .sp[data-pmap] .d-pulse { display: none; }
  .sp[data-pmap] .pdial[data-st="pallas:models"] .d-eng-b { opacity: 1; }
}

/* ============ the places: every position the mockup gave as a style attribute ============ */
/* the bezel at rest: the module named turned to twelve (product.js turns it from here) */
.sp[data-pmap] .pdial.rot-0 { --rot: 0deg; }
.sp[data-pmap] .pdial.rot-1 { --rot: -36deg; }
.sp[data-pmap] .pdial.rot-2 { --rot: -72deg; }
.sp[data-pmap] .pdial.rot-3 { --rot: -108deg; }
.sp[data-pmap] .pdial.rot-4 { --rot: -144deg; }
.sp[data-pmap] .pdial.rot-5 { --rot: -180deg; }
.sp[data-pmap] .pdial.rot-6 { --rot: -216deg; }
.sp[data-pmap] .pdial.rot-7 { --rot: -252deg; }
.sp[data-pmap] .pdial.rot-8 { --rot: -288deg; }
.sp[data-pmap] .pdial.rot-9 { --rot: -324deg; }
/* a module's name, by its slot round the face (slot 0 = twelve o'clock), desktop and phone */
.sp[data-pmap] .pdial[data-kind="stage"] .s-0 { left: 50.00%; top: 7.60%; --tx: -50%; --ty: -100%; }
.sp[data-pmap] .pdial[data-kind="stage"] .s-1 { left: 74.92%; top: 15.70%; --tx: -21%; --ty: -90%; }
.sp[data-pmap] .pdial[data-kind="stage"] .s-2 { left: 90.32%; top: 36.90%; --tx: -2%; --ty: -65%; }
.sp[data-pmap] .pdial[data-kind="stage"] .s-3 { left: 90.32%; top: 63.10%; --tx: -2%; --ty: -35%; }
.sp[data-pmap] .pdial[data-kind="stage"] .s-4 { left: 74.92%; top: 84.30%; --tx: -21%; --ty: -10%; }
.sp[data-pmap] .pdial[data-kind="stage"] .s-5 { left: 50.00%; top: 92.40%; --tx: -50%; --ty: 0%; }
.sp[data-pmap] .pdial[data-kind="stage"] .s-6 { left: 25.08%; top: 84.30%; --tx: -79%; --ty: -10%; }
.sp[data-pmap] .pdial[data-kind="stage"] .s-7 { left: 9.68%; top: 63.10%; --tx: -98%; --ty: -35%; }
.sp[data-pmap] .pdial[data-kind="stage"] .s-8 { left: 9.68%; top: 36.90%; --tx: -98%; --ty: -65%; }
.sp[data-pmap] .pdial[data-kind="stage"] .s-9 { left: 25.08%; top: 15.70%; --tx: -79%; --ty: -90%; }
.sp[data-pmap] .pdial[data-kind="ring"] .s-0 { left: 50.00%; top: -4.50%; --tx: -50%; --ty: -100%; }
.sp[data-pmap] .pdial[data-kind="ring"] .s-1 { left: 82.03%; top: 5.91%; --tx: -21%; --ty: -90%; }
.sp[data-pmap] .pdial[data-kind="ring"] .s-2 { left: 101.83%; top: 33.16%; --tx: -2%; --ty: -65%; }
.sp[data-pmap] .pdial[data-kind="ring"] .s-3 { left: 101.83%; top: 66.84%; --tx: -2%; --ty: -35%; }
.sp[data-pmap] .pdial[data-kind="ring"] .s-4 { left: 82.03%; top: 94.09%; --tx: -21%; --ty: -10%; }
.sp[data-pmap] .pdial[data-kind="ring"] .s-5 { left: 50.00%; top: 104.50%; --tx: -50%; --ty: 0%; }
.sp[data-pmap] .pdial[data-kind="ring"] .s-6 { left: 17.97%; top: 94.09%; --tx: -79%; --ty: -10%; }
.sp[data-pmap] .pdial[data-kind="ring"] .s-7 { left: -1.83%; top: 66.84%; --tx: -98%; --ty: -35%; }
.sp[data-pmap] .pdial[data-kind="ring"] .s-8 { left: -1.83%; top: 33.16%; --tx: -98%; --ty: -65%; }
.sp[data-pmap] .pdial[data-kind="ring"] .s-9 { left: 17.97%; top: 5.91%; --tx: -79%; --ty: -90%; }
/* the objects the memory connects */
.sp[data-pmap] .pdial[data-kind="stage"] .ol-0 { left: 50.00%; top: 7.60%; --tx: -50%; --ty: -100%; }
.sp[data-pmap] .pdial[data-kind="stage"] .ol-1 { left: 79.98%; top: 20.02%; --tx: -15%; --ty: -85%; }
.sp[data-pmap] .pdial[data-kind="stage"] .ol-2 { left: 92.40%; top: 50.00%; --tx: 0%; --ty: -50%; }
.sp[data-pmap] .pdial[data-kind="stage"] .ol-3 { left: 79.98%; top: 79.98%; --tx: -15%; --ty: -15%; }
.sp[data-pmap] .pdial[data-kind="stage"] .ol-4 { left: 50.00%; top: 92.40%; --tx: -50%; --ty: 0%; }
.sp[data-pmap] .pdial[data-kind="stage"] .ol-5 { left: 20.02%; top: 79.98%; --tx: -85%; --ty: -15%; }
.sp[data-pmap] .pdial[data-kind="stage"] .ol-6 { left: 7.60%; top: 50.00%; --tx: -100%; --ty: -50%; }
.sp[data-pmap] .pdial[data-kind="stage"] .ol-7 { left: 20.02%; top: 20.02%; --tx: -85%; --ty: -85%; }
.sp[data-pmap] .pdial[data-kind="ring"] .ol-0 { left: 50.00%; top: -4.50%; --tx: -50%; --ty: -100%; }
.sp[data-pmap] .pdial[data-kind="ring"] .ol-1 { left: 88.54%; top: 11.46%; --tx: -15%; --ty: -85%; }
.sp[data-pmap] .pdial[data-kind="ring"] .ol-2 { left: 104.50%; top: 50.00%; --tx: 0%; --ty: -50%; }
.sp[data-pmap] .pdial[data-kind="ring"] .ol-3 { left: 88.54%; top: 88.54%; --tx: -15%; --ty: -15%; }
.sp[data-pmap] .pdial[data-kind="ring"] .ol-4 { left: 50.00%; top: 104.50%; --tx: -50%; --ty: 0%; }
.sp[data-pmap] .pdial[data-kind="ring"] .ol-5 { left: 11.46%; top: 88.54%; --tx: -85%; --ty: -15%; }
.sp[data-pmap] .pdial[data-kind="ring"] .ol-6 { left: -4.50%; top: 50.00%; --tx: -100%; --ty: -50%; }
.sp[data-pmap] .pdial[data-kind="ring"] .ol-7 { left: 11.46%; top: 11.46%; --tx: -85%; --ty: -85%; }
/* above and below the layer (the stage only) */
.sp[data-pmap] .pdial[data-kind="stage"] .at0 { left: 15.70%; top: 25.08%; --tx: -90%; --ty: -79%; }
.sp[data-pmap] .pdial[data-kind="stage"] .at1 { left: 36.90%; top: 9.68%; --tx: -65%; --ty: -98%; }
.sp[data-pmap] .pdial[data-kind="stage"] .at2 { left: 63.10%; top: 9.68%; --tx: -35%; --ty: -98%; }
.sp[data-pmap] .pdial[data-kind="stage"] .at3 { left: 84.30%; top: 25.08%; --tx: -10%; --ty: -79%; }
.sp[data-pmap] .pdial[data-kind="stage"] .ab0 { left: 84.30%; top: 74.92%; --tx: -10%; --ty: -21%; }
.sp[data-pmap] .pdial[data-kind="stage"] .ab1 { left: 63.10%; top: 90.32%; --tx: -35%; --ty: -2%; }
.sp[data-pmap] .pdial[data-kind="stage"] .ab2 { left: 36.90%; top: 90.32%; --tx: -65%; --ty: -2%; }
.sp[data-pmap] .pdial[data-kind="stage"] .ab3 { left: 15.70%; top: 74.92%; --tx: -90%; --ty: -21%; }
/* the seven controls (the stage only) */
.sp[data-pmap] .pdial[data-kind="stage"] .gl-0 { left: 50.00%; top: 7.60%; --tx: -50%; --ty: -100%; }
.sp[data-pmap] .pdial[data-kind="stage"] .gl-1 { left: 83.15%; top: 23.56%; --tx: -11%; --ty: -81%; }
.sp[data-pmap] .pdial[data-kind="stage"] .gl-2 { left: 91.34%; top: 59.43%; --tx: -1%; --ty: -39%; }
.sp[data-pmap] .pdial[data-kind="stage"] .gl-3 { left: 68.40%; top: 88.20%; --tx: -28%; --ty: -5%; }
.sp[data-pmap] .pdial[data-kind="stage"] .gl-4 { left: 31.60%; top: 88.20%; --tx: -72%; --ty: -5%; }
.sp[data-pmap] .pdial[data-kind="stage"] .gl-5 { left: 8.66%; top: 59.43%; --tx: -99%; --ty: -39%; }
.sp[data-pmap] .pdial[data-kind="stage"] .gl-6 { left: 16.85%; top: 23.56%; --tx: -89%; --ty: -81%; }
/* the surface's graph lens: each object at its place, the organization at the centre */
.sp[data-pmap] .product-gn.gn-0 { left: 26%; top: 22%; }
.sp[data-pmap] .product-gn.gn-1 { left: 74%; top: 22%; }
.sp[data-pmap] .product-gn.gn-2 { left: 20%; top: 74%; }
.sp[data-pmap] .product-gn.gn-3 { left: 80%; top: 74%; }
.sp[data-pmap] .product-gn.gn-4 { left: 50%; top: 90%; }
.sp[data-pmap] .product-gn.gn-c { left: 50%; top: 50%; }