.tire-simulator-dialog { width: min(1240px, calc(100vw - 40px)); max-width: none; max-height: 94vh; padding: 0; border: 1px solid var(--line); border-radius: 20px; color: var(--ink); background: #f6f8f7; box-shadow: 0 32px 120px #001d2e60; }
.tire-simulator-dialog::backdrop { background: #061b27a8; backdrop-filter: blur(5px); }
.press-dialog-head { display: flex; justify-content: space-between; align-items: center; padding: 24px 30px 20px; background: white; border-bottom: 1px solid var(--line); }
.press-eyebrow, .press-section-kicker { font: 600 10px var(--mono); letter-spacing: .12em; color: #8b5732; }
.press-dialog-head h2 { margin: 6px 0 2px; font-size: 26px; letter-spacing: -.04em; }
.press-dialog-head p { margin: 0; font-size: 13px; color: var(--muted); }
.press-dialog-head .icon-button { font-size: 29px; font-weight: 300; }
.press-dialog-body { padding: 24px 30px; }
.press-scene-shell { overflow: hidden; border-radius: 13px; background: #0d2830; }
.press-scene-toolbar { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 15px 22px 0; color: #95b8bb; font: 11px var(--mono); }
.press-live-badge { color: #87dbc0; letter-spacing: .04em; }
.press-scene { display: block; width: 100%; height: auto; }
.scene-number { fill: #7fcbb5; font: 14px var(--mono); }
.scene-label { fill: #b2c8ca; font: 11px var(--sans); letter-spacing: .12em; }
.scene-mini { fill: #b9d4d3; font: 9px var(--mono); letter-spacing: .04em; }
.press-stage-strip { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid #29505a; }
.press-stage-strip span { padding: 12px 6px; color: #86a4aa; font-size: 11px; text-align: center; border-right: 1px solid #204650; }
.press-stage-strip small { display: block; font: 9px var(--mono); opacity: .7; margin-bottom: 3px; }
.press-stage-strip .active { background: #1a4c4c; color: #b7f1d8; box-shadow: inset 0 2px #7bc4a7; }
.press-metrics { display: grid; grid-template-columns: repeat(6, 1fr); margin: 18px 0 12px; padding: 18px 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.press-metrics > div { padding: 0 18px; border-right: 1px solid #e0e8e4; }
.press-metrics > div:last-child { border: 0; }
.press-metrics span { display: block; font-size: 11px; color: var(--muted); }
.press-metrics strong { display: block; margin-top: 6px; font-size: 23px; line-height: 1.2; white-space: nowrap; }
.press-metrics b { font-weight: 550; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.press-metrics small { color: var(--muted); font-size: 11px; font-weight: 400; }
.press-status-line { border-radius: 8px; padding: 11px 14px; font-size: 12px; color: #3e6256; background: #e8f2ec; }
.press-status-line.alarm { background: #fff0e6; color: #9f4921; }
.press-setup { display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 25px 0 20px; }
.press-setup h3, .press-section-heading h3 { margin: 5px 0; font-size: 17px; letter-spacing: -.025em; }
.press-setup p, .press-scenarios p, .press-policy p { max-width: 700px; margin: 6px 0 0; font-size: 12px; line-height: 1.6; color: var(--muted); }
.press-setup-buttons { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.press-policy { margin-bottom: 18px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.press-policy summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; font-size: 13px; cursor: pointer; }
.press-policy summary > span { color: #8b5732; font: 10px var(--mono); }
.press-policy summary > b { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--muted); }
.press-policy form { padding: 0 16px 16px; }
.press-policy-fields { display: flex; flex-wrap: wrap; gap: 16px; margin: 14px 0; }
.press-policy-fields > label { flex: 1 1 220px; }
.press-policy form > small { display: inline-block; margin: 0 0 0 12px; font-size: 11px; color: var(--muted); }
.press-controls, .press-trends, .press-events, .press-scenarios { background: white; border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.press-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 15px; }
.press-section-heading > span { font-size: 11px; color: var(--muted); }
.press-route { font: 10px var(--mono) !important; }
.press-command-row { display: flex; flex-wrap: wrap; gap: 8px; }
.press-setpoint-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 20px; margin-top: 20px; border-top: 1px solid #e6ede9; }
.press-setpoint-row form { display: flex; align-items: end; gap: 10px; }
.press-setpoint-row .field { flex: 1; margin: 0; min-width: 0; }
.press-setpoint-row .field > span, .press-policy-fields .field > span { font-size: 11px; }
.press-setpoint-row input, .press-setpoint-row select { width: 100%; padding: 9px 11px; min-height: 39px; font-size: 12px; }
.press-setpoint-row .button { min-height: 39px; white-space: nowrap; }
.press-command-result { margin-top: 16px; padding: 12px 14px; font-size: 12px; background: #f3f6f4; border-radius: 7px; color: var(--muted); }
.press-command-result strong, .press-command-result > span { display: block; }
.press-command-result strong { margin-bottom: 3px; color: var(--ink); }
.press-command-result[data-status="denied"], .press-command-result[data-status="pending_approval"] { background: #fff3e2; color: #8a551d; }
.press-command-result[data-status="completed"] { background: #e7f4ed; color: #28674e; }
.press-command-result .text-button { margin-top: 8px; font-size: 11px; }
.press-observability { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; margin: 16px 0; }
.press-trends svg { width: 100%; height: 66px; margin: 4px 0 10px; overflow: visible; }
.press-trend-grid { stroke: #e6ece9; stroke-width: 1; }
.press-trend-label { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; color: #62766e; }
.press-trend-label b { color: var(--ink); font: 11px var(--mono); }
.press-trend-label i { display: inline-block; height: 7px; width: 7px; background: #b86c35; border-radius: 50%; margin-right: 5px; }
.press-trend-label.pressure i { background: #168572; }
.press-trends > small { font: 9px var(--mono); color: var(--muted); }
.press-events ol { margin: 0; padding: 0; list-style: none; }
.press-events li { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid #edf1ef; font-size: 11px; line-height: 1.5; }
.press-events li:last-child { border: 0; }
.press-events time { min-width: 35px; font: 10px var(--mono); color: #83958f; }
.press-events li > span { color: #365348; }
.press-scenarios .press-section-heading { margin-bottom: 4px; }
.press-scenarios .press-section-heading > label { white-space: nowrap; font-size: 11px; color: var(--muted); }
.press-scenarios select { margin-left: 5px; padding: 5px; border: 1px solid var(--line); border-radius: 5px; background: #fff; }
.press-scenario-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 16px 0; }
.press-scenario-row button { padding: 12px 10px; text-align: left; border: 1px solid var(--line); border-radius: 7px; background: #fafcfb; font-size: 12px; font-weight: 550; }
.press-scenario-row small { display: block; margin-top: 4px; font-size: 10px; font-weight: 400; color: var(--muted); }
.press-scenario-row button[aria-pressed="true"] { background: #edf5ef; border-color: #80ad98; }
.press-scenario-row .press-estop { color: #9c3737; border-color: #e2b6b5; background: #fff8f7; }
.press-scenario-row .press-estop[aria-pressed="true"] { color: #fff; background: #a43d3b; border-color: #a43d3b; }
.press-scenario-row .press-estop[aria-pressed="true"] small { color: #f1d6d3; }
.press-scenario-footer { display: flex; justify-content: space-between; gap: 16px; align-items: center; font-size: 11px; color: var(--muted); }
.press-scenario-footer .text-button { flex: 0 0 auto; font-size: 11px; }
.press-boundary { padding: 17px 4px 0; font-size: 10px; line-height: 1.6; color: #6e8078; }
.press-scene-shell.is-offline .press-scene { opacity: .45; }
.press-upper-mold { transition: transform 1s ease; }
.mold-closed .press-upper-mold { transform: translateY(31px); }
.press-heat-jacket, .press-alarm-lamp, .press-guard { transition: fill .5s, opacity .5s, stroke .5s; }
.is-heating .press-heat-jacket { opacity: .85; }
.is-heating .press-heat-waves { opacity: .6; animation: press-heat 2s ease-in-out infinite; }
.is-heating .press-heater-lamp { fill: #f0b173; }
.has-alarm .press-alarm-lamp { fill: #ef8b67; }
.guard-open .press-guard { stroke: #ef8b67; transform: translateX(-20px); }
.press-gauge-needle { transform-origin: 686px 148px; transition: transform .6s; }
.press-feed-tire, .press-out-tire { opacity: .7; }
.is-running .press-belt { animation: press-conveyor 2s linear infinite; }
.is-running[data-phase="loading"] .press-feed-tire { animation: press-infeed 1.1s linear infinite; }
.is-running[data-phase="unloading"] .press-out-tire { animation: press-output 1.1s linear infinite; }
[data-phase="idle"] .press-product, [data-phase="loading"] .press-product { opacity: 0; }
.press-demo-launch { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px; margin-bottom: 24px; border: 1px solid #a9c8bd; border-radius: 14px; background: linear-gradient(115deg, #e3f1e9, #f6f9f6); }
.press-demo-launch h2 { font-size: 20px; margin: 6px 0; letter-spacing: -.025em; }
.press-demo-launch p { color: var(--muted); font-size: 13px; max-width: 650px; margin: 0; }
.press-demo-launch .button { flex: 0 0 auto; }
.press-open-simulator { width: 100%; margin: 0 0 16px; }
.tire-simulator-dialog button:disabled { opacity: .5; cursor: not-allowed; }
@keyframes press-conveyor { to { stroke-dashoffset: -36; } }
@keyframes press-heat { 50% { opacity: .2; } }
@keyframes press-infeed { from { transform: translate(210px, 218px); opacity: 1; } to { transform: translate(290px, 218px); opacity: .3; } }
@keyframes press-output { from { transform: translate(800px, 218px); opacity: .3; } to { transform: translate(903px, 218px); opacity: 1; } }
@media (max-width: 900px) { .press-metrics { grid-template-columns: repeat(3, 1fr); row-gap: 18px; } .press-metrics > div:nth-child(3) { border: 0; } .press-setpoint-row { grid-template-columns: 1fr; gap: 16px; } .press-setup { flex-direction: column; align-items: start; gap: 12px; } .press-route { display: none; } .press-scenario-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .tire-simulator-dialog { width: calc(100vw - 12px); max-height: 97dvh; border-radius: 13px; } .press-dialog-head { padding: 18px 16px; } .press-dialog-head h2 { font-size: 22px; } .press-dialog-body { padding: 12px; } .press-scene-toolbar { font-size: 8px; padding: 12px 10px 0; } .press-stage-strip span { font-size: 7px; padding: 8px 1px; } .press-stage-strip small { font-size: 8px; } .press-metrics { padding: 14px 0; margin-top: 12px; } .press-metrics > div { padding: 0 10px; } .press-metrics strong { font-size: 22px; } .press-metrics span { font-size: 9px; } .press-metrics small { font-size: 9px; } .press-controls, .press-trends, .press-events, .press-scenarios { padding: 14px; } .press-section-heading h3 { font-size: 16px; } .press-setup h3 { font-size: 16px; } .press-setup-buttons { flex-wrap: wrap; } .press-observability { grid-template-columns: 1fr; } .press-scenario-row { grid-template-columns: 1fr 1fr; } .press-scenario-footer { align-items: start; flex-direction: column; gap: 10px; } .press-command-row .button { font-size: 11px; } .press-setpoint-row form { gap: 6px; } .press-setpoint-row .button { font-size: 11px; padding-inline: 8px; } .press-policy summary { gap: 6px; } .press-policy summary > span { width: 100%; } .press-policy form > small { margin: 8px 0 0; } .press-demo-launch { padding: 18px; flex-direction: column; align-items: start; gap: 16px; } }
@media (prefers-reduced-motion: reduce) { .press-scene-shell *, .press-scene-shell *::before { animation: none !important; transition: none !important; } }

/* Keep the machine in view while an operator uses the controls on desktop. */
.press-dialog-head { position: sticky; top: 0; z-index: 3; }
.press-main-grid { display: grid; grid-template-columns: 1.18fr 1fr; gap: 20px; align-items: start; }
.press-main-visual { position: sticky; top: 130px; min-width: 0; }
.press-main-visual .press-metrics { grid-template-columns: repeat(3, 1fr); row-gap: 18px; }
.press-main-visual .press-metrics > div:nth-child(3) { border: 0; }
.press-main-controls { min-width: 0; }
.press-main-controls .press-setup { flex-direction: column; align-items: start; padding-top: 2px; gap: 12px; }
.press-main-controls .press-setpoint-row { grid-template-columns: 1fr; gap: 16px; }
.press-main-controls .press-route { display: none; }
.press-main-controls .press-policy-fields { gap: 8px; }
.press-main-controls .press-policy-fields > label { flex-basis: 100%; }
.press-main-controls .press-policy form > small { margin: 8px 0 0; }
@media (max-width: 1000px) { .press-main-grid { grid-template-columns: 1fr; gap: 20px; } .press-main-visual { position: static; } }