/* Home page components (inc/home.php). Brand yellow on white, ink type, square editorial shapes like the program pages. */
.sh {
    --sh-yellow: #e6be1e;
    --sh-yellow-text: #7a6410;
    --sh-ink: #202322;
    --sh-muted: #5d6269;
    --sh-line: #e6e8eb;
    --sh-cream: #fbf8ec;
    position: relative;
    color: var(--sh-ink);
    background: #fff;
    font-family: Roboto, sans-serif;
    overflow-wrap: normal;
    word-break: normal;
    font-size: 16px;
    line-height: 1.65;
    scroll-margin-top: 85px;
}
/* In-page links (Vyber si odbor, the program tabs) glide to their section instead of jumping. */
@media (prefers-reduced-motion: no-preference) {
    html:has(.sh) { scroll-behavior: smooth; }
}
.sh.sh-cream { background: var(--sh-cream); }
.sh *, .sh *::before, .sh *::after { box-sizing: border-box; }
.sh h1, .sh h2, .sh h3, .sh p, .sh dl, .sh dd, .sh ol, .sh ul, .sh figure { margin: 0; }
.sh h1, .sh h2, .sh h3 { color: inherit; font-family: Montserrat, sans-serif; }
.sh a { color: inherit; text-decoration: none; }
.sh a:hover { color: inherit; } /* the theme options turn every hovered link blue */
.sh h1 a, .sh h2 a, .sh h3 a { font: inherit; letter-spacing: inherit; }
.sh-shell { max-width: 1220px; margin: auto; padding: 0 32px; }
.sh .sh-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: .13em; line-height: 1.6; text-transform: uppercase; }
.sh-eyebrow::before { content: ''; flex: 0 0 8px; height: 8px; background: var(--sh-yellow); }
.sh h2 { margin-top: 14px; font-size: clamp(30px, 3.2vw, 42px); font-weight: 600; line-height: 1.12; letter-spacing: -.04em; }
.sh .sh-intro { max-width: 540px; margin-top: 16px; color: var(--sh-muted); font-size: 16px; line-height: 1.75; }
.sh-arrow { flex: none; transition: transform .2s ease; }
.sh a:hover .sh-arrow, .sh-card:hover .sh-arrow { transform: translateX(3px); }
.sh a:hover .sh-arrow:has(path[d^="M7 17"]) { transform: translate(2px, -2px); }
.sh a:focus-visible { outline: 2px solid var(--sh-ink); outline-offset: 4px; }

/* Buttons and text links */
.sh-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.sh a.sh-button { display: inline-flex; align-items: center; gap: 18px; padding: 15px 22px; border: 1px solid var(--sh-yellow); background: var(--sh-yellow); color: var(--sh-ink); font: 600 14px/1.2 Montserrat, sans-serif; transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; }
.sh a.sh-button:hover { border-color: var(--sh-ink); background: var(--sh-ink); color: #fff; transform: translateY(-2px); }
.sh a.sh-button-line { border-color: var(--sh-ink); background: transparent; }
.sh a.sh-button-dark { border-color: var(--sh-ink); background: var(--sh-ink); color: #fff; }
.sh a.sh-button-dark:hover { border-color: #000; background: #000; }
.sh a.sh-link { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 4px; background: linear-gradient(var(--sh-yellow), var(--sh-yellow)) no-repeat 0 100% / 100% 2px; font: 600 14px/1.4 Montserrat, sans-serif; white-space: nowrap; }
.sh a.sh-link:hover { background-size: 100% 100%; }

/* Úvod */
.sh-hero { overflow: hidden; border-bottom: 1px solid var(--sh-line); }
.sh-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 72px; align-items: center; padding-top: 64px; padding-bottom: 72px; }
.sh-hero h1 { margin: 20px 0 22px; font-size: clamp(40px, 5vw, 68px); font-weight: 600; line-height: 1.04; letter-spacing: -.05em; }
.sh-hero mark { padding: 0 .04em; background: linear-gradient(transparent 60%, var(--sh-yellow) 60% 92%, transparent 92%); color: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.sh .sh-lead { max-width: 520px; margin-bottom: 32px; color: var(--sh-muted); font-size: 18px; line-height: 1.7; }
.sh-hero-media { position: relative; z-index: 0; animation: sh-enter .7s ease-out both; }
.sh-hero-media::before { content: ''; position: absolute; z-index: -1; top: 44px; right: -100vw; bottom: -36px; left: 56px; background: var(--sh-yellow); }
.sh-hero-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3.2; object-fit: cover; }
.sh a.sh-hero-news { position: absolute; bottom: 28px; left: -36px; display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: end; width: min(360px, 85%); padding: 18px 20px; border-left: 4px solid var(--sh-yellow); background: #fff; box-shadow: 0 18px 40px -18px rgba(32, 35, 34, .45); transition: transform .2s ease; }
.sh a.sh-hero-news:hover { transform: translateY(-3px); }
.sh-hero-news-label { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; color: var(--sh-muted); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.sh-hero-news strong { font: 600 16px/1.35 Montserrat, sans-serif; }
.sh-pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--sh-yellow); }
.sh-pulse::after { content: ''; position: absolute; inset: -4px; border: 2px solid var(--sh-yellow); border-radius: 50%; animation: sh-pulse 1.8s ease-out infinite; }
.sh-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--sh-line); }
/* Each stat spans two shared rows, so figures sit on one baseline and labels start on one line whatever their length. */
.sh-stats > div { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 8px; padding: 30px 28px; border-left: 1px solid var(--sh-line); }
.sh-stats > div:first-child { padding-left: 0; border-left: 0; }
.sh-stats dd { grid-row: 1; align-self: end; font: 600 30px/1 Montserrat, sans-serif; letter-spacing: -.04em; }
.sh-stats dt { grid-row: 2; color: var(--sh-muted); font-size: 13px; font-weight: 400; line-height: 1.45; text-wrap: balance; }

/* Nadpis sekcie */
.sh-heading { padding: 96px 0 24px; }
.sh-heading-grid { display: grid; grid-template-columns: 1fr auto; gap: 32px 64px; align-items: end; }
.sh-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 520px; }
.sh-chips a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--sh-line); background: #fff; font: 500 13px/1.3 Montserrat, sans-serif; transition: border-color .18s ease, background .18s ease; }
.sh-chips a:hover { border-color: var(--sh-yellow); background: var(--sh-cream); }
.sh-chips .sh-arrow { width: 14px; height: 14px; transform: rotate(90deg); }
.sh-chips a:hover .sh-arrow { transform: rotate(90deg) translateX(2px); }

