.scene-message::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.48;
  background-image: url("assets/mechanical-engraving-v2.svg"), url("assets/metal-scratches-v2.svg"), repeating-linear-gradient(105deg, var(--color-metal-etch) 0 1px, var(--color-clear) 1px 5px);
  background-size: 580px 580px, 130px 130px, auto;
  background-position: right -220px top 20px, left top, center;
  background-repeat: repeat-y, repeat, repeat;
}
.scene-message::after, .surface--light::after {
  content: ""; position: absolute; inset: 10px; top: calc(var(--header-h) + 10px); pointer-events: none;
}
.surface--light::after {
  border: 1px solid var(--color-rail-line);
  box-shadow: inset 2px 0 0 var(--color-copper-haze), inset -2px 0 0 var(--color-copper-haze);
  background-image: radial-gradient(circle, var(--color-accent) 0 1.5px, var(--color-clear) 2.5px), radial-gradient(circle, var(--color-accent) 0 1.5px, var(--color-clear) 2.5px);
  background-position: left 2px top, right 2px top; background-size: 6px 96px; background-repeat: repeat-y;
}
.surface--light { background: var(--bg-paper-metal); }
.surface--light::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.12;
  background-image: url("assets/mechanical-engraving-v2.svg"), url("assets/metal-scratches-v2.svg");
  background-size: 600px 600px, 160px 160px; background-position: right -280px top 40px, left top;
  background-repeat: repeat-y, repeat;
}
.surface--spec::before { background-size: 480px 480px, 160px 160px; background-position: left -310px top 10px, left top; }
.surface--entry::before { background-size: 640px 640px, 160px 160px; background-position: right -310px top 140px, left top; }
.metal-grain { position: absolute; inset: 0; pointer-events: none; opacity: 0.18; filter: url(#metal-grain-filter); background: var(--color-paper); mix-blend-mode: soft-light; }
.head { display: grid; gap: var(--sp-1); flex-shrink: 0; }
.eyebrow { display: flex; align-items: center; gap: 0.75em; font-family: var(--font-en); font-weight: 600; font-size: var(--fs-ui); letter-spacing: 0.16em; line-height: 1.3; color: var(--color-copper-dark); }
.eyebrow::before { content: ""; display: block; width: 26px; height: 1px; background: currentColor; }
.eyebrow--light { color: var(--color-copper-light); }
.chapter-title { font-family: var(--font-head); font-size: var(--fs-head); font-weight: 700; line-height: var(--lh-head); letter-spacing: 0.025em; }
.chapter-tag { display: block; margin-bottom: var(--sp-1); font-size: var(--fs-min); line-height: 1.4; letter-spacing: 0.04em; color: var(--color-copper-dark); }
.txt { display: grid; gap: var(--sp-p); flex-shrink: 0; }
.kw { font-weight: 700; }
.closing { font-weight: var(--fw-body); }
.closing .kw { color: var(--color-copper-light); }
.mechanism { height: var(--art-h); width: 100%; display: flex; justify-content: flex-end; flex-shrink: 0; color: var(--color-copper-light); }
.mechanism__image { display: block; width: auto; max-width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 3px var(--color-shadow)); }

.scene-message::after {
  border: 3px double var(--color-copper-light); opacity: 0.8;
  box-shadow: inset 3px 0 0 var(--color-brass-shade), inset -3px 0 0 var(--color-brass-shade), inset 0 1px 0 var(--color-brass-highlight), 0 0 0 3px var(--color-metal-deep), 0 0 20px var(--color-shadow);
  background-image: radial-gradient(circle, var(--color-brass-highlight) 0 1px, var(--color-brass-shade) 2px 3px, var(--color-clear) 4px), radial-gradient(circle, var(--color-brass-highlight) 0 1px, var(--color-brass-shade) 2px 3px, var(--color-clear) 4px);
  background-position: left 1px top, right 1px top; background-size: 8px 72px; background-repeat: repeat-y;
}
.scene-message .head, .scene-message .txt { position: relative; isolation: isolate; padding-inline: 12px; background-color: var(--color-metal-deep); }
.scene-message .chapter-title { font-size: clamp(22px, min(4dvh, 6.3vw), 32px); }
.scene-message .head::before, .scene-message .txt::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  border: 1px solid var(--color-copper-light);
  background-color: var(--color-metal-deep);
  background-image: radial-gradient(circle at 5px 5px, var(--color-brass-highlight) 0 1px, var(--color-brass-shade) 2px 3px, var(--color-clear) 4px), radial-gradient(circle at calc(100% - 5px) calc(100% - 5px), var(--color-brass-highlight) 0 1px, var(--color-brass-shade) 2px 3px, var(--color-clear) 4px), linear-gradient(125deg, var(--color-metal-light), var(--color-clear) 55%);
  box-shadow: inset 0 1px 0 var(--color-frame-highlight), inset 0 -3px 0 var(--color-shadow), 0 5px 12px var(--color-shadow);
}
.scene-message .head::before { inset: -10px; border-radius: 8px 2px; }
.scene-message .head::after {
  content: ""; position: absolute; right: 0; top: -6px; width: 42px; height: 4px; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--color-copper-light) 0 2px, var(--color-clear) 2px 6px);
}
.scene-message .txt::before { inset: -7px -10px; border-color: var(--color-rail-line); border-radius: 2px 2px 10px 2px; }
.scene-message .closing { border-top: 1px solid var(--color-rail-line); padding-top: 0.25em; }
.scene-message .mechanism { position: relative; display: block; }
.mechanism__assembly { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 4px 3px var(--color-shadow)); }
.scene-message .mechanism__image { position: relative; margin-inline: auto; width: 58%; max-width: 250px; object-position: center bottom; }
.cog-spin { transform-box: fill-box; transform-origin: center; animation: gear-turn var(--dur-cog) linear infinite; }
.machine-photo { position: relative; flex-shrink: 0; height: var(--photo-h); margin-inline: 10px; padding: 5px; border: 1px solid var(--color-copper-dark); background: var(--bg-copper-metal); box-shadow: 0 2px 4px var(--color-shadow); }
.photo-frame { position: absolute; inset: 10px -9px; width: calc(100% + 18px); height: calc(100% - 20px); color: var(--color-copper-dark); pointer-events: none; }
.machine-photo__image { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.photo-cog { position: absolute; right: -10px; top: -10px; width: 32px; height: 32px; color: var(--color-metal-deep); background: var(--bg-copper-metal); border-radius: 50%; box-shadow: 0 2px 3px var(--color-shadow); }
.photo-engine { position: absolute; right: 5px; bottom: 5px; width: 43%; height: 78%; object-fit: contain; object-position: right bottom; filter: drop-shadow(0 2px 2px var(--color-shadow)); pointer-events: none; }
.support-head { position: relative; display: grid; gap: var(--sp-1); }
.support-machinery { position: absolute; right: 0; top: 0; width: 60px; height: 54px; color: var(--color-copper-dark); opacity: 0.65; }
.support-title { font-size: var(--fs-head); font-weight: 700; line-height: var(--lh-head); }
.prototype-note { font-size: var(--fs-min); font-weight: 500; line-height: 1.7; }
.form-preview-button { cursor: default; }
.rail-brand { position: relative; z-index: 1; display: grid; gap: 18px; width: min(100%, 280px); color: var(--color-on-dark); }
.rail-brand__rule { width: 52px; height: 2px; background: var(--color-accent); }
.rail-brand__name { font-size: clamp(19px, 1.7vw, 28px); font-weight: 700; line-height: 1.6; letter-spacing: 0.06em; white-space: nowrap; }
.rail-brand__en { color: var(--color-copper-light); font-family: var(--font-en); font-size: 14px; letter-spacing: 0.25em; }
.rail-brand__job { font-size: 15px; font-weight: 500; line-height: 1.8; }
.steampunk-rail {
  background-image: radial-gradient(ellipse at 25% 5%, var(--color-copper-glow), var(--color-clear) 60%), repeating-linear-gradient(112deg, var(--color-metal-etch) 0 1px, var(--color-clear) 1px 5px);
}
.steampunk-rail::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.52; background: url("assets/mechanical-engraving-v2.svg") center / 540px 540px repeat-y; }
.rail-side { position: relative; z-index: 1; }
.rail-caption { font-family: var(--font-en); color: var(--color-copper-light); letter-spacing: 0.16em; font-size: 14px; }
.rail-counter { color: var(--color-paper); font-family: var(--font-en); font-size: clamp(64px, 7vw, 110px); font-weight: 500; line-height: 1; }
.rail-progress { display: flex; gap: 5px; }
.rail-progress__mark { width: 16px; height: 2px; background: var(--color-on-dark-line); opacity: 0.3; }
.rail-progress__mark.is-current { opacity: 1; background: var(--color-accent); }
@keyframes gear-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
  .mechanism__watch-rotor { transform-box: view-box; transform-origin: var(--watch-axis); animation: gear-turn var(--watch-period) linear infinite; animation-direction: var(--watch-direction); animation-play-state: paused; }
  .scene-message.is-active .mechanism__watch-rotor { animation-play-state: running; }
}

