/* «Деталь» — the template's own blocks: the first screen with the picker and the
   diagram, «Как устроен узел», the service plates. Tokens are in detal.css. */

/* -------------------------------------------------------------------------
   1. First screen
   ------------------------------------------------------------------------- */

html.detal .dt-hero { background: var(--dt-shell); color: var(--dt-ink-dark); padding-block: clamp(28px, 3vw, 56px) clamp(40px, 4vw, 72px); }
html.detal .dt-hero__grid { display: grid; gap: clamp(28px, 3vw, 48px); align-items: start; }
html.detal .dt-hero__left { min-width: 0; display: grid; gap: 24px; }
html.detal .dt-hero__right { min-width: 0; }

html.detal .dt-hero__title { margin: 0; font-size: var(--dt-step-display); line-height: 0.95; letter-spacing: -0.025em; font-weight: 700; margin-left: -0.04em; }
html.detal .dt-hero__v { display: none; }
html.detal .dt-hero__lead { display: block; }
html.detal .dt-hero__price { display: block; margin-top: 0.18em; font-size: 0.52em; line-height: 1; letter-spacing: -0.01em; color: var(--dt-signal); font-variant-numeric: tabular-nums; }
html.detal .dt-hero__sub { margin: 0; max-width: 46ch; color: var(--dt-muted-dark); font-size: var(--dt-step-lead); line-height: 1.4; }

