/* Decorative layout examples, shared visually with the ORME login screen. */
.intro-experience { display: grid; grid-template-columns: minmax(0, .68fr) minmax(0, 1.32fr); align-items: center; gap: 72px; margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--line); }
.intro-experience .time-story { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 0; padding: 0; border: 0; }
.intro-experience .time-story > div:not(.time-arrow) { width: auto; min-width: 0; }
.intro-experience .time-arrow { position: static; margin: 0; width: 28px; transform: rotate(90deg); }
.intro-experience .time-arrow svg { width: 28px; height: 28px; }
.intro-experience .time-story strong { font-size: clamp(42px, 4vw, 57px); }
.intro-experience .new-time { margin-top: 0; }
.intro-experience .small-star { font-size: 36px; }
.intro-experience .time-track { gap: 6px; margin-top: 18px; }
.intro-experience .time-track i { flex: 1 1 0; max-width: 25px; min-width: 0; }
.intro-experience .new-time .time-track { flex-wrap: wrap; height: auto; }
.intro-experience .new-time .time-track i { flex: 0 0 25px; }
.intro-experience .time-track > span { flex-basis: 100%; margin: 6px 0 0; font-size: 11px; line-height: 1.7; }
.intro-section .time-footnote { max-width: 760px; margin-top: 27px; }

