/* Isolated controls and CSS 3D concept geometry for the industrial website. */
#industrial-model { --ind-orange: #f18310; --ind-text: #e5eaec; --ind-muted: #a3afb7; --ind-line: #46535d; color: var(--ind-text); }
.ind-console { position: relative; display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(290px, 1fr); border: 1px solid #4b565d; background: #101519; color: var(--ind-text); isolation: isolate; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif; }
.ind-console *, .ind-console *::before, .ind-console *::after { box-sizing: border-box; }
.ind-console::before, .ind-console::after { position: absolute; content: ''; width: 8px; height: 8px; border: 1px solid #697a85; background: linear-gradient(45deg, #1f2a33 43%, #a6b2ba 46%, #a6b2ba 53%, #1f2a33 56%); z-index: 2; pointer-events: none; }
.ind-console::before { left: 8px; top: 8px; }
.ind-console::after { right: 8px; bottom: 8px; }
.ind-viewport { position: relative; min-width: 0; min-height: 520px; overflow: hidden; container-type: inline-size; background: radial-gradient(ellipse at 52% 30%, #29394659, transparent 65%), radial-gradient(ellipse at 48% 79%, #ee82100d, transparent 46%), linear-gradient(145deg, #121a20, #090e12); }
.ind-viewport::before { content: ''; position: absolute; inset: 12px; border: 1px solid #b3c7d309; pointer-events: none; }
.ind-view-header, .ind-view-footer { position: absolute; left: 26px; right: 26px; display: flex; align-items: center; justify-content: space-between; gap: 20px; pointer-events: none; }
.ind-view-header { top: 25px; z-index: 1; }
.ind-view-tag { font: 500 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .1em; color: #a4b9c8; }
.ind-motion-status { font-size: 13px; color: var(--ind-muted); }
.ind-motion-status::before { content: ''; display: inline-block; width: 5px; height: 5px; background: #e1a55e; margin-right: 8px; vertical-align: 2px; }
.ind-view-footer { bottom: 22px; gap: 8px; align-items: flex-end; }
.ind-view-footer p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ind-muted); }
.ind-angle { font: 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; color: #879cac; white-space: nowrap; }
.ind-model-view { position: absolute; inset: 56px 0 52px; perspective: 1450px; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ind-model-view:focus-visible { outline: 2px solid var(--ind-orange); outline-offset: -7px; }
.ind-is-dragging .ind-model-view { cursor: grabbing; }
.ind-scale { position: absolute; left: 50%; top: 56%; width: 380px; height: 270px; margin: -135px 0 0 -190px; transform: scale(1.13); transform-style: preserve-3d; }
.ind-idle, .ind-orientation { position: absolute; inset: 0; transform-style: preserve-3d; }
.ind-idle { animation: ind-orbit 18s ease-in-out infinite; }
.ind-console[data-ind-running="false"] .ind-idle { animation-play-state: paused; }
.ind-orientation { transform: rotateX(56deg) rotateZ(-32deg); }
.ind-ground { position: absolute; left: -60px; top: -60px; width: 500px; height: 390px; transform: translateZ(-131px); opacity: .55; }
.ind-plate { position: absolute; inset: 0; width: 380px; height: 270px; transform-style: preserve-3d; transition: transform 850ms cubic-bezier(.22,.8,.22,1), opacity 600ms ease; }
.ind-face { position: absolute; backface-visibility: hidden; transition: opacity 600ms ease; }
.ind-face--front, .ind-face--back { width: 380px; height: 270px; background: repeating-linear-gradient(107deg, #edf5fa08 0, #edf5fa08 .7px, transparent .7px, transparent 2px), linear-gradient(135deg, #c6d0d4, #768691 23%, #b8c5c9 49%, #5d7280 76%, #a5b4bc); }
.ind-face--front { transform: translateZ(16px); }
.ind-face--back { transform: rotateY(180deg) translateZ(16px); background: linear-gradient(120deg, #89969d, #465d6c 30%, #657988 60%, #293d49); border: 1px solid #a2b1bb; }
.ind-face-art { display: block; width: 380px; height: 270px; }
.ind-face--left, .ind-face--right { width: 32px; height: 270px; left: 174px; background: repeating-linear-gradient(0deg, transparent 0, transparent 2px, #15243255 2px, #15243255 3px), linear-gradient(90deg, #bdcad0, #5b6e7b 13%, #233a49 50%, #8ba1ad); border: 1px solid #d3e4ec55; }
.ind-face--left { transform: rotateY(-90deg) translateZ(190px); }
.ind-face--right { transform: rotateY(90deg) translateZ(190px); }
.ind-face--top, .ind-face--bottom { width: 380px; height: 32px; top: 119px; background: repeating-linear-gradient(90deg, transparent 0, transparent 2px, #1629393d 2px, #1629393d 3px), linear-gradient(0deg, #c1cbd0, #6d7f8b 15%, #354b5c 65%, #8295a4); border: 1px solid #d2e1e961; }
.ind-face--top { transform: rotateX(90deg) translateZ(135px); }
.ind-face--bottom { transform: rotateX(-90deg) translateZ(135px); }
.ind-face--left::after, .ind-face--right::after { content: ''; position: absolute; left: 10px; top: 108px; width: 12px; height: 48px; border: 2px solid #92a6b266; background: #20333f; box-shadow: inset 2px 0 0 #111f29; }
.ind-plate--base .ind-face--front { background: repeating-linear-gradient(107deg, #e1eef507 0, #e1eef507 .7px, transparent .7px, transparent 2px), linear-gradient(135deg, #81909d, #4d6170 25%, #98a8b2 55%, #405866); }
.ind-wire { position: absolute; inset: 0; width: 380px; height: 270px; transform: translateZ(16.5px); color: #aec5d8; opacity: 0; transition: opacity 600ms ease; }
.ind-part { position: absolute; left: 90px; top: 66px; width: 200px; height: 140px; transform-style: preserve-3d; transition: transform 850ms cubic-bezier(.22,.8,.22,1), opacity 600ms ease; }
.ind-part-slice { position: absolute; inset: 0; }
.ind-part-slice svg { display: block; width: 200px; height: 140px; }
.ind-part-slice--back { transform: translateZ(-5px); }
.ind-part-slice--middle { transform: translateZ(-2px); }
.ind-part-slice--front { transform: translateZ(1px); }
.ind-rod { position: absolute; width: 18px; height: 18px; transform: translateZ(28px); transform-style: preserve-3d; transition: opacity 600ms ease; }
.ind-rod--a { left: 25px; top: 25px; }
.ind-rod--b { right: 25px; top: 25px; }
.ind-rod--c { left: 25px; bottom: 25px; }
.ind-rod--d { right: 25px; bottom: 25px; }
.ind-rod-skin { position: absolute; width: 4.83px; height: 268px; left: 6.585px; top: -125px; background: linear-gradient(#a6b7c0, #c0cdd3 20%, #8b9eac 70%, #485e6f); backface-visibility: hidden; }
.ind-rod-skin--0 { transform: rotateZ(0deg) translateY(9px) rotateX(-90deg); }
.ind-rod-skin--1 { transform: rotateZ(30deg) translateY(9px) rotateX(-90deg); background: #d3e0e4; }
.ind-rod-skin--2 { transform: rotateZ(60deg) translateY(9px) rotateX(-90deg); background: #e6eef0; }
.ind-rod-skin--3 { transform: rotateZ(90deg) translateY(9px) rotateX(-90deg); background: #b4c5cf; }
.ind-rod-skin--4 { transform: rotateZ(120deg) translateY(9px) rotateX(-90deg); background: #879caa; }
.ind-rod-skin--5 { transform: rotateZ(150deg) translateY(9px) rotateX(-90deg); background: #617b8e; }
.ind-rod-skin--6 { transform: rotateZ(180deg) translateY(9px) rotateX(-90deg); background: #415a6c; }
.ind-rod-skin--7 { transform: rotateZ(210deg) translateY(9px) rotateX(-90deg); background: #314858; }
.ind-rod-skin--8 { transform: rotateZ(240deg) translateY(9px) rotateX(-90deg); background: #536c7e; }
.ind-rod-skin--9 { transform: rotateZ(270deg) translateY(9px) rotateX(-90deg); background: #617c8d; }
.ind-rod-skin--10 { transform: rotateZ(300deg) translateY(9px) rotateX(-90deg); background: #79909e; }
.ind-rod-skin--11 { transform: rotateZ(330deg) translateY(9px) rotateX(-90deg); background: #a8bac4; }
.ind-rod-cap { position: absolute; width: 19px; height: 19px; left: -.5px; top: -.5px; border-radius: 50%; background: radial-gradient(circle, #293e4a 0 15%, #d6e0e6 19% 25%, #849cae 32%, #ccd7df 65%, #6c8698 69%); border: 1px solid #d5e1e5; }
.ind-rod-cap--top { transform: translateZ(134px); }
.ind-rod-cap--bottom { transform: translateZ(-134px); }
.ind-rod-collar { position: absolute; inset: -5px; border: 5px solid #8da2b0; border-radius: 50%; background: #536d7d; transform: translateZ(-108px); box-shadow: 0 0 0 1px #d2e0e8; }
.ind-dimension { position: absolute; left: -25px; top: -40px; width: 430px; height: 310px; color: #adc1d0; transform: translateZ(25px); opacity: .25; transition: opacity 600ms ease; }
.ind-dimension text { fill: currentColor; font: 8px ui-monospace, SFMono-Regular, Consolas, monospace; }
.ind-axis { position: absolute; bottom: 62px; left: 25px; width: 53px; height: 53px; pointer-events: none; }
.ind-axis svg { display: block; width: 100%; height: 100%; }
.ind-axis text { fill: #aebdca; font: 10px ui-monospace, SFMono-Regular, Consolas, monospace; }
.ind-console[data-ind-stage="design"] .ind-face { opacity: .14; }
.ind-console[data-ind-stage="design"] .ind-wire { opacity: .9; }
.ind-console[data-ind-stage="design"] .ind-rod { opacity: .25; }
.ind-console[data-ind-stage="design"] .ind-part { opacity: .6; }
.ind-console[data-ind-stage="design"] .ind-dimension { opacity: .95; }
.ind-console[data-ind-stage="production"] .ind-rod { opacity: .38; }
.ind-controls { position: relative; min-width: 0; padding: 28px; border-left: 1px solid #46515b; background: linear-gradient(110deg, #1b2228, #141a20); }
.ind-control-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.ind-control-kicker { font: 13px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .1em; color: #a6bac9; }
.ind-control-led { height: 6px; width: 6px; background: var(--ind-orange); box-shadow: 0 0 0 4px #f1831014; }
.ind-stage-selector { display: grid; grid-template-columns: 1fr; border-top: 1px solid #43515e; }
.ind-console button { appearance: none; color: inherit; font: inherit; border-radius: 0; cursor: pointer; }
.ind-console button:focus-visible, .ind-console input:focus-visible, .ind-console a:focus-visible { outline: 2px solid var(--ind-orange); outline-offset: 4px; }
.ind-stage { display: flex; align-items: center; width: 100%; gap: 14px; min-height: 47px; padding: 10px 12px; border: 0; border-bottom: 1px solid #43515e; background: transparent; text-align: left; font-size: 15px !important; }
.ind-stage > span { color: #91a3b2; font: 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
.ind-stage > svg { width: 18px; height: 18px; margin-left: auto; stroke: currentColor; stroke-width: 1; fill: none; }
.ind-stage:hover { background: #91adc415; }
.ind-stage[aria-pressed="true"] { background: var(--ind-orange); color: #101315; font-weight: 650; }
.ind-stage[aria-pressed="true"] > span { color: #3d291a; }
.ind-stage-copy { min-height: 106px; padding: 18px 0 14px; }
.ind-stage-title { margin: 0 0 8px !important; color: #e9eef0 !important; font-size: 17px !important; line-height: 1.5 !important; letter-spacing: 0 !important; }
.ind-stage-body { margin: 0 !important; color: #a9b5be; font-size: 16px !important; line-height: 1.65 !important; }
.ind-slider-group { padding: 10px 0 17px; }
.ind-slider-label { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.ind-slider-label label { font-size: 14px; font-weight: 550; }
.ind-slider-label output { color: var(--ind-orange); font: 19px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
.ind-console input[type="range"] { appearance: none; -webkit-appearance: none; width: 100%; height: 44px; margin: 0; padding: 0; border: 0; background: transparent; cursor: ew-resize; accent-color: var(--ind-orange); touch-action: pan-y; }
.ind-console input[type="range"]::-webkit-slider-runnable-track { height: 3px; background: #778894; border: 0; }
.ind-console input[type="range"]::-moz-range-track { height: 3px; background: #778894; border: 0; }
.ind-console input[type="range"]::-webkit-slider-thumb { appearance: none; width: 16px; height: 25px; margin-top: -11px; border: 1px solid #ffd9ad; border-radius: 0; background: var(--ind-orange); box-shadow: 0 0 0 4px #f1831010; }
.ind-console input[type="range"]::-moz-range-thumb { width: 16px; height: 25px; border: 1px solid #ffd9ad; border-radius: 0; background: var(--ind-orange); box-shadow: 0 0 0 4px #f1831010; }
.ind-range-scale { display: flex; justify-content: space-between; margin-top: -1px; font-size: 13px; line-height: 1.4; color: #9cacb8; }
.ind-view-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ind-view-actions button { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 8px 6px; border: 1px solid #647581; background: #293640; font-size: 13px; line-height: 1.4; }
.ind-view-actions button:hover { border-color: #c6d4dd; background: #354650; }
.ind-view-actions button[aria-pressed="true"] { color: #f8b86f; border-color: #bb8248; }
.ind-view-actions button:disabled { cursor: default; color: #aebbc4; border-color: #61727f; background: #25313a; }
.ind-view-actions button > span { font-size: 20px; line-height: 1; }
.ind-project-next { margin-top: 22px; }
.ind-inquiry-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 12px 14px; border: 1px solid var(--ind-orange); background: var(--ind-orange); color: #101315; text-decoration: none; font-size: 15px; font-weight: 650; line-height: 1.5; }
.ind-inquiry-link:hover { background: #ffac45; border-color: #ffac45; color: #101315; }
.ind-inquiry-link > span:last-child { flex: 0 0 auto; font-size: 20px; line-height: 1; }
.ind-inquiry-hint { margin: 9px 0 0 !important; color: #a9b5be; font-size: 13px !important; line-height: 1.65 !important; }
.ind-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; padding-top: 22px; font-size: 13px; line-height: 1.5; color: #a8b5be; }
.ind-legend span { display: inline-flex; align-items: center; gap: 7px; }
.ind-legend i { display: inline-block; width: 8px; height: 8px; }
.ind-legend-steel { background: #a0b3bf; }
.ind-legend-polymer { background: var(--ind-orange); }
.ind-model-disclaimer { margin: 10px 0 0 !important; font-size: 13px !important; line-height: 1.6 !important; color: #91a2ae; }
.ind-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%); white-space: nowrap; border: 0 !important; }
.ind-direct-manipulation .ind-plate, .ind-direct-manipulation .ind-part { transition-duration: 0s; }
@keyframes ind-orbit { 0%, 100% { transform: rotateY(-5deg) translateY(1px); } 50% { transform: rotateY(5deg) translateY(-4px); } }
@container (max-width: 700px) { .ind-scale { transform: scale(1); } }
@container (max-width: 570px) { .ind-scale { transform: scale(.9); } .ind-angle { display: none; } }
@container (max-width: 450px) { .ind-scale { transform: scale(.72); } .ind-view-header { left: 18px; right: 18px; } }
@container (max-width: 360px) { .ind-scale { transform: scale(.62); } }
@container (max-width: 305px) { .ind-scale { transform: scale(.54); } }
@media (max-width: 850px) {
  .ind-console { grid-template-columns: 1fr; }
  .ind-viewport { min-height: 480px; }
  .ind-controls { padding: 24px; border-left: 0; border-top: 1px solid #46515b; }
  .ind-stage-selector { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ind-stage { gap: 8px; padding: 10px; border-right: 1px solid #43515e; }
  .ind-stage > svg { display: none; }
  .ind-stage:last-child { border-right: 0; }
  .ind-stage-copy { min-height: 95px; }
  .ind-view-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .ind-viewport { min-height: 360px; }
  .ind-model-view { inset: 45px 0 43px; }
  .ind-view-header { top: 20px; }
  .ind-view-tag { font-size: 10px; letter-spacing: .05em; }
  .ind-motion-status { font-size: 13px; }
  .ind-view-footer { bottom: 16px; left: 18px; right: 18px; }
  .ind-view-footer p { font-size: 13px; }
  .ind-axis { left: 16px; bottom: 46px; width: 40px; height: 40px; }
  .ind-controls { padding: 22px 18px; }
  .ind-control-heading { margin-bottom: 17px; }
  .ind-stage { display: grid; justify-content: center; text-align: center; gap: 1px; padding: 8px 4px; font-size: 14px !important; }
  .ind-stage > span { font-size: 11px; }
  .ind-stage-copy { min-height: 124px; }
  .ind-stage-title { font-size: 16px !important; }
  .ind-stage-body { font-size: 16px !important; }
  .ind-view-actions { grid-template-columns: 1fr 1fr; }
  .ind-view-actions button { font-size: 14px; }
}
.ind-console[data-ind-reduced="true"] .ind-idle { animation: none; }
.ind-console[data-ind-reduced="true"] * { transition-duration: 0s; }
@media (prefers-reduced-motion: reduce) { .ind-idle { animation: none; } .ind-console * { transition: none; } }
@media print { .ind-idle { animation: none; } .ind-console { break-inside: avoid; } }