/* Update 017: Website Demo 001 — Beneath Every Window */
.window-depth-demo {
    --wd-sky-top: #82d7df;
    --wd-sky-bottom: #f5c58a;
    --wd-land-back: #667d62;
    --wd-land-front: #354f48;
    --wd-water-top: #2e8995;
    --wd-water-bottom: #123c58;
    --wd-accent: #ffcf78;
    --wd-signal: #8ee3df;
    --wd-night: #071424;
    --wd-ink: #eaf4f6;
    position: relative;
    overflow: clip;
    color: var(--wd-ink);
    background: var(--wd-night);
}
.window-depth-demo button { font-family: inherit; }
.window-depth-kicker,
.window-depth-zone-label,
.window-depth-control-label {
    margin: 0;
    color: var(--wd-accent);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .15em;
    line-height: 1.4;
    text-transform: uppercase;
}

.window-depth-intro {
    position: relative;
    min-height: 760px;
    padding: clamp(5rem, 9vw, 9rem) max(1.5rem, calc((100vw - var(--max)) / 2 + 1.5rem));
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, .55fr);
    gap: clamp(3rem, 8vw, 8rem);
    align-items: end;
    overflow: hidden;
    background:
        radial-gradient(circle at 75% 22%, rgba(142,227,223,.22), transparent 26%),
        linear-gradient(150deg, #0c263f 0%, #092039 50%, #071424 100%);
}
.window-depth-intro::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .25;
    background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 84%);
}
.window-depth-intro-copy,
.window-depth-brief { position: relative; z-index: 3; }
.window-depth-intro h1 { max-width: 10ch; color: #fff; font-size: clamp(4rem, 8vw, 8.5rem); }
.window-depth-intro-lead { max-width: 720px; margin: 1.8rem 0 0; color: #c9dce4; font-family: var(--serif); font-size: clamp(1.12rem, 2vw, 1.5rem); }
.window-depth-intro-actions { margin-top: 2rem; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.window-depth-primary-action,
.window-depth-secondary-action {
    display: inline-flex;
    gap: .6rem;
    align-items: center;
    min-height: 48px;
    padding: .8rem 1.2rem;
    border-radius: 999px;
    font-weight: 900;
    text-decoration: none;
}
.window-depth-primary-action { color: #092039; background: #fff; }
.window-depth-secondary-action { color: #fff; border: 1px solid rgba(255,255,255,.4); }
.window-depth-brief {
    padding: 2rem;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 22px;
    background: rgba(4,17,31,.58);
    backdrop-filter: blur(14px);
}
.window-depth-brief > span { color: var(--wd-accent); font-size: .7rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.window-depth-brief blockquote { margin: 1rem 0; color: #fff; font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 2.3rem); line-height: 1.3; }
.window-depth-brief p { margin-bottom: 0; color: #b8cad3; }
.window-depth-intro-orbit {
    position: absolute;
    width: min(58vw, 760px);
    aspect-ratio: 1;
    right: -18%;
    top: -33%;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
}
.window-depth-intro-orbit::before,
.window-depth-intro-orbit::after {
    content: '';
    position: absolute;
    inset: 15%;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 50%;
}
.window-depth-intro-orbit::after { inset: 31%; }
.window-depth-orbit-core,
.window-depth-intro-orbit i {
    position: absolute;
    display: block;
    border-radius: 50%;
    background: var(--wd-signal);
    box-shadow: 0 0 30px rgba(142,227,223,.8);
}
.window-depth-orbit-core { width: 18px; height: 18px; left: 49%; top: 49%; }
.window-depth-intro-orbit i { width: 11px; height: 11px; }
.window-depth-orbit-one { left: 9%; top: 46%; }
.window-depth-orbit-two { right: 23%; top: 17%; }
.window-depth-orbit-three { right: 12%; bottom: 25%; }

.window-depth-surface {
    position: relative;
    min-height: 980px;
    padding: clamp(4rem, 8vw, 7rem) max(1.5rem, calc((100vw - var(--max)) / 2 + 1.5rem)) 8rem;
    overflow: hidden;
    color: #122438;
    background:
        radial-gradient(circle at 72% 22%, rgba(255,255,255,.72), transparent 20%),
        linear-gradient(180deg, #dff5f3 0%, #f8ead2 63%, #e6d5b8 100%);
}
.window-depth-surface::after {
    content: '';
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -170px;
    height: 330px;
    border-radius: 50% 50% 0 0;
    background: #0f3d55;
}
.window-depth-control-bar {
    position: relative;
    z-index: 5;
    margin-bottom: 2.5rem;
    padding: 1rem 1.2rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    border: 1px solid rgba(18,36,56,.18);
    border-radius: 18px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 18px 45px rgba(22,52,68,.08);
    backdrop-filter: blur(12px);
}
.window-depth-control-bar > div:first-child { display: grid; }
.window-depth-control-bar strong { color: #112c3e; font-family: var(--serif); font-size: 1.2rem; }
.window-depth-control-label { color: #2b6874; }
.window-depth-control-actions { display: flex; gap: .65rem; flex-wrap: wrap; }
.window-depth-control-actions button {
    min-height: 42px;
    padding: .55rem .9rem;
    color: #112c3e;
    border: 1px solid #93adb3;
    background: rgba(255,255,255,.78);
    box-shadow: none;
}
.window-depth-control-actions button[aria-pressed="true"] { color: #fff; border-color: #112c3e; background: #112c3e; }
.window-depth-surface-grid {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .65fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: center;
}
.window-depth-window-card { max-width: 760px; }
.window-depth-window {
    position: relative;
    aspect-ratio: 1.35;
    overflow: hidden;
    border: clamp(14px, 2vw, 28px) solid #f5ebdb;
    border-bottom-width: clamp(24px, 3.3vw, 46px);
    border-radius: 8px;
    background: linear-gradient(var(--wd-sky-top), var(--wd-sky-bottom));
    box-shadow: 0 36px 80px rgba(29,65,74,.22), inset 0 0 0 2px rgba(18,36,56,.15);
    transition: background 700ms ease;
}
.window-depth-scene-sky { position: absolute; inset: 0; background: linear-gradient(var(--wd-sky-top), var(--wd-sky-bottom)); transition: background 700ms ease; }
.window-depth-scene-sun { position: absolute; width: 12%; aspect-ratio: 1; right: 14%; top: 12%; border-radius: 50%; background: var(--wd-accent); box-shadow: 0 0 45px rgba(255,207,120,.62); transition: background 700ms ease; }
.window-depth-scene-cloud { position: absolute; width: 17%; height: 5%; border-radius: 999px; background: rgba(255,255,255,.62); filter: blur(.2px); }
.window-depth-scene-cloud::before,
.window-depth-scene-cloud::after { content: ''; position: absolute; bottom: 0; border-radius: 50%; background: inherit; }
.window-depth-scene-cloud::before { width: 36%; aspect-ratio: 1; left: 16%; }
.window-depth-scene-cloud::after { width: 45%; aspect-ratio: 1; right: 14%; }
.cloud-one { left: 13%; top: 15%; }
.cloud-two { right: 20%; top: 30%; transform: scale(.75); opacity: .65; }
.window-depth-scene-land { position: absolute; left: -6%; right: -6%; transition: background 700ms ease; }
.land-back { bottom: 31%; height: 31%; background: var(--wd-land-back); clip-path: polygon(0 65%, 14% 42%, 28% 56%, 46% 8%, 60% 39%, 74% 18%, 100% 64%, 100% 100%, 0 100%); opacity: .8; }
.land-front { bottom: 24%; height: 28%; background: var(--wd-land-front); clip-path: polygon(0 69%, 22% 24%, 38% 55%, 57% 7%, 72% 49%, 88% 20%, 100% 48%, 100% 100%, 0 100%); }
.window-depth-scene-water { position: absolute; left: 0; right: 0; bottom: 0; height: 31%; background: linear-gradient(var(--wd-water-top), var(--wd-water-bottom)); transition: background 700ms ease; }
.window-depth-scene-water::before { content: ''; position: absolute; inset: 0; opacity: .35; background-image: repeating-linear-gradient(170deg, rgba(255,255,255,.55) 0 2px, transparent 2px 20px); }
.window-depth-scene-buildings { position: absolute; left: 10%; bottom: 28%; width: 46%; height: 24%; opacity: .8; background: repeating-linear-gradient(90deg, #f3c27f 0 7%, #bb6e57 7% 14%, #e5e1cc 14% 22%, #766c61 22% 29%); clip-path: polygon(0 38%, 8% 30%, 8% 100%, 17% 100%, 17% 16%, 26% 16%, 26% 100%, 38% 100%, 38% 28%, 48% 28%, 48% 100%, 63% 100%, 63% 7%, 75% 7%, 75% 100%, 87% 100%, 87% 35%, 100% 35%, 100% 100%, 0 100%); }
.window-depth-window-frame { position: absolute; z-index: 8; background: #f5ebdb; box-shadow: 0 0 0 2px rgba(18,36,56,.12); }
.frame-horizontal { left: 0; right: 0; top: calc(50% - 7px); height: 14px; }
.frame-vertical { top: 0; bottom: 0; left: calc(50% - 7px); width: 14px; }
.window-depth-window-sill { position: absolute; z-index: 9; left: -2%; right: -2%; bottom: -1px; height: 4%; background: #e7d4b6; }
.window-depth-window-caption { margin-top: 1rem; display: flex; justify-content: space-between; gap: 1rem; color: #375565; }
.window-depth-window-caption span { font-size: .68rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.window-depth-window-caption strong { max-width: 430px; font-family: var(--serif); text-align: right; }
.window-depth-globe-panel { display: grid; gap: 1.5rem; }
.window-depth-globe {
    position: relative;
    width: min(100%, 500px);
    aspect-ratio: 1;
    margin: auto;
    overflow: hidden;
    border: 1px solid rgba(17,44,62,.36);
    border-radius: 50%;
    background: radial-gradient(circle at 37% 30%, #8cdad9 0 10%, #286b7b 42%, #0e314b 78%);
    box-shadow: inset -60px -42px 80px rgba(2,15,28,.62), 0 35px 75px rgba(27,63,76,.22);
}
.window-depth-globe-latitude,
.window-depth-globe-longitude { position: absolute; z-index: 2; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; }
.window-depth-globe-latitude { left: 0; right: 0; height: 32%; }
.latitude-one { top: 16%; }
.latitude-two { bottom: 16%; }
.window-depth-globe-longitude { top: 0; bottom: 0; width: 32%; }
.longitude-one { left: 16%; }
.longitude-two { right: 16%; }
.window-depth-globe-shade { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(110deg, rgba(255,255,255,.16), transparent 38%, rgba(0,0,0,.32)); }
.window-depth-hotspot {
    position: absolute;
    z-index: 5;
    width: 18px;
    height: 18px;
    min-height: 0;
    padding: 0;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--wd-signal);
    box-shadow: 0 0 0 8px rgba(142,227,223,.14), 0 0 22px rgba(142,227,223,.8);
}
.window-depth-hotspot:hover,
.window-depth-hotspot:focus-visible { transform: scale(1.18); }
.window-depth-hotspot.is-active { background: var(--wd-accent); box-shadow: 0 0 0 10px rgba(255,207,120,.2), 0 0 28px rgba(255,207,120,.9); }
.hotspot-one { left: 23%; top: 57%; }
.hotspot-two { left: 39%; top: 20%; }
.hotspot-three { right: 17%; top: 42%; }
.hotspot-four { left: 53%; top: 63%; }
.hotspot-five { left: 34%; top: 43%; }
.hotspot-six { left: 22%; top: 29%; }
.window-depth-signal-card { padding: 1.3rem; border: 1px solid rgba(17,44,62,.22); border-radius: 18px; background: rgba(255,255,255,.64); }
.window-depth-signal-card > span { display: block; color: #2b6874; font-size: .68rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.window-depth-signal-card strong { display: block; margin-top: .4rem; color: #112c3e; font-family: var(--serif); font-size: 1.08rem; }
.window-depth-signal-card small { display: block; margin-top: .8rem; color: #5b6d78; line-height: 1.45; }
.window-depth-waveform { height: 45px; margin-top: .8rem; display: flex; gap: 5px; align-items: center; }
.window-depth-waveform i { width: 4px; height: 20%; border-radius: 999px; background: #2c7480; animation: window-depth-wave 1.5s ease-in-out infinite alternate; }
.window-depth-waveform i:nth-child(2n) { height: 75%; animation-delay: -.4s; }
.window-depth-waveform i:nth-child(3n) { height: 45%; animation-delay: -.8s; }
.window-depth-waveform i:nth-child(4n) { height: 95%; animation-delay: -1.1s; }
@keyframes window-depth-wave { to { height: 92%; } }
.window-depth-scroll-cue { position: absolute; z-index: 5; left: 50%; bottom: 2.6rem; display: grid; justify-items: center; gap: .5rem; color: #d8ebef; transform: translateX(-50%); }
.window-depth-scroll-cue span { font-size: .65rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.window-depth-scroll-cue i { width: 1px; height: 42px; background: linear-gradient(#d8ebef, transparent); }

.window-depth-meter {
    position: fixed;
    z-index: 45;
    right: max(1rem, calc((100vw - var(--max)) / 2 + .5rem));
    top: 52%;
    width: 94px;
    padding: .85rem .75rem;
    display: grid;
    justify-items: end;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 15px;
    color: #fff;
    background: rgba(5,18,34,.78);
    box-shadow: 0 14px 40px rgba(0,0,0,.22);
    backdrop-filter: blur(12px);
    transform: translateY(-50%);
    transition: opacity .2s ease;
}
.window-depth-meter[hidden] { display: none; }
.window-depth-meter > span { color: #a9c5cf; font-size: .58rem; font-weight: 900; letter-spacing: .08em; text-align: right; text-transform: uppercase; }
.window-depth-meter strong { margin-top: .3rem; font-family: var(--serif); font-size: 1.25rem; white-space: nowrap; }
.window-depth-meter > i { width: 100%; height: 3px; margin-top: .65rem; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.16); }
.window-depth-meter b { display: block; width: 0; height: 100%; background: var(--wd-signal); }

.window-depth-zone {
    position: relative;
    min-height: 1050px;
    padding: clamp(7rem, 12vw, 12rem) max(1.5rem, calc((100vw - var(--max)) / 2 + 1.5rem));
    display: flex;
    align-items: center;
    overflow: hidden;
}
.zone-sunlight { color: #112c3e; background: linear-gradient(180deg, #0f3d55 0%, #236d7c 48%, #164b68 100%); }
.zone-twilight { background: linear-gradient(180deg, #164b68 0%, #102e50 50%, #0b1e3b 100%); }
.zone-midnight { background: radial-gradient(circle at 75% 34%, rgba(57,116,137,.18), transparent 24%), linear-gradient(180deg, #0b1e3b, #07152b); }
.zone-abyss { background: radial-gradient(circle at 25% 70%, rgba(72,92,137,.12), transparent 22%), linear-gradient(180deg, #07152b, #050d1d); }
.zone-hadal { min-height: 1200px; background: radial-gradient(circle at 50% 78%, rgba(78,142,145,.12), transparent 22%), linear-gradient(180deg, #050d1d, #020711); }
.window-depth-zone-measure { position: absolute; z-index: 2; top: 4rem; left: max(1.5rem, calc((100vw - var(--max)) / 2 + 1.5rem)); display: flex; gap: .8rem; align-items: center; color: #9ab6c3; font-size: .68rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.window-depth-zone-measure i { width: 90px; height: 1px; background: rgba(255,255,255,.36); }
.window-depth-zone-card {
    position: relative;
    z-index: 5;
    width: min(690px, 58vw);
    padding: clamp(2rem, 4vw, 3.4rem);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 28px;
    background: rgba(5,18,34,.48);
    box-shadow: 0 30px 100px rgba(0,0,0,.18);
    backdrop-filter: blur(14px);
}
.zone-sunlight .window-depth-zone-card { color: #fff; }
.window-depth-zone-card.left { margin-right: auto; }
.window-depth-zone-card.right { margin-left: auto; }
.window-depth-zone-card.center { width: min(800px, 78vw); margin: auto; text-align: center; }
.window-depth-zone-card h2 { max-width: 12ch; margin-top: 1rem; color: #fff; font-size: clamp(2.7rem, 5.5vw, 5.8rem); }
.window-depth-zone-card.center h2 { max-width: 14ch; margin-left: auto; margin-right: auto; }
.window-depth-zone-card > p:not(.window-depth-zone-label) { max-width: 620px; color: #bed0d9; font-family: var(--serif); font-size: 1.12rem; }
.window-depth-zone-card.center > p:not(.window-depth-zone-label) { margin-left: auto; margin-right: auto; }
.window-depth-zone-card blockquote { margin: 2rem 0 0; padding-left: 1.2rem; color: #fff; border-left: 3px solid var(--wd-signal); font-family: var(--serif); font-size: clamp(1.35rem, 2.5vw, 2.1rem); line-height: 1.35; }
.window-depth-location-chip { margin-top: 1.5rem; display: inline-flex; gap: .7rem; align-items: center; color: #e5f4f5; }
.window-depth-location-chip span { width: 10px; height: 10px; border-radius: 50%; background: var(--wd-signal); box-shadow: 0 0 0 7px rgba(142,227,223,.16); }
.window-depth-location-chip strong { font-size: .8rem; letter-spacing: .04em; }
.window-depth-bubbles i,
.window-depth-drift i { position: absolute; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; }
.window-depth-bubbles i { bottom: -80px; width: 20px; height: 20px; animation: window-depth-rise 12s linear infinite; }
.window-depth-bubbles i:nth-child(1) { left: 12%; animation-delay: -2s; }
.window-depth-bubbles i:nth-child(2) { left: 26%; width: 9px; height: 9px; animation-delay: -7s; }
.window-depth-bubbles i:nth-child(3) { left: 42%; width: 34px; height: 34px; animation-delay: -4s; }
.window-depth-bubbles i:nth-child(4) { right: 39%; width: 13px; height: 13px; animation-delay: -9s; }
.window-depth-bubbles i:nth-child(5) { right: 23%; width: 26px; height: 26px; animation-delay: -5s; }
.window-depth-bubbles i:nth-child(6) { right: 9%; width: 8px; height: 8px; animation-delay: -10s; }
@keyframes window-depth-rise { to { transform: translateY(-1150px); opacity: 0; } }
.window-depth-drift i { width: 4px; height: 4px; background: rgba(255,255,255,.34); animation: window-depth-drift 9s ease-in-out infinite alternate; }
.window-depth-drift i:nth-child(1) { left: 10%; top: 18%; }
.window-depth-drift i:nth-child(2) { left: 29%; top: 70%; animation-delay: -3s; }
.window-depth-drift i:nth-child(3) { left: 45%; top: 33%; animation-delay: -6s; }
.window-depth-drift i:nth-child(4) { right: 42%; top: 80%; animation-delay: -2s; }
.window-depth-drift i:nth-child(5) { right: 30%; top: 24%; animation-delay: -5s; }
.window-depth-drift i:nth-child(6) { right: 17%; top: 59%; animation-delay: -8s; }
.window-depth-drift i:nth-child(7) { right: 6%; top: 35%; animation-delay: -1s; }
.window-depth-drift i:nth-child(8) { left: 18%; top: 44%; animation-delay: -7s; }
@keyframes window-depth-drift { to { transform: translate(45px, -30px) scale(1.8); opacity: .2; } }
.window-depth-beacon { margin-top: 1.8rem; display: flex; gap: 1rem; align-items: center; }
.window-depth-beacon > span { width: 18px; height: 18px; border: 3px solid #fff; border-radius: 50%; background: var(--wd-signal); box-shadow: 0 0 0 10px rgba(142,227,223,.1), 0 0 30px rgba(142,227,223,.8); }
.window-depth-beacon div { display: grid; }
.window-depth-beacon small { color: #8faab7; font-size: .65rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.window-depth-beacon strong { color: #fff; font-family: var(--serif); font-size: 1.2rem; }
.window-depth-midnight-orb { position: absolute; width: min(52vw, 680px); aspect-ratio: 1; right: -12%; top: 17%; border: 1px solid rgba(142,227,223,.18); border-radius: 50%; box-shadow: 0 0 0 70px rgba(142,227,223,.018), 0 0 0 140px rgba(142,227,223,.012); }
.window-depth-pressure { height: 84px; margin-top: 2rem; display: flex; gap: 12px; align-items: end; }
.window-depth-pressure span { flex: 1; height: 22%; border-radius: 8px 8px 2px 2px; background: linear-gradient(var(--wd-signal), #26576d); }
.window-depth-pressure span:nth-child(2) { height: 38%; }
.window-depth-pressure span:nth-child(3) { height: 54%; }
.window-depth-pressure span:nth-child(4) { height: 72%; }
.window-depth-pressure span:nth-child(5) { height: 88%; }
.window-depth-pressure span:nth-child(6) { height: 100%; }
.window-depth-return {
    margin-top: 1.5rem;
    color: #071424;
    background: #fff;
    box-shadow: 0 14px 30px rgba(0,0,0,.22);
}
.window-depth-floor { position: absolute; left: -5%; right: -5%; bottom: -80px; height: 190px; border-radius: 50% 50% 0 0; background: linear-gradient(#13232f, #080d12); box-shadow: 0 -45px 100px rgba(54,100,110,.12); }

.window-depth-notes {
    padding: clamp(6rem, 10vw, 10rem) max(1.5rem, calc((100vw - var(--max)) / 2 + 1.5rem));
    color: #10283a;
    background: #f5efe3;
}
.window-depth-notes > header { max-width: 980px; }
.window-depth-notes h2 { max-width: 15ch; margin-top: 1rem; color: #10283a; }
.window-depth-notes header > p:not(.window-depth-zone-label) { max-width: 740px; color: #556673; font-family: var(--serif); font-size: 1.08rem; }
.window-depth-notes .window-depth-zone-label { color: #2a707b; }
.window-depth-reference-notes { margin-top: 4rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #bcc9ce; border-bottom: 1px solid #bcc9ce; }
.window-depth-reference-notes a {
    min-height: 300px;
    padding: 1.8rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-content: space-between;
    color: #10283a;
    border-right: 1px solid #bcc9ce;
    text-decoration: none;
}
.window-depth-reference-notes a:last-child { border-right: 0; }
.window-depth-reference-notes a:hover { background: rgba(42,112,123,.06); }
.window-depth-reference-notes > a > span { color: #2a707b; font-family: var(--serif); font-style: italic; }
.window-depth-reference-notes strong { font-family: var(--serif); font-size: clamp(1.7rem, 2.6vw, 2.8rem); }
.window-depth-reference-notes p { color: #5a6871; }
.window-depth-reference-notes i { font-style: normal; }
.window-depth-method-note { margin-top: 4rem; padding: clamp(2rem, 5vw, 4rem); border-radius: 28px; color: #fff; background: linear-gradient(135deg, #10283a, #1c6371); }
.window-depth-method-note > span { color: #f5cc83; font-size: .7rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.window-depth-method-note blockquote { max-width: 980px; margin: 1rem 0; font-family: var(--serif); font-size: clamp(2rem, 4.5vw, 4.7rem); line-height: 1.1; }
.window-depth-method-note p { max-width: 740px; color: #cfdee2; }
.window-depth-notes-actions { margin-top: 2.5rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.window-depth-notes-actions a { display: inline-flex; gap: .5rem; color: #10283a; font-weight: 900; text-decoration: none; border-bottom: 1px solid currentColor; }
.window-depth-status { position: fixed; z-index: 80; left: 50%; bottom: 1.2rem; max-width: calc(100vw - 2rem); padding: .7rem 1rem; border-radius: 999px; color: #fff; background: rgba(5,18,34,.92); box-shadow: 0 10px 30px rgba(0,0,0,.26); opacity: 0; pointer-events: none; transform: translate(-50%, 16px); transition: opacity .2s ease, transform .2s ease; }
.window-depth-status.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1040px) {
    .window-depth-intro { grid-template-columns: 1fr; min-height: 820px; }
    .window-depth-brief { max-width: 620px; }
    .window-depth-surface-grid { grid-template-columns: 1fr; }
    .window-depth-globe-panel { max-width: 650px; grid-template-columns: minmax(260px, .7fr) minmax(260px, .8fr); align-items: center; }
    .window-depth-globe { max-width: 420px; }
    .window-depth-zone-card { width: min(760px, 78vw); }
    .window-depth-reference-notes { grid-template-columns: 1fr; }
    .window-depth-reference-notes a { min-height: 220px; border-right: 0; border-bottom: 1px solid #bcc9ce; }
    .window-depth-reference-notes a:last-child { border-bottom: 0; }
}

@media (max-width: 820px) {
    .window-depth-meter { right: .6rem; top: auto; bottom: .7rem; width: auto; min-width: 112px; transform: none; }
    .window-depth-surface,
    .window-depth-zone,
    .window-depth-notes,
    .window-depth-intro { padding-left: 1rem; padding-right: 1rem; }
    .window-depth-control-bar { align-items: flex-start; flex-direction: column; }
    .window-depth-window-caption { display: grid; }
    .window-depth-window-caption strong { text-align: left; }
    .window-depth-globe-panel { grid-template-columns: 1fr; }
    .window-depth-zone { min-height: 930px; }
    .window-depth-zone-card,
    .window-depth-zone-card.center { width: min(100%, 720px); }
    .window-depth-zone-measure { left: 1rem; }
}

@media (max-width: 560px) {
    .window-depth-intro h1 { font-size: clamp(3.8rem, 17vw, 6rem); }
    .window-depth-intro { min-height: 760px; }
    .window-depth-brief { padding: 1.4rem; }
    .window-depth-surface { min-height: 860px; padding-bottom: 7rem; }
    .window-depth-window { border-width: 10px; border-bottom-width: 18px; }
    .frame-horizontal { top: calc(50% - 5px); height: 10px; }
    .frame-vertical { left: calc(50% - 5px); width: 10px; }
    .window-depth-control-actions { width: 100%; }
    .window-depth-control-actions button { flex: 1; }
    .window-depth-zone-card { padding: 1.5rem; border-radius: 20px; }
    .window-depth-zone-card h2 { font-size: clamp(2.5rem, 13vw, 4rem); }
    .window-depth-zone-card blockquote { font-size: 1.3rem; }
    .window-depth-reference-notes a { padding: 1.3rem; grid-template-columns: auto 1fr; }
    .window-depth-reference-notes i { grid-column: 2; justify-self: end; }
    .window-depth-method-note { padding: 1.5rem; border-radius: 20px; }
    .window-depth-notes-actions { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
    .window-depth-waveform i,
    .window-depth-bubbles i,
    .window-depth-drift i { animation: none; }
    .window-depth-window,
    .window-depth-scene-sky,
    .window-depth-scene-sun,
    .window-depth-scene-land,
    .window-depth-scene-water,
    .window-depth-status { transition: none; }
}

/* Update 018: public collection vote inside Demo 001 */
.window-depth-public-vote {
    margin-top: clamp(3rem, 6vw, 5rem);
    padding: clamp(1.4rem, 3vw, 2.2rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: center;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 20px;
    background: rgba(255,255,255,.055);
}
.window-depth-public-vote h3 {
    max-width: 15ch;
    margin-top: .6rem;
    color: #fff;
    font-size: clamp(1.7rem, 3vw, 3rem);
}
.window-depth-public-vote p:not(.window-depth-zone-label) {
    max-width: 690px;
    margin: 1rem 0 0;
    color: #aec4cf;
}
.window-depth-public-vote .website-demo-vote-button {
    color: #fff;
}
.window-depth-public-vote .website-demo-vote-total {
    color: #b8ccd5;
}
@media (max-width: 760px) {
    .window-depth-public-vote { grid-template-columns: 1fr; align-items: start; }
}