/* the picker */
html.detal .dt-picker { display: grid; gap: 14px; }
html.detal .dt-picker__row { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.detal .dt-pick { display: grid; gap: 6px; min-width: 0; }
html.detal .dt-pick__label { font-size: var(--dt-step-small); font-weight: 500; color: var(--dt-muted-dark); }
html.detal .dt-hero .dt-select,
html.detal .dt-hero .dt-input {
    width: 100%;
    min-width: 0;
    background-color: var(--dt-shell-2);
    color: #ffffff;
    box-shadow: inset 0 0 0 1px var(--dt-line-dark);
}
html.detal .dt-hero .dt-select {
    appearance: none;
    padding-right: 2.4rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--dt-muted-dark) 50%), linear-gradient(135deg, var(--dt-muted-dark) 50%, transparent 50%);
    background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
    background-size: 6px 6px;
    background-repeat: no-repeat;
}
html.detal .dt-hero .dt-select:hover:not(:disabled), html.detal .dt-hero .dt-input:hover { background-color: var(--dt-shell-3); }
html.detal .dt-hero .dt-select option { background: var(--dt-shell); color: #ffffff; }
html.detal .dt-hero :is(.dt-select, .dt-input):focus-visible { box-shadow: inset 0 0 0 2px var(--dt-signal); }
html.detal .dt-picker__q { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
html.detal .dt-picker__search { display: grid; gap: 6px; }
html.detal .dt-picker__all { margin: 0; font-size: 0.9375rem; }
html.detal .dt-hero .dt-link { color: #ffffff; }

/* the assembly tabs: radio buttons, so they work without script */
html.detal .dt-tabs { display: flex; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
html.detal .dt-tab {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1.1rem;
    background: var(--dt-shell-2);
    color: var(--dt-ink-dark);
    font-weight: 600;
    font-stretch: 88%;
    cursor: pointer;
    clip-path: polygon(0 0, calc(100% - var(--dt-cut-s)) 0, 100% var(--dt-cut-s), 100% 100%, var(--dt-cut-s) 100%, 0 calc(100% - var(--dt-cut-s)));
    transition: background-color 150ms var(--dt-ease), color 150ms var(--dt-ease), transform 120ms var(--dt-ease);
}
html.detal .dt-tab:hover { background: var(--dt-shell-3); }
html.detal .dt-tab:active { transform: scale(0.97); }
html.detal .dt-tab__input:focus-visible + .dt-tab { box-shadow: inset 0 0 0 3px var(--dt-signal); }

/* one node visible: the first by default, the checked one otherwise */
html.detal .dt-node { display: none; }
html.detal .dt-node[data-node="1"] { display: grid; }
html.detal .dt-hero__v[data-v="1"] { display: block; }

/* the panel: diagram + positions */
html.detal .dt-node {
    gap: 0;
    background: var(--dt-shell-2);
    clip-path: polygon(0 0, calc(100% - var(--dt-cut)) 0, 100% var(--dt-cut), 100% 100%, var(--dt-cut) 100%, 0 calc(100% - var(--dt-cut)));
    animation: dt-node-in 260ms var(--dt-ease) both;
}
@keyframes dt-node-in { from { opacity: 0; } }
html.detal .dt-node__scheme { padding: 18px 18px 6px; color: var(--dt-scheme); }
html.detal .dt-node__more { margin: 0; padding: 4px 20px 20px; }
html.detal .dt-node .dt-link { color: #ffffff; }

/* the drawing */
html.detal .dt-svg { display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke: var(--dt-scheme); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
html.detal .dt-svg .th { stroke-width: 1.2; }
html.detal .dt-svg .fill { fill: color-mix(in oklch, var(--dt-scheme) 32%, transparent); }
html.detal .dt-svg .dt-axis { stroke-width: 1; stroke-dasharray: 14 4 2 4; opacity: 0.55; }
html.detal .dt-part { cursor: pointer; transition: opacity 180ms var(--dt-ease); }
html.detal .dt-part__shape { transition: stroke 180ms var(--dt-ease); }
html.detal .dt-part__lead { stroke-width: 1; opacity: 0.7; }
html.detal .dt-part__badge { fill: var(--dt-shell); stroke: var(--dt-scheme); stroke-width: 1.5; transition: fill 180ms var(--dt-ease), stroke 180ms var(--dt-ease); }
html.detal .dt-part__num { fill: var(--dt-ink-dark); stroke: none; font-family: var(--dt-sans); font-size: 14px; font-weight: 700; font-stretch: 100%; pointer-events: none; }
html.detal .dt-part:hover .dt-part__shape { stroke: var(--dt-ink-dark); }

/* a part is picked (its row is open or hovered): the others drop to 40% */
html.detal .dt-node:has(.dt-pos__item[open]) .dt-part,
html.detal .dt-node:has(.dt-pos__item:hover) .dt-part { opacity: 0.4; }

/* the list of positions */
html.detal .dt-pos { margin: 0; padding: 0 18px 12px; list-style: none; counter-reset: none; }
html.detal .dt-pos__li { border-top: 1px solid var(--dt-line-dark); }
html.detal .dt-pos__sum {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 4px;
    align-items: center;
    min-height: 52px;
    padding: 9px 0;
    cursor: pointer;
    list-style: none;
    transition: background-color 150ms var(--dt-ease);
}
html.detal .dt-pos__sum::-webkit-details-marker { display: none; }
html.detal .dt-pos__sum:focus-visible { outline: 2px solid var(--dt-signal); outline-offset: 2px; }
html.detal .dt-pos__n {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    background: color-mix(in oklch, var(--dt-scheme) 30%, transparent);
    color: var(--dt-ink-dark);
    font-weight: 700;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
    transition: background-color 150ms var(--dt-ease), color 150ms var(--dt-ease);
}
html.detal .dt-pos__item[open] .dt-pos__n { background: var(--dt-signal); color: var(--dt-signal-ink); }
html.detal .dt-pos__label { font-weight: 600; font-stretch: 90%; line-height: 1.2; color: #ffffff; }
html.detal .dt-pos__label small { display: block; margin-top: 2px; font-weight: 400; color: var(--dt-muted-dark); font-size: var(--dt-step-small); }
html.detal .dt-pos__sum .dt-art { grid-column: 2; grid-row: 2; justify-self: start; }
html.detal .dt-pos__from { grid-column: 3; grid-row: 1; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: #ffffff; }
html.detal .dt-pos__body { padding: 4px 0 16px 40px; }
html.detal .dt-pos__empty { margin: 0; color: var(--dt-muted-dark); }

/* original and analogues */
html.detal .dt-offers { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
html.detal .dt-offer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "role eta" "main buy";
    gap: 6px 12px;
    align-items: end;
    padding: 12px 14px;
    background: color-mix(in oklch, var(--dt-shell) 70%, black);
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
html.detal .dt-offer__role { grid-area: role; }
html.detal .dt-offer__eta { grid-area: eta; text-align: right; }
html.detal .dt-offer__main { grid-area: main; align-self: start; }
html.detal .dt-offer__buy { grid-area: buy; flex-direction: column; align-items: flex-end; gap: 8px; }
html.detal .dt-offer--oem { background: color-mix(in oklch, var(--dt-shell) 55%, black); box-shadow: inset 3px 0 0 var(--dt-signal); }
html.detal .dt-offer__role { margin: 0; font-size: var(--dt-step-small); font-weight: 600; color: var(--dt-muted-dark); }
html.detal .dt-offer--oem .dt-offer__role { color: var(--dt-signal); }
html.detal .dt-offer__main { display: grid; gap: 4px; justify-items: start; }
html.detal .dt-offer__brand { margin: 0; font-size: var(--dt-step-small); color: var(--dt-muted-dark); }
html.detal .dt-offer__brand:empty { display: none; }
html.detal .dt-offer__title { color: #ffffff; font-weight: 600; font-stretch: 92%; line-height: 1.25; text-decoration: none; }
html.detal .dt-offer__title:hover { text-decoration: underline; text-decoration-color: var(--dt-signal); }
html.detal .dt-offer__eta { margin: 0; font-size: 0.875rem; color: var(--dt-ink-dark); }
html.detal .dt-offer__eta.is-out { color: var(--dt-muted-dark); }
html.detal .dt-offer__buy { display: flex; }
html.detal .dt-offer .shop-price { color: #ffffff; }
html.detal .dt-offer .shop-price__value, html.detal .dt-offer .shop-price__now { font-weight: 700; font-variant-numeric: tabular-nums; color: #ffffff; }
html.detal .dt-offer .shop-price__old { color: var(--dt-muted-dark); }
html.detal .dt-offer .shop-price__off { color: var(--dt-signal-ink); }

@media (min-width: 62rem) {
    html.detal .dt-hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    html.detal .dt-node { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
    html.detal .dt-node__scheme { padding: 22px 8px 22px 20px; align-self: center; }
    html.detal .dt-pos { padding: 10px 20px 12px 8px; }
    html.detal .dt-node__more { grid-column: 1 / -1; padding-top: 0; }
}
@media (min-width: 62rem) and (max-width: 80rem) {
    html.detal .dt-node { grid-template-columns: 1fr; }
}
@media (max-width: 36rem) {
    html.detal .dt-pos__body { padding-left: 0; }
    html.detal .dt-offer__buy { flex-wrap: wrap; }
}

/* -------------------------------------------------------------------------
   2. «Как устроен узел»
   ------------------------------------------------------------------------- */

html.detal .dt-explode { background: var(--dt-shell); color: var(--dt-ink-dark); padding-block: clamp(40px, 5vw, 96px); }
html.detal .dt-explode__grid { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
html.detal .dt-explode__title { margin: 0; font-size: var(--dt-step-head); }
html.detal .dt-explode__lead { margin: 14px 0 0; max-width: 46ch; color: var(--dt-muted-dark); font-size: var(--dt-step-lead); line-height: 1.4; }
html.detal .dt-parts { display: grid; gap: 16px; margin: 28px 0 0; padding: 0; list-style: none; }
html.detal .dt-parts__item { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; align-items: start; }
html.detal .dt-parts__title { margin: 2px 0 0; font-weight: 700; font-stretch: 90%; color: #ffffff; }
html.detal .dt-parts__text { margin: 4px 0 0; max-width: 52ch; color: var(--dt-muted-dark); font-size: 0.9375rem; line-height: 1.5; }
html.detal .dt-explode__actions { margin-top: 28px; }
html.detal .dt-explode__fig { color: var(--dt-scheme); padding: clamp(8px, 2vw, 24px); background: var(--dt-shell-2); clip-path: polygon(0 0, calc(100% - var(--dt-cut)) 0, 100% var(--dt-cut), 100% 100%, var(--dt-cut) 100%, 0 calc(100% - var(--dt-cut))); }
html.detal .dt-explode .dt-part { cursor: default; }
html.detal .dt-explode .dt-part__shape { stroke: var(--dt-ink-dark); opacity: 0.9; }

@media (min-width: 62rem) {
    html.detal .dt-explode__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* The parts spread along their axes once while the block enters the screen.
   Only where scroll-driven animation exists and motion is welcome. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        html[data-detal-explode="on"] .dt-explode .dt-part {
            animation: dt-fly linear both;
            animation-timeline: view();
            animation-range: entry 8% cover 42%;
        }
    }
}
@keyframes dt-fly {
    from { translate: calc((3.5 - var(--k)) * 24px) 0; opacity: 0.5; }
    to { translate: 0 0; opacity: 1; }
}

/* -------------------------------------------------------------------------
   3. Service plates
   ------------------------------------------------------------------------- */

html.detal .dt-svc { padding-block: clamp(40px, 5vw, 96px) 0; }
html.detal .dt-svc__head { max-width: 62ch; margin-bottom: 28px; }
html.detal .dt-svc__title { margin: 0; font-size: var(--dt-step-head); }
html.detal .dt-svc__lead { margin: 12px 0 0; color: var(--dt-muted); font-size: var(--dt-step-lead); line-height: 1.4; }
html.detal .dt-svc__list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
html.detal .dt-plate {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: clamp(20px, 2.4vw, 32px);
    background: var(--dt-shell);
    color: var(--dt-ink-dark);
    clip-path: polygon(0 0, calc(100% - var(--dt-cut)) 0, 100% var(--dt-cut), 100% 100%, var(--dt-cut) 100%, 0 calc(100% - var(--dt-cut)));
}
html.detal .dt-plate__title { margin: 0; font-size: 1.625rem; color: #ffffff; }
html.detal .dt-plate__text { margin: 0; color: var(--dt-muted-dark); max-width: 52ch; }
html.detal .dt-plate__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: auto 0 0; padding-top: 12px; }
html.detal .dt-plate__facts dt { font-size: var(--dt-step-small); color: var(--dt-muted-dark); }
html.detal .dt-plate__facts dd { margin: 2px 0 0; font-family: var(--dt-display); font-stretch: 75%; font-size: 1.625rem; font-weight: 700; color: #ffffff; line-height: 1.1; }
html.detal .dt-plate__link { color: var(--dt-signal); }

@media (min-width: 48rem) {
    html.detal .dt-svc__list { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}

/* -------------------------------------------------------------------------
   4. Rhythm of the home page
   ------------------------------------------------------------------------- */

html.detal[data-detal-density="compact"] { --dt-section: clamp(32px, 3vw + 16px, 64px); }
html.detal[data-detal-density="compact"] :is(.dt-explode, .dt-svc) { padding-block-start: clamp(28px, 3vw, 56px); }

/* -------------------------------------------------------------------------
   5. Generated: assembly tabs 1-6 and position-to-part pairs 1-9
   (CSS cannot join an attribute of one element to another's, so every
   number is spelled out; the tabs and the open row work without script)
   ------------------------------------------------------------------------- */

html.detal .dt-tab__input:checked + .dt-tab { background: var(--dt-signal); color: var(--dt-signal-ink); }
html.detal .dt-hero:has(.dt-tab__input:not([data-i="1"]):checked) :is(.dt-node[data-node="1"], .dt-hero__v[data-v="1"]) { display: none; }
html.detal .dt-hero:has(.dt-tab__input[data-i="2"]:checked) .dt-node[data-node="2"] { display: grid; }
html.detal .dt-hero:has(.dt-tab__input[data-i="2"]:checked) .dt-hero__v[data-v="2"] { display: block; }
html.detal .dt-hero:has(.dt-tab__input[data-i="3"]:checked) .dt-node[data-node="3"] { display: grid; }
html.detal .dt-hero:has(.dt-tab__input[data-i="3"]:checked) .dt-hero__v[data-v="3"] { display: block; }
html.detal .dt-hero:has(.dt-tab__input[data-i="4"]:checked) .dt-node[data-node="4"] { display: grid; }
html.detal .dt-hero:has(.dt-tab__input[data-i="4"]:checked) .dt-hero__v[data-v="4"] { display: block; }
html.detal .dt-hero:has(.dt-tab__input[data-i="5"]:checked) .dt-node[data-node="5"] { display: grid; }
html.detal .dt-hero:has(.dt-tab__input[data-i="5"]:checked) .dt-hero__v[data-v="5"] { display: block; }
html.detal .dt-hero:has(.dt-tab__input[data-i="6"]:checked) .dt-node[data-node="6"] { display: grid; }
html.detal .dt-hero:has(.dt-tab__input[data-i="6"]:checked) .dt-hero__v[data-v="6"] { display: block; }
html.detal .dt-node:has(.dt-pos__item[data-n="1"][open]) .dt-part[data-part="1"],
html.detal .dt-node:has(.dt-pos__item[data-n="1"]:hover) .dt-part[data-part="1"] { opacity: 1; }
html.detal .dt-node:has(.dt-pos__item[data-n="1"][open]) .dt-part[data-part="1"] .dt-part__shape,
html.detal .dt-node:has(.dt-pos__item[data-n="1"]:hover) .dt-part[data-part="1"] .dt-part__shape { stroke: var(--dt-signal); stroke-width: 2.2; }
html.detal .dt-node:has(.dt-pos__item[data-n="1"][open]) .dt-part[data-part="1"] .dt-part__badge,
html.detal .dt-node:has(.dt-pos__item[data-n="1"]:hover) .dt-part[data-part="1"] .dt-part__badge { fill: var(--dt-signal); stroke: var(--dt-signal); }
html.detal .dt-node:has(.dt-pos__item[data-n="1"][open]) .dt-part[data-part="1"] .dt-part__num,
html.detal .dt-node:has(.dt-pos__item[data-n="1"]:hover) .dt-part[data-part="1"] .dt-part__num { fill: var(--dt-signal-ink); }
html.detal .dt-node:has(.dt-pos__item[data-n="2"][open]) .dt-part[data-part="2"],
html.detal .dt-node:has(.dt-pos__item[data-n="2"]:hover) .dt-part[data-part="2"] { opacity: 1; }
html.detal .dt-node:has(.dt-pos__item[data-n="2"][open]) .dt-part[data-part="2"] .dt-part__shape,
html.detal .dt-node:has(.dt-pos__item[data-n="2"]:hover) .dt-part[data-part="2"] .dt-part__shape { stroke: var(--dt-signal); stroke-width: 2.2; }
html.detal .dt-node:has(.dt-pos__item[data-n="2"][open]) .dt-part[data-part="2"] .dt-part__badge,
html.detal .dt-node:has(.dt-pos__item[data-n="2"]:hover) .dt-part[data-part="2"] .dt-part__badge { fill: var(--dt-signal); stroke: var(--dt-signal); }
html.detal .dt-node:has(.dt-pos__item[data-n="2"][open]) .dt-part[data-part="2"] .dt-part__num,
html.detal .dt-node:has(.dt-pos__item[data-n="2"]:hover) .dt-part[data-part="2"] .dt-part__num { fill: var(--dt-signal-ink); }
html.detal .dt-node:has(.dt-pos__item[data-n="3"][open]) .dt-part[data-part="3"],
html.detal .dt-node:has(.dt-pos__item[data-n="3"]:hover) .dt-part[data-part="3"] { opacity: 1; }
html.detal .dt-node:has(.dt-pos__item[data-n="3"][open]) .dt-part[data-part="3"] .dt-part__shape,
html.detal .dt-node:has(.dt-pos__item[data-n="3"]:hover) .dt-part[data-part="3"] .dt-part__shape { stroke: var(--dt-signal); stroke-width: 2.2; }
html.detal .dt-node:has(.dt-pos__item[data-n="3"][open]) .dt-part[data-part="3"] .dt-part__badge,
html.detal .dt-node:has(.dt-pos__item[data-n="3"]:hover) .dt-part[data-part="3"] .dt-part__badge { fill: var(--dt-signal); stroke: var(--dt-signal); }
html.detal .dt-node:has(.dt-pos__item[data-n="3"][open]) .dt-part[data-part="3"] .dt-part__num,
html.detal .dt-node:has(.dt-pos__item[data-n="3"]:hover) .dt-part[data-part="3"] .dt-part__num { fill: var(--dt-signal-ink); }
html.detal .dt-node:has(.dt-pos__item[data-n="4"][open]) .dt-part[data-part="4"],
html.detal .dt-node:has(.dt-pos__item[data-n="4"]:hover) .dt-part[data-part="4"] { opacity: 1; }
html.detal .dt-node:has(.dt-pos__item[data-n="4"][open]) .dt-part[data-part="4"] .dt-part__shape,
html.detal .dt-node:has(.dt-pos__item[data-n="4"]:hover) .dt-part[data-part="4"] .dt-part__shape { stroke: var(--dt-signal); stroke-width: 2.2; }
html.detal .dt-node:has(.dt-pos__item[data-n="4"][open]) .dt-part[data-part="4"] .dt-part__badge,
html.detal .dt-node:has(.dt-pos__item[data-n="4"]:hover) .dt-part[data-part="4"] .dt-part__badge { fill: var(--dt-signal); stroke: var(--dt-signal); }
html.detal .dt-node:has(.dt-pos__item[data-n="4"][open]) .dt-part[data-part="4"] .dt-part__num,
html.detal .dt-node:has(.dt-pos__item[data-n="4"]:hover) .dt-part[data-part="4"] .dt-part__num { fill: var(--dt-signal-ink); }
html.detal .dt-node:has(.dt-pos__item[data-n="5"][open]) .dt-part[data-part="5"],
html.detal .dt-node:has(.dt-pos__item[data-n="5"]:hover) .dt-part[data-part="5"] { opacity: 1; }
html.detal .dt-node:has(.dt-pos__item[data-n="5"][open]) .dt-part[data-part="5"] .dt-part__shape,
html.detal .dt-node:has(.dt-pos__item[data-n="5"]:hover) .dt-part[data-part="5"] .dt-part__shape { stroke: var(--dt-signal); stroke-width: 2.2; }
html.detal .dt-node:has(.dt-pos__item[data-n="5"][open]) .dt-part[data-part="5"] .dt-part__badge,
html.detal .dt-node:has(.dt-pos__item[data-n="5"]:hover) .dt-part[data-part="5"] .dt-part__badge { fill: var(--dt-signal); stroke: var(--dt-signal); }
html.detal .dt-node:has(.dt-pos__item[data-n="5"][open]) .dt-part[data-part="5"] .dt-part__num,
html.detal .dt-node:has(.dt-pos__item[data-n="5"]:hover) .dt-part[data-part="5"] .dt-part__num { fill: var(--dt-signal-ink); }
html.detal .dt-node:has(.dt-pos__item[data-n="6"][open]) .dt-part[data-part="6"],
html.detal .dt-node:has(.dt-pos__item[data-n="6"]:hover) .dt-part[data-part="6"] { opacity: 1; }
html.detal .dt-node:has(.dt-pos__item[data-n="6"][open]) .dt-part[data-part="6"] .dt-part__shape,
html.detal .dt-node:has(.dt-pos__item[data-n="6"]:hover) .dt-part[data-part="6"] .dt-part__shape { stroke: var(--dt-signal); stroke-width: 2.2; }
html.detal .dt-node:has(.dt-pos__item[data-n="6"][open]) .dt-part[data-part="6"] .dt-part__badge,
html.detal .dt-node:has(.dt-pos__item[data-n="6"]:hover) .dt-part[data-part="6"] .dt-part__badge { fill: var(--dt-signal); stroke: var(--dt-signal); }
html.detal .dt-node:has(.dt-pos__item[data-n="6"][open]) .dt-part[data-part="6"] .dt-part__num,
html.detal .dt-node:has(.dt-pos__item[data-n="6"]:hover) .dt-part[data-part="6"] .dt-part__num { fill: var(--dt-signal-ink); }
html.detal .dt-node:has(.dt-pos__item[data-n="7"][open]) .dt-part[data-part="7"],
html.detal .dt-node:has(.dt-pos__item[data-n="7"]:hover) .dt-part[data-part="7"] { opacity: 1; }
html.detal .dt-node:has(.dt-pos__item[data-n="7"][open]) .dt-part[data-part="7"] .dt-part__shape,
html.detal .dt-node:has(.dt-pos__item[data-n="7"]:hover) .dt-part[data-part="7"] .dt-part__shape { stroke: var(--dt-signal); stroke-width: 2.2; }
html.detal .dt-node:has(.dt-pos__item[data-n="7"][open]) .dt-part[data-part="7"] .dt-part__badge,
html.detal .dt-node:has(.dt-pos__item[data-n="7"]:hover) .dt-part[data-part="7"] .dt-part__badge { fill: var(--dt-signal); stroke: var(--dt-signal); }
html.detal .dt-node:has(.dt-pos__item[data-n="7"][open]) .dt-part[data-part="7"] .dt-part__num,
html.detal .dt-node:has(.dt-pos__item[data-n="7"]:hover) .dt-part[data-part="7"] .dt-part__num { fill: var(--dt-signal-ink); }
html.detal .dt-node:has(.dt-pos__item[data-n="8"][open]) .dt-part[data-part="8"],
html.detal .dt-node:has(.dt-pos__item[data-n="8"]:hover) .dt-part[data-part="8"] { opacity: 1; }
html.detal .dt-node:has(.dt-pos__item[data-n="8"][open]) .dt-part[data-part="8"] .dt-part__shape,
html.detal .dt-node:has(.dt-pos__item[data-n="8"]:hover) .dt-part[data-part="8"] .dt-part__shape { stroke: var(--dt-signal); stroke-width: 2.2; }
html.detal .dt-node:has(.dt-pos__item[data-n="8"][open]) .dt-part[data-part="8"] .dt-part__badge,
html.detal .dt-node:has(.dt-pos__item[data-n="8"]:hover) .dt-part[data-part="8"] .dt-part__badge { fill: var(--dt-signal); stroke: var(--dt-signal); }
html.detal .dt-node:has(.dt-pos__item[data-n="8"][open]) .dt-part[data-part="8"] .dt-part__num,
html.detal .dt-node:has(.dt-pos__item[data-n="8"]:hover) .dt-part[data-part="8"] .dt-part__num { fill: var(--dt-signal-ink); }
html.detal .dt-node:has(.dt-pos__item[data-n="9"][open]) .dt-part[data-part="9"],
html.detal .dt-node:has(.dt-pos__item[data-n="9"]:hover) .dt-part[data-part="9"] { opacity: 1; }
html.detal .dt-node:has(.dt-pos__item[data-n="9"][open]) .dt-part[data-part="9"] .dt-part__shape,
html.detal .dt-node:has(.dt-pos__item[data-n="9"]:hover) .dt-part[data-part="9"] .dt-part__shape { stroke: var(--dt-signal); stroke-width: 2.2; }
html.detal .dt-node:has(.dt-pos__item[data-n="9"][open]) .dt-part[data-part="9"] .dt-part__badge,
html.detal .dt-node:has(.dt-pos__item[data-n="9"]:hover) .dt-part[data-part="9"] .dt-part__badge { fill: var(--dt-signal); stroke: var(--dt-signal); }
html.detal .dt-node:has(.dt-pos__item[data-n="9"][open]) .dt-part[data-part="9"] .dt-part__num,
html.detal .dt-node:has(.dt-pos__item[data-n="9"]:hover) .dt-part[data-part="9"] .dt-part__num { fill: var(--dt-signal-ink); }