.scene-growth::before {
  --growth-cog-top: min(72vw, 320px, calc(100dvh - var(--header-h) - 48px));
  --growth-cog-bottom: min(62vw, 280px, calc(100dvh - var(--header-h) - 48px));
  opacity: 0.34;
  background-image: url("assets/growth-cog-complete-v1.svg"), url("assets/growth-cog-complete-v1.svg"), url("assets/growth-pipe-complete-v1.svg"), url("assets/metal-scratches-v2.svg");
  background-size: var(--growth-cog-top) var(--growth-cog-top), var(--growth-cog-bottom) var(--growth-cog-bottom), min(64vw, 300px) min(52dvh, 450px), 160px 160px;
  background-position: right 24px top calc(var(--header-h) + 14px), left 24px bottom 16px, center calc(50% + 28px), left top;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
}
.scene-growth .chapter-tag, .scene-growth .eyebrow { color: var(--color-brass-shade); }
.growth-copy { display: grid; gap: var(--sp-p); flex-shrink: 0; }
.growth-step { display: grid; grid-template-columns: clamp(44px, 8dvh, 82px) 1fr; gap: var(--sp-p); align-items: center; min-height: clamp(60px, 12.5dvh, 138px); border-block-end: 1px solid var(--color-rail-line); background: linear-gradient(100deg, var(--color-paper-edge), var(--color-clear)); padding: var(--sp-1); }
.growth-part { display: block; width: 100%; height: auto; overflow: visible; color: var(--color-copper-dark); }
.growth-plate { fill: var(--color-paper-mid); stroke: var(--color-copper-light); stroke-width: 1; }
.growth-cog { transform-box: fill-box; transform-origin: center; animation: gear-turn var(--dur-cog) linear infinite; }
.growth-cog--reverse { animation-direction: reverse; }
.growth-hub { fill: var(--color-copper-dark); }
.growth-check { fill: none; stroke: var(--color-copper-dark); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }

