html.pin .gr { --d: 0; --b: 0; }
.scene .obj-img { image-rendering: auto; }

.scene .ui-bar { fill: #1B222C; }
.scene .ui-side { fill: #151B23; }
.scene .ui-tool { fill: #2B3442; }
.scene .ui-gut { fill: none; stroke: #2B3442; stroke-width: 1; }
.scene .lay-st { fill: none; stroke: #6B7482; stroke-width: .8; stroke-linejoin: round; }
.scene .lay-pad { fill: #B08A36; }

.scene .lay-tr { fill: none; stroke: #8C6C26; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.scene .lay-tra { fill: none; stroke: var(--act-light); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2;
  stroke-dashoffset: calc(1 - clamp(0, calc((var(--d, 1) - var(--i)) * 2.4), 1)); opacity: 0; }
.gr.cur .lay-tra, .all .lay-tra { opacity: clamp(0, calc((var(--d, 1) - var(--i)) * 60), 1); }
.gr[data-gr="1"] .bd { opacity: var(--b, 1); transform: translateY(calc((1 - var(--b, 1)) * 12px)); }

.scene .code-b { fill: none; stroke: #2B3442; stroke-width: 3; stroke-linecap: round; }
.scene .code-l { fill: none; stroke: #566278; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 2;
  stroke-dashoffset: calc(1 - clamp(0, calc((var(--w, 1) - var(--a)) * 14), 1)); opacity: clamp(0, calc((var(--w, 1) - var(--a)) * 200), 1); }
.gr.cur .code-l, .all .code-l { stroke: var(--act-light); }
.scene .usb-o { fill: none; stroke: #0E0F11; stroke-width: 5.4; stroke-linecap: round; stroke-linejoin: round; }
.scene .usb { fill: none; stroke: #2E3238; stroke-width: 3.8; stroke-linecap: round; stroke-linejoin: round; }
.scene .usb-h { fill: none; stroke: #4F5661; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.scene .rib { fill: #AEB4BD; }
.scene .rib-v { fill: #8F96A0; }
.scene .rib-r { fill: none; stroke: #7F8691; stroke-width: .45; }
.scene .rib-red { fill: none; stroke: #A33A32; stroke-width: 1.4; stroke-linejoin: round; }
.scene .rib-o { fill: none; stroke: #16181B; stroke-width: .8; stroke-linejoin: round; }
.scene .pz { fill: none; stroke: var(--act-light); stroke-width: calc(2.6px * var(--sw)); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: .3 2;
  stroke-dashoffset: calc(.3 - clamp(0, calc((var(--w, 1) - var(--s)) * var(--k)), 1) * 1.3); }
.scene .pz-w { stroke-width: calc(3.4px * var(--sw)); }
.scene .pled { fill: var(--act-light); opacity: calc(clamp(0, calc((var(--w, 1) - .3) * 20), 1) * clamp(0, calc((.93 - var(--w, 1)) * 20), 1)); }
.scene .cell { fill: #3A3E45; opacity: var(--r, 1); }
.scene .cell-lit { fill: #566278; opacity: clamp(0, calc((var(--w, 1) - .72 - var(--c) * .014) * 33), 1); }
.gr.cur .cell-lit, .all .cell-lit { fill: var(--act-light); }
.scene .led-glow { fill: url(#led-glow); }
.scene .led-top { fill: var(--act-light); }
.scene .led-o { opacity: clamp(0, calc((var(--w, 1) - .96) * 40), 1); }
.story.live .gr.cur .led-b { animation: led-blink-o 1.1s steps(2, end) infinite; }
@keyframes led-blink-o { 50% { opacity: 0; } }
.gr[data-gr="2"] .plug { opacity: var(--r, 1); }

.scene .m-lamp-r { stroke: none; }
.scene .machine.q2 .m-lamp-r { stroke: var(--act-light); }
.scene .m-door { transition: transform .15s ease-out; }
.scene .machine.q3 .m-door { transform: translateY(calc(-1 * var(--lift))); }
.scene .m-guide path { transition: fill .15s ease; }
.scene .machine.q3 .m-guide path { fill: var(--act-light); }
.scene .bf-r, .scene .bf-l, .scene .bf-t { stroke: #16181B; stroke-width: .8; stroke-linejoin: round; }
.scene .bf-r { fill: #86653F; } .scene .bf-l { fill: #A57E52; } .scene .bf-t { fill: #C79D6B; } .scene .bf-tp { fill: #D9BC8E; }
.scene .ladder .lad-bg { fill: #0F1318; }

html.pin .cam { --r8: 0; }
.scene .p8 { opacity: var(--r8, 1); }
.scene .ai-trk { fill: none; stroke: #2B3442; stroke-width: 3; }
.scene .ai-arc { fill: none; stroke: var(--act-light); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: 1; opacity: 0; }
.scene .ai-unit.insp .ai-arc { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset .8s linear; }
.scene .ai-txt { fill: #E8EBEE; font: 600 12px var(--f-mono); letter-spacing: .02em; text-anchor: middle; }
.scene .ai-ok, .scene .ai-ng { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.scene .ai-ok { stroke: var(--act-light); } .scene .ai-ng { stroke: #E8EBEE; }
.scene .ai-unit.insp.ok .ai-ok, .scene .ai-unit.insp.ng .ai-ng { opacity: 1; transition: opacity .15s .8s; }
.scene .ai-unit.insp.ok .ai-txt, .scene .ai-unit.insp.ng .ai-txt { opacity: 0; transition: opacity .1s .8s; }
.scene .machine.push .m-plate { animation: plate-out 1s ease-in-out forwards; }
.scene .machine.pushback .m-plate { animation: plate-in .45s ease-in-out forwards; }
.scene .box.pushed .bx-in { animation: box-out 1s ease-in-out forwards; }

.scene .tl-ok, .scene .tl-ng { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scene .tl-ok { stroke: var(--act-light); } .scene .tl-ng { stroke: #C9CED6; }
.scene .tl-bar { fill: #566278; }

html.pin .grl { --l: 0; }
.grl.cur .ln { stroke: var(--act-light); }

.f-err { margin: 0; font-size: 13.5px; color: #A5342B; }
.field input[aria-invalid="true"] { border-color: #A5342B; }
.direct dd a, .foot-cols li > a[href^="tel:"] { color: inherit; }
.foot-kunye { grid-column: span 2; display: grid; gap: 6px; align-content: start; }
.foot-kunye p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--d-ink-2); }

.story-frame { background: none; box-shadow: none; }
.scene .canvas-dots { display: none; }
html.pin { --step-h: clamp(460px, 72svh, 720px); }
html.pin .story-pane { display: block; overflow: clip; }
html.pin .story-grid { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(8px, 1.6svh, 16px) clamp(14px, 2vw, 28px); padding-top: clamp(12px, 3svh, 32px); padding-bottom: clamp(8px, 2svh, 20px); }
html.pin .story-text { display: contents; }
html.pin .story-steps { grid-column: 1; grid-row: 1; position: relative; z-index: 2; }
html.pin .story-frame { grid-column: 1; grid-row: 2; z-index: 1; width: 100%; height: 100%; max-width: none; min-height: 0; justify-self: stretch; }
html.pin .scene { width: 100%; height: 100%; aspect-ratio: auto; }
html.pin .story-gauge { grid-column: 2; grid-row: 1 / -1; align-self: center; }
html.pin .step p { max-width: 62ch; }

html.pin .step { position: relative; align-self: start; justify-self: start; width: fit-content; max-width: 100%; }

html.pin .scene {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(180deg, transparent var(--mt, 0px), #000 calc(var(--mt, 0px) + var(--mf, 7%)), #000 calc(100% - var(--mf, 7%)), transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(180deg, transparent var(--mt, 0px), #000 calc(var(--mt, 0px) + var(--mf, 7%)), #000 calc(100% - var(--mf, 7%)), transparent); mask-composite: intersect; }

@media (max-width: 959px) and (max-height: 520px) {
  html.pin .step { gap: 4px; }
  html.pin .step h3 { font-size: 19px; }
  html.pin .step p { font-size: 14px; line-height: 1.4; max-width: none; }
  html.pin .story-gauge { grid-row: 1 / -1; }
  html.pin .story-frame { grid-column: 1; }
}

html.pin .story-gauge { flex-direction: column; gap: 10px; margin: 0; }
html.pin .gauge-rail { flex: none; flex-direction: column; max-width: none; gap: clamp(0px, .8svh, 8px); }
html.pin .gauge-rail::before, html.pin .gauge-lit { left: 13px; right: auto; top: 14px; bottom: 14px; width: 2px; height: auto; }
html.pin .gauge-lit { transform-origin: 50% 0; transform: scaleY(var(--p, 0)); }
html.pin .gauge-n { text-align: center; }
@media (max-height: 520px) { html.pin .gauge-rail { gap: 0; } html.pin .gauge-rail a { width: 24px; height: 24px; } html.pin .gauge-rail::before, html.pin .gauge-lit { left: 11px; top: 12px; bottom: 12px; } }

@media (max-width: 767px) and (min-height: 521px) {
  html.pin .story-grid { position: relative; grid-template-columns: minmax(0, 1fr); padding-bottom: 0; }
  html.pin .story-frame { grid-column: 1; grid-row: 1 / -1; width: calc(100% + 2 * var(--gut)); margin: calc(-1 * clamp(12px, 3svh, 32px)) calc(-1 * var(--gut)) 0; height: calc(100% + clamp(12px, 3svh, 32px)); }
  html.pin .story-gauge { position: absolute; z-index: 3; right: 0; top: 50%; width: var(--gut); transform: translateY(-50%); }
  html.pin .gauge-n { display: none; }
  html.pin .gauge-rail { gap: 0; }
  html.pin .gauge-rail a { width: 24px; height: 24px; }
  html.pin .gauge-rail a span { width: 8px; height: 8px; }
  html.pin .gauge-rail::before, html.pin .gauge-lit { left: 11px; top: 12px; bottom: 12px; }
}

.kv { padding: calc(var(--header-h) + clamp(40px, 6vw, 80px)) 0 clamp(64px, 8vw, 112px); }
.kv-in { max-width: 68ch; }
.kv h1 { font-size: clamp(28px, 1.1rem + 1.6vw, 40px); line-height: 1.15; }
.kv h2 { font-size: clamp(19px, 1rem + .35vw, 22px); line-height: 1.3; margin: 44px 0 12px; }
.kv p, .kv li { color: var(--d-ink-2); }
.kv p + p, .kv ol + p, .kv p + ol { margin-top: 14px; }
.kv .kv-date { margin: 12px 0 32px; font: 400 14px/1.5 var(--f-mono); }
.kv-list { display: grid; gap: 8px; }
.kv-list li { padding-left: 1.6em; text-indent: -1.6em; }
.kv .mark { -webkit-box-decoration-break: clone; box-decoration-break: clone; }

@keyframes plate-out{0%{transform:none}25%{transform:translate(-28.62px,17.17px)}85%,100%{transform:translate(-98.39px,59.03px)}}@keyframes plate-in{0%{transform:translate(-98.39px,59.03px)}100%{transform:none}}@keyframes box-out{0%,25%{transform:none;opacity:1}85%{transform:translate(-69.78px,41.87px);opacity:1}100%{transform:translate(-69.78px,59.87px);opacity:0}}
[data-st="0"] { --steps:9 }
[data-st="1"] { --i:0.00 }
[data-st="2"] { --i:0.07 }
[data-st="3"] { --i:0.14 }
[data-st="4"] { --i:0.21 }
[data-st="5"] { --i:0.28 }
[data-st="6"] { --i:0.35 }
[data-st="7"] { --i:0.42 }
[data-st="8"] { --a:0.000 }
[data-st="9"] { --a:0.045 }
[data-st="10"] { --a:0.090 }
[data-st="11"] { --a:0.135 }
[data-st="12"] { --a:0.180 }
[data-st="13"] { --a:0.225 }
[data-st="14"] { --a:0.270 }
[data-st="15"] { --a:0.315 }
[data-st="16"] { --s:.30;--k:5.5 }
[data-st="17"] { --s:.46;--k:6 }
[data-st="18"] { --s:.62;--k:9 }
[data-st="19"] { --c:0 }
[data-st="20"] { --c:1 }
[data-st="21"] { --c:2 }
[data-st="22"] { --c:3 }
[data-st="23"] { --c:4 }
[data-st="24"] { --c:5 }
[data-st="25"] { --c:6 }
[data-st="26"] { --c:7 }
[data-st="27"] { --c:8 }
[data-st="28"] { --c:9 }
[data-st="29"] { --c:10 }
[data-st="30"] { --c:11 }
[data-st="31"] { --c:12 }
[data-st="32"] { --c:13 }
[data-st="33"] { --c:14 }
[data-st="34"] { --c:15 }
[data-st="35"] { --lift:72px }