.sheet-story { min-width: 0; color: #fff; background: radial-gradient(ellipse at 95% 40%, #174d73, transparent 75%), #0d274a; border: 1px solid #295377; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 50px #14365614; }
.sheet-story .drawing-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 54px; padding: 0 14px 0 24px; border-bottom: 1px solid #6aa6d626; font-size: 10px; letter-spacing: 1.4px; color: #c0dbef; }
.sheet-story .drawing-header > span { display: flex; align-items: center; gap: 9px; }
.sheet-story .drawing-header i { height: 5px; width: 5px; background: #73c5ff; border-radius: 50%; }
.sheet-story .nesting-blueprint { display: block; width: 100%; height: auto; aspect-ratio: 560 / 320; fill: none; stroke: none; stroke-width: 1; background: radial-gradient(ellipse at 50% 40%, #40769e12, transparent 70%); }
.sheet-story .drawing-footer { display: flex; align-items: center; gap: 10px; padding: 16px 24px; border-top: 1px solid #6aa6d626; color: #c5dced; font-size: 11px; }
.sheet-story .drawing-cross { font-size: 19px; font-weight: 400; color: #7bc7ff; }
.sheet-story .drawing-toggle { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #c6e5fa; }
.sheet-story .drawing-toggle:hover { background: #83cfff14; border-color: #83cfff30; color: #fff; }
.sheet-story .drawing-toggle:focus-visible { outline: 3px solid #9cddff; outline-offset: 0; }
.sheet-story .drawing-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sheet-story .drawing-play-icon, .sheet-story .drawing-toggle[data-paused="true"] .drawing-pause-icon { display: none; }
.sheet-story .drawing-toggle[data-paused="true"] .drawing-play-icon { display: block; }
.sheet-story .km-nest-ruler { stroke: #8ab6d1; stroke-opacity: .5; stroke-width: .8; }
.sheet-story .km-nest-annotations { fill: #afcadd; font-size: 8px; letter-spacing: 1.2px; }
.sheet-story .km-nest-piece { fill: url(#km-nest-part); stroke: #a9dfff; stroke-width: 1.15; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; }
.sheet-story .km-nest-layout:not(.km-nest-layout-first), .sheet-story .km-nest-caption:not(.km-nest-layout-first) { opacity: 0; }
.sheet-story .km-nest-cut { fill: none; stroke: #d0f4ff; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 100; opacity: 0; }
.sheet-story .km-nest-laser { fill: #f1fcff; opacity: 0; filter: drop-shadow(0 0 4px #79d4ff); }
.sheet-story .km-nest-scan { opacity: 0; }
.sheet-story .km-nest-captions { display: grid; margin-left: auto; font-size: 9px; letter-spacing: 1px; text-align: right; color: #b9d9ef; }
.sheet-story .km-nest-caption { grid-area: 1 / 1; white-space: nowrap; }
/* Keep timing outside HTML: Kodmeta intentionally disallows inline styles. */
.sheet-story [data-scene="flanges"] { --scene-delay: 0s; }
.sheet-story [data-scene="brackets"] { --scene-delay: -16s; }
.sheet-story [data-scene="mixed"] { --scene-delay: -8s; }
.sheet-story [data-delay="0s"] { --piece-delay: 0s; }
.sheet-story [data-delay=".24s"] { --piece-delay: .24s; }
.sheet-story [data-delay=".25s"] { --piece-delay: .25s; }
.sheet-story [data-delay=".48s"] { --piece-delay: .48s; }
.sheet-story [data-delay=".5s"] { --piece-delay: .5s; }
.sheet-story [data-delay=".72s"] { --piece-delay: .72s; }
.sheet-story [data-delay=".75s"] { --piece-delay: .75s; }
.sheet-story [data-delay=".96s"] { --piece-delay: .96s; }
.sheet-story [data-delay="1s"] { --piece-delay: 1s; }
.sheet-story [data-delay="1.2s"] { --piece-delay: 1.2s; }
.sheet-story [data-delay="1.25s"] { --piece-delay: 1.25s; }
.sheet-story [data-delay="1.44s"] { --piece-delay: 1.44s; }
.sheet-story [data-delay="1.5s"] { --piece-delay: 1.5s; }
.sheet-story [data-delay="1.65s"] { --piece-delay: 1.65s; }
.sheet-story [data-delay="1.68s"] { --piece-delay: 1.68s; }
.sheet-story [data-delay="1.8s"] { --piece-delay: 1.8s; }
.sheet-story [data-delay="1.92s"] { --piece-delay: 1.92s; }
.sheet-story [data-delay="1.95s"] { --piece-delay: 1.95s; }
.sheet-story [data-delay="2.1s"] { --piece-delay: 2.1s; }
.sheet-story [data-delay="2.16s"] { --piece-delay: 2.16s; }
.sheet-story [data-delay="2.25s"] { --piece-delay: 2.25s; }
.sheet-story [data-scene="flanges"] .km-nest-laser { offset-path: path('M84 60H152L166 74V130L152 144H84L70 130V74Z'); }
.sheet-story [data-scene="brackets"] .km-nest-laser { offset-path: path('M92 174H148a20 20 0 0 1 0 40H92a20 20 0 0 1 0-40Z'); }
.sheet-story [data-scene="mixed"] .km-nest-laser { offset-path: path('M310 166H358L382 230V250H286V230Z'); }
.sheet-story[data-enhanced] .km-nest-layout, .sheet-story[data-enhanced] .km-nest-caption { animation: km-nest-scene 24s linear infinite; animation-delay: var(--scene-delay); }
.sheet-story[data-enhanced] .km-nest-piece { animation: km-nest-place 24s cubic-bezier(.2,.7,.2,1) infinite both; animation-delay: calc(var(--scene-delay) + var(--piece-delay)); }
.sheet-story[data-enhanced] .km-nest-cut { animation: km-nest-cut 24s linear infinite; animation-delay: var(--scene-delay); }
.sheet-story[data-enhanced] .km-nest-laser { animation: km-nest-laser 24s linear infinite; animation-delay: var(--scene-delay); }
.sheet-story[data-enhanced] .km-nest-scan { animation: km-nest-scan 8s ease-in-out infinite; }
.sheet-story[data-motion="paused"] * { animation-play-state: paused !important; }
@keyframes km-nest-scene { 0% { opacity: 0; } 2%, 28% { opacity: 1; } 32%, 100% { opacity: 0; } }
@keyframes km-nest-place { 0%, 1% { opacity: 0; transform: translate(24px, -18px) rotate(-8deg) scale(.94); } 5%, 28% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); } 33%, 100% { opacity: 0; transform: translate(0, 0) rotate(0) scale(1); } }
@keyframes km-nest-cut { 0%, 15% { opacity: 0; stroke-dashoffset: 100; } 16% { opacity: 1; stroke-dashoffset: 100; } 25%, 28% { opacity: 1; stroke-dashoffset: 0; } 32%, 100% { opacity: 0; stroke-dashoffset: 0; } }
@keyframes km-nest-laser { 0%, 15% { opacity: 0; offset-distance: 0%; } 16% { opacity: 1; offset-distance: 0%; } 25% { opacity: 1; offset-distance: 100%; } 26%, 100% { opacity: 0; offset-distance: 100%; } }
@keyframes km-nest-scan { 0%, 43% { opacity: 0; transform: translateX(0); } 48% { opacity: 1; transform: translateX(0); } 78% { opacity: 1; transform: translateX(456px); } 84%, 100% { opacity: 0; transform: translateX(456px); } }
@media (max-width: 1150px) {
    .intro-experience { gap: 38px; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); }
    .intro-experience .time-story strong { font-size: 44px; }
    .sheet-story .drawing-footer { padding-inline: 18px; font-size: 10px; }
    .sheet-story .km-nest-captions { font-size: 8px; letter-spacing: .7px; }
}
@media (max-width: 800px) {
    .intro-experience { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 30px; padding-top: 28px; }
    .intro-experience .time-story { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 30px; }
    .intro-experience .time-arrow { display: none; }
    .intro-experience .time-story strong { font-size: clamp(30px, 6.3vw, 49px); letter-spacing: -1.8px; }
    .intro-experience .time-story strong em { font-size: 23px; }
    .intro-experience .new-time { margin-top: 0; }
.intro-experience .small-star { display: none; }
    .intro-experience .time-track { gap: 4px; height: 16px; margin-top: 13px; }
    .intro-experience .time-track i { height: 16px; }
    .intro-experience .new-time .time-track { height: auto; }
    .intro-experience .new-time .time-track i { flex-basis: 22px; }
    .intro-experience .time-track > span { font-size: 10px; }
}
@media (max-width: 420px) {
    .intro-experience { gap: 25px; }
    .intro-experience .time-story { gap: 20px; }
    .intro-experience .time-story strong { font-size: 31px; }
    .intro-experience .time-story strong em { font-size: 19px; }
    .sheet-story { border-radius: 12px; }
    .sheet-story .drawing-header { padding-left: 14px; padding-right: 6px; min-height: 50px; font-size: 8px; letter-spacing: 1px; }
    .sheet-story .drawing-footer { flex-wrap: wrap; gap: 7px; padding: 12px 14px; font-size: 10px; }
    .sheet-story .km-nest-captions { flex-basis: 100%; margin: 0 0 0 18px; text-align: left; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { .sheet-story *, .sheet-story *::before, .sheet-story *::after { animation: none !important; transition: none !important; } }