/* Skupina odborov */
.sh-programs { padding: 0; }
.sh-programs-grid { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 2fr); gap: 48px; padding-top: 48px; padding-bottom: 56px; }
.sh-programs + .sh-programs .sh-programs-grid { border-top: 1px solid var(--sh-line); }
.sh-programs.sh-cream + .sh-programs .sh-programs-grid, .sh-programs + .sh-programs.sh-cream .sh-programs-grid { border-top: 0; }
.sh-programs-head { align-self: start; position: sticky; top: 100px; }
.sh-programs h2 { font-size: 26px; letter-spacing: -.035em; }
.sh-programs .sh-intro { font-size: 14px; }
.sh .sh-count { margin-top: 18px; color: var(--sh-yellow-text); font: 600 12px/1 Montserrat, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.sh-program-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-self: start; gap: 12px; padding: 0; list-style: none; }
.sh-program-list li { margin: 0; padding: 0; }
.sh-program-list li::before { display: none; }
.sh a.sh-program { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; height: 100%; min-height: 86px; padding: 10px 16px 10px 10px; border: 1px solid var(--sh-line); background: #fff; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.sh a.sh-program:hover { border-color: var(--sh-program); box-shadow: 0 14px 28px -18px var(--sh-program); transform: translateY(-2px); }
.sh-program-art { width: 56px; height: 56px; background: var(--sh-program) no-repeat 100% 100% / auto 165%; transition: background-size .35s ease; }
.sh a.sh-program:hover .sh-program-art { background-size: auto 180%; }
/* Icon tiles: the program colour as a soft diagonal gradient; a large faded copy of the icon sits in the card's corner. */
.sh-program-icon { display: grid; place-items: center; background: linear-gradient(140deg, color-mix(in srgb, var(--sh-program) 72%, #fff), var(--sh-program) 55%, color-mix(in srgb, var(--sh-program) 80%, #000)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); color: #fff; }
.sh-program-icon.is-light { color: var(--sh-ink); }
.sh-program-icon svg { width: 26px; height: 26px; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.sh a.sh-program:hover .sh-program-icon svg { transform: scale(1.1); }
.sh a.sh-program:has(.sh-program-ghost) { position: relative; isolation: isolate; overflow: hidden; }
.sh-program-ghost { position: absolute; z-index: -1; right: -14px; bottom: -22px; width: 92px; height: 92px; color: var(--sh-program); opacity: .1; transform: rotate(-12deg); pointer-events: none; transition: opacity .35s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.sh-program-ghost svg { display: block; width: 100%; height: 100%; }
.sh a.sh-program:hover .sh-program-ghost { opacity: .2; transform: rotate(0) scale(1.06); }
/* Showcase (4-year programs): deep program-colour gradient, blueprint grid and a line scene that comes alive on hover. */
.sh-program-list.is-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sh a.sh-program.sh-program-feature { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; min-height: 188px; padding: 24px 26px; border: 0; background: radial-gradient(70% 150% at 80% 120%, color-mix(in srgb, var(--sh-program) 70%, #fff) 0%, transparent 62%), linear-gradient(115deg, color-mix(in srgb, var(--sh-program) 40%, #0c0a18), var(--sh-program) 85%); color: #fff; }
.sh-program-feature::before { content: ''; position: absolute; z-index: -2; inset: 0; background: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 18px 18px, linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 18px 18px; -webkit-mask-image: linear-gradient(100deg, transparent 25%, #000 75%); mask-image: linear-gradient(100deg, transparent 25%, #000 75%); }
.sh a.sh-program.sh-program-feature:hover { box-shadow: 0 22px 40px -20px var(--sh-program); }
.sh-program-feature .sh-program-name { position: relative; width: calc(100% - 64px); }
.sh-program-feature .sh-program-name strong { max-width: calc(100% - 60px); }
.sh-program-kicker { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: rgba(255, 255, 255, .72); font: 600 10px/1.3 Montserrat, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.sh-program-kicker::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--sh-program) 30%, #fff); box-shadow: 0 0 0 3px rgba(255, 255, 255, .12); }
.sh-program-feature .sh-program-name strong { font-size: 21px; line-height: 1.2; letter-spacing: -.025em; }
.sh .sh-program-feature .sh-program-name small { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 4px 10px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sh-program-go { position: absolute; top: 22px; right: 22px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--sh-program); transition: transform .3s ease; }
.sh .sh-program-go .sh-arrow, .sh a.sh-program-feature:hover .sh-program-go .sh-arrow { color: var(--sh-program); }
.sh a.sh-program-feature:hover .sh-program-go { transform: scale(1.08); }

/* Scenes: line art in white; motion is paused until the card is hovered. */
.sh-program-scene { position: absolute; z-index: -1; right: 14px; bottom: 0; width: 196px; height: auto; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sh-program-scene * { animation-play-state: paused !important; }
.sh a.sh-program-feature:hover .sh-program-scene * { animation-play-state: running !important; }
@keyframes sh-spin { to { transform: rotate(360deg); } }

/* Isometric scenes (art names ending in 3d): boxes shade their top (t), front (l) and side (r) faces and cast parts take
   the program colour. :where() keeps these defaults weaker than each scene's own rules. */
.sh-program-scene[class$="3d"] { overflow: visible; }
:where(.sh-program-scene[class$="3d"]) * { stroke: none; }
:where(.sh-program-scene[class$="3d"]) .ground.t { fill: rgba(255, 255, 255, .13); stroke: rgba(255, 255, 255, .22); stroke-width: .6; }
:where(.sh-program-scene[class$="3d"]) .ground.l { fill: rgba(255, 255, 255, .07); }
:where(.sh-program-scene[class$="3d"]) .ground.r { fill: rgba(255, 255, 255, .04); }
:where(.sh-program-scene[class$="3d"]) .shade { fill: rgba(0, 0, 0, .3); filter: blur(2.5px); }
:where(.sh-program-scene[class$="3d"]) .cast.t { fill: color-mix(in srgb, var(--sh-program) 40%, #fff); }
:where(.sh-program-scene[class$="3d"]) .cast.l { fill: color-mix(in srgb, var(--sh-program) 80%, #fff); }
:where(.sh-program-scene[class$="3d"]) .cast.r { fill: color-mix(in srgb, var(--sh-program) 72%, #000); }
:where(.sh-program-scene[class$="3d"]) .gleam { fill: none; stroke: #fff; stroke-width: .8; opacity: .85; }

/* 4-year scenes */
/* Mechanik elektrotechnik: the louver swings between 25deg and 75deg below level; frost drifts out and the thermostat counts down. */
.sh-scene-ac3d .wall.t { fill: #f7f4ee; }
.sh-scene-ac3d .wall.l { fill: #ebe6dc; }
.sh-scene-ac3d .wall.r { fill: #bdb6a8; }
.sh-scene-ac3d .window { fill: #9fd8ff; }
.sh-scene-ac3d .mullion { fill: none; stroke: #fff; stroke-width: 1.2; }
.sh-scene-ac3d .sill.t { fill: #fff; }
.sh-scene-ac3d .sill.l { fill: #dfe5eb; }
.sh-scene-ac3d .sill.r { fill: #aab4be; }
.sh-scene-ac3d .shade-unit { opacity: .55; }
.sh-scene-ac3d .unit.t { fill: #fff; }
.sh-scene-ac3d .unit.l { fill: #f2f5f8; }
.sh-scene-ac3d .unit.r { fill: #c9d1d8; }
.sh-scene-ac3d .trim { fill: var(--sh-program); }
.sh-scene-ac3d .led { fill: #2fbf71; }
.sh a.sh-program-feature:hover .sh-scene-ac3d .led { fill: #7dffa8; filter: drop-shadow(0 0 1.2px #7dffa8); }
.sh-scene-ac3d .slot { fill: #2a2f35; }
.sh-scene-ac3d .flap { fill: #e4e9ee; transform: matrix(.996, .575, -.902, 1.007, 0, 0); animation: sh-ac3d-flap 3s ease-in-out infinite; }
.sh-scene-ac3d .crystal { fill: none; stroke: #c9f0ff; stroke-width: .7; stroke-linecap: round; }
.sh-scene-ac3d .wind { fill: none; stroke: rgba(201, 240, 255, .75); stroke-width: .8; stroke-linecap: round; }
.sh-scene-ac3d .breeze, .sh-scene-ac3d .wind { opacity: 0; animation: sh-ac3d-breeze 2.2s ease-out infinite; }
.sh-scene-ac3d .stat.t { fill: #fff; }
.sh-scene-ac3d .stat.l { fill: #eef1f4; }
.sh-scene-ac3d .stat.r { fill: #c3ccd5; }
.sh-scene-ac3d .screen { fill: #12333f; }
.sh-scene-ac3d .temp { fill: #7fe3ff; font: 700 3.2px Montserrat, sans-serif; opacity: 0; animation: sh-ac3d-temp 6s steps(1) infinite; }
@keyframes sh-ac3d-flap { 0%, 100% { transform: matrix(.996, .575, -.902, 1.007, 0, 0); } 50% { transform: matrix(.996, .575, -.258, 1.26, 0, 0); } }
@keyframes sh-ac3d-breeze { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(-12px, 24px); opacity: 0; } }
@keyframes sh-ac3d-temp { 0% { opacity: 1; } 33.33%, 100% { opacity: 0; } }

/* Technik energetických zariadení budov: light sweeps over the panels, energy runs to the battery, its cells fill in turn. */
.sh-scene-house3d .roof-back { fill: color-mix(in srgb, var(--sh-program) 70%, #000); }
.sh-scene-house3d .render.t { fill: #fff; }
.sh-scene-house3d .render.l { fill: #f1ede6; }
.sh-scene-house3d .render.r { fill: #c9c1b4; }
.sh-scene-house3d .window { fill: #2f3d4b; transition: fill .6s ease; }
.sh-scene-house3d .window-side { fill: #222c36; }
.sh a.sh-program-feature:hover .sh-scene-house3d .window { fill: #ffd76a; }
.sh-scene-house3d .door { fill: color-mix(in srgb, var(--sh-program) 70%, #000); }
.sh-scene-house3d .roof { fill: color-mix(in srgb, var(--sh-program) 75%, #fff); }
.sh-scene-house3d .roof-edge { fill: color-mix(in srgb, var(--sh-program) 60%, #000); }
.sh-scene-house3d .panel { fill: #1f3b6e; animation: sh-house3d-glint 3s ease-in-out infinite; }
.sh-scene-house3d .panel-grid { fill: none; stroke: #8fb4ff; stroke-width: .4; opacity: .7; }
.sh-scene-house3d .ridge { fill: none; stroke: color-mix(in srgb, var(--sh-program) 50%, #000); stroke-width: 1.2; }
.sh-scene-house3d .wire { fill: none; stroke: #2a2f35; stroke-width: 1; }
.sh-scene-house3d .energy { fill: none; stroke: #ffe14a; stroke-width: 1; stroke-dasharray: 1.5 3; opacity: 0; transition: opacity .3s ease; animation: sh-house3d-flow .6s linear infinite; }
.sh a.sh-program-feature:hover .sh-scene-house3d .energy { opacity: 1; }
.sh-scene-house3d .battery.t { fill: #f2f5f8; }
.sh-scene-house3d .battery.l { fill: #dfe5eb; }
.sh-scene-house3d .battery.r { fill: #aab4be; }
.sh-scene-house3d .cell { fill: #c3ccd5; animation: sh-house3d-cell 3.6s steps(1) infinite; }
.sh-scene-house3d .pump.t { fill: #fff; }
.sh-scene-house3d .pump.l { fill: #eef1f4; }
.sh-scene-house3d .pump.r { fill: #c3ccd5; }
.sh-scene-house3d .grille { fill: #2a3036; }
.sh-scene-house3d .fan path { fill: #c9d3dc; }
.sh-scene-house3d .fan { animation: sh-spin .8s linear infinite; }
.sh-scene-house3d .guard { fill: none; stroke: #e9eef2; stroke-width: .3; }
@keyframes sh-house3d-glint { 0%, 30%, 100% { fill: #1f3b6e; } 15% { fill: #6fa8ff; } }
@keyframes sh-house3d-flow { to { stroke-dashoffset: -9; } }
@keyframes sh-house3d-cell { 0% { fill: #c3ccd5; } 10% { fill: #2fbf71; } 90%, 100% { fill: #c3ccd5; } }

/* Mechanik počítačových sietí: blinking server units, data running along the patch cable, Wi-Fi waves from the router. */
.sh-scene-rack3d .bay { fill: #1d2126; }
.sh-scene-rack3d .server.t { fill: #6f7a86; }
.sh-scene-rack3d .server.l { fill: #3a424a; }
.sh-scene-rack3d .server.r { fill: #2c333a; }
.sh-scene-rack3d .bays { fill: none; stroke: #59636d; stroke-width: .4; }
.sh-scene-rack3d .led { fill: #7dffa8; animation: sh-rack3d-led 1s steps(1) infinite; }
.sh-scene-rack3d .led-amber { fill: #ffc34d; }
.sh-scene-rack3d .cable { fill: none; stroke: #3b82f6; stroke-width: 1.2; stroke-linejoin: round; }
.sh-scene-rack3d .data { fill: none; stroke: #fff; stroke-width: 1; stroke-dasharray: 1.5 6; stroke-linecap: round; opacity: 0; transition: opacity .3s ease; animation: sh-rack3d-data .8s linear infinite; }
.sh a.sh-program-feature:hover .sh-scene-rack3d .data { opacity: 1; }
.sh-scene-rack3d .desk.t { fill: #d8b98a; }
.sh-scene-rack3d .desk.l { fill: #b08e5e; }
.sh-scene-rack3d .desk.r { fill: #8c6f47; }
.sh-scene-rack3d .router.t { fill: #fff; }
.sh-scene-rack3d .router.l { fill: #e4e9ee; }
.sh-scene-rack3d .router.r { fill: #b9c3cc; }
.sh-scene-rack3d .antenna { fill: none; stroke: #2a2f35; stroke-width: 1; stroke-linecap: round; }
.sh-scene-rack3d .wave { fill: none; stroke: #fff; stroke-width: .8; stroke-linecap: round; opacity: 0; animation: sh-rack3d-wave 1.5s ease-out infinite; }
.sh-scene-rack3d .laptop.t { fill: #dfe5eb; }
.sh-scene-rack3d .laptop.l { fill: #aab4be; }
.sh-scene-rack3d .laptop.r { fill: #77828e; }
.sh-scene-rack3d .lid { fill: #4e5761; }
.sh-scene-rack3d .display { fill: #12333f; }
.sh-scene-rack3d .code { fill: none; stroke: #7fe3ff; stroke-width: .5; }
@keyframes sh-rack3d-led { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@keyframes sh-rack3d-data { to { stroke-dashoffset: -15; } }
@keyframes sh-rack3d-wave { 0% { transform: scale(.4); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }

/* Mechanik nastavovač: the table carries the block round an 8 x 6 pocket under the fixed spindle (0-80%) while the cut is drawn. */
.sh-scene-cnc3d .base.t { fill: color-mix(in srgb, var(--sh-program) 45%, #2a2f35); }
.sh-scene-cnc3d .base.l { fill: color-mix(in srgb, var(--sh-program) 30%, #1d2126); }
.sh-scene-cnc3d .base.r { fill: color-mix(in srgb, var(--sh-program) 20%, #121518); }
.sh-scene-cnc3d .steel.t { fill: #f2f5f8; }
.sh-scene-cnc3d .steel.l { fill: #c3ccd5; }
.sh-scene-cnc3d .steel.r { fill: #8e99a5; }
.sh-scene-cnc3d .slot { fill: none; stroke: #8e99a5; stroke-width: .5; }
.sh-scene-cnc3d .alu.t { fill: #e4eaef; }
.sh-scene-cnc3d .alu.l { fill: #c2cbd3; }
.sh-scene-cnc3d .alu.r { fill: #949fab; }
.sh-scene-cnc3d .cut-track { fill: none; stroke: rgba(0, 0, 0, .06); stroke-width: 1.6; }
.sh-scene-cnc3d .cut { fill: none; stroke: #5d6772; stroke-width: 1.6; stroke-dasharray: 28; stroke-dashoffset: 28; animation: sh-cnc3d-cut 5s linear infinite; }
.sh-scene-cnc3d .table { animation: sh-cnc3d-table 5s linear infinite; }
.sh-scene-cnc3d .nose.side { fill: #8e99a5; }
.sh-scene-cnc3d .nose.top { fill: #c3ccd5; }
.sh-scene-cnc3d .tool.side { fill: #e9b93c; }
.sh-scene-cnc3d .tool.top { fill: #ffe08a; }
.sh-scene-cnc3d .chip { fill: none; stroke: #ffc65a; stroke-width: .8; opacity: 0; filter: drop-shadow(0 0 1.2px #ff9d2e); animation: sh-chip .55s ease-out infinite; }
.sh-scene-cnc3d .beacon.side { fill: #2fbf71; }
.sh-scene-cnc3d .beacon.top { fill: #7dffa8; animation: sh-blink 1s steps(1) infinite; }
.sh-scene-cnc3d .stand.t, .sh-scene-cnc3d .pendant.t { fill: #6f7a86; }
.sh-scene-cnc3d .stand.l, .sh-scene-cnc3d .pendant.l { fill: #4e5761; }
.sh-scene-cnc3d .stand.r, .sh-scene-cnc3d .pendant.r { fill: #3a424a; }
.sh-scene-cnc3d .screen { fill: #12333f; }
.sh-scene-cnc3d .code { fill: none; stroke: #7fe3ff; stroke-width: .7; animation: sh-blink 1.2s steps(1) infinite; }
.sh-scene-cnc3d .go { fill: #2fbf71; }
.sh-scene-cnc3d .stop { fill: #ff4b3e; }
@keyframes sh-cnc3d-table { 0% { transform: translate(0, 0); } 22.86% { transform: translate(-7.97px, -4.6px); } 40% { transform: translate(-1.99px, -8.05px); } 62.86% { transform: translate(5.98px, -3.45px); } 80%, 100% { transform: translate(0, 0); } }
@keyframes sh-cnc3d-cut { 0% { stroke-dashoffset: 28; opacity: 1; } 80%, 92% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }

/* Mechanik strojov a zariadení: a 2.4s cycle - the press stamps (8-38%), then the belt moves every crate one station
   (55-100%). Each crate's 7.2s animation covers its three moves along the belt; all start 0.5s in. */
.sh-scene-line3d .leg.t { fill: #6f7a86; }
.sh-scene-line3d .leg.l { fill: #4e5761; }
.sh-scene-line3d .leg.r { fill: #3a424a; }
.sh-scene-line3d .roller { fill: #aab4be; }
.sh-scene-line3d .roller-end { fill: #dfe5eb; }
.sh-scene-line3d .spokes { fill: none; stroke: #4e5761; stroke-width: .5; animation: sh-line3d-roll 2.4s ease-in-out -.5s infinite; }
.sh-scene-line3d .belt { fill: #2a2f35; }
.sh-scene-line3d .belt-run { fill: none; stroke: #5d6772; stroke-width: 1; stroke-dasharray: 3 5; animation: sh-line3d-belt 2.4s ease-in-out -.5s infinite; }
.sh-scene-line3d .box.t { fill: #ecca93; }
.sh-scene-line3d .box.l { fill: #cfa56a; }
.sh-scene-line3d .box.r { fill: #9f7a48; }
.sh-scene-line3d .tape { fill: none; stroke: #f6e7c8; stroke-width: .9; }
.sh-scene-line3d .seal { fill: var(--sh-program); opacity: 0; animation: sh-line3d-seal 7.2s linear infinite; }
.sh-scene-line3d .crate { opacity: 0; animation: sh-line3d-crate 7.2s ease-in-out infinite; }
.sh-scene-line3d .piston.side { fill: #c3ccd5; }
.sh-scene-line3d .piston.top { fill: #f2f5f8; }
.sh-scene-line3d .plate.t { fill: #6f7a86; }
.sh-scene-line3d .plate.l { fill: #4e5761; }
.sh-scene-line3d .plate.r { fill: #3a424a; }
.sh-scene-line3d .ram { animation: sh-line3d-press 2.4s ease-in-out -.5s infinite; }
.sh-scene-line3d .spark { fill: none; stroke: #ffd56a; stroke-width: .8; stroke-linecap: round; opacity: 0; filter: drop-shadow(0 0 1.2px #ffb547); animation: sh-line3d-spark 2.4s linear -.5s infinite; }
.sh-scene-line3d .cylinder.side { fill: #8e99a5; }
.sh-scene-line3d .cylinder.top { fill: #c3ccd5; }
.sh-scene-line3d .pole.t { fill: #c3ccd5; }
.sh-scene-line3d .pole.l { fill: #8e99a5; }
.sh-scene-line3d .pole.r { fill: #67727e; }
.sh-scene-line3d .lamp-red { fill: #7a2a2a; }
.sh-scene-line3d .lamp-amber { fill: #7a6420; }
.sh-scene-line3d .lamp-green.side { fill: #2fbf71; }
.sh-scene-line3d .lamp-green.top { fill: #7dffa8; }
.sh a.sh-program-feature:hover .sh-scene-line3d .lamp-green { filter: drop-shadow(0 0 1.5px #7dffa8); }
@keyframes sh-line3d-crate { 0% { transform: translate(0, 0); opacity: 0; } 6% { opacity: 1; } 18.33% { transform: translate(0, 0); } 33.33%, 51.67% { transform: translate(-15.94px, 9.2px); } 66.67%, 85% { transform: translate(-31.87px, 18.4px); opacity: 1; } 100% { transform: translate(-47.81px, 27.6px); opacity: 0; } }
@keyframes sh-line3d-seal { 0%, 39.4% { opacity: 0; } 39.5%, 100% { opacity: 1; } }
@keyframes sh-line3d-press { 0%, 8% { transform: translateY(0); } 18%, 24% { transform: translateY(5.2px); } 38%, 100% { transform: translateY(0); } }
@keyframes sh-line3d-spark { 0%, 17% { opacity: 0; } 19% { opacity: 1; } 26%, 100% { opacity: 0; } }
@keyframes sh-line3d-belt { 0%, 55% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -16; } }
@keyframes sh-line3d-roll { 0%, 55% { transform: rotate(0); } 100% { transform: rotate(458deg); } }

/* 3-year scenes */
/* Stavbár: concrete block and a tower crane; the load drops 9.8 units (11.3px) while the cable stretches to match. */
.sh-scene-crane3d .concrete.t { fill: #eef1f4; }
.sh-scene-crane3d .concrete.l { fill: #c9d0d7; }
.sh-scene-crane3d .concrete.r { fill: #9aa4ae; }
.sh-scene-crane3d .slab { fill: none; stroke: #fff; stroke-width: .7; opacity: .8; }
.sh-scene-crane3d .window { fill: #2f3d4b; }
.sh-scene-crane3d .window-side { fill: #222c36; }
.sh-scene-crane3d .landing { fill: rgba(0, 0, 0, .35); transform-box: fill-box; transform-origin: center; transform: scale(.5); opacity: .2; animation: sh-crane3d-landing 4s ease-in-out infinite; }
.sh-scene-crane3d .cable { stroke: #2b3138; stroke-width: .7; transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(.17); animation: sh-crane3d-cable 4s ease-in-out infinite; }
.sh-scene-crane3d .load { transform: translateY(-11.27px); animation: sh-crane3d-load 4s ease-in-out infinite; }
.sh-scene-crane3d .pallet.t { fill: #d8b98a; }
.sh-scene-crane3d .pallet.l { fill: #b08e5e; }
.sh-scene-crane3d .pallet.r { fill: #8c6f47; }
.sh-scene-crane3d .brick.t { fill: #e2906a; }
.sh-scene-crane3d .brick.l { fill: #bd6544; }
.sh-scene-crane3d .brick.r { fill: #934c33; }
.sh-scene-crane3d .sling { fill: none; stroke: #2b3138; stroke-width: .45; }
.sh-scene-crane3d .hook { fill: none; stroke: #2b3138; stroke-width: 1.2; }
.sh-scene-crane3d .lattice { fill: none; stroke: color-mix(in srgb, var(--sh-program) 50%, #000); stroke-width: .6; }
.sh-scene-crane3d .ballast.t { fill: #b6bec7; }
.sh-scene-crane3d .ballast.l { fill: #8e99a5; }
.sh-scene-crane3d .ballast.r { fill: #6d7884; }
.sh-scene-crane3d .trolley.t { fill: #6f7a86; }
.sh-scene-crane3d .trolley.l { fill: #4e5761; }
.sh-scene-crane3d .trolley.r { fill: #3a424a; }
.sh-scene-crane3d .cab.t { fill: #fff; }
.sh-scene-crane3d .cab.l { fill: #e4e9ee; }
.sh-scene-crane3d .cab.r { fill: #b3bdc7; }
.sh-scene-crane3d .glass { fill: #7fd3ff; }
.sh-scene-crane3d .tie { fill: none; stroke: color-mix(in srgb, var(--sh-program) 55%, #000); stroke-width: 1; }
.sh-scene-crane3d .tie-thin { stroke-width: .5; }
.sh-scene-crane3d .beacon { fill: #ff4b3e; animation: sh-blink 1s steps(1) infinite; }
.sh a.sh-program-feature:hover .sh-scene-crane3d .beacon { filter: drop-shadow(0 0 1.5px #ff4b3e); }
@keyframes sh-crane3d-load { 0%, 10% { transform: translateY(-11.27px); } 55%, 75% { transform: translateY(0); } 100% { transform: translateY(-11.27px); } }
@keyframes sh-crane3d-cable { 0%, 10% { transform: scaleY(.17); } 55%, 75% { transform: scaleY(1); } 100% { transform: scaleY(.17); } }
@keyframes sh-crane3d-landing { 0%, 10% { transform: scale(.5); opacity: .2; } 55%, 75% { transform: scale(1); opacity: 1; } 100% { transform: scale(.5); opacity: .2; } }
@keyframes sh-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* Strojný mechanik: gears 14 and 9 teeth, so the small one turns 14/9 times faster (6s vs 3.857s); the spanner ratchets. */
.sh-scene-gears3d .base.t { fill: color-mix(in srgb, var(--sh-program) 45%, #2a2f35); }
.sh-scene-gears3d .base.l { fill: color-mix(in srgb, var(--sh-program) 30%, #1d2126); }
.sh-scene-gears3d .base.r { fill: color-mix(in srgb, var(--sh-program) 20%, #121518); }
.sh-scene-gears3d .gear-side { fill: #6f7a86; }
.sh-scene-gears3d .gear-top { fill: #eef2f5; }
.sh-scene-gears3d .gear-b .gear-side { fill: #a87a1f; }
.sh-scene-gears3d .gear-b .gear-top { fill: #ffd27a; }
.sh-scene-gears3d .hole { fill: rgba(20, 24, 28, .5); }
.sh-scene-gears3d .hub { fill: #fff; }
.sh-scene-gears3d .bore { fill: #2c333a; }
.sh-scene-gears3d .gear-a { transform: rotate(31deg); animation: sh-gear3d-a 6s linear infinite; }
.sh-scene-gears3d .gear-b { transform: rotate(231deg); animation: sh-gear3d-b 3.857s linear infinite; }
.sh-scene-gears3d .nut-side { fill: #77828e; }
.sh-scene-gears3d .nut-top { fill: #dfe5eb; }
.sh-scene-gears3d .spanner-side { fill: #3a424a; }
.sh-scene-gears3d .spanner-top { fill: #c3ccd5; }
.sh-scene-gears3d .spanner { transform: rotate(-20deg); animation: sh-spanner3d 2s ease-in-out infinite; }
.sh-scene-gears3d .shaft { fill: #aab4be; }
.sh-scene-gears3d .coupling { fill: #dfe5eb; }
.sh-scene-gears3d .coupling-end { fill: #c3ccd5; }
.sh-scene-gears3d .key * { fill: #4e5761; }
.sh-scene-gears3d .key { animation: sh-spin 1.2s linear infinite; }
.sh-scene-gears3d .sight { fill: #263039; stroke: #fff; stroke-width: .5; }
.sh-scene-gears3d .sight-oil { fill: #ffc34d; }
@keyframes sh-gear3d-a { from { transform: rotate(31deg); } to { transform: rotate(391deg); } }
@keyframes sh-gear3d-b { from { transform: rotate(231deg); } to { transform: rotate(-129deg); } }
@keyframes sh-spanner3d { 0%, 100% { transform: rotate(-20deg); } 50% { transform: rotate(30deg); } }

/* Zlatník: the stone's facet edges skew from one side to the other (front half only), which reads as the brilliant turning. */
.sh-scene-jewel3d .stand.t { fill: color-mix(in srgb, var(--sh-program) 35%, #3a2a33); }
.sh-scene-jewel3d .stand.l { fill: color-mix(in srgb, var(--sh-program) 25%, #2a1d25); }
.sh-scene-jewel3d .stand.r { fill: color-mix(in srgb, var(--sh-program) 15%, #1b1218); }
.sh-scene-jewel3d .cushion.t { fill: #8a2a47; }
.sh-scene-jewel3d .cushion.l { fill: #6a1c35; }
.sh-scene-jewel3d .cushion.r { fill: #4d1226; }
.sh-scene-jewel3d .glow { fill: rgba(255, 236, 170, .45); filter: blur(2px); transform-box: fill-box; transform-origin: center; animation: sh-jewel3d-glow 3s ease-in-out infinite; }
.sh-scene-jewel3d .band { fill: #f6d77c; }
.sh-scene-jewel3d .band-side { fill: #b88a2a; }
.sh-scene-jewel3d .gold.t { fill: #ffe39a; }
.sh-scene-jewel3d .gold.l { fill: #e2b84a; }
.sh-scene-jewel3d .gold.r { fill: #a97f1e; }
.sh-scene-jewel3d .crown { fill: url(#sh-jewel3d-crown); }
.sh-scene-jewel3d .pavilion { fill: url(#sh-jewel3d-pavilion); }
.sh-scene-jewel3d .girdle { fill: none; stroke: #fff; stroke-width: .5; }
.sh-scene-jewel3d .facet { fill: none; stroke: #fff; stroke-width: .45; }
.sh-scene-jewel3d .facet-crown { transform-origin: 0 -9px; animation: sh-facet-crown 2.4s linear infinite; }
.sh-scene-jewel3d .facet-pavilion { transform-origin: 0 12px; animation: sh-facet-pavilion 2.4s linear infinite; }
.sh-scene-jewel3d .gem-float { animation: sh-jewel3d-float 3s ease-in-out infinite; }
.sh-scene-jewel3d .sparkle { fill: #fff; opacity: .3; transform-box: fill-box; transform-origin: center; animation: sh-sparkle 1.8s ease-in-out infinite; }
@keyframes sh-facet-crown { 0% { transform: skewX(-48deg); opacity: .85; animation-timing-function: ease-in-out; } 50% { transform: skewX(48deg); opacity: .85; } 50.1%, 100% { transform: skewX(48deg); opacity: 0; } }
@keyframes sh-facet-pavilion { 0% { transform: skewX(39.8deg); opacity: .85; animation-timing-function: ease-in-out; } 50% { transform: skewX(-39.8deg); opacity: .85; } 50.1%, 100% { transform: skewX(-39.8deg); opacity: 0; } }
@keyframes sh-jewel3d-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes sh-jewel3d-glow { 0%, 100% { opacity: .6; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes sh-sparkle { 0%, 100% { opacity: .2; transform: scale(.5); } 50% { opacity: 1; transform: scale(1.1); } }

/* Stolár: the plane pushes 32 units along x (31.9px, 18.4px) and lifts back; the planed strip widens from 7 to 39 units. */
.sh-scene-plane3d .bench.t { fill: #c9a77a; }
.sh-scene-plane3d .bench.l { fill: #a1825a; }
.sh-scene-plane3d .bench.r { fill: #7d6444; }
.sh-scene-plane3d .board.t { fill: #ecd3ab; }
.sh-scene-plane3d .board.l { fill: #d4b688; }
.sh-scene-plane3d .board.r { fill: #b08e5e; }
.sh-scene-plane3d .grain { fill: none; stroke: #c9a77a; stroke-width: .5; opacity: .8; }
.sh-scene-plane3d .planed { fill: #fff3dc; transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(.18); animation: sh-plane3d-strip 4s ease-in-out infinite; }
.sh-scene-plane3d .shade-tool { opacity: .7; }
.sh-scene-plane3d .tote { fill: #b8743f; }
.sh-scene-plane3d .tote-back { fill: #7e4b26; }
.sh-scene-plane3d .iron { fill: #c3ccd5; }
.sh-scene-plane3d .cap { fill: color-mix(in srgb, var(--sh-program) 45%, #000); }
.sh-scene-plane3d .knob.side { fill: #7e4b26; }
.sh-scene-plane3d .knob.top { fill: #c98a52; }
.sh-scene-plane3d .shaving { fill: none; stroke: #ffe2b0; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: sh-plane3d-curl 4s ease-in-out infinite; }
.sh-scene-plane3d .plane, .sh-scene-plane3d .flakes { animation: sh-plane3d-push 4s ease-in-out infinite; }
.sh-scene-plane3d .flake { fill: none; stroke: #ffe2b0; stroke-width: .8; opacity: 0; animation: sh-chip .9s ease-out infinite; }
@keyframes sh-plane3d-push { 0% { transform: translate(0, 0); } 65% { transform: translate(31.9px, 18.4px); } 78% { transform: translate(31.9px, 15px); } 95% { transform: translate(0, -3.4px); } 100% { transform: translate(0, 0); } }
@keyframes sh-plane3d-strip { 0% { transform: scaleX(.18); opacity: 1; } 65%, 80% { transform: scaleX(1); opacity: 1; } 96% { transform: scaleX(1); opacity: 0; } 100% { transform: scaleX(.18); opacity: 0; } }
@keyframes sh-plane3d-curl { 0%, 5% { stroke-dashoffset: 100; opacity: 1; } 65% { stroke-dashoffset: 0; opacity: 1; } 75%, 100% { stroke-dashoffset: 0; opacity: 0; } }

/* Maliar: the roller climbs 15 units (17.25px) and the fresh stripe grows from the floor up with it. */
.sh-scene-paint3d .wall.t { fill: #f7f4ee; }
.sh-scene-paint3d .wall.l { fill: #ebe6dc; }
.sh-scene-paint3d .wall.r { fill: #bdb6a8; }
.sh-scene-paint3d .coat { fill: color-mix(in srgb, var(--sh-program) 78%, #fff); }
.sh-scene-paint3d .coat-alt { fill: color-mix(in srgb, var(--sh-program) 72%, #fff); }
.sh-scene-paint3d .fresh { fill: color-mix(in srgb, var(--sh-program) 92%, #fff); transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(.48); animation: sh-paint3d-fresh 3.2s ease-in-out infinite; }
.sh-scene-paint3d .edge { fill: none; stroke: rgba(0, 0, 0, .1); stroke-width: .4; }
.sh-scene-paint3d .nap { fill: color-mix(in srgb, var(--sh-program) 85%, #fff); }
.sh-scene-paint3d .nap-end { fill: color-mix(in srgb, var(--sh-program) 55%, #000); }
.sh-scene-paint3d .frame { fill: none; stroke: #c3ccd5; stroke-width: 1; }
.sh-scene-paint3d .grip { fill: none; stroke: #2f363d; stroke-width: 2.6; stroke-linecap: round; }
.sh-scene-paint3d .paint-roller { animation: sh-paint3d-roll 3.2s ease-in-out infinite; }
.sh-scene-paint3d .tray.t { fill: #dfe5eb; }
.sh-scene-paint3d .tray.l { fill: #aab4be; }
.sh-scene-paint3d .tray.r { fill: #77828e; }
.sh-scene-paint3d .paint { fill: color-mix(in srgb, var(--sh-program) 92%, #fff); }
.sh-scene-paint3d .bucket.side { fill: #c3ccd5; }
.sh-scene-paint3d .bucket.top { fill: #8e99a5; }
.sh-scene-paint3d .bail { fill: none; stroke: #8e99a5; stroke-width: .8; }
@keyframes sh-paint3d-roll { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-17.25px); } }
@keyframes sh-paint3d-fresh { 0% { transform: scaleY(.48); opacity: 1; } 45%, 85% { transform: scaleY(.98); opacity: 1; } 98% { transform: scaleY(.98); opacity: 0; } 100% { transform: scaleY(.48); opacity: 0; } }

/* Murár: top-course bricks drop in 0.3s apart; the trowel runs 40 units ahead of them along the wall. */
.sh-scene-bricks3d .mortar.t, .sh-scene-bricks3d .mortar-top { fill: #d3d7da; }
.sh-scene-bricks3d .mortar.l { fill: #b0b5ba; }
.sh-scene-bricks3d .mortar.r { fill: #8c9298; }
.sh-scene-bricks3d .brick.t { fill: color-mix(in srgb, var(--sh-program) 30%, #f2a27a); }
.sh-scene-bricks3d .brick.l { fill: color-mix(in srgb, var(--sh-program) 45%, #cf6a45); }
.sh-scene-bricks3d .brick.r { fill: color-mix(in srgb, var(--sh-program) 60%, #8e3c24); }
.sh-scene-bricks3d .tub.t { fill: #3a3f45; }
.sh-scene-bricks3d .tub.l { fill: #2a2e33; }
.sh-scene-bricks3d .tub.r { fill: #1d2024; }
.sh-scene-bricks3d .lay { animation: sh-bricks3d-lay 4s ease-out infinite; }
.sh-scene-bricks3d .trowel { animation: sh-bricks3d-trowel 4s ease-in-out infinite; }
.sh-scene-bricks3d .blade { fill: #dfe5eb; }
.sh-scene-bricks3d .handle { fill: none; stroke: #b98f5d; stroke-width: 1.6; stroke-linecap: round; }
@keyframes sh-bricks3d-lay { 0%, 8% { transform: translateY(-14px); opacity: 0; } 18% { transform: translateY(0); opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }
@keyframes sh-bricks3d-trowel { 0%, 10% { transform: translate(0, 0); } 65% { transform: translate(39.8px, 23px); } 95%, 100% { transform: translate(0, 0); } }

/* Inštalatér: hot water flows from the boiler along the upper pipe, back along the lower one; heat rises from the radiator. */
.sh-scene-pipes3d .tile.t { fill: #eef1f4; }
.sh-scene-pipes3d .tile.l { fill: #dde3e8; }
.sh-scene-pipes3d .tile.r { fill: #b6bfc8; }
.sh-scene-pipes3d .tile-joint { fill: none; stroke: #c3ccd5; stroke-width: .4; }
.sh-scene-pipes3d .rib.t { fill: #fff; }
.sh-scene-pipes3d .rib.l { fill: #e4e9ee; transition: fill 1.2s ease; }
.sh-scene-pipes3d .rib.r { fill: #b9c3cc; transition: fill 1.2s ease; }
.sh a.sh-program-feature:hover .sh-scene-pipes3d .rib.l { fill: #ffe3d6; }
.sh a.sh-program-feature:hover .sh-scene-pipes3d .rib.r { fill: #e3b4a0; }
.sh-scene-pipes3d .pipe { fill: none; stroke: #7a3f1d; stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; }
.sh-scene-pipes3d .pipe-body { fill: none; stroke: #d98b4f; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sh-scene-pipes3d .pipe-gleam { fill: none; stroke: #ffd2a8; stroke-width: .7; transform: translateY(-.8px); }
.sh-scene-pipes3d .flow { fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 2 6; opacity: 0; transition: opacity .3s ease; animation: sh-pipes3d-flow .8s linear infinite; }
.sh a.sh-program-feature:hover .sh-scene-pipes3d .flow { opacity: 1; }
.sh-scene-pipes3d .flow.hot { stroke: #ff5a3c; animation-direction: reverse; }
.sh-scene-pipes3d .flow.cold { stroke: #3cb4ff; }
.sh-scene-pipes3d .brass.t { fill: #ffe08a; }
.sh-scene-pipes3d .brass.l { fill: #e9b93c; }
.sh-scene-pipes3d .brass.r { fill: #b88a1d; }
.sh-scene-pipes3d .stem { fill: none; stroke: #8e99a5; stroke-width: 1.2; }
.sh-scene-pipes3d .wheel { animation: sh-spin 3s linear infinite; }
.sh-scene-pipes3d .wheel .rim { fill: none; stroke: #e5483b; stroke-width: 1.1; }
.sh-scene-pipes3d .wheel .spokes { fill: none; stroke: #e5483b; stroke-width: .7; }
.sh-scene-pipes3d .wheel .hub { fill: #fff; }
.sh-scene-pipes3d .pump { fill: color-mix(in srgb, var(--sh-program) 80%, #fff); }
.sh-scene-pipes3d .pump-end { fill: color-mix(in srgb, var(--sh-program) 50%, #000); }
.sh-scene-pipes3d .boiler.t { fill: #fff; }
.sh-scene-pipes3d .boiler.l { fill: #eef1f4; }
.sh-scene-pipes3d .boiler.r { fill: #c3ccd5; }
.sh-scene-pipes3d .panel { fill: #2d343b; }
.sh-scene-pipes3d .display { fill: none; stroke: #7fe3ff; stroke-width: 1.4; }
.sh-scene-pipes3d .dial { fill: #fff; stroke: #2d343b; stroke-width: .4; }
.sh-scene-pipes3d .needle { fill: none; stroke: #e5483b; stroke-width: .5; animation: sh-pipes3d-gauge 3s ease-in-out infinite; }
.sh-scene-pipes3d .window { fill: #1d2126; }
.sh-scene-pipes3d .flame { fill: #ffb547; filter: drop-shadow(0 0 1.5px #ff7a1a); animation: sh-pipes3d-flame .5s ease-in-out infinite alternate; }
.sh-scene-pipes3d .heat { fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: .8; stroke-linecap: round; opacity: 0; animation: sh-pipes3d-heat 1.6s ease-out infinite; }
@keyframes sh-pipes3d-flow { to { stroke-dashoffset: -16; } }
@keyframes sh-pipes3d-gauge { 0%, 100% { transform: rotate(-30deg); } 50% { transform: rotate(60deg); } }
@keyframes sh-pipes3d-flame { from { transform: scale(1, .85); } to { transform: scale(.9, 1.1); } }
@keyframes sh-pipes3d-heat { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: .9; } 100% { transform: translateY(-5px); opacity: 0; } }

/* Elektromechanik (chladiace): the fan spins in its plane; frost crystals blow out along +y (-26px, 15px). */
.sh-scene-hvac3d .case.t { fill: #fff; }
.sh-scene-hvac3d .case.l { fill: color-mix(in srgb, var(--sh-program) 8%, #eef1f4); }
.sh-scene-hvac3d .case.r { fill: color-mix(in srgb, var(--sh-program) 12%, #b9c3cc); }
.sh-scene-hvac3d .foot.t { fill: #6f7a86; }
.sh-scene-hvac3d .foot.l { fill: #4e5761; }
.sh-scene-hvac3d .foot.r { fill: #3a424a; }
.sh-scene-hvac3d .trim { fill: var(--sh-program); }
.sh-scene-hvac3d .vent { fill: none; stroke: #8e99a5; stroke-width: .8; }
.sh-scene-hvac3d .grille { fill: #2a3036; }
.sh-scene-hvac3d .fan path { fill: #c9d3dc; }
.sh-scene-hvac3d .fan { animation: sh-spin .6s linear infinite; }
.sh-scene-hvac3d .hub { fill: #f2f5f8; }
.sh-scene-hvac3d .guard { fill: none; stroke: #e9eef2; stroke-width: .45; opacity: .8; }
.sh-scene-hvac3d .badge { fill: none; stroke: var(--sh-program); stroke-width: .9; stroke-linecap: round; }
.sh-scene-hvac3d .insul { fill: #2f363d; }
.sh-scene-hvac3d .insul-end { fill: #1d2126; }
.sh-scene-hvac3d .copper { fill: #d98b4f; }
.sh-scene-hvac3d .copper-end { fill: #f0b07a; }
.sh-scene-hvac3d .crystal { fill: none; stroke: #e8f8ff; stroke-width: .6; stroke-linecap: round; }
.sh-scene-hvac3d .breeze, .sh-scene-hvac3d .wind { opacity: 0; animation: sh-hvac3d-breeze 1.8s ease-out infinite; }
.sh-scene-hvac3d .wind { fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: .8; stroke-linecap: round; }
@keyframes sh-hvac3d-breeze { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(-26px, 15px); opacity: 0; } }

/* Elektromechanik (silnoprúd): breakers flip on 0.07s apart, then current runs to the lamp (4s cycle). */
.sh-scene-panel3d .plinth.t { fill: #6f7a86; }
.sh-scene-panel3d .plinth.l { fill: #4e5761; }
.sh-scene-panel3d .plinth.r { fill: #3a424a; }
.sh-scene-panel3d .inside { fill: #2a2f35; }
.sh-scene-panel3d .breaker.t { fill: #f4f7fa; }
.sh-scene-panel3d .breaker.l { fill: #dfe5eb; }
.sh-scene-panel3d .breaker.r { fill: #aab4be; }
.sh-scene-panel3d .lever.t { fill: #4e5761; }
.sh-scene-panel3d .lever.l { fill: #3a424a; }
.sh-scene-panel3d .lever.r { fill: #2c333a; }
.sh-scene-panel3d .toggle { animation: sh-panel3d-toggle 4s ease-in-out infinite; }
.sh-scene-panel3d .led { fill: #59636d; animation: sh-panel3d-led 4s steps(1) infinite; }
.sh-scene-panel3d .door { fill: color-mix(in srgb, var(--sh-program) 78%, #000); }
.sh-scene-panel3d .doc { fill: #fff; }
.sh-scene-panel3d .doc-line { fill: none; stroke: #8e99a5; stroke-width: .5; }
.sh-scene-panel3d .cable { fill: none; stroke: #2a2f35; stroke-width: 1.6; stroke-linecap: round; }
.sh-scene-panel3d .current { fill: none; stroke: #fff27a; stroke-width: 1; stroke-dasharray: 2 5; opacity: 0; animation: sh-panel3d-current 4s linear infinite; }
.sh-scene-panel3d .pole.t { fill: #c3ccd5; }
.sh-scene-panel3d .pole.l { fill: #8e99a5; }
.sh-scene-panel3d .pole.r { fill: #67727e; }
.sh-scene-panel3d .socket.side { fill: #2c333a; }
.sh-scene-panel3d .socket.top { fill: #4e5761; }
.sh-scene-panel3d .bulb { fill: #e9eef2; animation: sh-panel3d-bulb 4s ease-in-out infinite; }
.sh-scene-panel3d .halo { fill: #fff6a8; opacity: 0; filter: blur(3px); animation: sh-panel3d-halo 4s ease-in-out infinite; }
@keyframes sh-panel3d-toggle { 0%, 6% { transform: translateY(0); } 10%, 88% { transform: translateY(-1.4px); } 94%, 100% { transform: translateY(0); } }
@keyframes sh-panel3d-led { 0% { fill: #59636d; } 10% { fill: #7dffa8; } 90%, 100% { fill: #59636d; } }
@keyframes sh-panel3d-current { 0%, 38% { opacity: 0; stroke-dashoffset: 0; } 42%, 88% { opacity: 1; } 92%, 100% { opacity: 0; stroke-dashoffset: -70; } }
@keyframes sh-panel3d-bulb { 0%, 42% { fill: #e9eef2; } 48%, 88% { fill: #fff6a8; } 94%, 100% { fill: #e9eef2; } }
@keyframes sh-panel3d-halo { 0%, 42% { opacity: 0; } 48%, 88% { opacity: .9; } 94%, 100% { opacity: 0; } }

/* Puškár: the aiming dot settles on the bull (0-50%), the shot fires at 55%, the hit and its ripple show from 60%. */
.sh-scene-range3d .post.t { fill: #c9a77a; }
.sh-scene-range3d .post.l { fill: #a1825a; }
.sh-scene-range3d .post.r { fill: #7d6444; }
.sh-scene-range3d .board.t { fill: #e9d9bd; }
.sh-scene-range3d .board.l { fill: #cdb894; }
.sh-scene-range3d .board.r { fill: #f4ead7; }
.sh-scene-range3d .ring-0, .sh-scene-range3d .ring-2 { fill: #fff; }
.sh-scene-range3d .ring-1 { fill: #2a2f35; }
.sh-scene-range3d .ring-3 { fill: var(--sh-program); }
.sh-scene-range3d .cross { fill: none; stroke: #8e99a5; stroke-width: .3; }
.sh-scene-range3d .dot { fill: #ff3b30; filter: drop-shadow(0 0 1px #ff3b30); transform: translate(-6px, 4px); animation: sh-range3d-dot 3s ease-in-out infinite; }
.sh-scene-range3d .hole { fill: #111; opacity: 0; animation: sh-range3d-hole 3s steps(1) infinite; }
.sh-scene-range3d .ripple { fill: none; stroke: var(--sh-program); stroke-width: .5; opacity: 0; animation: sh-range3d-ripple 3s ease-out infinite; }
.sh-scene-range3d .beam { fill: none; stroke: #ff3b30; stroke-width: .4; stroke-dasharray: 1.5 2; opacity: .35; }
.sh-scene-range3d .tracer { fill: none; stroke: #ffe08a; stroke-width: 1; stroke-linecap: round; opacity: 0; filter: drop-shadow(0 0 1.5px #ffb547); animation: sh-range3d-tracer 3s linear infinite; }
.sh-scene-range3d .rest.t { fill: #6f7a86; }
.sh-scene-range3d .rest.l { fill: #4e5761; }
.sh-scene-range3d .rest.r { fill: #3a424a; }
.sh-scene-range3d .brass { fill: #e9b93c; }
.sh-scene-range3d .brass-end { fill: #ffe08a; }
.sh-scene-range3d .tube { fill: url(#sh-range3d-tube); }
.sh-scene-range3d .mount { fill: #dfe5eb; }
.sh-scene-range3d .turret.side { fill: #2a2f35; }
.sh-scene-range3d .turret.top { fill: #6f7a86; }
.sh-scene-range3d .lens { fill: #7fd3ff; }
.sh-scene-range3d .scope { animation: sh-range3d-recoil 3s ease-out infinite; }
@keyframes sh-range3d-dot { 0% { transform: translate(-6px, 4px); } 20% { transform: translate(5px, -3px); } 38% { transform: translate(-2px, 2px); } 50%, 100% { transform: translate(0, 0); } }
@keyframes sh-range3d-hole { 0% { opacity: 0; } 60% { opacity: 1; } 96% { opacity: 0; } }
@keyframes sh-range3d-ripple { 0%, 59% { transform: scale(1); opacity: 0; } 60% { opacity: 1; } 85%, 100% { transform: scale(6); opacity: 0; } }
@keyframes sh-range3d-tracer { 0%, 54% { transform: translate(0, 0); opacity: 0; } 55% { transform: translate(0, 0); opacity: 1; } 60% { transform: translate(-30.9px, -16.8px); opacity: 1; } 61%, 100% { transform: translate(-30.9px, -16.8px); opacity: 0; } }
@keyframes sh-range3d-recoil { 0%, 54% { transform: translate(0, 0); } 57% { transform: translate(1.8px, 1px); } 70%, 100% { transform: translate(0, 0); } }

/* Isometric lathe in the program colour: shaded castings, cylinders as rotated bands, a spinning chuck and a carriage that turns the bar down. */
.sh-scene-lathe3d path, .sh-scene-lathe3d rect, .sh-scene-lathe3d ellipse, .sh-scene-lathe3d circle { stroke: none; }
.sh-scene-lathe3d .ground.t { fill: rgba(255, 255, 255, .13); stroke: rgba(255, 255, 255, .22); stroke-width: .6; }
.sh-scene-lathe3d .ground.l { fill: rgba(255, 255, 255, .07); }
.sh-scene-lathe3d .ground.r { fill: rgba(255, 255, 255, .04); }
.sh-scene-lathe3d .shade { fill: rgba(0, 0, 0, .32); filter: blur(2.5px); }
.sh-scene-lathe3d .cast.t, .sh-scene-lathe3d .apron.t { fill: color-mix(in srgb, var(--sh-program) 30%, #fff); }
.sh-scene-lathe3d .cast.l, .sh-scene-lathe3d .apron.l { fill: color-mix(in srgb, var(--sh-program) 75%, #fff); }
.sh-scene-lathe3d .cast.r, .sh-scene-lathe3d .apron.r { fill: color-mix(in srgb, var(--sh-program) 75%, #000); }
.sh-scene-lathe3d .base.t { fill: color-mix(in srgb, var(--sh-program) 45%, #2a2f35); }
.sh-scene-lathe3d .base.l { fill: color-mix(in srgb, var(--sh-program) 30%, #1d2126); }
.sh-scene-lathe3d .base.r { fill: color-mix(in srgb, var(--sh-program) 20%, #121518); }
.sh-scene-lathe3d .bed.t { fill: #f2f5f8; }
.sh-scene-lathe3d .bed.l { fill: #c3ccd5; }
.sh-scene-lathe3d .bed.r { fill: #8e99a5; }
.sh-scene-lathe3d .saddle.t, .sh-scene-lathe3d .slide.t { fill: #dfe5eb; }
.sh-scene-lathe3d .saddle.l, .sh-scene-lathe3d .slide.l { fill: #aab4be; }
.sh-scene-lathe3d .saddle.r, .sh-scene-lathe3d .slide.r { fill: #77828e; }
.sh-scene-lathe3d .post.t, .sh-scene-lathe3d .shank.t { fill: #6f7a86; }
.sh-scene-lathe3d .post.l, .sh-scene-lathe3d .shank.l { fill: #4e5761; }
.sh-scene-lathe3d .post.r, .sh-scene-lathe3d .shank.r { fill: #3a424a; }
.sh-scene-lathe3d .clamp.t { fill: #c3ccd5; }
.sh-scene-lathe3d .clamp.l { fill: #8e99a5; }
.sh-scene-lathe3d .clamp.r { fill: #67727e; }
.sh-scene-lathe3d .insert.t { fill: #ffe08a; }
.sh-scene-lathe3d .insert.l { fill: #e9b93c; }
.sh-scene-lathe3d .insert.r { fill: #b88a1d; }
.sh-scene-lathe3d .gleam { stroke: #fff; stroke-width: .8; opacity: .9; }
.sh-scene-lathe3d .panel { fill: #262b31; }
.sh-scene-lathe3d .screen { stroke: #7fe3ff; stroke-width: 1.6; opacity: .7; }
.sh-scene-lathe3d .lamp { fill: #7dffa8; }
.sh-scene-lathe3d .estop { fill: #ffd23f; stroke: #262b31; stroke-width: .5; }
.sh a.sh-program-feature:hover .sh-scene-lathe3d .lamp { filter: drop-shadow(0 0 1.5px #7dffa8); }
.sh a.sh-program-feature:hover .sh-scene-lathe3d .screen { opacity: 1; }
.sh-scene-lathe3d .chuck { fill: url(#sh-lathe3d-chuck); }
.sh-scene-lathe3d .chuck-front { fill: #e4e9ee; }
.sh-scene-lathe3d .chuck-ring { fill: none; stroke: #9aa5b1; stroke-width: .5; }
.sh-scene-lathe3d .jaw { fill: #46505a; }
.sh-scene-lathe3d .bore { fill: #2c333a; }
.sh-scene-lathe3d .chuck-face { transform-box: fill-box; transform-origin: center; animation: sh-spin .35s linear infinite; }
.sh-scene-lathe3d .shine, .sh-scene-lathe3d .quill { fill: url(#sh-lathe3d-shine); }
.sh-scene-lathe3d .rough { fill: url(#sh-lathe3d-rough); transform-box: fill-box; transform-origin: 0 50%; animation: sh-lathe-rough 5s linear infinite; }
.sh-scene-lathe3d .step { fill: none; }
.sh-scene-lathe3d .step-cap { fill: #d3dae1; }
.sh-scene-lathe3d .carriage { animation: sh-lathe-feed 5s linear infinite; }
.sh-scene-lathe3d .handwheel { transform-box: fill-box; transform-origin: center; animation: sh-spin 1.2s linear infinite; }
.sh-scene-lathe3d .handwheel.tail { animation: none; }
.sh-scene-lathe3d .handwheel .rim { fill: none; stroke: #f2f5f8; stroke-width: .9; }
.sh-scene-lathe3d .handwheel path { stroke: #f2f5f8; stroke-width: .6; }
.sh-scene-lathe3d .handwheel .knob { fill: #262b31; }
.sh-scene-lathe3d .chip { fill: none; stroke: #ffc65a; stroke-width: .9; opacity: 0; filter: drop-shadow(0 0 1.2px #ff9d2e); animation: sh-chip .55s ease-out infinite; }
/* 5s pass: 0-85% the tool feeds 26 units towards the chuck (rough blank 34 -> 8 units), then the carriage rapids back. */
@keyframes sh-lathe-feed { 0% { transform: translate(0, 0); } 85% { transform: translate(-25.9px, -14.95px); } 100% { transform: translate(0, 0); } }
@keyframes sh-lathe-rough { 0% { transform: scaleX(1); } 85% { transform: scaleX(.235); } 100% { transform: scaleX(1); } }

/* 2-year scenes */
/* Isometric building site: bricks, sand pile with a shovel and a wheelbarrow whose wheel spins in its own plane. */
.sh-scene-site path, .sh-scene-site ellipse, .sh-scene-site .grain, .sh-scene-site .dust { stroke: none; }
.sh-scene-site .ground.t { fill: rgba(255, 255, 255, .13); stroke: rgba(255, 255, 255, .22); stroke-width: .6; }
.sh-scene-site .ground.l { fill: rgba(255, 255, 255, .07); }
.sh-scene-site .ground.r { fill: rgba(255, 255, 255, .04); }
.sh-scene-site .plank.t { fill: #d8b98a; }
.sh-scene-site .plank.l { fill: #b08e5e; }
.sh-scene-site .plank.r { fill: #8c6f47; }
.sh-scene-site .pallet.t { fill: #c9a77a; }
.sh-scene-site .pallet.l { fill: #a1825a; }
.sh-scene-site .pallet.r { fill: #7d6444; }
.sh-scene-site .brick.t { fill: #e2906a; }
.sh-scene-site .brick.l { fill: #bd6544; }
.sh-scene-site .brick.r { fill: #934c33; }
.sh-scene-site .shade { fill: rgba(0, 0, 0, .3); filter: blur(2.5px); }
.sh-scene-site .sand-lit, .sh-scene-site .sand-top { fill: #ecd29b; }
.sh-scene-site .sand-dark { fill: #c7a868; }
.sh-scene-site .sand-top { fill: #d9bb7c; }
.sh-scene-site .tray.l { fill: var(--sh-yellow, #e6be1e); }
.sh-scene-site .tray.r { fill: #b8930f; }
.sh-scene-site .rim { fill: none; stroke: #f6dc6a; stroke-width: 1.2; }
.sh-scene-site .handle { fill: none; stroke: #b98f5d; stroke-width: 2.2; }
.sh-scene-site .leg { fill: none; stroke: #8e99a5; stroke-width: 1.6; }
.sh-scene-site .tyre-back { fill: none; stroke: #23272b; stroke-width: 2.4; }
.sh-scene-site .tyre { fill: none; stroke: #33393f; stroke-width: 2.4; }
.sh-scene-site .rim-ring { fill: rgba(255, 255, 255, .12); stroke: #dfe5eb; stroke-width: .9; }
.sh-scene-site .spokes { stroke: #dfe5eb; stroke-width: .7; }
.sh-scene-site .hub { fill: #f4f7fa; stroke: none; }
.sh-scene-site .shovel-handle { fill: none; stroke: #b98f5d; stroke-width: 2; }
.sh-scene-site .shovel-grip { fill: none; stroke: #33393f; stroke-width: 2.6; }
.sh-scene-site .blade { fill: #c3ccd5; }
.sh-scene-site .grain { fill: #ecd29b; opacity: 0; animation: sh-grain 1.6s ease-in infinite; }
.sh-scene-site .dust { fill: rgba(236, 210, 155, .55); opacity: 0; transform-box: fill-box; transform-origin: center; animation: sh-dust .8s ease-out infinite; }
/* Program-page extras (sostar_home_program_feature( $title, true )). */
.sh-scene-site .mortar.t { fill: #cfcac2; }
.sh-scene-site .mortar.l { fill: #a9a39a; }
.sh-scene-site .mortar.r { fill: #8a857d; }
.sh-scene-site .level.t { fill: #f2c230; }
.sh-scene-site .level.l { fill: #d9a514; }
.sh-scene-site .level.r { fill: #b18511; }
.sh-scene-site .vial { fill: #8fe3a3; }
.sh-scene-site .bag.t { fill: #ece7dc; }
.sh-scene-site .bag.l { fill: #cfc8b8; }
.sh-scene-site .bag.r { fill: #ada594; }
.sh-scene-site .bag-band { fill: #c8553d; }
.sh-scene-site .tub.side { fill: #343a41; }
.sh-scene-site .tub.top { fill: #4d555e; }
.sh-scene-site .mortar-fill { fill: #b9b3aa; }
.sh-scene-site .trowel { fill: #dfe5eb; }
.sh-scene-site .trowel-handle { fill: none; stroke: #b98f5d; stroke-width: 1.8; }
.sh-scene-site .plank-grain { fill: none; stroke: rgba(120, 92, 56, .5); stroke-width: .4; }
.sh-scene-site .speck { fill: #b0915a; stroke: none; }
.sh-scene-site .sand-damp { fill: rgba(150, 118, 64, .35); }
.sh-scene-site .sand-ridge { fill: none; stroke: rgba(255, 244, 214, .7); stroke-width: .6; }
.sh-scene-site .pebble { fill: #9aa3ab; stroke: none; }
.sh-scene-site .blade-back { fill: #7d8894; }
.sh-scene-site .blade-rib { fill: none; stroke: #9aa5b0; stroke-width: .6; }
.sh-scene-site .blade-tread { fill: none; stroke: #eef2f5; stroke-width: 1; }
.sh-scene-site .socket { fill: none; stroke: #6b7682; stroke-width: 2.6; }
.sh-scene-site .shaft-shine { fill: none; stroke: #dcbb90; stroke-width: .6; transform: translate(-.5px, -.2px); }
/* 3.2s: the barrow rolls 24 units forward and back; a wheel of radius 6 turns 229deg over that distance. */
.sh-scene-site .barrow { animation: sh-roll-iso 3.2s ease-in-out infinite; }
.sh-scene-site .wheel { transform-box: fill-box; transform-origin: center; animation: sh-wheel-iso 3.2s ease-in-out infinite; }
.sh-scene-site .load { animation: sh-jolt .4s ease-in-out infinite; }
@keyframes sh-roll-iso { 0%, 100% { transform: translate(-11.9px, -6.9px); } 50% { transform: translate(11.9px, 6.9px); } }
@keyframes sh-wheel-iso { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-229deg); } }
@keyframes sh-jolt { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.8px); } }
@keyframes sh-grain { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(1px, 14px); opacity: 0; } }
@keyframes sh-dust { 0% { transform: translate(0, 0) scale(.5); opacity: .9; } 100% { transform: translate(-6px, -5px) scale(1.6); opacity: 0; } }

/* Isometric vise: per-face shading (t = top, l = front, r = side), cast shadows, and a saw that sinks into the bar. */
.sh-scene-vise3d path, .sh-scene-vise3d ellipse, .sh-scene-vise3d .chip { stroke: none; }
.sh-scene-vise3d .bench.t { fill: rgba(255, 255, 255, .13); stroke: rgba(255, 255, 255, .22); stroke-width: .6; }
.sh-scene-vise3d .bench.l { fill: rgba(255, 255, 255, .07); }
.sh-scene-vise3d .bench.r { fill: rgba(255, 255, 255, .04); }
.sh-scene-vise3d .shade { fill: rgba(0, 0, 0, .28); filter: blur(2.5px); }
.sh-scene-vise3d .shade-vise { fill: rgba(0, 0, 0, .35); }
.sh-scene-vise3d .iron.t { fill: color-mix(in srgb, var(--sh-program) 55%, #fff); }
.sh-scene-vise3d .iron.l { fill: var(--sh-program); }
.sh-scene-vise3d .iron.r { fill: color-mix(in srgb, var(--sh-program) 60%, #000); }
.sh-scene-vise3d .jaw.t { fill: color-mix(in srgb, var(--sh-program) 40%, #fff); }
.sh-scene-vise3d .jaw.l { fill: color-mix(in srgb, var(--sh-program) 85%, #fff); }
.sh-scene-vise3d .jaw.r { fill: color-mix(in srgb, var(--sh-program) 70%, #000); }
.sh-scene-vise3d .steel.t, .sh-scene-vise3d .knob.t { fill: #f2f5f8; }
.sh-scene-vise3d .steel.l, .sh-scene-vise3d .knob.l { fill: #c3ccd5; }
.sh-scene-vise3d .steel.r, .sh-scene-vise3d .knob.r { fill: #8e99a5; }
.sh-scene-vise3d .knob.t { fill: color-mix(in srgb, var(--sh-program) 30%, #fff); }
.sh-scene-vise3d .gleam { stroke: #fff; stroke-width: .8; opacity: .9; }
.sh-scene-vise3d .frame-shadow { stroke: rgba(0, 0, 0, .3); stroke-width: 4.6; transform: translate(1.5px, 2px); filter: blur(1px); }
.sh-scene-vise3d .frame { stroke: color-mix(in srgb, var(--sh-program) 65%, #000); stroke-width: 3.8; }
.sh-scene-vise3d .frame-gleam { stroke: color-mix(in srgb, var(--sh-program) 35%, #fff); stroke-width: 1.2; transform: translate(-.5px, -.8px); }
.sh-scene-vise3d .blade { fill: #6f7b87; }
.sh-scene-vise3d .teeth { stroke: #2f363d; stroke-width: .8; }
.sh-scene-vise3d .wing { fill: #f4f7fa; stroke: color-mix(in srgb, var(--sh-program) 65%, #000); stroke-width: 1; }
.sh-scene-vise3d .grip { fill: color-mix(in srgb, var(--sh-program) 70%, #000); }
.sh-scene-vise3d .grip-back { fill: color-mix(in srgb, var(--sh-program) 40%, #000); }
.sh-scene-vise3d .blade-edge { stroke: #c8d0d8; stroke-width: .7; }
.sh-scene-vise3d .kerf { fill: #1b1512; }
.sh-scene-vise3d .kerf-deep { fill: #2a1c14; stroke: #ffb547; stroke-width: .5; stroke-opacity: 0; transform-box: fill-box; transform-origin: top; transform: scaleY(.2); animation: sh-kerf 4s linear infinite; }
.sh a.sh-program-feature:hover .sh-scene-vise3d .kerf-deep { stroke-opacity: .9; }
.sh-scene-vise3d .saw { animation: sh-stroke .38s ease-in-out infinite alternate; }
.sh-scene-vise3d .saw-depth { animation: sh-sink 4s linear infinite; }
.sh-scene-vise3d .pile { fill: #c3ccd5; opacity: .85; transform-box: fill-box; transform-origin: center bottom; transform: scale(.35); animation: sh-pile 4s linear infinite; }
.sh-scene-vise3d .chip { fill: #ffd56a; stroke: none; opacity: 0; filter: drop-shadow(0 0 1.5px #ffb547); animation: sh-chip .6s ease-out infinite; }
@keyframes sh-stroke { from { transform: translate(8px, -4.6px); } to { transform: translate(-8px, 4.6px); } }
@keyframes sh-sink { 0% { transform: translateY(0); } 92% { transform: translateY(7px); } 100% { transform: translateY(0); } }
@keyframes sh-kerf { 0% { transform: scaleY(.2); } 92% { transform: scaleY(1); } 100% { transform: scaleY(.2); } }
@keyframes sh-pile { 0% { transform: scale(.35); } 92% { transform: scale(1); } 100% { transform: scale(.35); } }
@keyframes sh-chip { 0% { transform: translate(0, 0); opacity: 1; } 35% { transform: translate(calc(var(--dx) * .45), calc(var(--up) * -1)); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; } }

/* Nadstavbové štúdium */
/* Stavebníctvo, 6s: the plan is drawn, the floors drop onto the frame one by one and the site clears at the end.
   The -4s delay keeps the finished building on show while the card is at rest. */
.sh-program-feature .sh-scene-project3d { right: -10px; bottom: -12px; }
.sh-scene-project3d .paper { fill: #1d5aa8; stroke: rgba(255, 255, 255, .35); stroke-width: .4; }
.sh-scene-project3d .plan { fill: none; stroke: #dbe9ff; stroke-width: .5; stroke-dasharray: 100; animation: sh-project3d-plan 6s ease-in-out -4s infinite; }
.sh-scene-project3d .wall { stroke-width: .9; }
.sh-scene-project3d .slab.t { fill: #eeebe5; }
.sh-scene-project3d .slab.l { fill: #c9c3b9; }
.sh-scene-project3d .slab.r { fill: #9f988d; }
.sh-scene-project3d .column.t { fill: #dcd7cf; }
.sh-scene-project3d .column.l { fill: #b5aea3; }
.sh-scene-project3d .column.r { fill: #8a8378; }
.sh-scene-project3d .level { animation: 6s ease-out -4s infinite; }
.sh-scene-project3d .level-1 { animation-name: sh-project3d-level-1; }
.sh-scene-project3d .level-2 { animation-name: sh-project3d-level-2; }
.sh-scene-project3d .level-3 { animation-name: sh-project3d-level-3; }
.sh-scene-project3d .laser { fill: none; stroke: #ff4b3e; stroke-width: .6; stroke-dasharray: 2 2; animation: sh-project3d-beam .5s linear infinite; }
.sh-scene-project3d .spot { fill: #ff4b3e; filter: drop-shadow(0 0 1.5px #ff4b3e); animation: sh-blink 1s ease-in-out infinite; }
.sh-scene-project3d .leg { fill: none; stroke: #d9dee3; stroke-width: 1.1; }
.sh-scene-project3d .plate.t { fill: #59636d; }
.sh-scene-project3d .plate.l { fill: #3a424a; }
.sh-scene-project3d .plate.r { fill: #2c333a; }
.sh-scene-project3d .station.t { fill: #ffd95a; }
.sh-scene-project3d .station.l { fill: #e6b422; }
.sh-scene-project3d .station.r { fill: #b98a10; }
.sh-scene-project3d .scope.t { fill: #59636d; }
.sh-scene-project3d .scope.l { fill: #3a424a; }
.sh-scene-project3d .scope.r { fill: #2c333a; }
.sh-scene-project3d .lcd { fill: #2a2f35; }
.sh a.sh-program-feature:hover .sh-scene-project3d .lcd { fill: #9fe8ff; }
@keyframes sh-project3d-plan { 0%, 4% { stroke-dashoffset: 100; opacity: 1; } 30%, 88% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes sh-project3d-level-1 { 0%, 10% { transform: translateY(-14px); opacity: 0; } 20%, 88% { transform: translateY(0); opacity: 1; } 96%, 100% { transform: translateY(0); opacity: 0; } }
@keyframes sh-project3d-level-2 { 0%, 26% { transform: translateY(-14px); opacity: 0; } 36%, 88% { transform: translateY(0); opacity: 1; } 96%, 100% { transform: translateY(0); opacity: 0; } }
@keyframes sh-project3d-level-3 { 0%, 42% { transform: translateY(-14px); opacity: 0; } 52%, 88% { transform: translateY(0); opacity: 1; } 96%, 100% { transform: translateY(0); opacity: 0; } }
@keyframes sh-project3d-beam { to { stroke-dashoffset: -4; } }

/* Strojárstvo, 6s: the robot reaches the seam, welds 14 units along it (20-70%), lifts off and returns. Joint angles come
   from inverse kinematics (links 20 and 16, torch kept upright); the sparks follow the tip in a straight line. */
.sh-scene-robot3d .table.t { fill: #c3ccd5; }
.sh-scene-robot3d .table.l { fill: #8e99a5; }
.sh-scene-robot3d .table.r { fill: #67727e; }
.sh-scene-robot3d .table-leg.l { fill: #4e5761; }
.sh-scene-robot3d .table-leg.r { fill: #3a424a; }
.sh-scene-robot3d .plate.t { fill: #f2f5f8; }
.sh-scene-robot3d .plate.l { fill: #c3ccd5; }
.sh-scene-robot3d .plate.r { fill: #9aa5b0; }
.sh-scene-robot3d .bead { fill: none; stroke: #ffb547; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: sh-robot3d-bead 6s linear infinite; }
.sh-scene-robot3d .base.side { fill: #2c333a; }
.sh-scene-robot3d .base.top { fill: #4e5761; }
.sh-scene-robot3d .turret.side { fill: #c45f0e; }
.sh-scene-robot3d .turret.top { fill: #ff9c3d; }
.sh-scene-robot3d .beacon.side { fill: #b8930f; }
.sh-scene-robot3d .beacon.top { fill: #ffd84d; }
.sh a.sh-program-feature:hover .sh-scene-robot3d .beacon.top { animation: sh-blink .8s ease-in-out infinite; filter: drop-shadow(0 0 1.5px #ffd84d); }
.sh-scene-robot3d .arm-side, .sh-scene-robot3d .wrist-side { fill: #c45f0e; }
.sh-scene-robot3d .arm-face, .sh-scene-robot3d .wrist-face { fill: #ff8a1f; }
.sh-scene-robot3d .joint { fill: #3a424a; stroke: #c3ccd5; stroke-width: .6; }
.sh-scene-robot3d .torch { fill: #2c333a; }
.sh-scene-robot3d .nozzle { fill: #c49b63; }
.sh-scene-robot3d .j1 { transform: rotate(88.55deg); animation: sh-robot3d-j1 6s infinite; }
.sh-scene-robot3d .j2 { transform: rotate(-103deg); animation: sh-robot3d-j2 6s infinite; }
.sh-scene-robot3d .j3 { transform: rotate(-75.55deg); animation: sh-robot3d-j3 6s infinite; }
.sh-scene-robot3d .sparks { opacity: 0; animation: sh-robot3d-sparks 6s linear infinite; }
.sh-scene-robot3d .spark { fill: #ffd56a; filter: drop-shadow(0 0 1px #ffb547); animation: sh-chip .5s ease-out infinite; }
.sh-scene-robot3d .arc { fill: #fff; filter: drop-shadow(0 0 2px #9fe8ff) drop-shadow(0 0 4px #ffd56a); animation: sh-blink .15s linear infinite; }
@keyframes sh-robot3d-j1 { 0% { transform: rotate(88.55deg); animation-timing-function: ease-in-out; } 12%, 20% { transform: rotate(71.49deg); animation-timing-function: linear; } 32.5% { transform: rotate(63.49deg); } 45% { transform: rotate(55.24deg); } 57.5% { transform: rotate(46.18deg); } 70% { transform: rotate(35.01deg); animation-timing-function: ease-in-out; } 80% { transform: rotate(34.92deg); animation-timing-function: ease-in-out; } 100% { transform: rotate(88.55deg); } }
@keyframes sh-robot3d-j2 { 0% { transform: rotate(-103deg); animation-timing-function: ease-in-out; } 12%, 20% { transform: rotate(-114.76deg); animation-timing-function: linear; } 32.5% { transform: rotate(-101.7deg); } 45% { transform: rotate(-87.04deg); } 57.5% { transform: rotate(-69.87deg); } 70% { transform: rotate(-47.55deg); animation-timing-function: ease-in-out; } 80% { transform: rotate(-22.09deg); animation-timing-function: ease-in-out; } 100% { transform: rotate(-103deg); } }
@keyframes sh-robot3d-j3 { 0% { transform: rotate(-75.55deg); animation-timing-function: ease-in-out; } 12%, 20% { transform: rotate(-46.74deg); animation-timing-function: linear; } 32.5% { transform: rotate(-51.79deg); } 45% { transform: rotate(-58.2deg); } 57.5% { transform: rotate(-66.31deg); } 70% { transform: rotate(-77.46deg); animation-timing-function: ease-in-out; } 80% { transform: rotate(-102.82deg); animation-timing-function: ease-in-out; } 100% { transform: rotate(-75.55deg); } }
@keyframes sh-robot3d-sparks { 0%, 19.9% { transform: translate(0, 0); opacity: 0; } 20% { transform: translate(0, 0); opacity: 1; } 70% { transform: translate(13.94px, 8.05px); opacity: 1; } 70.1%, 100% { transform: translate(13.94px, 8.05px); opacity: 0; } }
@keyframes sh-robot3d-bead { 0%, 20% { stroke-dashoffset: 100; stroke: #ffb547; opacity: 1; } 70% { stroke-dashoffset: 0; stroke: #ffb547; } 85%, 94% { stroke-dashoffset: 0; stroke: #8e99a5; opacity: 1; } 100% { stroke-dashoffset: 0; stroke: #8e99a5; opacity: 0; } }

/* Elektrotechnika: pulses run along the copper traces on hover, the chip core breathes and the LEDs chase (1.5s). */
.sh-scene-pcb3d .board.t { fill: #2c8f57; }
.sh-scene-pcb3d .board.l { fill: #1f6e42; }
.sh-scene-pcb3d .board.r { fill: #154d2f; }
.sh-scene-pcb3d .trace { fill: none; stroke: #6fd39a; stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; }
.sh-scene-pcb3d .pulse { fill: none; stroke: #fff27a; stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: 2 10; opacity: 0; filter: drop-shadow(0 0 1px #fff27a); transition: opacity .3s ease; animation: sh-pcb3d-pulse 1.2s linear infinite; }
.sh a.sh-program-feature:hover .sh-scene-pcb3d .pulse { opacity: 1; }
.sh-scene-pcb3d .pad { fill: #e8c46a; }
.sh-scene-pcb3d .via { fill: #1f6e42; }
.sh-scene-pcb3d .header.t { fill: #3a424a; }
.sh-scene-pcb3d .header.l { fill: #2c333a; }
.sh-scene-pcb3d .header.r { fill: #1d2126; }
.sh-scene-pcb3d .pin.t { fill: #f4dc8f; }
.sh-scene-pcb3d .pin.l { fill: #d9b85c; }
.sh-scene-pcb3d .pin.r { fill: #a8873a; }
.sh-scene-pcb3d .chip.t { fill: #2a2f35; }
.sh-scene-pcb3d .chip.l { fill: #1d2126; }
.sh-scene-pcb3d .chip.r { fill: #121518; }
.sh-scene-pcb3d .notch { fill: #3a424a; }
.sh-scene-pcb3d .core { fill: color-mix(in srgb, var(--sh-program) 45%, #fff); opacity: .2; animation: sh-pcb3d-core 1.2s ease-in-out infinite; }
.sh-scene-pcb3d .cap.side { fill: #2f5fb8; }
.sh-scene-pcb3d .cap.top { fill: #c3ccd5; }
.sh-scene-pcb3d .res { fill: #d9c39a; }
.sh-scene-pcb3d .res-end { fill: #c9b283; }
.sh-scene-pcb3d .band-a { fill: #8a4b2a; }
.sh-scene-pcb3d .band-b { fill: #2c333a; }
.sh-scene-pcb3d .band-c { fill: #e0b84d; }
.sh-scene-pcb3d .led-body.side { fill: color-mix(in srgb, var(--led) 35%, #1d2126); }
.sh-scene-pcb3d .led-body.top, .sh-scene-pcb3d .dome { fill: color-mix(in srgb, var(--led) 45%, #2a2f35); }
.sh-scene-pcb3d .dome { animation: sh-pcb3d-dome 1.5s var(--delay) infinite; }
.sh-scene-pcb3d .halo { fill: var(--led); opacity: 0; filter: blur(2.5px); animation: sh-pcb3d-halo 1.5s var(--delay) infinite; }
@keyframes sh-pcb3d-pulse { to { stroke-dashoffset: -24; } }
@keyframes sh-pcb3d-core { 0%, 100% { opacity: .2; } 50% { opacity: .75; } }
@keyframes sh-pcb3d-dome { 0%, 45%, 100% { fill: color-mix(in srgb, var(--led) 45%, #2a2f35); } 5%, 35% { fill: color-mix(in srgb, var(--led) 60%, #fff); } }
@keyframes sh-pcb3d-halo { 0%, 45%, 100% { opacity: 0; } 5%, 35% { opacity: .85; } }

/* Light accents (yellow) take dark line art and a dark arrow. */
.sh-program-feature.is-light .sh-program-scene { stroke: color-mix(in srgb, var(--sh-program) 25%, #000); }
.sh a.sh-program-feature.is-light .sh-program-go .sh-arrow, .sh a.sh-program-feature.is-light:hover .sh-program-go .sh-arrow { color: var(--sh-ink); }

.sh-program-name strong { display: block; font: 600 15px/1.3 Montserrat, sans-serif; letter-spacing: -.01em; }
.sh-program-name small { display: block; margin-top: 4px; color: var(--sh-muted); font-size: 12px; line-height: 1.35; }
.sh-program .sh-arrow { color: var(--sh-muted); }
.sh a.sh-program:hover .sh-arrow { color: var(--sh-ink); }

/* Výzva */
.sh-cta { padding: 64px 0; background: var(--sh-yellow); }
.sh-cta::before { content: ''; position: absolute; top: 0; right: 0; left: 0; height: 10px; background: repeating-linear-gradient(-45deg, var(--sh-ink) 0 12px, transparent 12px 24px); opacity: .9; }
.sh-cta-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-areas: "copy dates" "actions dates"; gap: 32px 72px; align-items: start; }
.sh-cta-grid:not(:has(.sh-cta-dates)) { grid-template-areas: "copy actions"; align-items: end; }
.sh-cta-copy { grid-area: copy; }
.sh-cta .sh-actions { grid-area: actions; align-self: end; }
.sh-cta-dates { grid-area: dates; align-self: center; padding: 0; list-style: none; border-top: 2px solid var(--sh-ink); }
.sh-cta-dates li { display: grid; grid-template-columns: minmax(150px, auto) 1fr; gap: 4px 24px; align-items: baseline; margin: 0; padding: 18px 0; border-bottom: 1px solid rgba(32, 35, 34, .25); }
.sh-cta-dates li::before { display: none; }
.sh-cta-dates strong { font: 600 24px/1.2 Montserrat, sans-serif; letter-spacing: -.04em; }
.sh-cta-dates span { font-size: 15px; }
.sh-cta-dates .is-past { opacity: .45; }
.sh-cta-dates .is-past strong { text-decoration: line-through; text-decoration-thickness: 2px; }
.sh-cta .sh-eyebrow::before { background: var(--sh-ink); }
.sh-cta h2 { max-width: 640px; }
.sh-cta .sh-intro { max-width: 620px; color: var(--sh-ink); }
.sh-cta a.sh-button-line:hover { border-color: var(--sh-ink); background: var(--sh-ink); }

/* Karty s fotografiou */
.sh-cards { padding: 96px 0 48px; }
.sh-section-head { margin-bottom: 40px; }
.sh-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.sh-card { position: relative; display: flex; flex-direction: column; }
.sh-card-photo { overflow: hidden; margin-bottom: 22px; background: var(--sh-cream); }
.sh-card-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .4s ease; }
.sh-card:hover .sh-card-photo img { transform: scale(1.04); }
.sh-card h3 { font-size: 21px; font-weight: 600; line-height: 1.25; letter-spacing: -.03em; }
.sh-card h3 a::after { content: ''; position: absolute; inset: 0; }
.sh-card h3 a:focus-visible { outline: 0; }
.sh-card:focus-within { outline: 2px solid var(--sh-ink); outline-offset: 6px; }
.sh-card p { margin-top: 10px; color: var(--sh-muted); font-size: 15px; line-height: 1.7; }
.sh-more { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; margin-top: auto; padding: 18px 0 4px; background: linear-gradient(var(--sh-yellow), var(--sh-yellow)) no-repeat 0 100% / 100% 2px; font: 600 13px/1.4 Montserrat, sans-serif; }
.sh-card:hover .sh-more { background-size: 100% 6px; }

/* Prázdniny */
.sh-holidays { padding: 48px 0 96px; }
.sh-split-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 48px; margin-bottom: 40px; }
.sh-holidays h2 { font-size: 28px; }
.sh-timeline { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); padding: 0; list-style: none; }
.sh-timeline::before { content: ''; position: absolute; top: 6px; right: 0; left: 0; height: 2px; background: var(--sh-line); }
.sh-timeline li { position: relative; display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 32px 20px 0 0; }
.sh-timeline li::before { display: none; }
.sh-timeline-dot { position: absolute; top: 0; left: 0; width: 14px; height: 14px; border: 2px solid var(--sh-ink); border-radius: 50%; background: #fff; }
.sh-timeline strong { font: 600 20px/1.2 Montserrat, sans-serif; letter-spacing: -.03em; }
.sh-timeline li > span:last-child { color: var(--sh-muted); font-size: 14px; }
.sh-timeline .is-past { opacity: .4; }
.sh-timeline .is-past .sh-timeline-dot { border-color: var(--sh-muted); background: var(--sh-line); }
.sh-timeline .is-next .sh-timeline-dot { border-color: var(--sh-ink); background: var(--sh-yellow); box-shadow: 0 0 0 6px rgba(230, 190, 30, .3); }
.sh-timeline-badge { order: 3; align-self: flex-start; white-space: nowrap; margin-top: 8px; padding: 4px 9px; background: var(--sh-yellow); font: 600 11px/1.3 Montserrat, sans-serif; letter-spacing: .02em; }

/* Prečo my */
.sh-benefits { position: relative; isolation: isolate; overflow: hidden; padding: 104px 0 112px; background: radial-gradient(60% 50% at 92% 0, rgba(230, 190, 30, .16), transparent 70%), radial-gradient(50% 40% at 0 100%, rgba(230, 190, 30, .07), transparent 70%), var(--sh-ink); color: #fff; }
.sh-benefits::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 28px 28px; -webkit-mask-image: radial-gradient(80% 70% at 70% 20%, #000, transparent 75%); mask-image: radial-gradient(80% 70% at 70% 20%, #000, transparent 75%); }
.sh-benefits .sh-eyebrow { color: var(--sh-yellow); }
.sh-benefits h2 { color: #fff; font-size: clamp(34px, 4vw, 54px); }
.sh-benefits-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 48px; margin-bottom: 48px; }
.sh .sh-benefits-count { display: flex; align-items: center; gap: 16px; }
.sh-benefits-count b { color: transparent; font: 700 96px/.8 Montserrat, sans-serif; letter-spacing: -.06em; -webkit-text-stroke: 1.5px var(--sh-yellow); }
.sh-benefits-count span { max-width: 120px; color: #b4b8bd; font: 600 12px/1.45 Montserrat, sans-serif; letter-spacing: .12em; text-transform: uppercase; }

/* Bento: glass cards with a yellow line icon in a square tile; a wide stat card and a yellow pitch tile. */
.sh .sh-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: 14px; padding: 0; list-style: none; }
.sh-bento-card { position: relative; display: flex; flex-direction: column; overflow: hidden; margin: 0; padding: 24px 24px 26px; border: 1px solid rgba(255, 255, 255, .09); background: linear-gradient(160deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .015)); transition: border-color .3s ease, background .3s ease, translate .3s ease; }
.sh .sh-bento-card::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 2px; background: var(--sh-yellow); transition: width .45s ease; }
.sh-bento-card:hover { border-color: rgba(230, 190, 30, .4); background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .025)); translate: 0 -4px; }
.sh .sh-bento-card:hover::before { width: 100%; }
.sh-bento-icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 22px; border: 1px solid rgba(230, 190, 30, .3); background: rgba(230, 190, 30, .08); color: var(--sh-yellow); transition: background .3s ease, color .3s ease, transform .3s ease; }
.sh-bento-card:hover .sh-bento-icon { background: var(--sh-yellow); color: var(--sh-ink); transform: rotate(-6deg); }
.sh-bento-number { position: absolute; top: 24px; right: 24px; color: rgba(255, 255, 255, .28); font: 600 12px/1 Montserrat, sans-serif; letter-spacing: .1em; }
.sh-bento-card h3 { color: #fff; font-size: 17px; font-weight: 600; line-height: 1.35; letter-spacing: -.015em; }
.sh-bento-card p { margin-top: 10px; color: #a9adb3; font-size: 14px; line-height: 1.65; }

.sh-bento-card.is-stat { grid-column: span 2; background: radial-gradient(70% 120% at 100% 100%, rgba(230, 190, 30, .2), transparent 65%), linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015)); }
.sh-bento-card.is-stat::after { content: ''; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; border: 1px solid rgba(230, 190, 30, .25); border-radius: 50%; box-shadow: 0 0 0 28px rgba(230, 190, 30, .04), 0 0 0 56px rgba(230, 190, 30, .03); pointer-events: none; }
.sh-bento-card.is-stat h3 { max-width: 320px; font-size: 20px; }
.sh-bento-figure { display: block; margin: 0 0 8px; color: var(--sh-yellow); font: 700 clamp(64px, 7vw, 92px)/.9 Montserrat, sans-serif; letter-spacing: -.06em; }
.sh-bento-figure small { font-size: .5em; letter-spacing: -.02em; }
.sh-bento-card.is-stat p { max-width: 380px; }

.sh-bento-pitch { justify-content: space-between; gap: 18px; border-color: var(--sh-yellow); background: linear-gradient(150deg, #f2cf3c, var(--sh-yellow) 60%, #d4ab12); color: var(--sh-ink); }
.sh-bento-pitch:hover { border-color: var(--sh-yellow); background: linear-gradient(150deg, #f5d54a, var(--sh-yellow) 60%, #d4ab12); }
.sh .sh-bento-pitch::before { background: var(--sh-ink); }
.sh-bento-quote { color: var(--sh-ink); opacity: .9; }
.sh .sh-bento-pitch p { margin: 0; color: var(--sh-ink); font: 600 17px/1.4 Montserrat, sans-serif; letter-spacing: -.015em; }
.sh .sh-bento-pitch a.sh-bento-cta { display: inline-flex; align-self: flex-start; align-items: center; gap: 12px; padding: 11px 16px; background: var(--sh-ink); color: #fff; font: 600 13px/1 Montserrat, sans-serif; transition: gap .3s ease; }
.sh .sh-bento-pitch a.sh-bento-cta:hover { gap: 18px; color: #fff; }

@supports (animation-timeline: view()) {
    .sh-bento-card { animation: sh-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
}
@keyframes sh-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* Aktuality */
.sh-news { padding: 96px 0 104px; }
/* Mosaic: a large lead story beside two smaller ones, titles set over the photos. */
.sh-news-mosaic { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-auto-rows: 268px; gap: 16px; }
.sh-news-mosaic:not(:has(> :nth-child(2))) { grid-template-columns: 1fr; }
.sh-news-tile { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: var(--sh-ink); color: #fff; }
.sh-news-tile.is-empty { background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(255, 255, 255, .035) 14px 15px), radial-gradient(120% 120% at 100% 0, rgba(230, 190, 30, .22), transparent 55%), var(--sh-ink); }
.sh-news-lead { grid-row: span 2; }
.sh-news-tile img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.sh-news-tile::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(to top, rgba(18, 20, 19, .92), rgba(18, 20, 19, .45) 42%, rgba(18, 20, 19, 0) 72%); transition: opacity .4s ease; }
.sh-news-tile:hover img { transform: scale(1.05); }
.sh .sh-news-date { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 12px 12px 10px; background: var(--sh-yellow); color: var(--sh-ink); font: 600 10px/1.2 Montserrat, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.sh-news-date b { font-size: 26px; line-height: 1; letter-spacing: -.04em; }
.sh-news-body { padding: 26px 28px; }
.sh-news-tile h3 { font-size: 19px; font-weight: 600; line-height: 1.28; letter-spacing: -.02em; }
.sh-news-lead h3 { max-width: 560px; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.15; letter-spacing: -.035em; }
.sh-news-lead .sh-news-date { min-width: 76px; padding: 16px 14px 12px; }
.sh-news-lead .sh-news-date b { font-size: 34px; }
.sh-news-lead .sh-news-body { padding: 36px 40px; }
.sh .sh-news-tile h3 a { background: linear-gradient(var(--sh-yellow), var(--sh-yellow)) no-repeat 0 100% / 0 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .4s ease; }
.sh-news-tile h3 a::after { content: ''; position: absolute; inset: 0; }
.sh-news-tile:hover h3 a { background-size: 100% 2px; }
.sh-news-more { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; color: var(--sh-yellow); font: 600 13px/1 Montserrat, sans-serif; letter-spacing: .02em; }
.sh-news-tile:hover .sh-arrow { transform: translateX(4px); }

/* Older stories: a quiet row led by the day of the month. */
.sh .sh-news-row { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; margin-top: 48px; padding: 0; border-top: 2px solid var(--sh-ink); list-style: none; }
.sh-news-row li { position: relative; margin: 0; padding: 24px 28px 8px; border-left: 1px solid var(--sh-line); }
.sh-news-row li:first-child { padding-left: 0; border-left: 0; }
.sh-news-row li::before { content: ''; position: absolute; top: -2px; left: 0; width: 0; height: 2px; background: var(--sh-yellow); transition: width .35s ease; }
.sh-news-row li:hover::before { width: 100%; }
.sh-news-row time { display: flex; align-items: baseline; gap: 8px; color: var(--sh-muted); font: 600 11px/1 Montserrat, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.sh-news-row time b { color: var(--sh-ink); font-size: 30px; letter-spacing: -.04em; }
.sh .sh-news-row a { display: block; margin-top: 12px; font: 600 15px/1.4 Montserrat, sans-serif; letter-spacing: -.01em; transition: color .2s ease; }
.sh-news-row a::after { content: ''; position: absolute; inset: 0; }
.sh-news-row li:hover a { color: var(--sh-yellow-text); }

/* Aktuality strip (layout "strip"): sits right under the hero and reads as its footer, so the hero drops its own
   bottom rule and part of its padding. */
:root:has(.sh-news.is-strip) .sh-hero { border-bottom: 0; }
:root:has(.sh-news.is-strip) .sh-hero-grid { padding-bottom: 56px; }
.sh-news.is-strip { padding: 0; border-bottom: 1px solid var(--sh-line); }
.sh-news-strip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 40px; align-items: center; padding: 26px 0 28px; border-top: 1px solid var(--sh-line); }
.sh .sh-news-strip-label { display: flex; align-items: center; gap: 12px; margin: 0; font: 600 11px/1 Montserrat, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.sh .sh-news-strip-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.sh-news-strip-list li { margin: 0; padding: 0 24px; border-left: 1px solid var(--sh-line); }
.sh-news-strip-list li::before { display: none; }
.sh .sh-news-strip-list a { display: block; }
.sh-news-strip-list time { display: block; margin-bottom: 6px; color: var(--sh-muted); font: 500 11px/1 Montserrat, sans-serif; letter-spacing: .06em; }
.sh-news-strip-list span { display: -webkit-box; overflow: hidden; font: 600 14px/1.4 Montserrat, sans-serif; letter-spacing: -.01em; -webkit-box-orient: vertical; -webkit-line-clamp: 2; transition: color .2s ease; }
.sh-news-strip-list a:hover span { color: var(--sh-yellow-text); }

@keyframes sh-enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes sh-pulse { from { opacity: .9; transform: scale(.6); } to { opacity: 0; transform: scale(1.6); } }

@media (max-width: 1100px) {
    .sh-program-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
    .sh-hero-grid { gap: 48px; }
    .sh-programs-grid { grid-template-columns: 1fr; gap: 28px; }
    .sh .sh-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sh-cta-grid { grid-template-columns: 1fr; grid-template-areas: "copy" "dates" "actions"; }
    .sh-programs-head { position: static; }
    .sh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sh-stats > div:nth-child(3) { padding-left: 0; border-left: 0; }
    .sh-stats > div:nth-child(n+3) { border-top: 1px solid var(--sh-line); }
    .sh-heading-grid { grid-template-columns: 1fr; }
    .sh-chips { justify-content: flex-start; max-width: none; }
    .sh-news-mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 240px; }
    .sh-news-lead { grid-column: 1 / -1; }
    .sh .sh-news-row { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
    .sh-news-row li:nth-child(odd) { padding-left: 0; border-left: 0; }
    .sh-news-row li { padding-bottom: 24px; }
    .sh-news-row li:nth-child(n+3) { border-top: 1px solid var(--sh-line); }
    .sh-news-strip { grid-template-columns: 1fr auto; gap: 20px 24px; }
    .sh .sh-news-strip-list { grid-column: 1 / -1; grid-row: 2; }
    .sh-news-strip-list li:first-child { padding-left: 0; border-left: 0; }
}
@media (max-width: 700px) {
    .sh-shell { padding: 0 20px; }
    .sh-hero-grid { grid-template-columns: 1fr; gap: 40px; padding-top: 36px; padding-bottom: 64px; }
    .sh-hero h1 { font-size: 40px; }
    .sh .sh-lead { font-size: 17px; margin-bottom: 26px; }
    .sh-actions .sh-button { flex: 1 1 100%; justify-content: space-between; }
    .sh-hero-media::before { top: 28px; bottom: -28px; left: 28px; }
    .sh a.sh-hero-news { position: relative; bottom: auto; left: auto; width: auto; margin: -36px 16px 0 -8px; }
    .sh-stats > div { padding: 22px 16px; }
    .sh-stats > div:nth-child(odd) { padding-left: 0; border-left: 0; }
    .sh-stats dd { font-size: 24px; }
    .sh-heading { padding: 64px 0 12px; }
    .sh-programs-grid { padding-top: 36px; padding-bottom: 40px; }
    .sh-program-list { grid-template-columns: 1fr; gap: 8px; }
    .sh a.sh-program { min-height: 76px; }
    .sh-program-list.is-showcase { grid-template-columns: 1fr; }
    .sh a.sh-program.sh-program-feature { min-height: 176px; padding: 20px; }
    .sh-program-feature .sh-program-name strong { max-width: 64%; font-size: 19px; }
    .sh-program-scene { right: 4px; width: 150px; }
    .sh-cta { padding: 52px 0 44px; }
    .sh-cta-grid, .sh-cta-grid:not(:has(.sh-cta-dates)) { grid-template-columns: 1fr; grid-template-areas: "copy" "dates" "actions"; }
    .sh-cta-dates li { grid-template-columns: 1fr; }
    .sh-cta-dates strong { font-size: 21px; }
    .sh-cards { padding: 64px 0 32px; }
    .sh-card-grid { grid-template-columns: 1fr; gap: 36px; }
    .sh-holidays { padding: 40px 0 64px; }
    .sh-timeline { grid-template-columns: 1fr; gap: 22px; }
    .sh-timeline::before { top: 0; bottom: 0; left: 6px; width: 2px; height: auto; }
    .sh-timeline li { padding: 0 0 0 34px; }
    .sh-timeline-dot { top: 4px; }
    .sh-benefits { padding: 72px 0; }
    .sh .sh-bento { grid-template-columns: 1fr; gap: 10px; }
    .sh-bento-card.is-stat { grid-column: auto; }
    .sh-benefits-head { margin-bottom: 32px; }
    .sh-benefits-count b { font-size: 72px; }
    .sh-news { padding: 64px 0 72px; }
    .sh-news-mosaic { grid-template-columns: 1fr; grid-auto-rows: minmax(220px, auto); gap: 12px; }
    .sh-news-lead { grid-row: span 1; min-height: 360px; }
    .sh-news-body, .sh-news-lead .sh-news-body { padding: 22px; }
    .sh .sh-news-row { grid-template-columns: 1fr; margin-top: 36px; }
    .sh-news-row li, .sh-news-row li:nth-child(odd) { padding: 20px 0; border-left: 0; }
    .sh-news-row li + li { border-top: 1px solid var(--sh-line); }
    .sh .sh-news-strip-list { grid-template-columns: 1fr; }
    .sh-news-strip-list li, .sh-news-strip-list li:first-child { padding: 14px 0; border-left: 0; }
    .sh-news-strip-list li + li { border-top: 1px solid var(--sh-line); }
    .sh-news-strip-list li:last-child { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .sh *, .sh *::before, .sh *::after { animation: none !important; transition: none !important; }
}

/* Composer rows around home components add no gutters of their own. */
.sostar-home-page .sostar-home-row { margin: 0 !important; }
.sostar-home-page .sostar-home-row > .vc_column_container > .vc_column-inner { margin: 0; padding: 0; }
.sostar-home-page .sostar-home-row .wpb_wrapper > .sh + br { display: none; }