/* Original dusk inlet environment + a restrained, shared visor interface. */
:root {
  --bg: #07111f; --surface: rgba(15, 38, 57, .84); --surface-raised: #142b40;
  --text: #edf4f8; --muted: #b3c6d5; --blue: #65cfff; --green: #65cfff;
  --hud-line: rgba(124, 192, 230, .3); --dashboard-border: var(--hud-line);
  --hud-amber: #e6ad59; --hud-mono: ui-monospace, Consolas, monospace;
  --panel-line: #315369; --panel-surface: #0d2435; --panel-padding: 32px;
  --scene-duration: 550ms; --interaction-duration: 180ms;
}
.cinematic-environment { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; background: #07111f; }
.environment-scene { position: absolute; width: max(100vw, 177.6833vh); height: max(100vh, 56.2799vw); left: 50%; top: 50%; transform: translate(-50%, -50%) scale(1.06); }
.environment-landscape { position: absolute; inset: 0; filter: brightness(.56) saturate(.8); background: url('./assets/environment/dusk-monolith.jpg') center / 100% 100% no-repeat; }
.environment-water { position: absolute; left: 46%; top: 59%; width: 48%; height: 13%; background: repeating-linear-gradient(0deg, transparent 0 10px, rgba(156, 200, 215, .15) 11px, transparent 12px 17px); mask-image: radial-gradient(ellipse, black, transparent 70%); opacity: .16; transform-origin: center; animation: waterFlow 8s ease-in-out infinite alternate; }
.environment-clouds { position: absolute; left: -15%; right: -15%; top: 5%; height: 38%; background: url('./assets/environment/mist-texture.webp') repeat-x center / 1100px 100%; mask-image: radial-gradient(ellipse at 62% 55%, black, transparent 70%); animation: cloudDrift 34s ease-in-out infinite alternate; }
.environment-light { position: absolute; inset: 0; background: radial-gradient(ellipse at 64% 53%, rgba(220, 163, 99, .1), transparent 22%); animation: horizonLight 45s ease-in-out infinite alternate; }
.environment-reflections { position: absolute; left: 49%; top: 59%; width: 42%; height: 14%; background: repeating-linear-gradient(0deg, transparent 0 7px, rgba(230, 173, 89, .18) 8px, transparent 10px 17px); mask-image: radial-gradient(ellipse, black, transparent 68%); animation: waterShimmer 9s ease-in-out infinite alternate; }
.environment-mist-bank { position: absolute; left: -12%; right: -12%; top: 48%; height: 18%; background: url('./assets/environment/mist-texture.webp') repeat-x center / 950px 100%; mask-image: linear-gradient(transparent, black 45%, black 65%, transparent); animation: mistBankDrift 28s ease-in-out infinite alternate; }
.environment-fog { position: absolute; left: -15%; right: -15%; top: 48%; bottom: 17%; background: url('./assets/environment/mist-texture.webp') repeat-x center / 1300px 100%; mask-image: radial-gradient(ellipse at 65% 40%, black, transparent 68%); animation: environmentMist 23s ease-in-out infinite alternate; }
.environment-contrast { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 12, 23, .48), rgba(4, 12, 23, .08) 70%), linear-gradient(0deg, #07111f, transparent 40%), linear-gradient(180deg, rgba(3, 11, 20, .35), transparent 30%); }
.environment-reading-shade { position: absolute; inset: 0; background: rgba(3, 10, 22, .32); opacity: 0; transition: opacity 700ms ease; }
.environment-reading .environment-reading-shade { opacity: 1; }
.environment-paused :is(.environment-clouds, .environment-light, .environment-fog, .environment-reflections, .environment-mist-bank, .environment-water, .environment-foreground-mist, .environment-beacons) { animation-play-state: paused; }
.environment-foreground-mist { position: absolute; left: -18%; right: -18%; top: 66%; bottom: -5%; background: url('./assets/environment/mist-texture.webp') repeat-x center / 1450px 100%; mask-image: radial-gradient(ellipse at 35% 70%, black, transparent 70%); animation: foregroundMist 19s ease-in-out infinite alternate; }
.environment-beacons { position: absolute; left: 89.713%; top: 9.033%; width: 1.555%; height: 33.475%; filter: drop-shadow(0 0 4px #65cfff); animation: structurePulse 9s ease-in-out infinite alternate; }
.environment-dust { position: absolute; inset: 0; opacity: .65; transition: opacity 700ms ease; }
.environment-dust i { position: absolute; width: var(--mote-size); height: var(--mote-size); border-radius: 50%; background: radial-gradient(ellipse, rgba(203, 233, 242, .85), rgba(133, 191, 214, .25) 40%, transparent 72%); filter: blur(.35px); animation: atmosphericMote var(--mote-duration) var(--mote-delay) ease-in-out infinite; }
.environment-dust i:nth-child(3n) { filter: blur(.8px); }
.environment-dust i:nth-child(5) { background: radial-gradient(ellipse, rgba(230, 191, 139, .7), transparent 72%); }
.environment-reading .environment-dust { opacity: .25; }
.environment-paused .environment-dust i { animation-play-state: paused; }
@keyframes atmosphericMote { 0%, 100% { transform: translate3d(0, 12px, 0); opacity: 0; } 20% { opacity: .45; } 55% { transform: translate3d(var(--mote-drift), -24px, 0); opacity: .6; } 85% { transform: translate3d(calc(var(--mote-drift) * 1.5), -48px, 0); opacity: 0; } }
@keyframes foregroundMist { from { transform: translate3d(4%, 2%, 0); opacity: .08; } to { transform: translate3d(-4%, -1%, 0); opacity: .18; } }
@keyframes structurePulse { from { opacity: .1; } to { opacity: .4; } }
@keyframes waterShimmer { from { transform: translate3d(-.6%, 0, 0) scaleX(.98); opacity: .25; } to { transform: translate3d(.6%, 3%, 0) scaleX(1.03); opacity: .6; } }
@keyframes waterFlow { from { transform: translate3d(-.8px, -.5px, 0) scaleX(1.002); } to { transform: translate3d(.8px, .8px, 0) scaleX(1.004); } }
@keyframes mistBankDrift { from { transform: translate3d(5%, 0, 0); opacity: .18; } to { transform: translate3d(-5%, -2%, 0); opacity: .38; } }
.home-initialize .environment-scene { animation: landscapeReveal 1100ms 1100ms ease-out backwards; }
.home-initialize .personal-introduction { animation: homeContentReveal 800ms 1250ms cubic-bezier(.22, 1, .36, 1) backwards; }
.home-initialize .personal-portrait { animation: homeContentReveal 1000ms 1100ms cubic-bezier(.22, 1, .36, 1) backwards; }
.home-initialize .personal-actions { animation: homeContentReveal 700ms 1450ms cubic-bezier(.22, 1, .36, 1) backwards; }
@keyframes landscapeReveal { from { opacity: .08; } to { opacity: 1; } }
@keyframes homeContentReveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes environmentMist { from { transform: translate3d(-6%, 0, 0); opacity: .15; } to { transform: translate3d(6%, -3%, 0); opacity: .35; } }
@keyframes cloudDrift { from { transform: translate3d(-7%, 0, 0); opacity: .05; } to { transform: translate3d(7%, 2%, 0); opacity: .13; } }
@keyframes horizonLight { from { opacity: .3; } to { opacity: .6; } }

/* Navigation uses a quiet shield-like activation line, never a fictional status. */
.nav { min-height: 78px; gap: 18px; background: linear-gradient(180deg, rgba(8, 24, 39, .6), rgba(8, 24, 39, .14)); border-bottom: 1px solid var(--hud-line); }
.page-shell:not(.page-home) .nav { background: rgba(7, 20, 33, .94); }
.brand-logo { border-radius: 0; width: 46px; height: 46px; clip-path: polygon(0 0, 78% 0, 100% 22%, 100% 100%, 22% 100%, 0 78%); }
.brand-name small { font-family: var(--hud-mono); letter-spacing: .04em; font-size: .63rem; }
.nav-links { gap: 3px; font-size: .9rem; }
.nav-links a { padding-inline: 12px; color: #c0d0de; }
.nav-links a::after { background: linear-gradient(90deg, #65cfff, #b8edff, #65cfff); transform-origin: left; height: 2px; }
.nav-links a.active { color: #a9e5ff; }
.nav-links a.active::after { animation: shieldLine 300ms ease-out both; box-shadow: 0 0 8px rgba(101, 207, 255, .4); }
@keyframes shieldLine { from { transform: scaleX(0); opacity: .4; } to { transform: scaleX(1); opacity: 1; } }
.language-switch { margin-left: auto; border-radius: 0; border-color: var(--hud-line); background: rgba(8, 24, 37, .5); }
.nav > .language-switch, .halo-language { view-transition-name: portfolio-language-switch; }
.language-option.active { background: rgba(42, 127, 168, .35); color: #dcf5ff; }
.hud-status-dot { display: inline-block; width: 5px; height: 5px; flex: 0 0 5px; background: var(--hud-amber); box-shadow: 0 0 9px rgba(230, 173, 89, .3); }
.page-eyebrow { font-family: var(--hud-mono); font-weight: 450; letter-spacing: .12em; color: #8ddaff; }
.tile-scan { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 2; background: linear-gradient(90deg, transparent 42%, rgba(136, 224, 255, .18) 50%, transparent 58%); transform: translateX(-100%); }
.selected .tile-scan { animation: tileActivation 330ms ease-out both; }
@keyframes tileActivation { 0% { opacity: 0; transform: translateX(-90%); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(90%); } }
/* One chamfered frame: the inner surface follows the same geometry at 1px inset.
   No rectangular border or independent corner decorations are painted over it. */
.hud-panel {
  --panel-cut: 12px;
  --panel-shape: polygon(0 0, calc(100% - var(--panel-cut)) 0, 100% var(--panel-cut), 100% 100%, 0 100%);
  --panel-inner-shape: polygon(0 0, calc(100% - var(--panel-cut) + .6px) 0, 100% calc(var(--panel-cut) - .6px), 100% 100%, 0 100%);
  position: relative; isolation: isolate; min-width: 0;
  border: 0; border-radius: 0; padding: var(--panel-padding);
  background: var(--panel-line); box-shadow: none; backdrop-filter: none;
  clip-path: var(--panel-shape);
}
.hud-panel::before {
  content: ''; position: absolute; inset: 1px; z-index: -1; pointer-events: none;
  background: var(--panel-surface);
  clip-path: var(--panel-inner-shape);
}
.hud-panel-secondary { --panel-surface: #0b2030; --panel-line: #28465b; }
.hud-panel p { overflow-wrap: anywhere; }
.hud-panel:is(a, [tabindex]):focus-visible { outline: 2px solid #b8ebff; outline-offset: -5px; --panel-line: #b8ebff; }
.hud-panel:is(a):hover, .project-card:hover, .project-card:focus-within, .project-card:target { --panel-line: #65cfff; }
.project-card:not(.project-featured), .hobby-slider { padding: 1px; }
.featured-project { --panel-surface: rgba(10, 29, 44, .97); }
.profile-hero-art { padding: 0; --panel-surface: #102c40; }
.profile-hero-art img { height: 100%; mask-image: linear-gradient(black 0%, black 75%, transparent 100%); }
.personal-portrait img, .halo-menu-portrait img, .profile-hero-art img { view-transition-name: ali-portrait; }
.route-content.skip-entrance { animation: none; }
::view-transition-group(ali-portrait) { animation-duration: 650ms; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
::view-transition-group(portfolio-language-switch) { animation-duration: 650ms; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
::view-transition-old(portfolio-language-switch), ::view-transition-new(portfolio-language-switch) { mix-blend-mode: normal; }
::view-transition-old(ali-portrait), ::view-transition-new(ali-portrait) { height: 100%; object-fit: contain; mix-blend-mode: normal; }
::view-transition { pointer-events: none; }
::view-transition-group(root) { animation-duration: 400ms; }
.cinematic-environment { view-transition-name: portfolio-environment; }
::view-transition-group(portfolio-environment) { animation-duration: 650ms; }
::view-transition-old(portfolio-environment), ::view-transition-new(portfolio-environment) { mix-blend-mode: normal; }
.profile-hero-art::after { background: linear-gradient(0deg, #0a2033, transparent 45%); }
.profile-hero-art figcaption { font-weight: 500; }
.profile-fact span, .card-index, .login-kicker, .contact-card small, .social-link small { font-family: var(--hud-mono); color: #9ed8f0; text-transform: uppercase; font-size: .72rem; letter-spacing: .07em; }
.profile-facts { padding: 32px; }
.profile-fact strong { font-weight: 500; }
.story-feature { padding: 32px; }
.story-feature h2 { font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.25; margin-bottom: 18px; }
.story-feature > div { max-width: 68ch; }
.profile-panel .tag-list span { border-radius: 0; background: rgba(51, 115, 150, .17); }
.project-tags span { border-color: var(--hud-line); background: #102e43; font-family: var(--hud-mono); font-size: .72rem; }
.project-preview, .project-video { border-radius: 0; }
.project-filter { border-radius: 0; font-size: .86rem; }
.project-image-title h3 { font-weight: 550; }
.gate-intro h1 { font-weight: 550; }
.login-form input { border-radius: 0; border-color: rgba(130, 196, 228, .5); background: rgba(7, 25, 42, .95); }
.download-section-head { padding-bottom: 20px; border-bottom: 1px solid var(--hud-line); }
.grade-card strong, .grade-summary strong { color: #a1e3ff; font-weight: 500; }
.contact-card:first-child { --panel-surface: #102e42; }
.contact-icon, .social-icon { border-radius: 0; background: rgba(82, 171, 211, .1); border: 1px solid var(--hud-line); }
.button, .project-link, .download-link, .download-all-button, .login-form button { border-radius: 0; transition: border-color var(--interaction-duration) ease, box-shadow var(--interaction-duration) ease, background var(--interaction-duration) ease; }
.button.primary, .login-form button { background: #a2def5; color: #082335; border-color: #a2def5; }
.button.secondary, .project-link, .download-link { background: rgba(14, 44, 65, .66); border-color: rgba(140, 202, 233, .4); }
.button:hover, .project-link:hover, .download-link:hover { transform: none; box-shadow: inset 0 0 20px rgba(101, 207, 255, .09); border-color: #88dcff; }
:is(a, button, input):focus-visible { outline: 2px solid #b8ebff; outline-offset: 4px; }
.section { border-top-color: rgba(127, 190, 227, .24); }
.hero h1, .page-intro h1, .section h2, .profile-panel h2 { font-weight: 550; }
.page-profil .hero { grid-template-columns: minmax(0, 1.45fr) minmax(260px, .65fr); gap: 48px; padding-block: 56px 40px; }

/* Original curved initialization: wireframe, scan, and brief energy fill. */
.visor-intro { animation: visorInitialize 1350ms ease both; color: #84dcff; }
.visor-scan { animation: visorGridInitialize 1350ms ease both; }
.visor-scanning-light { animation: visorLight 1000ms 280ms ease-out both; opacity: .65; }
.visor-activation-bar { position: absolute; top: 10%; left: 38%; width: 24%; height: 4px; border: 1px solid rgba(148, 225, 255, .5); background: linear-gradient(90deg, rgba(120, 214, 255, .5), rgba(120, 214, 255, .12)); transform-origin: left; animation: shieldLine 450ms 220ms ease-out both; }
@keyframes visorInitialize { 0%, 8% { opacity: 0; } 18%, 62% { opacity: .9; } 100% { opacity: 0; } }
@keyframes visorGridInitialize { 0% { transform: translateY(-28%); opacity: 0; } 18% { opacity: .75; } 64% { opacity: .55; } 100% { transform: translateY(28%); opacity: 0; } }
@media (max-width: 1200px) {
  .nav-links { font-size: .8rem; gap: 0; }
  .nav-links a { padding-inline: 8px; }
}
@media (max-width: 1100px) {
  .language-switch { margin-left: auto; }
  .page-profil .hero { gap: 32px; grid-template-columns: 1fr 300px; }
}
@media (max-width: 740px) {
  .nav { gap: 10px; }
  .brand-name { display: none; }
  .brand-logo { width: 40px; height: 40px; }
  .environment-clouds, .environment-mist-bank, .environment-reflections { display: none; }
  .environment-dust i:nth-child(n+4) { display: none; }
  .environment-scene { left: 60%; transform: translate(-60%, -50%) scale(1.06); }
  .environment-contrast { background: linear-gradient(90deg, rgba(4, 12, 23, .68), rgba(4, 12, 23, .38)), linear-gradient(0deg, #07111f, transparent 80%); }
  .page-profil .hero { grid-template-columns: 1fr; }
  .profile-hero-art { height: 360px; }
  .hud-panel { --panel-padding: 24px; }
  .profile-facts, .story-feature, .profile-panel, .info-card, .login-panel { padding: 24px; }

}
@media (prefers-reduced-motion: reduce), (update: slow) {
  .environment-fog, .visor-intro, .selected .tile-scan, .nav-links a.active::after { animation: none; }
  .environment-fog, .environment-clouds, .environment-light, .environment-reflections, .environment-mist-bank, .environment-water, .environment-foreground-mist, .environment-beacons, .environment-dust { display: none; }
  .home-initialize .environment-scene, .home-initialize .personal-introduction, .home-initialize .personal-portrait, .home-initialize .personal-actions { animation: none; }
  ::view-transition-group(*) { animation-duration: 0s; }
  .atmosphere-layer, .showcase-layer { transition: none; }
}

/* Local Halo 3-inspired home prototype: cinematic menu, original portfolio identity. */
.page-home { min-height: 100svh; padding: 0; overflow-x: clip; overflow-y: auto; }
.page-home .nav, .page-home footer { display: none; }
.page-home .route-content { min-height: 100svh; }
.page-home .cinematic-environment { z-index: -1; background: #020817; }
.halo-menu-home { width: 100%; max-width: none; min-height: 100svh; }
.halo-menu-stage { position: relative; display: grid; grid-template-columns: minmax(0, 540px) minmax(0, 1fr); align-items: center; min-height: 100svh; padding: clamp(42px, 6vh, 72px) clamp(28px, 7vw, 132px) clamp(80px, 11vh, 120px); isolation: isolate; }
.halo-left-stack { align-self: center; transform: translateY(-4vh); }
.halo-menu-copy { position: relative; margin: 0 0 28px 12px; text-align: left; text-shadow: 0 0 34px rgba(76, 170, 225, .35); }
.halo-menu-kicker { margin: 0 0 10px; color: rgba(194, 225, 239, .72); font-family: var(--hud-mono); font-size: clamp(.64rem, .8vw, .78rem); letter-spacing: .2em; text-transform: uppercase; }
.halo-menu-copy h1 { margin: 0; color: #d8f1ff; font-family: "Segoe UI Variable Display", "Arial Narrow", sans-serif; font-size: clamp(2.6rem, 4.2vw, 4.8rem); font-weight: 260; line-height: .88; letter-spacing: .04em; }
.halo-menu-copy h1 span { color: #77caef; font-weight: 520; }
.halo-menu-role { margin: 18px 4px 0 0; color: #769bb0; font-family: var(--hud-mono); font-size: clamp(.65rem, .9vw, .82rem); letter-spacing: .12em; }
.halo-main-menu { --menu-row-height: 48px; position: relative; isolation: isolate; width: min(540px, 42vw); padding: 10px 0; background: linear-gradient(90deg, rgba(1, 7, 18, .9), rgba(3, 12, 26, .6) 72%, transparent); border-block: 1px solid rgba(110, 182, 221, .14); }
.halo-main-menu::before { content: ''; position: absolute; z-index: -1; top: 10px; left: 0; right: 0; height: var(--menu-row-height); border-left: 2px solid #e6ad59; border-block: 1px solid rgba(230, 173, 89, .25); background: linear-gradient(90deg, rgba(160, 94, 43, .45), rgba(147, 87, 41, .12) 75%, transparent); box-shadow: -2px 0 12px rgba(230, 173, 89, .16); transform: translate3d(0, calc(var(--selected-row, 0) * var(--menu-row-height)), 0); transition: transform 360ms cubic-bezier(.22, 1, .36, 1); pointer-events: none; }
.halo-main-menu a:focus-visible { outline: 1px solid #e6ad59; outline-offset: -3px; }
.halo-main-menu a { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; height: var(--menu-row-height); min-height: var(--menu-row-height); padding: 7px 22px 7px 28px; font-weight: 350; font-stretch: condensed; color: rgba(211, 229, 238, .7); font-family: "Arial Narrow", "Segoe UI", sans-serif; letter-spacing: .085em; text-transform: uppercase; transition: color 120ms ease, background 120ms ease, transform 120ms ease; }
.halo-main-menu a.selected { color: #fff0d8; }
.halo-menu-label { font-size: clamp(.92rem, 1.4vw, 1.25rem); }
.halo-main-menu svg { opacity: 0; transform: translateX(-8px); transition: opacity 120ms ease, transform 120ms ease; }
.halo-main-menu a.selected svg { opacity: 1; transform: translateX(0); }
.halo-menu-portrait { align-self: end; justify-self: end; position: relative; width: min(42vw, 620px); height: min(86vh, 860px); margin: 0 -1vw -11vh 0; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
.halo-menu-portrait::before { content: ''; position: absolute; inset: 12% 2% 2%; background: radial-gradient(ellipse at 50% 48%, rgba(94, 191, 232, .14), transparent 64%); filter: blur(12px); }
.halo-menu-portrait img { position: relative; display: block; width: auto; max-width: 100%; height: 100%; object-fit: contain; object-position: bottom center; filter: saturate(.78) contrast(1.05) drop-shadow(2px 0 3px rgba(101, 207, 255, .22)) drop-shadow(0 0 22px rgba(72, 165, 209, .12)); mask-image: linear-gradient(black 0%, black 58%, rgba(0,0,0,.75) 76%, transparent 98%); }
.halo-language.language-switch { position: absolute; top: 28px; right: clamp(28px, 4vw, 70px); margin-left: 0; display: flex; background: rgba(8, 24, 37, .62); backdrop-filter: none; }
.home-initialize .halo-left-stack { animation: haloMenuReveal 1150ms 900ms cubic-bezier(.16, 1, .3, 1) backwards; }
.home-initialize .halo-main-menu a { animation: haloItemReveal 620ms cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: calc(1250ms + (var(--menu-index, 0) * 70ms)); }
.home-initialize .halo-menu-portrait { animation: haloPortraitReveal 1300ms 780ms cubic-bezier(.16, 1, .3, 1) backwards; }
.home-initialize .halo-language { animation: haloLanguageReveal 1300ms 780ms cubic-bezier(.16, 1, .3, 1) backwards; }
@keyframes haloMenuReveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes haloItemReveal { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: translateX(0); } }
@keyframes haloPortraitReveal { from { opacity: 0; transform: translate3d(48px, 18px, 0) scale(.965); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } }
@keyframes haloLanguageReveal { from { opacity: 0; transform: translate3d(24px, -14px, 0) scale(.965); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } }
@keyframes haloSoftFade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 760px) {
  .halo-menu-stage { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 16px; padding: 88px clamp(20px, 5vw, 36px) 28px; }
  .halo-left-stack { display: contents; transform: none; }
  .halo-menu-copy { grid-row: 1; position: static; text-align: left; margin: 0; }
  .halo-menu-copy h1 { font-size: clamp(2.1rem, 10vw, 3.3rem); line-height: .98; }
  .halo-menu-kicker { font-size: .6rem; letter-spacing: .12em; line-height: 1.6; }
  .halo-menu-role { margin-top: 12px; font-size: .65rem; }
  .halo-main-menu { grid-row: 3; width: 100%; --menu-row-height: 48px; }
  .halo-main-menu a { padding-inline: 20px; }
  .halo-menu-label { font-size: .92rem; letter-spacing: .06em; }
  .halo-menu-portrait { grid-row: 2; position: relative; z-index: auto; align-self: center; justify-self: center; width: min(100%, 250px); height: clamp(150px, 24svh, 220px); margin: 0; opacity: 1; }
  .halo-language.language-switch { top: max(18px, env(safe-area-inset-top)); right: max(20px, env(safe-area-inset-right)); min-height: 44px; }
  .halo-language .language-option { min-height: 34px; min-width: 40px; }
  .home-initialize .halo-menu-copy { animation: haloMenuReveal 1150ms 900ms cubic-bezier(.16, 1, .3, 1) backwards; }
}
@media (max-height: 700px) and (min-width: 761px) {
  .halo-menu-stage { padding-block: 40px 32px; gap: 24px; }
  .halo-left-stack { transform: none; }
  .halo-menu-copy { margin-bottom: 20px; }
  .halo-menu-copy h1 { font-size: clamp(2.1rem, 4vw, 3.2rem); }
  .halo-main-menu { width: 100%; --menu-row-height: 44px; }
  .halo-menu-portrait { height: min(76svh, 560px); width: 100%; margin: 0 0 -32px; }
  .halo-language.language-switch { top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .halo-main-menu::before, .environment-reading-shade { transition: none; }
  .home-initialize .halo-left-stack, .home-initialize .halo-menu-copy, .home-initialize .halo-main-menu a, .home-initialize .halo-menu-portrait, .home-initialize .halo-language { animation: none; }
}
/* Project library: console tiles and a focused, accessible detail sheet. */
body[data-page="projekte"] .hero { min-height: 0; padding-top: 46px; padding-bottom: 24px; }
body[data-page="projekte"] .hero h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); margin-bottom: 12px; }
body[data-page="projekte"] .hero .lead { max-width: 760px; }
body[data-page="projekte"] .section:has(> .project-dashboard) { padding-top: 20px; border-top: 0; }
body[data-page="projekte"] .section:has(> .project-dashboard) > h2 { display: none; }
.project-dashboard { --library-line: rgba(143, 202, 231, .24); --library-accent: #a9dff7; }
.library-feature { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr 1fr; min-height: 310px; overflow: hidden; border: 1px solid var(--library-line); background: #101d2a; }
.library-feature-wash { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .15; animation: library-reveal .35s ease-out; }
.library-feature::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #0c1725 10%, rgba(12,23,37,.75) 48%, rgba(12,23,37,.15)); z-index: -1; }
.library-feature-copy { padding: clamp(24px, 3vw, 42px); align-self: center; animation: library-reveal .3s ease-out; }
.library-eyebrow { margin: 0 0 13px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #a4c1d0; font-family: monospace; }
.library-feature h3 { font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1.12; margin: 0 0 16px; color: #f2f7fb; font-weight: 600; }
.library-description { font-size: 16px; line-height: 1.65; color: #bacad5; margin: 0 0 24px; min-height: 80px; }
.library-feature .button { display: inline-flex; align-items: center; gap: 20px; cursor: pointer; }
.library-art { display: flex; justify-content: center; align-items: center; background: linear-gradient(145deg, #223749, #0c1622); min-width: 0; overflow: hidden; }
.library-art img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 16px; }
.library-feature-art { margin: 24px; background: rgba(5,12,21,.52); height: 280px; align-self: center; animation: library-reveal .4s ease-out; }
.library-feature-art img { padding: 18px; }
.library-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 36px 0 22px; }
.library-toolbar .library-eyebrow { margin-bottom: 5px; }
.library-count { font-size: 14px; color: #98acba; margin: 0; }
.library-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.library-filters button { border: 1px solid transparent; background: rgba(13,25,38,.85); color: #bbcad3; padding: 10px 15px; font: inherit; font-size: 13px; cursor: pointer; border-radius: 4px; min-height: 44px; transition: background .18s, border-color .18s; }
.library-filters button[aria-pressed="true"] { background: #244252; color: #e9f6fc; border-color: #82bcd5; }
.library-filters button:hover { border-color: #82bcd5; }
.library-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; }
.library-tile { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 0; text-align: left; color: #f3f7fc; background: #101b29; border: 1px solid var(--library-line); border-radius: 5px; font: inherit; cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.library-tile .library-art { aspect-ratio: 1; border-radius: 4px 4px 0 0; }
.library-tile .library-art img { padding: 12px; }
.library-tile-copy { padding: 16px 15px 17px; display: grid; gap: 7px; min-height: 89px; }
.library-tile-copy strong { font-weight: 550; font-size: 15px; line-height: 1.35; padding-right: 15px; }
.library-tile-copy small { color: #9bb1c1; font-size: 11px; }
.library-tile-arrow { position: absolute; right: 12px; bottom: 20px; opacity: 0; transition: opacity .2s; }
.library-tile.is-selected { border-color: var(--library-accent); box-shadow: 0 0 0 2px var(--library-accent), 0 0 22px rgba(114,195,228,.15); transform: translateY(-4px); }
.library-tile.is-selected .library-tile-arrow { opacity: 1; }
.library-tile:focus-visible, .library-filters button:focus-visible { outline: 3px solid #edbc74; outline-offset: 5px; }
.project-dialog { padding: 0; border: 1px solid #6c8eaa; border-radius: 10px; background: #111f2d; color: #eef4f9; width: min(1100px, calc(100vw - 48px)); max-width: none; max-height: calc(100dvh - 64px); margin: auto; overflow: auto; box-shadow: 0 30px 100px rgba(0,0,0,.65); }
.project-dialog[open] { animation: library-dialog-in .28s cubic-bezier(.2,.8,.2,1); }
.project-dialog::backdrop { background: rgba(3,8,16,.8); animation: library-reveal .22s ease-out; }
.project-dialog-sheet { display: grid; grid-template-columns: 1fr 1fr; position: relative; min-height: 500px; }
.project-dialog-close { position: absolute; z-index: 2; top: 16px; right: 16px; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #627a8e; border-radius: 50%; background: #101e2d; color: white; cursor: pointer; }
.project-dialog-close:hover { background: #294358; }
.project-dialog-close:focus-visible { outline: 3px solid #edbc74; outline-offset: 3px; }
.project-dialog-media { display: grid; align-items: center; padding: 36px; background: linear-gradient(145deg, #263e51, #0b1520); }
.project-dialog-media .library-art { background: transparent; height: min(520px, 65dvh); }
.project-dialog-media .library-art img { padding: 0; }
.project-dialog-media figure { margin: 0; }
.project-dialog-media video { display: block; width: 100%; max-height: 440px; object-fit: contain; background: #080f17; }
.project-dialog-media figcaption { margin-top: 16px; color: #aebdcc; font-size: 13px; line-height: 1.65; }
.project-dialog-info { padding: 75px 38px 38px; align-self: center; min-width: 0; }
.project-dialog-info h2 { margin: 0 0 23px; font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.18; font-weight: 600; }
.project-dialog-description { color: #c1ced9; line-height: 1.8; font-size: 16px; margin: 0 0 30px; }
.project-dialog-info h3 { margin: 0 0 14px; font-size: 13px; font-weight: 500; color: #a8bdcc; }
.project-dialog-info .tag-list { margin: 0 0 30px; display: flex; flex-wrap: wrap; gap: 8px; }
.project-dialog-info .tag-list span { border: 1px solid #456073; background: #1c3141; color: #cbdeeb; padding: 7px 10px; font-size: 12px; }
.project-dialog-links { display: flex; flex-wrap: wrap; gap: 10px; }
.project-dialog-links .button { display: inline-flex; justify-content: center; gap: 12px; align-items: center; min-height: 44px; padding: 12px 17px; font-size: 14px; }
@keyframes library-reveal { from { opacity: 0; } }
@keyframes library-dialog-in { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 1100px) { .library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .library-toolbar { align-items: flex-start; flex-direction: column; gap: 16px; } }
@media (max-width: 650px) {
 body[data-page="projekte"] .hero { padding-top: 28px; }
 .library-feature { grid-template-columns: 1fr; }
 .library-feature-copy { padding: 24px; order: 2; }
 .library-feature-art { height: 190px; margin: 16px 16px 0; }
 .library-description { min-height: 0; font-size: 14px; }
 .library-feature h3 { font-size: 26px; }
 .library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
 .library-tile-copy { padding: 13px 11px; min-height: 96px; }
 .library-tile-copy strong { font-size: 13px; }
 .library-tile-copy small { font-size: 10px; }
 .library-tile-arrow { right: 8px; width: 13px; }
 .library-filters { gap: 5px; }
 .library-filters button { padding: 9px 11px; font-size: 12px; }
 .project-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 32px); border-radius: 8px; }
 .project-dialog-sheet { grid-template-columns: 1fr; }
 .project-dialog-media { padding: 52px 22px 22px; }
 .project-dialog-media .library-art { height: 230px; }
 .project-dialog-media video { max-height: 250px; }
 .project-dialog-info { padding: 24px; }
 .project-dialog-description { font-size: 14px; }
 .project-dialog-links { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
 .library-feature-wash, .library-feature-copy, .library-feature-art, .project-dialog[open], .project-dialog::backdrop { animation: none; }
 .library-tile, .library-tile-arrow, .library-filters button { transition: none; }
}
/* Console composition: scenery first, a bottom-aligned tile rail, then collections. */
body[data-page="projekte"] .hero, body[data-page="projekte"] .footer { display: none; }
body[data-page="projekte"] .section:has(> .project-dashboard) { margin: 0; padding: 0 0 36px; }
.project-dashboard { position: relative; --library-accent: #8de38e; }
.console-scene { position: relative; height: clamp(160px, 28vh, 330px); isolation: isolate; display: flex; align-items: flex-end; margin-bottom: 20px; }
.console-scene-art { position: absolute; z-index: -1; right: -3%; top: -50px; width: 65%; height: calc(100% + 380px); pointer-events: none; overflow: hidden; opacity: .3; mask-image: linear-gradient(90deg, transparent, #000 38%, #000 75%, transparent); animation: library-reveal .45s ease-out; }
.console-scene-art img { width: 100%; height: 100%; object-fit: cover; }
.console-scene-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #07111e 0%, transparent 70%); }
.console-feature-name { max-width: 650px; animation: library-reveal .25s ease-out; padding-bottom: 12px; }
.console-feature-name h1 { font-size: clamp(26px, 3.2vw, 48px); font-weight: 500; line-height: 1.15; margin: 0 0 13px; color: #f5f7fa; text-shadow: 0 2px 20px #030914; }
.console-feature-name > p:last-child { font-size: 14px; color: #bac7d0; margin: 0; }
.library-toolbar { margin: 0 0 12px; gap: 15px; }
.library-toolbar > div:first-child { display: flex; gap: 15px; align-items: center; }
.library-toolbar .library-eyebrow { margin: 0; letter-spacing: .06em; font: 14px inherit; }
.library-count { font-size: 12px; }
.library-filters { gap: 3px; }
.library-filters button { min-height: 36px; padding: 6px 11px; background: rgba(8,18,28,.45); font-size: 12px; border-radius: 20px; }
.library-filters button[aria-pressed="true"] { background: rgba(53,81,62,.9); border-color: #79b980; }
.library-grid { display: flex; align-items: flex-end; gap: 16px; overflow-x: auto; overflow-y: hidden; padding: 12px 6px 12px; margin: 0 -6px; min-height: 260px; scrollbar-width: thin; scrollbar-color: #577564 transparent; scroll-padding-inline: 8px; }
.library-tile { flex: 0 0 clamp(90px, 8vw, 150px); width: clamp(90px, 8vw, 150px); height: clamp(120px, 10vw, 170px); border: 0; border-radius: 5px; background: #102033; display: block; transition: width .22s ease, flex-basis .22s ease, height .22s ease, box-shadow .22s ease; overflow: hidden; }
.library-tile .library-art { height: 100%; width: 100%; aspect-ratio: auto; background: linear-gradient(135deg,#33536b,#091420); border-radius: 5px; }
.library-tile .library-art img { padding: 0; object-fit: cover; }
.library-tile[data-project-index="0"] img, .library-tile[data-project-index="2"] img, .library-tile[data-project-index="4"] img { object-fit: contain; padding: 6px; }
.library-tile-copy { position: absolute; bottom: 0; left: 0; right: 0; padding: 30px 10px 10px; min-height: 0; display: block; background: linear-gradient(transparent,rgba(3,9,17,.92)); }
.library-tile-copy strong { padding: 0; font-size: 12px; font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.library-tile-copy small, .library-tile-arrow { display: none; }
.library-tile.is-selected { flex-basis: clamp(180px, 15vw, 250px); width: clamp(180px, 15vw, 250px); height: clamp(210px, 18vw, 290px); box-shadow: 0 0 0 3px #8de38e, 0 0 0 6px rgba(95,172,100,.24), 0 0 30px rgba(73,161,84,.2); transform: none; }
.library-tile.is-selected .library-tile-copy { padding: 35px 15px 15px; }
.library-tile.is-selected .library-tile-copy strong { font-size: 18px; }
.console-collections { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; margin-top: 16px; }
.console-collection { position: relative; aspect-ratio: 1.9; border: 0; padding: 0; border-radius: 6px; overflow: hidden; background: #112536; color: white; font: inherit; cursor: pointer; text-align: left; }
.console-collection-art { display: flex; position: absolute; inset: 0; opacity: .55; }
.console-collection-art img { width: 100%; min-width: 0; flex: 1 1 0; object-fit: cover; }
.console-collection::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent,rgba(3,10,17,.9)); }
.console-collection > span:last-child { position: absolute; z-index: 1; bottom: 17px; left: 20px; right: 20px; display: flex; align-items: center; justify-content: space-between; font-size: 20px; }
.console-collection:hover, .console-collection[aria-pressed="true"] { outline: 2px solid #8de38e; outline-offset: 2px; }
.console-collection:focus-visible { outline: 3px solid #edbc74; outline-offset: 3px; }
.project-dialog { border-radius: 6px; border-color: #66916b; }
.project-dialog-links .primary { background: #a4dfa5; }
@media (max-width: 1100px) {
 .library-toolbar { flex-direction: row; align-items: center; flex-wrap: wrap; }
 .library-grid { min-height: 245px; }
 .console-collections { gap: 14px; }
 .console-collection > span:last-child { font-size: 17px; left: 15px; right: 15px; }
}
@media (max-width: 650px) {
 .console-scene { height: 180px; margin-bottom: 12px; }
 .console-scene-art { width: 100%; right: 0; opacity: .22; }
 .console-feature-name { padding-bottom: 10px; }
 .console-feature-name h1 { font-size: 29px; }
 .library-toolbar { flex-direction: column; align-items: flex-start; gap: 12px; }
 .library-filters button { min-height: 44px; padding: 7px 11px; }
 .library-grid { gap: 14px; min-height: 228px; }
 .library-tile { flex-basis: 110px; width: 110px; height: 140px; }
 .library-tile.is-selected { flex-basis: 170px; width: 170px; height: 205px; }
 .library-tile.is-selected .library-tile-copy strong { font-size: 16px; }
 .console-collections { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 20px; }
 .console-collection { aspect-ratio: 1.3; }
 .console-collection > span:last-child { bottom: 13px; left: 13px; right: 13px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .console-scene-art, .console-feature-name { animation: none; } .library-tile { transition: none; } .library-grid { scroll-behavior: auto; } }
/* Stable selection: tile layout never changes when focus or hover moves. */
body[data-page="projekte"] .cinematic-environment { display: none; }
.console-project-backdrop { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; background: #07111f; }
.console-project-backdrop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.console-backdrop-current { animation: console-backdrop-fade 450ms ease-out; }
.console-project-backdrop::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,10,18,.9), rgba(3,10,18,.57)), linear-gradient(0deg, #07111f, transparent 65%); }
.project-dashboard > .library-toolbar { padding-top: 22px; margin: 0; justify-content: flex-start; }
.console-scene { height: clamp(160px, 24vh, 270px); }
.library-grid { min-height: 260px; padding-top: 30px; gap: 20px; }
.library-tile, .library-tile.is-selected { flex: 0 0 clamp(100px, 8.4vw, 156px); width: clamp(100px, 8.4vw, 156px); height: clamp(160px, 13vw, 220px); transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 180ms ease; transform-origin: bottom center; }
.library-tile.is-selected { transform: scale(1.1); }
.library-tile.is-selected .library-tile-copy { padding: 30px 10px 10px; }
.library-tile.is-selected .library-tile-copy strong { font-size: 12px; }
@keyframes console-backdrop-fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 650px) {
 .project-dashboard > .library-toolbar { padding-top: 16px; }
 .console-scene { height: 155px; }
 .library-grid { min-height: 228px; gap: 20px; }
 .library-tile, .library-tile.is-selected { width: 130px; flex-basis: 130px; height: 180px; }
 .library-tile.is-selected .library-tile-copy strong { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .console-backdrop-current { animation: none; } .library-tile, .library-tile.is-selected { transition: none; } }
/* Room for the selected tile's scale, outline and glow at both ends of the rail. */
.library-grid { padding-inline: 18px; margin-inline: 0; scroll-padding-inline: 18px; }
/* Preserve each project's subject rather than applying one centre crop everywhere. */
.library-tile[data-project-index="0"] img { object-fit: cover; object-position: 62% 24%; padding: 0; }
.library-tile[data-project-index="1"] .library-art, .library-tile[data-project-index="3"] .library-art { background: #edf2f5; }
.library-tile[data-project-index="1"] img, .library-tile[data-project-index="3"] img { object-fit: contain; object-position: center 43%; padding: 4px; }
.library-tile[data-project-index="2"] img { object-fit: contain; padding: 0 0 22px; }
.library-tile[data-project-index="5"] img { object-position: 23% 28%; }
.console-project-backdrop::after { background: linear-gradient(90deg, rgba(3,10,18,.64), rgba(3,10,18,.22)), linear-gradient(0deg, rgba(7,17,31,.9), transparent 72%); }
.console-project-backdrop[data-project-index="0"] img { object-position: 62% 25%; filter: brightness(1.35); }
.console-project-backdrop[data-project-index="2"] img { object-position: center 24%; }
/* Inner pages share a stationary navigation layer and a short content dissolve.
   Start-page portrait and language transitions keep their existing timing. */
html[data-route-transition="inner"] .nav { view-transition-name: inner-navigation; }
html[data-route-transition="inner"] .route-content { view-transition-name: inner-content; }
html[data-route-transition="inner"]::view-transition-group(inner-navigation) { animation: none; }
html[data-route-transition="inner"]::view-transition-old(inner-navigation) { animation: none; opacity: 0; }
html[data-route-transition="inner"]::view-transition-new(inner-navigation) { animation: none; mix-blend-mode: normal; }
html[data-route-transition="inner"]::view-transition-group(inner-content) { animation-duration: 240ms; }
html[data-route-transition="inner"]::view-transition-old(inner-content) { animation: inner-content-out 140ms ease-out both; mix-blend-mode: normal; }
html[data-route-transition="inner"]::view-transition-new(inner-content) { animation: inner-content-in 240ms cubic-bezier(.2,.8,.2,1) both; mix-blend-mode: normal; }
html[data-route-transition="inner"]::view-transition-group(root), html[data-route-transition="inner"]::view-transition-group(portfolio-environment), html[data-route-transition="inner"]::view-transition-group(portfolio-language-switch), html[data-route-transition="inner"]::view-transition-group(ali-portrait) { animation-duration: 240ms; }
html[data-route-transition="inner"] .nav-links a.active::after { animation: none; }
@keyframes inner-content-out { to { opacity: 0; } }
@keyframes inner-content-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html[data-route-transition="inner"]::view-transition-group(*), html[data-route-transition="inner"]::view-transition-old(*), html[data-route-transition="inner"]::view-transition-new(*) { animation: none; } }
.nav-links a.active::after { animation: none; }
.library-tile[data-project-index="1"] img { transform: scale(1.35); }
.library-tile[data-project-index="3"] img { transform: scale(1.15); }
/* The project artwork and scenery share one background transition layer. */
.console-project-backdrop { view-transition-name: portfolio-environment; }
/* Fit all nine tiles when there is enough room; scrolling is for narrower screens. */
.project-dashboard { container-type: inline-size; }
.library-tile, .library-tile.is-selected { width: clamp(100px, calc((100cqw - 200px) / 9), 156px); flex-basis: clamp(100px, calc((100cqw - 200px) / 9), 156px); }
.library-grid { overflow-x: hidden; scrollbar-width: none; }
.library-grid.has-overflow { overflow-x: auto; scrollbar-width: thin; }
@media (max-width: 650px) { .library-tile, .library-tile.is-selected { width: 130px; flex-basis: 130px; } }
/* Route entry uses the shared transition; artwork fades only on tile changes. */
.console-backdrop-current { animation: none; }
.console-backdrop-current.is-crossfading { animation: console-backdrop-fade 450ms ease-out; }
@media (prefers-reduced-motion: reduce) { .console-backdrop-current.is-crossfading { animation: none; } }
.console-filter-status { min-height: 48px; display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 14px; padding-top: 8px; }
.console-filter-status > span { color: #d5e3ec; font-size: 13px; }
.console-clear-filter { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border: 1px solid #8fb8a0; border-radius: 5px; background: #162b25; color: #ecf7f0; font: inherit; font-size: 13px; cursor: pointer; }
.console-clear-filter:hover { background: #274737; }
.console-clear-filter:focus-visible { outline: 3px solid #edbc74; outline-offset: 3px; }
.console-collections { margin-top: 8px; }
.console-collection-art { opacity: .9; }
.console-collection::after { background: linear-gradient(0deg, rgba(3,10,17,.85), rgba(3,10,17,.15) 45%, transparent 75%); }
.console-collection[data-category="Hardware"] .console-collection-art img { object-position: 65% 25%; filter: brightness(1.4); }
.console-collection[data-category="Hardware"] .console-collection-art img { transform: scale(1.3) translateX(-14%); transform-origin: 65% 25%; }
/* Compact project heading: keep breathing room without a tall empty stage. */
.console-scene { height: auto; min-height: 0; padding: 38px 0 8px; margin-bottom: 8px; }
.console-feature-name { padding-bottom: 0; }
.library-grid { min-height: 0; }
@media (max-width: 650px) { .console-scene { height: auto; padding-top: 28px; } .library-grid { min-height: 0; } }