.growth-close, .rest-locations, .potential-close, .closing-question {
  position: relative; isolation: isolate; padding: 0.45em var(--sp-p);
  border: 1px solid var(--color-frame-line); border-radius: var(--frame-radius, 12px 3px);
  background: var(--frame-background, linear-gradient(120deg, var(--color-frame-light), var(--color-frame-warm)));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: var(--frame-shadow, inset 0 1px 0 var(--color-frame-highlight), 0 5px 14px var(--color-copper-haze));
}
.growth-close::before, .rest-locations::before, .potential-close::before, .closing-question::before {
  content: ""; position: absolute; z-index: -1; inset: 7px; border-radius: inherit;
  pointer-events: none; filter: blur(8px);
  background: radial-gradient(ellipse at 90% 10%, var(--color-copper-glow), var(--color-clear) 70%);
}
.growth-close::after, .rest-locations::after, .potential-close::after, .closing-question::after {
  content: ""; position: absolute; inset: 4px; pointer-events: none;
  border: 1px solid var(--color-frame-highlight); border-radius: inherit;
}

.scene-rest::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 20%, var(--color-copper-dark), var(--color-metal-deep) 95%); }
.scene-rest .eyebrow--light { color: var(--color-on-dark); }
.scene-rest::after { content: ""; position: absolute; inset: 10px; top: calc(var(--header-h) + 10px); pointer-events: none; border: 1px solid var(--color-rail-line); background-image: url("assets/metal-scratches-v2.svg"), url("assets/mechanical-engraving-v2.svg"); background-size: 160px 160px, 500px 500px; background-position: left top, left -340px top 110px; opacity: 0.35; }
.rest-clock { width: 100%; height: clamp(65px, 17dvh, 220px); flex-shrink: 0; }
.rest-clock__drawing { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 3px var(--color-shadow)); }
.rest-stop-light { stop-color: var(--color-brass-highlight); }
.rest-stop-mid { stop-color: var(--color-accent); }
.rest-stop-shade { stop-color: var(--color-brass-shade); }
.rest-pipe { fill: none; stroke: url(#rest-brass); stroke-width: 9; stroke-linejoin: round; }
.rest-pipe-inner { fill: none; stroke: var(--color-copper-light); stroke-width: 1; stroke-linejoin: round; }
.rest-side-cog { color: var(--color-copper-light); transform-box: fill-box; transform-origin: center; animation: gear-turn var(--dur-cog) linear infinite; }
.rest-side-cog--reverse { animation-direction: reverse; }
.rest-pendulum { transform-origin: 150px 91px; animation: rest-swing var(--dur-rest) ease-in-out infinite; }
.rest-pendulum-rod { stroke: var(--color-brass-highlight); stroke-width: 4; }
.rest-pendulum-bob, .rest-case, .rest-dial-rim { fill: url(#rest-brass); stroke: var(--color-brass-shade); stroke-width: 2; }
.rest-pendulum-ring, .rest-case-line { fill: none; stroke: var(--color-copper-light); stroke-width: 1; }
.rest-dial { fill: var(--color-paper-mid); stroke: var(--color-brass-shade); stroke-width: 2; }
.rest-ticks { fill: none; stroke: var(--color-brass-shade); stroke-width: 1.4; }
.rest-hands { fill: none; stroke: var(--color-metal-deep); stroke-width: 3; stroke-linecap: round; }
.rest-hub { fill: var(--color-metal-deep); }
.rest-mount { fill: none; stroke: var(--color-copper-light); stroke-width: 3; stroke-linecap: round; }
.rest-rivet { fill: var(--color-brass-highlight); stroke: var(--color-brass-shade); stroke-width: 1; }
.rest-locations { --frame-radius: 3px 16px; --frame-background: linear-gradient(120deg, var(--color-frame-dark), var(--color-copper-glow)), var(--color-frame-dark); --frame-shadow: inset 0 1px 0 var(--color-frame-highlight), 0 7px 20px var(--color-shadow); border-color: var(--color-rail-line); }
@keyframes rest-swing { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }
@media (max-height: 600px) { .rest-clock { height: 65px; } }

.maintenance-tools { display: block; flex-shrink: 0; height: clamp(76px, 20dvh, 240px); width: 100%; }
.maintenance-tools__drawing { display: block; width: 100%; height: 100%; filter: drop-shadow(0 3px 3px var(--color-shadow)); }
.maintenance-tools__wrench { animation: tool-lift var(--dur-tool) ease-in-out infinite; }

.potential-photo { position: relative; flex-shrink: 0; height: clamp(84px, 21dvh, 240px); padding: 5px; margin-inline: 6px; border: 1px solid var(--color-copper-dark); background: var(--bg-copper-metal); box-shadow: var(--shadow-soft); }
.potential-photo::before { content: ""; position: absolute; z-index: -1; width: 85%; height: calc(100% + 10px); left: -6px; top: -8px; border-radius: 50% 50% 0 0; background: var(--bg-copper-metal); opacity: 0.6; }
.potential-photo__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }
.potential-gauge { position: absolute; right: 10px; bottom: 7px; width: clamp(52px, 11dvh, 90px); height: clamp(57px, 12.1dvh, 99px); filter: drop-shadow(0 2px 2px var(--color-shadow)); }
.potential-gauge__needle { transform-origin: 50px 49px; animation: pressure-tick var(--dur-gauge) ease-in-out infinite; }
.potential-close { --frame-radius: 3px 18px; --frame-background: linear-gradient(105deg, var(--color-frame-warm), var(--color-frame-light)); }
@keyframes tool-lift { 50% { translate: 0 -2px; } }
@keyframes pressure-tick { 50% { rotate: 6deg; } }
.scene-closing::before { content: ""; position: absolute; inset: 0; opacity: 0.15; pointer-events: none; background: url("assets/mechanical-engraving-v2.svg") right -230px top / 600px 600px repeat-y, url("assets/metal-scratches-v2.svg") center / 160px 160px; }
.closing-questions { flex-shrink: 0; }
.closing-questions .body { display: block; }
.closing-question { --frame-radius: 4px; --frame-background: linear-gradient(115deg, var(--color-frame-dark), var(--color-metal-etch)); border-color: var(--color-rail-line); }
.closing-question--next { --frame-background: linear-gradient(120deg, var(--color-copper-dark), var(--color-frame-dark)); margin-top: var(--sp-1); border-color: var(--color-copper-dark); }
.closing-action { display: grid; gap: var(--sp-p); flex-shrink: 0; }
.closing-links { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-p); }
.closing-link { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: var(--sp-p); border: 1px solid var(--color-on-dark-line); color: var(--color-on-dark); font-weight: 700; }
.closing-link--entry { background: var(--bg-accent); }
.closing-link:focus-visible { outline: 2px solid var(--color-paper); outline-offset: 3px; }
.closing-gears { position: relative; height: clamp(30px, 9dvh, 110px); overflow: hidden; border-block: 1px solid var(--color-rail-line); background: linear-gradient(90deg, var(--color-clear), var(--color-copper-haze), var(--color-clear)); }
.closing-gears::before, .closing-gears::after { content: ""; position: absolute; left: 0; width: calc(100% + 240px); height: 45%; background: url("assets/gear-strip.svg") left center / 240px 100% repeat-x; animation: gears-process var(--dur-gear-line) linear infinite; }
.closing-gears::before { top: 0; opacity: 0.7; }
.closing-gears::after { bottom: 0; animation-direction: reverse; opacity: 0.35; }
.company-info { flex-shrink: 0; }
.company-machine { height: clamp(90px, 32dvh, 360px); width: 100%; flex-shrink: 0; color: var(--color-copper-dark); }
.company-machine svg { display: block; width: 100%; height: 100%; }
.company-needle { transform-origin: 180px 100px; animation: gauge-pulse var(--dur-gauge) ease-in-out infinite; }
@keyframes gears-process { to { transform: translateX(-240px); } }
@keyframes gauge-pulse { 50% { transform: rotate(7deg); } }

#entry .form, #entry .field { min-width: 0; grid-template-columns: minmax(0, 1fr); }
#entry #f-date { display: block; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; -webkit-appearance: none; appearance: none; text-align: left; }
#entry #f-date::-webkit-date-and-time-value { min-width: 0; text-align: left; }
#entry #f-date::-webkit-datetime-edit { min-width: 0; padding: 0; }

@media (prefers-reduced-motion: no-preference) {
  .rv[data-enter] { transform: none; transition: none; }
  .page.is-active .rv.is-on[data-enter] {
    animation: var(--enter-keyframes, enter-focus) var(--enter-duration, 720ms) var(--ease-out) backwards;
  }
  .rv[data-enter="focus"] { --enter-keyframes: enter-focus; }
  .rv[data-enter="left"] { --enter-keyframes: enter-left; }
  .rv[data-enter="right"] { --enter-keyframes: enter-right; }
  .rv[data-enter="rise"] { --enter-keyframes: enter-rise; }
  .rv[data-enter="fade"] { --enter-keyframes: enter-fade; }
  .rv[data-enter="photo"] { --enter-keyframes: enter-depth; }
  .rv[data-enter="depth"] { --enter-keyframes: enter-depth; }
  .rv[data-enter="turn"] { --enter-keyframes: enter-turn; }
  .rv[data-enter="drop"] { --enter-keyframes: enter-drop; }
  .page.is-active .rv.is-on[data-enter] [data-enter-item] {
    animation: var(--item-keyframes, enter-rise) var(--item-duration, 560ms) var(--ease-out) var(--item-delay, 0ms) backwards;
  }
  [data-enter-item="left"] { --item-keyframes: enter-left; }
  [data-enter-item="right"] { --item-keyframes: enter-right; }
  [data-enter-item="rise"] { --item-keyframes: enter-rise; }
  [data-enter-item="focus"] { --item-keyframes: enter-focus; }
  [data-enter-item="depth"] { --item-keyframes: enter-depth; }
  [data-enter-item="part"] { --item-keyframes: enter-part; transform-box: fill-box; transform-origin: center; }
  [data-enter-item="wipe-left"] { --item-keyframes: enter-wipe-left; }
  [data-enter-item="wipe-up"] { --item-keyframes: enter-wipe-up; }
  .page.is-active .rv.is-on[data-enter="photo"]::after {
    content: ""; position: absolute; inset: 5px; pointer-events: none; opacity: 0;
    background: linear-gradient(110deg, var(--color-clear) 32%, var(--color-frame-highlight) 45%, var(--color-clear) 58%);
    background-size: 260% 100%; animation: enter-photo-light 950ms ease-out backwards;
  }
  @keyframes enter-focus {
    from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
    to { opacity: 1; transform: none; filter: none; }
  }
  @keyframes enter-left {
    from { opacity: 0; transform: translateX(-26px); filter: blur(2px); }
    to { opacity: 1; transform: none; filter: none; }
  }
  @keyframes enter-right {
    from { opacity: 0; transform: translateX(26px); filter: blur(2px); }
    to { opacity: 1; transform: none; filter: none; }
  }
  @keyframes enter-rise {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes enter-fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes enter-depth {
    from { opacity: 0; transform: perspective(700px) rotateX(7deg) translateY(12px) scale(0.94); filter: blur(3px); }
    to { opacity: 1; transform: none; filter: none; }
  }
  @keyframes enter-turn {
    from { opacity: 0; transform: translateY(14px) rotate(-7deg) scale(0.84); filter: blur(4px); }
    to { opacity: 1; transform: none; filter: none; }
  }
  @keyframes enter-drop {
    from { opacity: 0; transform: translateY(-22px) rotate(2deg) scale(0.92); filter: blur(3px); }
    to { opacity: 1; transform: none; filter: none; }
  }
  @keyframes enter-part {
    from { opacity: 0; translate: 0 18px; scale: 0.9; }
    to { opacity: 1; translate: none; scale: none; }
  }
  @keyframes enter-wipe-left {
    from { clip-path: inset(0 100% 0 0); transform: scale(1.06); filter: blur(3px); }
    to { clip-path: inset(0); transform: none; filter: none; }
  }
  @keyframes enter-wipe-up {
    from { clip-path: inset(100% 0 0 0); transform: scale(1.06); filter: blur(3px); }
    to { clip-path: inset(0); transform: none; filter: none; }
  }
  @keyframes enter-photo-light {
    0% { opacity: 0; background-position: 100% 0; }
    22% { opacity: 0.8; }
    100% { opacity: 0; background-position: 0 0; }
  }
}