/*
  Product scenes: light replicas of the FormWorks application, animated phase by phase.
  Every rule describes the finished state; `.scene.is-armed:not(.pN)` describes the state before phase N.
  Without JavaScript or with reduced motion a scene is never armed, so it simply shows its final state.
*/

.ui-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ui-ico { width: 1em; height: 1em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ui-stage { container-type: inline-size; }
.scene { position: relative; min-width: 0; }

/* Window chrome */
.app-window {
  --ui-bg: #f5f7fb; --ui-card: #fff; --ui-line: #e2e8f0; --ui-line-2: #cbd5e1; --ui-head: #f8fafc;
  --ui-text: #0f172a; --ui-soft: #475569; --ui-muted: #64748b;
  --ui-blue: #1d4ed8; --ui-blue-soft: #eff6ff; --ui-blue-line: #bfdbfe;
  --ui-navy: #061638; --ui-green: #047857; --ui-green-soft: #ecfdf5; --ui-green-line: #a7f3d0;
  --ui-amber: #92400e; --ui-amber-soft: #fef3c7; --ui-amber-line: #fcd34d;
  --ui-orange: #ea580c; --ui-teal: #0f766e; --ui-teal-soft: #ccfbf1;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .5);
  border-radius: 1.05em;
  background: var(--ui-bg);
  color: var(--ui-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(7px, 1.6cqi, 12.5px);
  line-height: 1.35;
  letter-spacing: 0;
  text-align: left;
  box-shadow: 0 2.4em 5em rgba(2, 8, 23, .42), 0 .3em 1em rgba(2, 8, 23, .18);
  isolation: isolate;
}
:where(.app-window) :where(b, strong) { font-weight: 700; }
:where(.app-window) small { font-size: inherit; }
:where(.app-window) em { font-style: normal; }
:where(.app-window) :where(p, dl, dd, ul, ol) { margin: 0; padding: 0; color: inherit; list-style: none; }
.ui-titlebar { display: flex; height: 2.2em; align-items: center; gap: .45em; padding: 0 1em; border-bottom: 1px solid var(--ui-line); background: #e9eef5; }
.ui-titlebar i { width: .65em; height: .65em; border-radius: 50%; background: #f87171; }
.ui-titlebar i:nth-child(2) { background: #fbbf24; }
.ui-titlebar i:nth-child(3) { background: #34d399; }
.ui-titlebar span { margin-left: .7em; color: var(--ui-muted); font-size: .82em; font-weight: 700; letter-spacing: .02em; }
.ui-frame { display: grid; grid-template-columns: 3.5em minmax(0, 1fr); }
.ui-rail { display: flex; flex-direction: column; align-items: center; gap: .5em; padding: .9em 0; background: var(--ui-navy); }
.ui-rail img { width: 2.3em; height: auto; margin-bottom: .55em; }
.ui-rail span { display: grid; width: 2.3em; height: 2.3em; place-items: center; border-radius: .5em; color: rgba(226, 232, 240, .78); font-size: 1em; }
.ui-rail span .ui-ico { width: 1.2em; height: 1.2em; }
.ui-rail span.is-active { background: var(--ui-blue); color: #fff; box-shadow: 0 .4em 1em rgba(29, 78, 216, .45); }
.ui-page { position: relative; display: flex; min-width: 0; flex-direction: column; gap: .85em; padding: 1.15em 1.25em 1.3em; }

/* Shared atoms */
.ui-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; }
.ui-title { min-width: 0; }
.ui-title > small { display: block; color: var(--ui-blue); font-size: .78em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ui-title > div { display: flex; flex-wrap: wrap; align-items: center; gap: .55em; margin-top: .15em; }
.ui-title strong { font-size: 1.42em; font-weight: 800; letter-spacing: -.02em; }
.ui-badge { display: inline-flex; align-items: center; gap: .3em; padding: .2em .6em; border: 1px solid var(--ui-line); border-radius: 999px; background: #f1f5f9; color: var(--ui-soft); font-size: .76em; font-weight: 700; line-height: 1.25; white-space: nowrap; }
.ui-badge .ui-ico { width: 1em; height: 1em; stroke-width: 3; }
.ui-green { border-color: var(--ui-green-line); background: var(--ui-green-soft); color: var(--ui-green); }
.ui-amber { border-color: var(--ui-amber-line); background: var(--ui-amber-soft); color: var(--ui-amber); }
.ui-blue { border-color: var(--ui-blue-line); background: var(--ui-blue-soft); color: var(--ui-blue); }
.ui-grey { border-color: var(--ui-line); background: #f1f5f9; color: var(--ui-soft); }
.ui-btn { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .45em; padding: .62em 1em; border: 1px solid var(--ui-line); border-radius: .45em; background: #fff; color: var(--ui-text); font-size: .84em; font-weight: 700; white-space: nowrap; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); transition: transform .15s ease, filter .15s ease, box-shadow .15s ease; }
.ui-btn.ui-primary { border-color: var(--ui-blue); background: var(--ui-blue); color: #fff; box-shadow: 0 .45em 1.1em rgba(29, 78, 216, .28); }
.ui-btn.is-pressed { transform: scale(.93); filter: brightness(.88); box-shadow: none; }
.ui-card { border: 1px solid var(--ui-line); border-radius: .6em; background: var(--ui-card); box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.ui-card-head { display: flex; align-items: center; justify-content: space-between; gap: .6em; padding: .7em .9em; border-bottom: 1px solid var(--ui-line); font-size: .9em; }
.ui-chip { display: inline-block; margin: .3em .3em 0 0; padding: .08em .45em; border-radius: .3em; background: #f1f5f9; color: #334155; font-size: .8em; font-weight: 700; }
.ui-chip-tube { background: var(--ui-teal-soft); color: var(--ui-teal); }
.ui-chip-bend { background: #fff7ed; color: #c2410c; box-shadow: inset 0 0 0 1px #fdba74; }
.ui-swap { display: inline-grid; align-items: center; }
.ui-swap > * { grid-area: 1 / 1; transition: opacity .3s ease, transform .35s ease; }
.ui-swap > .is-before { opacity: 0; transform: translateY(-.5em); }
.ui-spin { width: .85em; height: .85em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ui-spin .7s linear infinite; }
.ui-x { display: grid; width: 2em; height: 2em; place-items: center; border-radius: .4em; color: var(--ui-muted); }
.ui-toast { position: absolute; z-index: 5; right: 1.2em; bottom: 1.2em; display: inline-flex; align-items: center; gap: .5em; padding: .65em .95em; border: 1px solid var(--ui-green-line); border-radius: .55em; background: #fff; color: var(--ui-green); font-size: .84em; font-weight: 700; box-shadow: 0 .8em 2em rgba(15, 23, 42, .16); transition: opacity .35s ease, transform .4s cubic-bezier(.2, .9, .3, 1.2); }
.ui-toast .ui-ico { stroke-width: 3; }
.ui-toast-top { top: 1em; bottom: auto; }

/* Cursor */
.ui-cursor { position: absolute; z-index: 30; top: 0; left: 0; width: 1.7em; opacity: 0; transform: translate(var(--cx, 0px), var(--cy, 0px)); transition: transform .95s cubic-bezier(.55, .05, .25, 1), opacity .3s ease; pointer-events: none; }
.ui-cursor.is-on { opacity: 1; }
.ui-cursor.is-instant { transition: opacity .3s ease; }
.ui-cursor > svg { width: 100%; filter: drop-shadow(0 .25em .35em rgba(15, 23, 42, .4)); }
.ui-cursor > svg path { fill: #0f172a; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; }
.ui-cursor::before { position: absolute; top: -.75em; left: -.75em; width: 1.9em; height: 1.9em; border: 2px solid var(--ui-blue); border-radius: 50%; opacity: 0; content: ""; }
.ui-cursor.is-clicking::before { animation: ui-ripple .55s ease-out; }
.ui-carry { position: absolute; top: 1.5em; left: 1.3em; display: grid; justify-items: start; gap: .3em; opacity: 0; transform: scale(.85); transform-origin: top left; transition: opacity .3s ease, transform .35s ease; }
.ui-cursor.is-carrying .ui-carry { opacity: 1; transform: none; }
.ui-carry span { padding: .35em .6em; border: 1px solid var(--ui-blue-line); border-radius: .4em; background: #fff; color: var(--ui-text); font-size: .74em; font-weight: 700; white-space: nowrap; box-shadow: 0 .4em 1em rgba(15, 23, 42, .18); }
.ui-carry span:nth-child(2) { margin-left: .8em; }
.ui-carry span:nth-child(3) { margin-left: .3em; }
.ui-carry span:nth-child(4) { margin-left: 1.1em; }

/* Caption under every scene */
.scene-caption { display: flex; min-height: 1.6em; align-items: center; gap: .65em; margin: 14px 2px 0; color: var(--text-soft); font-size: .86rem; font-weight: 650; line-height: 1.35; }
.scene-caption > b { position: relative; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--beam); animation: ui-pulse 1.6s ease-out infinite; }
.scene-caption > span { display: none; }
.scene:not(.is-armed) .scene-caption { display: none; }
.scene[data-cap="p1"] .scene-caption [data-cap="p1"], .scene[data-cap="p2"] .scene-caption [data-cap="p2"], .scene[data-cap="p3"] .scene-caption [data-cap="p3"],
.scene[data-cap="p4"] .scene-caption [data-cap="p4"], .scene[data-cap="p5"] .scene-caption [data-cap="p5"], .scene[data-cap="p6"] .scene-caption [data-cap="p6"] { display: inline; animation: ui-caption .4s ease both; }

/* Hero: a project gets its parts and prices */
.hero-stage { position: relative; margin: 0; padding: clamp(20px, 3.4cqi, 34px) clamp(14px, 3cqi, 28px) 34px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 24px; background: #071426; box-shadow: var(--shadow-lg); isolation: isolate; }
.hero-photo { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% center; opacity: .55; }
.hero-stage::before { position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 70% 0%, rgba(23, 105, 232, .25), transparent 55%), linear-gradient(180deg, rgba(4, 12, 26, .55), rgba(4, 12, 26, .92)); content: ""; }
.hero-stage .scene-caption { color: #dce7f5; }
.hero-stage figcaption { position: absolute; right: 16px; bottom: 10px; color: rgba(255, 255, 255, .5); font-size: .6rem; }
.ui-progress { height: .22em; margin: -.45em 0 0; overflow: hidden; border-radius: 99px; }
.ui-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ui-blue), #38bdf8); }
.ui-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55em; }
.ui-kpis > div { min-width: 0; padding: .65em .75em; border: 1px solid var(--ui-line); border-radius: .55em; background: #fff; }
.ui-kpis small { display: block; overflow: hidden; color: var(--ui-muted); font-size: .7em; font-weight: 700; letter-spacing: .04em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.ui-kpis b { display: block; margin-top: .2em; font-size: 1.2em; font-weight: 800; white-space: nowrap; }
.ui-kpis .is-total { border-color: var(--ui-blue-line); background: var(--ui-blue-soft); }
.ui-kpis .is-total b { color: var(--ui-blue); }
.ui-parts { overflow: hidden; }
.ui-drop { display: flex; align-items: center; gap: .8em; margin: .8em; padding: .75em .95em; border: 1.5px dashed var(--ui-line-2); border-radius: .6em; background: #fbfdff; transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease; }
.ui-drop-icon { display: grid; width: 2.4em; height: 2.4em; flex: 0 0 2.4em; place-items: center; border-radius: 50%; background: var(--ui-blue-soft); color: var(--ui-blue); font-size: 1em; }
.ui-drop-icon .ui-ico { width: 1.2em; height: 1.2em; }
.ui-drop-copy { min-width: 0; }
.ui-drop-copy b { display: block; font-size: .9em; }
.ui-drop-copy small { display: block; margin-top: .15em; color: var(--ui-muted); font-size: .74em; }
.ui-table { position: relative; font-size: .82em; }
.ui-tr { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(0, 1.2fr) minmax(0, .75fr) minmax(0, .5fr) minmax(0, 1.15fr) minmax(0, .95fr); align-items: center; gap: .6em; padding: .62em 1.1em; border-top: 1px solid var(--ui-line); transition: opacity .45s ease, transform .5s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * .17s); }
.ui-th { padding-block: .5em; background: var(--ui-head); color: var(--ui-muted); font-size: .86em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ui-th span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-part { min-width: 0; }
.ui-part b { display: block; padding-bottom: .12em; overflow: hidden; line-height: 1.55; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.ui-read { justify-self: start; margin-left: -.3em; padding: .15em .3em; border-radius: .3em; font-weight: 600; white-space: nowrap; }
.ui-qty { min-width: 2.6em; padding: .25em .5em; border: 1px solid var(--ui-line-2); border-radius: .35em; background: #fff; }
.ui-state { display: grid; justify-items: start; }
.ui-state > em { grid-area: 1 / 1; opacity: 0; transition: opacity .25s ease; transition-delay: calc(var(--i, 0) * .26s); }
.ui-price { display: flex; justify-content: flex-end; align-items: baseline; gap: .3em; white-space: nowrap; transition: opacity .3s ease; transition-delay: calc(var(--i, 0) * .26s); }
.ui-price b { font-weight: 800; }
.ui-price small { color: var(--ui-muted); font-size: .82em; }
.ui-empty { position: absolute; top: 2.6em; right: 0; left: 0; padding: 1.6em 1em; color: var(--ui-muted); text-align: center; opacity: 0; transition: opacity .3s ease; }

/* final state */
.scene .s-done { opacity: 1; }
.scene .ui-swap > .is-after { opacity: 1; transform: none; }

/* hero phases */
[data-scene="hero"].is-armed:not(.p2) .ui-drop { border-color: var(--ui-blue); background: var(--ui-blue-soft); box-shadow: 0 0 0 .3em rgba(37, 99, 235, .12); }
[data-scene="hero"].is-armed:not(.p1) .ui-drop { border-color: var(--ui-line-2); background: #fbfdff; box-shadow: none; }
[data-scene="hero"].is-armed:not(.p3) .ui-tr:not(.ui-th) { opacity: 0; transform: translateY(.7em); transition-delay: 0s; }
[data-scene="hero"].is-armed:not(.p3) .ui-empty { opacity: 1; }
[data-scene="hero"].p3 .ui-read { animation: ui-flash 1.4s ease both; animation-delay: calc(var(--i, 0) * .17s + .35s); }
[data-scene="hero"].is-armed:not(.p6) .s-done { opacity: 0; }
[data-scene="hero"].is-armed.p3:not(.p5) .s-ready { opacity: 1; }
[data-scene="hero"].is-armed.p5:not(.p6) .s-busy { opacity: 1; }
[data-scene="hero"].is-armed:not(.p6) .ui-price { opacity: 0; transition-delay: 0s; }
[data-scene="hero"].is-armed:not(.p6) .ui-swap > .is-after { opacity: 0; transform: translateY(.5em); }
[data-scene="hero"].is-armed:not(.p6) .ui-swap > .is-before { opacity: 1; transform: none; }
[data-scene="hero"].p5:not(.p6) .ui-progress i { animation: ui-progress 1.9s cubic-bezier(.3, .1, .3, 1) forwards; }
.app-window > :not(.ui-cursor) { transition: opacity .35s ease; }
.scene.is-resetting .app-window > :not(.ui-cursor):not(.ui-titlebar) { opacity: 0; }

/* How it works: step player */
.how-player { display: grid; grid-template-columns: minmax(280px, .78fr) minmax(0, 1.5fr); gap: 28px; align-items: start; }
.how-steps { display: grid; gap: 12px; }
.how-step { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 16px; padding: 22px 22px 24px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); text-align: left; box-shadow: var(--shadow-sm); transition: border-color .2s ease, background-color .2s ease, transform .2s ease; }
.how-step:hover { border-color: var(--line-strong); transform: translateX(3px); }
.how-step:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 42%, transparent); outline-offset: 3px; }
.how-step .step-no { font-size: 3.1rem; opacity: .45; transition: opacity .2s ease; }
.how-step strong { display: block; font-size: 1.32rem; letter-spacing: -.02em; line-height: 1.15; }
.how-step-body { display: block; margin-top: 8px; color: var(--text-soft); font-size: .9rem; line-height: 1.5; }
.how-points { display: none; gap: 7px; margin-top: 14px; }
.how-points span { position: relative; padding-left: 22px; color: var(--text); font-size: .84rem; font-weight: 600; }
.how-points span::before { position: absolute; top: .38em; left: 2px; width: 11px; height: 6px; transform: rotate(-45deg); border-bottom: 2px solid var(--green); border-left: 2px solid var(--green); content: ""; }
.how-step.is-active { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface) 70%); }
.how-step.is-active .step-no { opacity: 1; }
.how-step.is-active .how-points { display: grid; }
.how-progress { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: color-mix(in srgb, var(--accent) 12%, transparent); opacity: 0; }
.how-progress i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--beam), var(--accent)); }
.how-step.is-active .how-progress { opacity: 1; }
.how-stage { position: sticky; top: calc(var(--header-height) + 24px); min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: 24px; background: radial-gradient(circle at 85% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%), var(--surface-soft); box-shadow: var(--shadow-sm); }
.how-pane[hidden] { display: none; }
.how-pane .ui-frame { min-height: 34.5em; }
.how-pane .app-window { box-shadow: 0 1.6em 3.6em rgba(15, 23, 42, .18), 0 .2em .8em rgba(15, 23, 42, .08); }

/* Step 1: reading a DXF */
.ui-drop-slim { margin: 0; padding: .6em .8em; }
.ui-file-pill { display: inline-flex; align-items: center; gap: .4em; margin-left: auto; padding: .35em .7em; border: 1px solid var(--ui-blue-line); border-radius: .4em; background: #fff; color: var(--ui-text); font-size: .8em; font-weight: 700; white-space: nowrap; transition: opacity .3s ease, transform .4s cubic-bezier(.2, .9, .3, 1.2); }
.ui-file-pill .ui-ico { color: var(--ui-blue); }
.read-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: .8em; }
.read-side { display: grid; gap: .8em; align-content: start; }
.read-layers { display: inline-flex; gap: .35em; }
.read-layers em { padding: .1em .45em; border-radius: .3em; font-size: .78em; font-weight: 700; }
.ly-cut { background: #dbeafe; color: #1d4ed8; }
.ly-bend { background: #ffedd5; color: #c2410c; }
.ly-mark { background: #dcfce7; color: #15803d; }
.read-dxf { display: block; width: 100%; height: auto; padding: .6em .8em 1em; background-image: linear-gradient(#eef2f7 1px, transparent 1px), linear-gradient(90deg, #eef2f7 1px, transparent 1px); background-size: 1.6em 1.6em; }
.read-dxf .d-cut { fill: rgba(29, 78, 216, .05); stroke: #1d4ed8; stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s ease; }
.read-dxf .d-bend { fill: none; stroke: #ea580c; stroke-width: 2; stroke-dasharray: .03 .025; transition: opacity .4s ease .9s; }
.read-dxf .d-mark { fill: #15803d; font: 700 11px var(--mono); transition: opacity .4s ease 1.1s; }
.read-dxf .d-dim { fill: none; stroke: #94a3b8; stroke-width: 1; transition: opacity .4s ease 1.2s; }
.read-dxf .d-dimtext { fill: #64748b; font: 600 10px var(--mono); text-anchor: middle; transition: opacity .4s ease 1.2s; }
.read-tokens { display: flex; flex-wrap: wrap; align-items: baseline; padding: .8em .9em .3em; font: 700 1.02em var(--mono); }
.read-tokens i { color: var(--ui-muted); font-style: normal; }
.read-tokens span { padding: .05em .12em; border-radius: .25em; transition: background-color .3s ease, color .3s ease, box-shadow .3s ease; }
.read-tokens .tk-m { background: #dbeafe; color: #1d4ed8; }
.read-tokens .tk-t { background: #ede9fe; color: #6d28d9; }
.read-tokens .tk-q { background: #dcfce7; color: #15803d; }
.read-fields { display: grid; gap: .45em; padding: .5em .9em .9em; }
.read-fields > div { display: grid; grid-template-columns: 6.8em minmax(0, 1fr); align-items: center; gap: .6em; }
.read-fields dt { color: var(--ui-muted); font-size: .8em; font-weight: 700; }
.read-fields dd { min-height: 2.1em; padding: .4em .6em; border: 1px solid var(--ui-line-2); border-radius: .4em; background: #fff; font-weight: 700; transition: border-color .3s ease, box-shadow .3s ease; }
.read-fields dd span { display: inline-block; transition: opacity .3s ease, transform .35s ease; }
.read-check ul { display: grid; gap: .4em; padding: .7em .9em .85em; font-size: .86em; }
.read-check li { display: flex; align-items: center; gap: .5em; transition: opacity .35s ease, transform .35s ease; transition-delay: calc(var(--i) * .35s); }
.read-check li .ui-ico { color: var(--ui-green); stroke-width: 3; }
.read-ok { transition: opacity .3s ease 1.1s, transform .4s ease 1.1s; }

[data-scene="read"].is-armed:not(.p2) .ui-file-pill { opacity: 0; transform: translateY(-.6em) scale(.9); }
[data-scene="read"].is-armed:not(.p1) .ui-drop, [data-scene="read"].is-armed.p2 .ui-drop { border-color: var(--ui-line-2); background: #fbfdff; }
[data-scene="read"].is-armed.p1:not(.p2) .ui-drop { border-color: var(--ui-blue); background: var(--ui-blue-soft); }
[data-scene="read"].is-armed:not(.p2) .read-dxf .d-cut { stroke-dashoffset: 1; }
[data-scene="read"].is-armed:not(.p2) .read-dxf .d-bend, [data-scene="read"].is-armed:not(.p2) .read-dxf .d-mark, [data-scene="read"].is-armed:not(.p2) .read-dxf .d-dim, [data-scene="read"].is-armed:not(.p2) .read-dxf .d-dimtext { opacity: 0; transition-delay: 0s; }
[data-scene="read"].is-armed:not(.p3) .tk-m, [data-scene="read"].is-armed:not(.p4) .tk-t, [data-scene="read"].is-armed:not(.p5) .tk-q { background: transparent; color: var(--ui-text); }
[data-scene="read"].is-armed:not(.p3) .rf-m dd span, [data-scene="read"].is-armed:not(.p4) .rf-t dd span, [data-scene="read"].is-armed:not(.p5) .rf-q dd span { opacity: 0; transform: translateX(-.6em); }
[data-scene="read"].p3:not(.p4) .rf-m dd, [data-scene="read"].p4:not(.p5) .rf-t dd, [data-scene="read"].p5:not(.p6) .rf-q dd { border-color: var(--ui-blue); box-shadow: 0 0 0 .25em rgba(37, 99, 235, .14); }
[data-scene="read"].p3:not(.p4) .tk-m, [data-scene="read"].p4:not(.p5) .tk-t, [data-scene="read"].p5:not(.p6) .tk-q { box-shadow: 0 0 0 .2em rgba(37, 99, 235, .25); }
[data-scene="read"].is-armed:not(.p6) .read-check li { opacity: 0; transform: translateX(-.5em); transition-delay: 0s; }
[data-scene="read"].is-armed:not(.p6) .read-ok { opacity: 0; transform: scale(.85); transition-delay: 0s; }

/* Step 2: calculating */
.calc-line-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; padding: .8em .95em; border-bottom: 1px solid var(--ui-line); }
.calc-line-head b { font-size: 1.05em; }
.calc-line-head small { display: block; margin-top: .15em; color: var(--ui-muted); font-size: .78em; }
.calc-price { text-align: right; }
.calc-price b { font-size: 1.25em; font-weight: 800; white-space: nowrap; }
.calc-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1em; align-items: center; padding: .9em .95em; }
.calc-nest { padding: .4em; border: 1px solid var(--ui-line); border-radius: .45em; background: #f8fafc; }
.calc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .7em .9em; }
.calc-stats dt, .nest-stats dt { color: var(--ui-muted); font-size: .74em; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.calc-stats dd, .nest-stats dd { margin-top: .15em; font-weight: 800; white-space: nowrap; }
.calc-compare { overflow: hidden; font-size: .9em; }
.cmp-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: .6em; padding: .6em .95em; border-top: 1px solid var(--ui-line); transition: opacity .4s ease, transform .4s ease, background-color .3s ease, box-shadow .3s ease; transition-delay: calc(var(--i) * .3s); }
.cmp-row > span { display: flex; flex-wrap: wrap; align-items: center; gap: .45em; min-width: 0; }
.cmp-head { color: var(--ui-muted); background: var(--ui-head); font-size: .82em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.cmp-a { background: var(--ui-blue-soft); box-shadow: inset .25em 0 0 var(--ui-blue); }
.cmp-tag, .cmp-use { transition: opacity .3s ease, transform .35s cubic-bezier(.2, .9, .3, 1.3); }
[data-scene="calc"].is-armed:not(.p1) .calc-line { opacity: 0; transform: translateY(.6em); }
.calc-line { transition: opacity .4s ease, transform .45s ease; }
.ui-nest .np-sheet { fill: #fff; stroke: #94a3b8; stroke-width: 1.2; }
.ui-nest .np-body { fill: rgba(29, 78, 216, .1); stroke: #1d4ed8; stroke-width: 1.2; }
.ui-nest .np circle:not(.np-body), .ui-nest .np rect:not(.np-body) { fill: #fff; stroke: #1d4ed8; stroke-width: 1; }
.ui-nest .np-bend { fill: none; stroke: #ea580c; stroke-width: 1; stroke-dasharray: 4 3; }
.ui-nest .np { transform-box: fill-box; transform-origin: center; transition: opacity .35s ease, transform .5s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i) * 75ms); }
.ui-nest .np-offcut rect { fill: rgba(16, 185, 129, .14); stroke: #10b981; stroke-width: 1.2; stroke-dasharray: 5 4; transition: opacity .5s ease; }
.ui-nest .np-offcut text { fill: #047857; font: 700 13px Inter, sans-serif; letter-spacing: .06em; text-anchor: middle; text-transform: uppercase; }
.ui-nest .np-offcut { transition: opacity .5s ease; }
[data-scene="calc"].is-armed:not(.p2) .np { opacity: 0; transform: translate(30px, -18px) rotate(8deg); transition-delay: 0s; }
[data-scene="calc"].is-armed:not(.p3) .np-offcut { opacity: 0; }
[data-scene="calc"].is-armed:not(.p4) .cmp-row:not(.cmp-head) { opacity: 0; transform: translateY(.5em); transition-delay: 0s; }
[data-scene="calc"].is-armed:not(.p5) .cmp-a { background: transparent; box-shadow: none; }
[data-scene="calc"].is-armed:not(.p5) .cmp-tag, [data-scene="calc"].is-armed:not(.p5) .cmp-use { opacity: 0; transform: scale(.6); }
[data-scene="calc"].is-armed:not(.p5) .calc-price { opacity: 0; }
.calc-price { transition: opacity .4s ease .2s; }

/* Step 3: finalize */
.fin-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: center; gap: .8em; padding: .85em .95em; }
.fin-totals small { display: block; color: var(--ui-muted); font-size: .74em; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.fin-totals b { display: block; margin-top: .15em; font-weight: 800; white-space: nowrap; }
.fin-totals .is-total b { color: var(--ui-blue); font-size: 1.2em; }
.fin-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: .8em; }
.fin-row, .fin-doc { display: flex; align-items: center; justify-content: space-between; gap: .6em; padding: .6em .9em; border-top: 1px solid var(--ui-line); font-size: .88em; transition: opacity .35s ease, transform .4s ease, background-color .4s ease; transition-delay: calc(var(--i) * .28s); }
.fin-row:first-of-type, .fin-doc:first-of-type { border-top: 0; }
.fin-row small { display: block; color: var(--ui-muted); font-size: .86em; }
.fin-res { justify-items: end; }
.fin-doc { justify-content: flex-start; }
.fin-ico { display: grid; width: 2em; height: 2em; place-items: center; border-radius: .45em; background: var(--ui-blue-soft); color: var(--ui-blue); }
.fin-doc > em { display: grid; width: 1.9em; height: 1.9em; margin-left: auto; place-items: center; border: 1px solid var(--ui-line); border-radius: .4em; color: var(--ui-soft); }
.fin-sent { background: #f0fdf4; }
.fin-sent .fin-ico { background: var(--ui-green-soft); color: var(--ui-green); }
.fin-sent > em { border-color: var(--ui-green-line); background: var(--ui-green-soft); color: var(--ui-green); }
.fin-sent > em .ui-ico { stroke-width: 3; }
[data-scene="finalize"].is-armed:not(.p3) .ui-swap > .is-after { opacity: 0; transform: translateY(.5em); }
[data-scene="finalize"].is-armed:not(.p3) .ui-swap > .is-before { opacity: 1; transform: none; }
[data-scene="finalize"].is-armed:not(.p3) .fin-stock { opacity: .45; }
.fin-stock { transition: opacity .3s ease; }
[data-scene="finalize"].p3:not(.p4) .fin-row { background: #fff7ed; }
[data-scene="finalize"].is-armed:not(.p4) .fin-doc { opacity: 0; transform: translateX(.8em); transition-delay: 0s; }

/* Capability dialogs */
.showcase-visual.ui-stage { justify-content: center; align-self: stretch; padding: 26px 24px 0; background: radial-gradient(circle at 80% 0%, rgba(79, 143, 255, .22), transparent 55%), #0c1d38; }
.showcase-visual.ui-stage .scene-caption { color: #c7d6ea; }
.showcase-visual.ui-stage figcaption { margin: 14px -24px 0; padding: 9px 14px; border-top: 1px solid #1d3557; background: #081a33; color: #6f86a6; font-size: .6rem; text-align: right; }
.ui-dialog { background: #fff; }
.ui-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; padding: 1em 1.15em .8em; border-bottom: 1px solid var(--ui-line); }
.ui-dialog-head b { display: block; font-size: 1.12em; font-weight: 800; letter-spacing: -.01em; }
.ui-dialog-head small { display: block; margin-top: .2em; color: var(--ui-muted); font-size: .8em; }
.ui-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5em; padding: .75em 1.15em; border-bottom: 1px solid var(--ui-line); background: var(--ui-head); }
.ui-steps li { display: flex; min-width: 0; gap: .5em; transition: opacity .35s ease; }
.ui-steps i { display: grid; width: 1.6em; height: 1.6em; flex: 0 0 1.6em; place-items: center; border-radius: 50%; background: var(--ui-blue); color: #fff; font-size: .78em; font-style: normal; font-weight: 800; transition: background-color .3s ease; }
.ui-steps span { min-width: 0; font-size: .8em; }
.ui-steps b, .ui-steps small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-steps small { color: var(--ui-muted); }

/* Nesting review */
.nest-body { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: .9em; padding: .9em 1.15em 1.1em; }
.nest-layouts { display: grid; align-content: start; gap: .45em; }
.nest-layouts > small { color: var(--ui-muted); font-size: .74em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.nl { display: flex; align-items: center; gap: .5em; padding: .45em; border: 1px solid var(--ui-line); border-radius: .5em; background: #fff; font-size: .82em; transition: opacity .35s ease, transform .35s ease, border-color .3s ease, box-shadow .3s ease; transition-delay: calc(var(--i) * .2s); }
.nl > span:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: .3em; min-width: 0; }
.nl small { width: 100%; color: var(--ui-muted); }
.nl-thumb { width: 3em; height: 1.6em; flex: 0 0 3em; border: 1px solid #94a3b8; border-radius: .2em; background: linear-gradient(90deg, rgba(29, 78, 216, .3) 0 60%, rgba(16, 185, 129, .25) 60% 100%); }
.nl:nth-of-type(3) .nl-thumb { background: linear-gradient(90deg, rgba(29, 78, 216, .3) 0 57%, rgba(16, 185, 129, .25) 57% 80%, transparent 80%); }
.nl:nth-of-type(4) .nl-thumb { background: linear-gradient(90deg, rgba(29, 78, 216, .3) 0 55%, transparent 55%); }
.nl.is-first { border-color: var(--ui-blue); box-shadow: 0 0 0 .2em rgba(37, 99, 235, .12); }
.nl-use { transition: opacity .3s ease, transform .35s cubic-bezier(.2, .9, .3, 1.3); }
.nest-canvas { min-width: 0; padding: .55em; border: 1px solid var(--ui-line); border-radius: .55em; background: #f8fafc; }
.nest-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: center; gap: .6em; margin-top: .6em; }
.nest-stats .ui-btn { font-size: .78em; }
[data-scene="nest"].is-armed:not(.p2) .np { opacity: 0; transform: translate(60px, -24px) rotate(10deg) scale(.9); transition-delay: 0s; }
[data-scene="nest"].is-armed:not(.p3) .np-offcut { opacity: 0; }
[data-scene="nest"].is-armed:not(.p2) .st-2, [data-scene="nest"].is-armed:not(.p3) .st-3, [data-scene="nest"].is-armed:not(.p4) .st-4,
[data-scene="tube"].is-armed:not(.p2) .st-2, [data-scene="tube"].is-armed:not(.p3) .st-3, [data-scene="tube"].is-armed:not(.p5) .st-4 { opacity: .35; }
[data-scene="nest"].is-armed:not(.p2) .st-2 i, [data-scene="nest"].is-armed:not(.p3) .st-3 i, [data-scene="nest"].is-armed:not(.p4) .st-4 i,
[data-scene="tube"].is-armed:not(.p2) .st-2 i, [data-scene="tube"].is-armed:not(.p3) .st-3 i, [data-scene="tube"].is-armed:not(.p5) .st-4 i { background: #94a3b8; }
[data-scene="nest"].is-armed:not(.p3) .nl { opacity: 0; transform: translateX(-.6em); transition-delay: 0s; }
[data-scene="nest"].is-armed:not(.p4) .nl.is-first { border-color: var(--ui-line); box-shadow: none; }
[data-scene="nest"].is-armed:not(.p4) .nl-use { opacity: 0; transform: scale(.6); }

/* 3D model */
.cad-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: .9em; padding: .9em 1.15em 1.1em; }
.cad-viewer { position: relative; min-height: 19em; overflow: hidden; border-radius: .55em; background: radial-gradient(circle at 50% 30%, #6c7b91, #3b4859 78%); }
.cad-views { position: absolute; z-index: 2; top: .6em; left: .6em; display: flex; flex-wrap: wrap; gap: .25em; padding: .25em; border-radius: .45em; background: rgba(255, 255, 255, .92); font-size: .74em; font-weight: 700; }
.cad-views span { padding: .3em .55em; border-radius: .3em; color: var(--ui-soft); transition: background-color .3s ease, color .3s ease; }
.cad-views .v-iso { background: var(--ui-blue); color: #fff; }
.cad-dims { position: absolute; right: .7em; bottom: .6em; color: rgba(255, 255, 255, .8); font: 700 .78em var(--mono); transition: opacity .3s ease; }
.cad-space { position: absolute; inset: 0; display: grid; place-items: center; perspective: 70em; }
.cad-model { position: relative; width: 12em; height: 5.6em; margin-top: 4.5em; transform: rotateX(58deg) rotateZ(-32deg); transform-style: preserve-3d; transition: transform 1.2s cubic-bezier(.4, .1, .2, 1); }
.cad-panel { position: absolute; left: 0; width: 12em; transform-style: preserve-3d; border: 1.5px solid #1f2937; background: linear-gradient(135deg, #e5e9ef, #c3cad4); transition: transform 1.3s cubic-bezier(.5, 0, .2, 1), background .6s ease; }
.cad-base { top: 0; height: 5.6em; }
.cad-web { bottom: 100%; height: 4.2em; transform: rotateX(-90deg); transform-origin: bottom center; background: linear-gradient(180deg, #b7c0cc, #97a2b1); }
.cad-flange { bottom: 100%; height: 4.6em; transform: rotateX(90deg); transform-origin: bottom center; background: linear-gradient(135deg, #f1f4f8, #cfd6df); }
.cad-hole { position: absolute; top: 1.4em; left: 2.2em; width: 1.2em; height: 1.2em; border: 1.5px solid #1f2937; border-radius: 50%; background: #55657a; }
.cad-hole.two { top: 3.2em; }
.cad-slot { position: absolute; top: 1.6em; left: 7.6em; width: 2.6em; height: 1.1em; border: 1.5px solid #1f2937; border-radius: 1em; background: #55657a; }
.cad-panel::after { position: absolute; right: 0; left: 0; height: 0; border-top: 2px dashed #f97316; content: ""; opacity: 0; transition: opacity .4s ease; }
.cad-web::after, .cad-flange::after { bottom: -1px; }
.cad-side { position: relative; display: flex; flex-direction: column; gap: .8em; min-width: 0; }
.cad-table { overflow: hidden; border: 1px solid var(--ui-line); border-radius: .55em; font-size: .82em; }
.cad-tr { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .7fr) minmax(0, 1.05fr) minmax(0, .75fr); align-items: center; gap: .5em; padding: .55em .7em; }
.cad-tr + .cad-tr { border-top: 1px solid var(--ui-line); }
.cad-th { background: var(--ui-head); color: var(--ui-muted); font-size: .86em; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.cad-th span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cad-tr > span:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: .3em; }
.cad-val { font-weight: 700; white-space: nowrap; transition: opacity .3s ease, background-color .6s ease; transition-delay: calc(var(--i) * .3s); }
.cad-facts { display: grid; gap: .1em; font-size: .84em; }
.cad-facts li { display: flex; justify-content: space-between; gap: .6em; padding: .45em .1em; border-bottom: 1px solid var(--ui-line); transition: opacity .3s ease; transition-delay: calc(var(--i) * .25s + .6s); }
.cad-facts span { color: var(--ui-muted); }
.cad-side .ui-btn { align-self: flex-start; margin-top: auto; }
.cad-side .ui-toast { right: 0; bottom: 3.6em; }
[data-scene="cad"].is-armed:not(.p2) .cad-web { transform: rotateX(0deg); background: linear-gradient(135deg, #e5e9ef, #c3cad4); }
[data-scene="cad"].is-armed:not(.p2) .cad-flange { transform: rotateX(0deg); }
[data-scene="cad"].is-armed:not(.p2) .cad-model { transform: rotateX(0deg) rotateZ(0deg) translateY(1.8em) scale(.9); }
[data-scene="cad"].is-armed:not(.p2) .cad-panel::after { opacity: 1; }
[data-scene="cad"].is-armed:not(.p2) .v-iso { background: transparent; color: var(--ui-soft); }
[data-scene="cad"].is-armed:not(.p2) .v-flat { background: var(--ui-blue); color: #fff; }
[data-scene="cad"].is-armed.p2 .cad-dims { opacity: 0; }
[data-scene="cad"].p3 .cad-model { animation: cad-turn 9s ease-in-out infinite; }
[data-scene="cad"].is-armed:not(.p3) .cad-val, [data-scene="cad"].is-armed:not(.p3) .cad-facts li { opacity: 0; transition-delay: 0s; }
[data-scene="cad"].p3:not(.p4) .cad-val { background: rgba(37, 99, 235, .12); }
[data-scene="cad"].is-armed:not(.p5) .ui-toast { opacity: 0; transform: translateY(.6em) scale(.95); }

/* Bar layout */
.tube-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5em; padding: .9em 1.15em 0; }
.tube-stats > div { min-width: 0; padding: .55em .65em; border: 1px solid var(--ui-line); border-radius: .5em; }
.tube-stats small { display: block; overflow: hidden; color: var(--ui-muted); font-size: .72em; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.tube-stats b { display: block; margin-top: .15em; font-weight: 800; white-space: nowrap; }
.tube-bar { position: relative; margin: .8em 1.15em 0; padding: .4em .5em; border: 1px solid var(--ui-line); border-radius: .55em; background: #f8fafc; }
.ui-bar { display: block; width: 100%; height: auto; overflow: visible; }
.ui-bar .bp-stock { fill: #e2e8f0; stroke: #94a3b8; }
.ui-bar .bp-trim { fill: #cbd5e1; }
.ui-bar .bp-clamp { fill: #cbd5e1; opacity: .9; }
.ui-bar .bp-remnant { fill: rgba(16, 185, 129, .22); stroke: #10b981; stroke-width: 1.2; transition: opacity .5s ease; }
.ui-bar .bp-remnant-label { fill: #047857; font: 700 10px Inter, sans-serif; text-anchor: middle; transition: opacity .5s ease .2s; }
.ui-bar .bp-piece path { fill: rgba(29, 78, 216, .16); stroke: #1d4ed8; stroke-width: 1.2; }
.ui-bar .bp-piece text { fill: #1e3a8a; font: 700 9.5px Inter, sans-serif; text-anchor: middle; }
.ui-bar .bp-piece .bp-name { fill: #475569; font-size: 7.5px; font-weight: 600; }
.ui-bar .bp-piece { transition: opacity .35s ease, transform .55s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i) * .3s); }
.ui-bar .bp-cut { stroke: #dc2626; stroke-width: 2.2; stroke-linecap: round; transition: opacity .2s ease; }
.tube-head { position: absolute; inset: .4em .5em; pointer-events: none; }
.tube-head span { position: absolute; top: 10%; bottom: 10%; left: var(--x); width: 2px; margin-left: -1px; opacity: 0; background: linear-gradient(180deg, transparent, #ff6b3d 30%, #ffd4a3 50%, #ff6b3d 70%, transparent); box-shadow: 0 0 .6em #ff6b3d; }
.tube-legend { display: flex; flex-wrap: wrap; gap: .4em 1em; padding: .7em 1.15em .8em; color: var(--ui-muted); font-size: .76em; font-weight: 600; }
.tube-legend span { display: inline-flex; align-items: center; gap: .4em; }
.tube-legend span::before { width: 1.1em; height: .7em; border-radius: .15em; content: ""; }
.lg-trim::before { background: #cbd5e1; }
.lg-cut::before { height: .2em !important; background: #dc2626; }
.lg-rem::before { background: rgba(16, 185, 129, .35); box-shadow: inset 0 0 0 1px #10b981; }
.lg-clamp::before { background: repeating-linear-gradient(45deg, #94a3b8 0 2px, #e2e8f0 2px 4px); }
[data-scene="tube"].is-armed:not(.p2) .bp-piece { opacity: 0; transform: translateX(-40px); transition-delay: 0s; }
[data-scene="tube"].is-armed:not(.p3) .bp-cut { opacity: 0; }
[data-scene="tube"].p3:not(.p4) .bp-cut { animation: tube-cut .5s ease both; animation-delay: calc(var(--i) * .45s); }
[data-scene="tube"].p3:not(.p4) .tube-head span { animation: tube-spark .5s ease both; animation-delay: calc(var(--n) * .45s); }
.tube-head span:nth-child(1) { --n: 0; } .tube-head span:nth-child(2) { --n: 1; } .tube-head span:nth-child(3) { --n: 2; } .tube-head span:nth-child(4) { --n: 3; } .tube-head span:nth-child(5) { --n: 4; }
[data-scene="tube"].is-armed:not(.p4) .bp-remnant, [data-scene="tube"].is-armed:not(.p4) .bp-remnant-label { opacity: 0; transition-delay: 0s; }
.tube-cutlist { margin: 0 1.15em 1.1em; overflow: hidden; border: 1px solid var(--ui-line); border-radius: .55em; font-size: .8em; }
.tc-tr { display: grid; grid-template-columns: 2em minmax(0, 1.6fr) minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: .5em; padding: .45em .8em; border-top: 1px solid var(--ui-line); transition: opacity .3s ease, transform .35s ease; transition-delay: calc(var(--i, 0) * .18s); }
.tc-tr > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-tr > span:nth-child(2) { font-weight: 650; }
.tc-th { border-top: 0; background: var(--ui-head); color: var(--ui-muted); font-size: .9em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
[data-scene="tube"].is-armed:not(.p5) .tc-tr:not(.tc-th) { opacity: 0; transform: translateY(.4em); transition-delay: 0s; }

/* Stock */
.stock-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5em; padding: .45em; border: 1px solid var(--ui-line); border-radius: .7em; background: #fff; }
.stock-tabs > span { display: flex; min-width: 0; align-items: center; gap: .55em; padding: .55em .65em; border: 1px solid transparent; border-radius: .55em; font-size: .84em; transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
.stock-tabs b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stock-tabs i { display: grid; width: 2.1em; height: 2.1em; flex: 0 0 2.1em; place-items: center; border-radius: .45em; background: var(--ui-blue-soft); color: var(--ui-blue); transition: background-color .3s ease, color .3s ease; }
.stock-tabs .stk-rem { border-color: var(--ui-blue-line); background: var(--ui-blue-soft); color: var(--ui-blue); }
.stock-tabs .stk-rem i { background: var(--ui-blue); color: #fff; }
.stock-table { overflow: hidden; font-size: .84em; }
.stk-tr { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, .55fr); align-items: center; gap: .6em; padding: .62em .9em; border-top: 1px solid var(--ui-line); transition: background-color .4s ease, opacity .4s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.stk-tr > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stk-th { border-top: 0; background: var(--ui-head); color: var(--ui-muted); font-size: .86em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.stk-qty { font-size: 1.05em; }
.stk-qty .is-after { color: var(--ui-orange); }
.stock-sheets { display: none; }
.stk-new { background: #f0fdf4; }
[data-scene="stock"].is-armed:not(.p4) .stock-sheets { display: block; }
[data-scene="stock"].is-armed:not(.p4) .stock-remnants { display: none; }
[data-scene="stock"].is-armed:not(.p4) .stk-rem { border-color: transparent; background: transparent; color: var(--ui-text); }
[data-scene="stock"].is-armed:not(.p4) .stk-rem i { background: var(--ui-blue-soft); color: var(--ui-blue); }
[data-scene="stock"].is-armed:not(.p4) .stk-sheets { border-color: var(--ui-blue-line); background: var(--ui-blue-soft); color: var(--ui-blue); }
[data-scene="stock"].is-armed:not(.p4) .stk-sheets i { background: var(--ui-blue); color: #fff; }
[data-scene="stock"].is-armed:not(.p3) .ui-swap > .is-after { opacity: 0; transform: translateY(.5em); }
[data-scene="stock"].is-armed:not(.p3) .ui-swap > .is-before { opacity: 1; transform: none; }
[data-scene="stock"].p1:not(.p3) .stk-tr.is-hit { background: #fffbeb; }
[data-scene="stock"].p3:not(.p4) .stk-tr.is-hit { background: #fff7ed; }
[data-scene="stock"].is-armed:not(.p2) .ui-toast, [data-scene="stock"].p4 .ui-toast, [data-scene="stock"]:not(.is-armed) .ui-toast { opacity: 0; transform: translateY(-.6em); }
[data-scene="stock"].is-armed:not(.p5) .stk-new { opacity: 0; transform: translateY(-.8em); background: #dcfce7; }

/* Manufacturing route */
.rt-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7em 1.4em; padding: .95em 1.15em; border-radius: .7em; background: linear-gradient(120deg, #0b1b45, #1e1b4b 60%, #312e81); color: #fff; }
.rt-name { min-width: 0; }
.rt-name small { display: block; color: #a5b4fc; font-size: .74em; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.rt-name strong { display: block; margin-top: .1em; font-size: 1.36em; font-weight: 800; letter-spacing: -.02em; }
.rt-numbers { display: flex; flex-wrap: wrap; gap: .4em 1.5em; }
.rt-numbers small { display: block; color: #c7d2fe; font-size: .74em; white-space: nowrap; }
.rt-numbers b { display: block; margin-top: .1em; font-size: 1.12em; font-weight: 800; white-space: nowrap; }
.rt-numbers .is-price b { color: #86efac; }
.rt-palette { display: flex; flex-wrap: wrap; gap: .4em; padding: .55em .7em; border: 1px solid var(--ui-line); border-radius: .6em; background: #fff; }
.rt-palette > span { display: inline-flex; align-items: center; gap: .4em; padding: .3em .6em; border: 1px solid var(--ui-line); border-radius: .45em; font-size: .78em; white-space: nowrap; }
.rt-palette i { width: .7em; height: .7em; border-radius: .2em; background: var(--c); }
.rt-steps { position: relative; display: grid; gap: .6em; }
.rt-steps::before { position: absolute; top: 1.4em; bottom: 1.4em; left: calc(1.1em - 1px); width: 2px; background: var(--ui-line); content: ""; transition: opacity .4s ease; }
.rt-step { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: .75em; margin-left: 2.6em; padding: .6em .85em .6em .65em; border: 1px solid var(--ui-line); border-radius: .7em; background: #fff; box-shadow: 0 .5em 1.1em -1em rgba(15, 23, 42, .8); font-size: .9em; transition: opacity .4s ease, transform .5s cubic-bezier(.2, .8, .2, 1), border-color .3s ease, box-shadow .3s ease; transition-delay: calc(var(--i) * .35s); }
.rt-no { position: absolute; top: 50%; left: -2.7em; display: grid; width: 2em; height: 2em; margin-top: -1em; place-items: center; border-radius: 50%; background: var(--c); color: #fff; font-weight: 800; box-shadow: 0 0 0 .25em var(--ui-bg); }
.rt-ico { display: grid; width: 2.2em; height: 2.2em; grid-row: 1 / span 2; place-items: center; border-radius: .5em; background: var(--c); color: #fff; }
.rt-ico .ui-ico { width: 1.15em; height: 1.15em; }
.rt-text { grid-row: 1 / span 2; min-width: 0; }
.rt-text b { display: block; overflow: hidden; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.rt-text small { display: flex; flex-wrap: wrap; align-items: center; gap: .25em .5em; margin-top: .1em; color: var(--ui-muted); font-size: .84em; }
.rt-time { grid-column: 3; color: var(--ui-muted); font-size: .82em; text-align: right; white-space: nowrap; }
.rt-cost { grid-column: 3; font-weight: 800; text-align: right; white-space: nowrap; }
.rt-due { transition: opacity .3s ease, transform .35s cubic-bezier(.2, .9, .3, 1.3); }
.rt-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6em; }
[data-scene="route"] .ui-toast { right: auto; bottom: 1.45em; left: 50%; translate: -50% 0; white-space: nowrap; }
[data-scene="route"].is-armed:not(.p2) .rt-step { opacity: 0; transform: translateY(.8em); transition-delay: 0s; }
[data-scene="route"].is-armed:not(.p2) .rt-steps::before { opacity: 0; }
[data-scene="route"].is-armed:not(.p3) .rt-due { opacity: 0; transform: scale(.6); }
[data-scene="route"].p3:not(.p5) .rt-step.is-due { border-color: #f59e0b; box-shadow: 0 0 0 .25em rgba(245, 158, 11, .2); }
[data-scene="route"].is-armed:not(.p5) .ui-toast { opacity: 0; transform: translateY(.6em) scale(.95); }

/* Gas inventory */
.gas-vessels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6em; }
.gas-card { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: .15em; padding: .7em .75em .8em; border: 1px solid var(--ui-line); border-radius: .7em; background: radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--c) 10%, #fff), #fff 65%); box-shadow: 0 1px 2px rgba(15, 23, 42, .06); transition: border-color .3s ease, box-shadow .3s ease; }
.gas-card > b { overflow: hidden; max-width: 100%; margin-top: .35em; font-size: .92em; text-overflow: ellipsis; white-space: nowrap; }
.gas-card > small { color: var(--ui-muted); font-size: .76em; white-space: nowrap; }
.gas-cover { margin-top: .2em; color: var(--ui-soft); font-size: .76em; font-weight: 700; white-space: nowrap; }
.gas-state { margin-top: .2em; justify-items: start; }
.gas-state .gas-cover { margin-top: 0; }
.gas-state > .gas-short { opacity: 0; transform: translateY(-.5em); }
.gas-vessel { width: 2.6em; height: 4.2em; align-self: center; overflow: visible; }
.gas-vessel .gas-air { fill: #f1f5f9; }
.gas-vessel .gas-fill { fill: var(--c); fill-opacity: .82; transform: scaleY(var(--lvl)); transform-box: fill-box; transform-origin: bottom; transition: transform 1.3s cubic-bezier(.3, .1, .2, 1); }
.gas-vessel .gas-shell { fill: none; stroke: #334155; stroke-width: 1.6; stroke-linejoin: round; }
.gas-low { border-color: #fdba74; }
.gas-forecast { overflow: hidden; }
.gas-legend { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .3em .45em; color: var(--ui-muted); font-size: .8em; font-weight: 600; }
.gas-legend i { width: 1.1em; height: 0; margin-left: .45em; border-top: 2.5px solid #ea580c; }
.gas-legend i:first-child { margin-left: 0; }
.gas-legend .lg-reserve { border-top: 1.5px dashed #475569; }
.gas-legend .lg-delivery { width: .7em; height: .7em; border: 0; border-radius: .15em; background: #059669; }
.gas-chart { display: block; width: 100%; height: auto; padding: .7em .9em .5em; overflow: visible; }
.gas-chart .gas-grid { fill: none; stroke: #e2e8f0; stroke-width: 1; }
.gas-chart .gas-reserve { fill: none; stroke: #475569; stroke-width: 1.5; stroke-dasharray: 6 4; }
.gas-chart .gas-flag { fill: none; stroke: #e11d48; stroke-width: 1.5; stroke-dasharray: 3 3; opacity: 0; transition: opacity .3s ease; }
.gas-chart .gas-line { fill: none; stroke: #ea580c; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s ease, opacity .4s ease; }
.gas-chart .gas-line-base { stroke-dasharray: .014 .011; opacity: .4; }
.gas-chart .gas-cross { fill: #e11d48; stroke: #fff; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .3s ease; }
.gas-chart .gas-arrival { fill: #059669; transition: opacity .4s ease .9s; }
[data-scene="gas"].is-armed:not(.p1) .gas-fill { transform: scaleY(0); }
[data-scene="gas"].is-armed:not(.p5) .gas-line-base { stroke-dasharray: 1; opacity: 1; }
[data-scene="gas"].is-armed:not(.p2) .gas-line-base { stroke-dashoffset: 1; }
[data-scene="gas"].p3:not(.p5) .gas-cross { opacity: 1; animation: gas-alert 1.2s ease-in-out infinite; }
[data-scene="gas"].p3:not(.p5) .gas-flag { opacity: 1; }
[data-scene="gas"].is-armed:not(.p3) .ui-swap > .is-after { opacity: 0; transform: translateY(.5em); }
[data-scene="gas"].is-armed:not(.p3) .ui-swap > .is-before { opacity: 1; transform: none; }
[data-scene="gas"].p3:not(.p5) .gas-state > .gas-short { opacity: 1; transform: none; }
[data-scene="gas"].p3:not(.p5) .gas-state > .is-after { opacity: 0; transform: translateY(.5em); }
[data-scene="gas"].p3:not(.p5) .gas-low { border-color: #fb923c; box-shadow: 0 0 0 .25em rgba(234, 88, 12, .14); }
[data-scene="gas"].is-armed:not(.p5) .gas-line-order { stroke-dashoffset: 1; }
[data-scene="gas"].is-armed:not(.p5) .gas-arrival { opacity: 0; transition-delay: 0s; }
[data-scene="gas"].is-armed:not(.p5) .ui-toast { opacity: 0; transform: translateY(.6em) scale(.95); }

/* Precision cards */
[data-scene="precision"] .cal-chart > div > i { transition: width 1.1s cubic-bezier(.2, .8, .2, 1); }
[data-scene="precision"] .cal-chart > div > b { transition: opacity .4s ease .6s; }
[data-scene="precision"].is-armed:not(.p1) .cal-before > i, [data-scene="precision"].is-armed:not(.p2) .cal-after > i { width: 0; }
[data-scene="precision"].is-armed:not(.p1) .cal-before > b, [data-scene="precision"].is-armed:not(.p2) .cal-after > b { opacity: 0; transition-delay: 0s; }

/* Output thumbnails */
.out-thumb { display: block; width: 100%; max-width: 220px; height: auto; margin-bottom: 4px; overflow: visible; }
.out-thumb .pg { fill: #eef3fa; stroke: #c7d4e6; }
.out-thumb .pg-dark { fill: #132744; stroke: #2c4467; }
.out-thumb .pg-sim { fill: #0b1220; stroke: #2c4467; }
.out-thumb .ln { fill: none; stroke: #9db0c9; stroke-width: 2.2; stroke-linecap: round; }
.out-thumb .ln-strong { fill: none; stroke: #2f6fe0; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.out-thumb .ink-blue { fill: #2f6fe0; }
.out-thumb .ink-blue-soft { fill: #d6e4fb; }
.out-thumb .bar-a { fill: #4f8fff; } .out-thumb .bar-b { fill: #45d4ef; } .out-thumb .bar-c { fill: #37d3a4; }
.out-thumb .dim { fill: none; stroke: #9db0c9; stroke-width: 1; }
.out-thumb .bend { fill: none; stroke: #ff7a4d; stroke-width: 1.4; stroke-dasharray: 3 2.5; }
.out-thumb .stock { fill: #1a3152; stroke: #2f4a70; }
.out-thumb .seg { fill: rgba(79, 143, 255, .35); stroke: #74a6ff; stroke-width: 1; }
.out-thumb .rem { fill: rgba(55, 211, 164, .3); stroke: #37d3a4; stroke-width: 1; }
.out-thumb .lbl rect { fill: #eef3fa; stroke: #c7d4e6; }
.out-thumb .nest-mini > * { fill: rgba(79, 143, 255, .3); stroke: #74a6ff; stroke-width: 1; }
.out-thumb .zip rect { fill: #ff7a4d; stroke: #ffb08f; }
.out-thumb .zip path { fill: none; stroke: #fff; stroke-width: 1.5; }
.out-thumb .zip text { fill: #fff; font: 800 9px var(--mono); text-anchor: middle; }
.out-thumb .sim-part { fill: none; stroke: #3b4f6e; stroke-width: 1.4; }
.out-thumb .sim-path { fill: none; stroke: #ff7a4d; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.out-thumb .sim-head { fill: #ffd2b8; offset-path: path("M26 22h50v24H26zM76 22l14 0M90 22h44v52H90zM90 74L76 74M76 56v18H26V56z"); offset-rotate: 0deg; filter: drop-shadow(0 0 4px #ff7a4d); }
.output-grid li.reveal { opacity: 1; transform: none; }
.js-ready .output-grid li.reveal .ln, .js-ready .output-grid li.reveal .ln-strong { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s ease; transition-delay: calc(var(--i) * .12s + .2s); }
.js-ready .output-grid li.reveal.is-visible .ln, .js-ready .output-grid li.reveal.is-visible .ln-strong { stroke-dashoffset: 0; }
.output-grid li.is-visible .sim-path, .output-grid li:hover .sim-path { animation: sim-draw 4.5s linear infinite; }
.output-grid li.is-visible .sim-head, .output-grid li:hover .sim-head { animation: sim-move 4.5s linear infinite; }
.output-grid li:hover .out-thumb { transform: translateY(-3px); }
.out-thumb { transition: transform .25s ease; }

@keyframes ui-spin { to { transform: rotate(360deg); } }
@keyframes ui-ripple { from { opacity: .9; transform: scale(.3); } to { opacity: 0; transform: scale(1.4); } }
@keyframes ui-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 107, 61, .55); } 100% { box-shadow: 0 0 0 9px rgba(255, 107, 61, 0); } }
@keyframes ui-caption { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes ui-flash { 0%, 100% { background: transparent; } 25%, 60% { background: rgba(37, 99, 235, .16); color: #1d4ed8; } }
@keyframes ui-progress { from { width: 0; } to { width: 100%; } }
@keyframes cad-turn { 0%, 100% { transform: rotateX(58deg) rotateZ(-32deg); } 50% { transform: rotateX(58deg) rotateZ(28deg); } }
@keyframes tube-cut { 0% { opacity: 0; stroke-width: 6; } 60% { opacity: 1; stroke: #ff6b3d; } 100% { opacity: 1; } }
@keyframes tube-spark { 0% { opacity: 0; } 30%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sim-draw { 0% { stroke-dashoffset: 1; } 85%, 100% { stroke-dashoffset: 0; } }
@keyframes sim-move { 0% { offset-distance: 0%; opacity: 1; } 85% { offset-distance: 100%; opacity: 1; } 86%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes gas-alert { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.5); } }

/* Narrow containers: keep the replicas readable */
@container (max-width: 560px) {
  .app-window { font-size: clamp(7.5px, 2.25cqi, 11px); }
  .ui-col-t, .ui-col-s { display: none; }
  .ui-tr { grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, .55fr) minmax(0, 1fr); }
  .ui-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-head .ui-btn > span { display: none; }
  .read-grid, .fin-grid, .calc-body, .cad-body, .nest-body { grid-template-columns: 1fr; }
  .nest-layouts { display: none; }
  .ui-steps { grid-template-columns: 1fr 1fr; }
  .tube-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tube-stats > div:nth-child(n + 4) { display: none; }
  .fin-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fin-totals .ui-btn { grid-column: 1 / -1; justify-self: start; }
  .stk-tr { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, .9fr); }
  .stk-tr > span:nth-child(5) { display: none; }
  .stock-tabs > span:nth-child(3) { display: none; }
  .stock-tabs { grid-template-columns: 1fr 1fr; }
  .cad-viewer { min-height: 15em; }
  .rt-numbers { gap: .3em 1.1em; }
  .rt-numbers > div:nth-child(5) { display: none; }
  .rt-palette > span:nth-child(n + 5) { display: none; }
  .gas-vessels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gas-card:nth-child(4), .gas-legend { display: none; }
  .ui-rail { display: none; }
  .ui-frame { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 980px) {
  .how-player { grid-template-columns: 1fr; }
  .how-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .how-step { grid-template-columns: 1fr; padding: 14px 14px 16px; }
  .how-step .step-no { font-size: 2rem; }
  .how-step strong { font-size: 1rem; }
  .how-step-body, .how-step.is-active .how-points { display: none; }
  .how-stage { position: relative; top: auto; padding: 14px; }
}

@media (max-width: 640px) {
  .how-steps { grid-template-columns: 1fr; }
  .how-step { grid-template-columns: 44px minmax(0, 1fr); align-items: center; }
  .showcase-visual.ui-stage { padding: 18px 12px 0; }
  .showcase-visual.ui-stage figcaption { margin: 12px -12px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ui-cursor, .scene-caption { display: none !important; }
  .cad-model { animation: none !important; }
  .sim-path { stroke-dashoffset: 0 !important; }
  .sim-head { display: none; }
}