/* Same construction as Slide 19: native text + separately masked RGBA cutouts. */
.teaching-slide.slide-hcm-video-demo,body.lesson-presenting .teaching-slide.slide-hcm-video-demo{container-type:size;padding:24px 4% 20px;overflow:hidden}
.ha-stage{width:100%;height:100%;max-width:1640px;min-height:0;margin:auto;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(14px,2.8cqh,28px);font-family:var(--sans,Arial,sans-serif)}
.teaching-slide .ha-heading>p{margin:0 0 9px;color:#c6ab75;font:500 clamp(11px,2cqh,19px)/1.4 var(--sans)}
.ha-topline{display:flex;align-items:center;gap:clamp(12px,1.3cqw,24px);min-width:0}
.ha-title{display:flex;align-items:center;gap:clamp(10px,1cqw,18px);flex:1;min-width:0}
.ha-title-ornament{display:block;flex:0 1 8%;width:8%;min-width:0;height:auto;max-height:none;margin:0;border:0;border-radius:0;pointer-events:none}
.teaching-slide .ha-title h2{min-width:0;margin:0;font:800 clamp(25px,4.25cqh,49px)/1.25 var(--sans);color:#e7bf60;text-transform:uppercase;text-wrap:balance;text-shadow:0 2px #785a24,0 4px 7px #000b}
.ha-heading nav{display:flex;align-items:center;gap:9px;flex:none}.ha-heading nav button{position:relative;display:grid;place-items:center;margin:0;padding:10px 16px;min-height:48px;border:0;border-radius:8px;background:#273029;color:#dabc7c;box-shadow:none;cursor:pointer;font:650 clamp(11px,1cqw,16px)/1.2 var(--sans)}
.ha-heading .ha-reset{width:53px;height:48px;padding:0;font-size:31px}.ha-control-frame{position:absolute;inset:0;display:block;width:100%;height:100%;max-height:none;margin:0;border:0;border-radius:0;pointer-events:none}.ha-heading nav button>span{position:relative;z-index:1}
.ha-radar{display:block;flex:none;width:clamp(60px,7cqw,110px);height:auto;max-height:none;margin:0;border:0;border-radius:0;pointer-events:none}
.ha-board{position:relative;min-width:0;min-height:0;container-type:size}
.ha-cards{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6%;width:min(96cqw,calc((100cqh - 32px)*2.82));max-width:1500px}
.ha-card-group{min-width:0}.ha-card{position:relative;display:block;width:100%;margin:0;padding:0;border:0;border-radius:13px;background:transparent;color:inherit;box-shadow:none;cursor:pointer;line-height:0;container-type:inline-size;transition:filter .18s,transform .18s}
.teaching-slide .ha-card-art{display:block;width:100%;height:auto;max-height:none;margin:0;border:0;border-radius:0;pointer-events:none}
.ha-card-label{position:absolute;left:9.55%;right:9.55%;top:3.3%;height:9.55%;display:flex;align-items:center;justify-content:center;padding:0;background:linear-gradient(#2c3e32,#24362a);color:#82d89b;font:800 clamp(12px,4.45cqw,30px)/1.15 var(--sans);text-shadow:0 2px 4px #000;white-space:nowrap}
.ha-card-photo .ha-card-label{background:linear-gradient(#44392e,#322e25);color:#ed7957}
.teaching-slide .ha-card-action{position:absolute;left:50%;top:57.16%;transform:translate(-50%,-50%);display:block;width:15.93%;height:auto;max-height:none;margin:0;border:0;border-radius:0;pointer-events:none;filter:drop-shadow(0 4px 7px #0008)}
.ha-seen{position:absolute;right:4%;bottom:4%;padding:4px 7px;border:1px solid #b5ce86;border-radius:4px;background:#17271fee;color:#d0f2ac;font:650 clamp(9px,1.8cqw,12px)/1.2 var(--sans)}.ha-seen[hidden]{display:none}
.teaching-slide .ha-card-group>p{margin:12px 0 0;color:#c3a675;text-align:center;font:400 clamp(11px,1.9cqh,19px)/1.4 var(--sans)}
.ha-instruction{position:relative;justify-self:center;display:grid;align-items:center;box-sizing:border-box;width:96%;min-height:clamp(48px,8cqh,83px);padding:12px 30px;background:#263128;border-radius:12px}
.ha-instruction-frame{position:absolute;inset:0;display:block;width:100%;height:100%;max-height:none;margin:0;border:0;border-radius:0;pointer-events:none}
.teaching-slide .ha-instruction p{position:relative;margin:0;color:#e0b978;text-align:center;font:750 clamp(13px,2.5cqh,26px)/1.4 var(--sans);text-transform:uppercase;text-shadow:0 2px 4px #000}
.ha-status{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ha-dialog{font-family:var(--sans,Arial,sans-serif)}
dialog.ha-dialog{position:fixed;inset:0;box-sizing:border-box;margin:auto;padding:0;width:min(94vw,calc(94dvh * 1.5958),1740px);height:auto;aspect-ratio:2143/1343;max-width:none;max-height:94dvh;border:2px solid #777970;border-radius:16px;overflow:hidden;background:#091e18 url('../../assets/experience/allied/map-background.png') center/cover no-repeat;color:#e9c67f;box-shadow:0 16px 44px #000a;container-type:size}
dialog.ha-dialog:not([open]){display:none}dialog.ha-dialog::backdrop{background:#0009;backdrop-filter:blur(2px)}
.ha-popup{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(10px,1.7cqh,19px);box-sizing:border-box;width:100%;height:100%;min-height:0;padding:clamp(14px,2.6cqh,28px) 2.6%;font-family:var(--sans)}
.ha-popup-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;min-width:0}.ha-popup-heading>div{min-width:0}
.ha-popup-heading .ha-kicker{margin:0 0 7px;color:#ee6450;font:750 clamp(14px,1.75cqw,27px)/1.25 var(--sans);text-shadow:0 0 9px #e0443444}
.ha-popup-heading h2{margin:0;color:#e8bf77;font:800 clamp(18px,2.45cqw,38px)/1.25 var(--sans);text-transform:uppercase;text-wrap:balance;text-shadow:0 3px 4px #000}
.ha-close{display:flex;align-items:center;justify-content:center;gap:8px;flex:none;min-width:72px;min-height:54px;padding:0;border:0;background:transparent;color:#e7655c;font:500 clamp(32px,4.8cqw,72px)/1 var(--sans);text-shadow:0 0 12px #b22122,0 3px 5px #000;cursor:pointer}.ha-close b{font-weight:750}
.ha-popup-grid{display:grid;grid-template-columns:minmax(0,2.04fr) minmax(0,1fr);gap:2.8%;min-width:0;min-height:0;align-items:stretch}
.ha-viewer{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:5px;min-width:0;min-height:0;container-type:size}
.ha-media-frame{position:relative;align-self:start;justify-self:center;width:min(100cqw,calc((100cqh - 28px)*1.5942));aspect-ratio:1328/833;min-width:0;padding:0;border:0;background:transparent}
.ha-frame-art{position:absolute;inset:0;display:block;width:100%;height:100%;max-height:none;margin:0;border:0;border-radius:0;pointer-events:none}
.ha-screen{position:absolute;left:2.48%;top:3.6%;width:95.1%;height:82.95%;overflow:hidden;background:#09120e;clip-path:polygon(1.58% 0,98.42% 0,100% 2.9%,100% 100%,0 100%,0 2.9%)}
.ha-screen .ha-current-photo,.ha-screen .ha-video{position:absolute;inset:0;display:block;width:100%;height:100%;max-height:none;object-fit:contain;margin:0;border:0;border-radius:0}.ha-video{background:#000}.ha-screen [hidden]{display:none!important}
.ha-demo-label{position:absolute;left:8px;bottom:7px;padding:3px 6px;border:1px solid #a99a6766;border-radius:3px;background:#0a1715da;color:#efd49b;font:500 clamp(8px,.65vw,11px)/1.3 var(--sans);pointer-events:none}.ha-demo-label[hidden]{display:none}
.ha-photo-prev,.ha-photo-next{position:absolute;top:56.15%;transform:translateY(-50%);width:7.4%;height:14.48%;min-height:30px;margin:0;padding:0;border:0;background:transparent;cursor:pointer}.ha-photo-prev{left:0}.ha-photo-next{right:0}.ha-photo-prev img,.ha-photo-next img{display:block;width:100%;height:100%;max-height:none;margin:0;border:0;border-radius:0}
.ha-video-controls,.ha-photo-controls{position:absolute;left:2.48%;right:2.48%;top:87.88%;bottom:3.72%;box-sizing:border-box;display:flex;align-items:center;gap:1.8%;padding:0 1%;background:linear-gradient(#2d3a2f,#202d25)}
.ha-video-controls button,.ha-photo-controls button{display:grid;place-items:center;flex:none;min-width:24px;min-height:24px;width:4.1%;height:86%;padding:0;border:0;background:transparent;color:#e2c084;cursor:pointer}
.ha-dialog svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ha-seek{flex:1;min-width:25px;height:8px;accent-color:#d95036;margin:0}.ha-time{color:#d5b880;font:500 clamp(10px,1.1vw,18px)/1.2 var(--sans);white-space:nowrap}.ha-photo-controls{justify-content:space-between}.ha-counter{font:600 clamp(12px,1.35vw,22px)/1.2 var(--sans);color:#ddbd7c}
dialog.ha-dialog[data-kind=video] :is(.ha-photo-controls,.ha-photo-prev,.ha-photo-next),dialog.ha-dialog[data-kind=photo] .ha-video-controls{display:none}
.ha-media-status{align-self:end;margin:0;text-align:center;color:#c8ad7c;font:400 clamp(10px,1vw,16px)/1.35 var(--sans)}
.ha-playlist{position:relative;min-width:0;min-height:0;border:0;border-radius:15px;background:#222e26}
.ha-playlist h3{position:absolute;top:3%;left:4.5%;right:4.5%;height:9.5%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:8px;margin:0;padding:4px 6px;background:linear-gradient(#303b30,#263229);color:#dfb977;font:750 clamp(13px,1.4vw,23px)/1.2 var(--sans);text-align:center;clip-path:polygon(2% 0,98% 0,100% 20%,100% 80%,98% 100%,2% 100%,0 80%,0 20%)}
.ha-playlist h3 svg{width:28px;height:28px;flex:none}
.ha-scroll{position:absolute;left:4.5%;right:4.5%;display:grid;place-items:center;width:91%;height:7%;padding:4px;border:0;background:linear-gradient(#2d392f,#202d26);color:#e5bf78;cursor:pointer}.ha-scroll svg{width:25px;height:25px}.ha-scroll[data-ha=up]{top:15%}.ha-scroll[data-ha=down]{bottom:3%}
.ha-list{position:absolute;top:23%;bottom:11%;left:7.3%;right:7.3%;display:flex;flex-direction:column;gap:9px;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ae9258 #16251d;padding:3px}
.ha-list button{position:relative;display:block;flex:none;width:100%;aspect-ratio:549/100;min-height:47px;margin:0;padding:0;border:0;border-radius:9px;background:linear-gradient(#303a30,#243027);color:#a9a289;text-align:left;font:650 clamp(11px,1.18vw,20px)/1.25 var(--sans);cursor:pointer}
.ha-row-frame{position:absolute;inset:0;display:block;width:100%;height:100%;max-height:none;margin:0;border:0;border-radius:0;pointer-events:none}
.ha-row-content{position:absolute;inset:12% 4%;display:flex;align-items:center;gap:2.5%;min-width:0}.ha-row-content>span:nth-child(2){flex:1;min-width:0}.ha-item-icon{flex:none;width:6%;max-width:22px}.ha-item-icon svg{height:auto;aspect-ratio:1}.ha-row-content>img{display:block;flex:none;width:17%;height:90%;max-height:none;object-fit:cover;margin:0;border:0;border-radius:3px;filter:grayscale(1)}
.ha-list button.is-selected{color:#f1ce7e;background:linear-gradient(#4b3b28,#302d23);box-shadow:0 0 10px #e98c3a77}.ha-list button.is-selected::after{content:'';position:absolute;inset:0;border:2px solid #f6d669;border-radius:9px;pointer-events:none}.ha-list button:not(.is-selected) .ha-row-content>img{opacity:.65}
.ha-caption{position:relative;min-width:0;min-height:clamp(85px,13.5cqh,145px);box-sizing:border-box;margin-top:9px;padding:clamp(20px,3cqh,31px) 24px 14px;border:0;border-radius:14px;background:#29362b;display:flex;align-items:center;justify-content:center}
.ha-caption h3{position:absolute;left:50%;top:0;transform:translate(-50%,-30%);box-sizing:border-box;display:grid;place-items:center;width:max-content;max-width:90%;min-height:38px;margin:0;padding:8px 18px;border:0;border-radius:7px;background:#30392d;color:#e3bf7c;font:750 clamp(12px,1.3cqw,21px)/1.2 var(--sans);white-space:nowrap;z-index:1}
.ha-tab-frame{position:absolute;inset:0;display:block;width:100%;height:100%;max-height:none;margin:0;border:0;border-radius:0;pointer-events:none}
.ha-caption p{position:relative;margin:0;color:#e4bd78;text-align:center;text-transform:uppercase;font:750 clamp(12px,1.6cqw,26px)/1.4 var(--sans);text-shadow:0 2px 3px #000}
.ha-stage button:focus-visible,.ha-dialog button:focus-visible{outline:3px solid #ffe39a;outline-offset:3px}.ha-dialog input:focus-visible{outline:2px solid #ffe39a}
.ha-screen:fullscreen{inset:0;width:100vw;height:100dvh;clip-path:none;background:#000}.ha-screen:fullscreen .ha-current-photo{object-fit:contain}.ha-screen:fullscreen .ha-demo-label{font-size:15px}
@media(hover:hover){.ha-card:hover{filter:brightness(1.12);transform:translateY(-3px)}.ha-dialog button:hover,.ha-heading nav button:hover{filter:brightness(1.18)}}
@media(max-width:1200px){.ha-title-ornament{display:none}.ha-radar{width:65px}.teaching-slide .ha-title h2{font-size:clamp(24px,4cqh,39px)}.ha-heading nav{gap:7px}.ha-heading nav button{padding:8px 12px}}
@media(max-width:900px) and (orientation:portrait){
 .teaching-slide.slide-hcm-video-demo,body.lesson-presenting .teaching-slide.slide-hcm-video-demo{container-type:inline-size;padding:24px 16px;overflow:auto}
 .ha-stage{height:auto;min-height:100%;display:flex;flex-direction:column;gap:25px;flex-shrink:0}.ha-topline{flex-wrap:wrap;gap:16px}.ha-title{flex:1 0 100%}.teaching-slide .ha-heading>p{font-size:11px}.teaching-slide .ha-title h2{font-size:clamp(25px,6.5cqw,38px);text-align:center}.ha-heading nav{margin-left:auto}.ha-heading nav button{min-height:46px;font-size:12px}.ha-radar{display:none}
 .ha-board{container-type:normal;flex:none}.ha-cards{position:static;transform:none;display:flex;flex-direction:column;width:100%;gap:24px}.ha-card-group{width:100%;max-width:540px;margin:auto}.teaching-slide .ha-card-group>p{font-size:14px;margin-top:9px}.ha-card-label{font-size:4.45cqw}.ha-instruction{width:100%;padding:18px 20px;min-height:80px}.teaching-slide .ha-instruction p{font-size:16px;line-height:1.4}
 dialog.ha-dialog{width:96vw;max-height:96dvh;height:auto;aspect-ratio:auto;overflow:auto;border-radius:12px;container-type:inline-size}.ha-popup{display:flex;flex-direction:column;gap:20px;height:auto;min-height:100%;padding:17px 12px}.ha-popup-heading{gap:9px}.ha-popup-heading .ha-kicker{font-size:13px;margin-bottom:6px}.ha-popup-heading h2{font-size:19px}.ha-close{min-width:47px;min-height:44px;gap:3px;font-size:32px}.ha-popup-grid{display:flex;flex-direction:column;gap:22px}.ha-viewer{display:flex;flex-direction:column;container-type:normal;gap:10px}.ha-media-frame{width:100%;flex:none}.ha-media-status{font-size:12px;text-align:center;align-self:stretch}.ha-time{font-size:10px}.ha-counter{font-size:14px}.ha-demo-label{font-size:8px;bottom:5px;left:5px}.ha-video-controls,.ha-photo-controls{gap:1%;padding:0 1%}.ha-video-controls button,.ha-photo-controls button{width:7%;min-width:20px;min-height:20px}
 .ha-playlist{height:320px;flex:none}.ha-playlist h3{font-size:17px}.ha-playlist h3 svg{width:22px;height:22px}.ha-list{gap:8px}.ha-list button{min-height:52px;aspect-ratio:auto;font-size:14px}.ha-row-content>img{width:48px}.ha-item-icon{width:19px}.ha-scroll{padding:4px}.ha-scroll svg{width:21px;height:21px}.ha-caption{flex:none;min-height:140px;padding:28px 15px 18px;margin-top:5px}.ha-caption h3{font-size:11px;max-width:92%;min-height:36px;padding:8px 12px}.ha-caption p{font-size:15px;line-height:1.45}
}
@media(max-height:520px) and (orientation:landscape){.teaching-slide.slide-hcm-video-demo,body.lesson-presenting .teaching-slide.slide-hcm-video-demo{overflow:auto;padding:20px 4%}.ha-stage{height:620px;min-height:620px;gap:20px}.teaching-slide .ha-title h2{font-size:26px}.teaching-slide .ha-heading>p{font-size:11px}.teaching-slide .ha-card-group>p{font-size:13px}.teaching-slide .ha-instruction p{font-size:17px}}
@media(prefers-reduced-motion:reduce){.ha-card{transition:none}}
@media(min-width:901px){
 .teaching-slide .ha-title h2{font-size:clamp(27px,3cqw,49px)}
 .teaching-slide .ha-card-group>p{font-size:clamp(12px,1.15cqw,19px)}
 .teaching-slide .ha-instruction p{font-size:clamp(16px,1.6cqw,26px)}
 .ha-playlist{align-self:start;aspect-ratio:651/831;width:100%;height:auto;max-height:100%;border-radius:4% / 3%}
 .ha-caption h3{min-width:25.6%}
}
.ha-caption{border-radius:1.35% / 13%}

/* Slide 26: keep the supplied composition at its original 2640:1311 ratio.
   The map remains owned by history-stage.css. Native text stays selectable. */
@font-face{font-family:Archive Oswald;src:url('../../assets/experience/fonts/oswald-vietnamese.woff2') format('woff2');font-style:normal;font-weight:200 700;font-display:swap;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:Archive Oswald;src:url('../../assets/experience/fonts/oswald-latin.woff2') format('woff2');font-style:normal;font-weight:200 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
.ha-stage{--archive-display:'Archive Oswald',sans-serif}
.teaching-slide .ha-title h2{font-family:var(--archive-display);font-weight:600;letter-spacing:.015em;color:#e5bb59;text-shadow:0 1px #ffe8a3,0 3px #8b6628,0 5px 2px #34230e,0 7px 8px #000}
.ha-card-label{font-family:var(--archive-display);font-weight:600;font-size:5.5cqw}
.ha-card-label::before{content:'[ ';white-space:pre}.ha-card-label::after{content:' ]';white-space:pre}
.ha-heading nav button{font-family:var(--archive-display);font-weight:500}
.ha-heading .ha-reset{font-family:Arial,sans-serif}
.teaching-slide .ha-card-group>p{font-family:var(--archive-display);font-weight:400}
.teaching-slide .ha-instruction p{font-family:var(--archive-display);font-weight:600}
.ha-stage .ha-seen{display:none}
@media(min-width:901px) and (min-height:521px){
 .teaching-slide.slide-hcm-video-demo,body.lesson-presenting .teaching-slide.slide-hcm-video-demo{padding:0;display:grid;place-items:center}
 .ha-stage{position:relative;display:block;flex:none;width:min(100cqw,calc(100cqh * 2640 / 1311));height:auto;aspect-ratio:2640/1311;max-width:none;container-type:inline-size}
 .ha-heading{position:absolute;left:2.8%;right:2.8%;top:3.2%}
 .teaching-slide .ha-heading>p{margin:0 0 .65cqw 10.7%;font:400 1.4cqw/1.3 var(--archive-display);color:#c2a574}
 .ha-topline{gap:1.35cqw;align-items:center}
 .ha-title{gap:1.2cqw}
 .ha-title-ornament{display:block;flex:0 0 12%;width:12%}
 .teaching-slide .ha-title h2{font-size:3.85cqw;line-height:1.35;white-space:nowrap;text-wrap:nowrap;flex:none}
 .ha-title-ornament:last-child{flex:1;min-width:0}
 .ha-heading nav{gap:.45cqw}
 .ha-heading nav button{min-height:0;height:3.2cqw;padding:.45cqw 1.15cqw;border-radius:.4cqw;font-size:1.15cqw}
 .ha-heading .ha-reset{width:3.35cqw;height:3.2cqw;padding:0;font-size:2cqw}
 .ha-radar{width:7.2cqw}
 .ha-board{position:absolute;inset:0;container-type:normal;pointer-events:none}
 .ha-cards{left:12.083333%;top:24.02746%;transform:none;width:76.174243%;max-width:none;gap:6.316%;pointer-events:auto}
 .ha-card{border-radius:1.2cqw}
 .teaching-slide .ha-card-group>p{margin:.65cqw 0 0;font-size:1.4cqw;line-height:1.35;color:#c6a574}
 .ha-instruction{position:absolute;left:12.5%;top:86.25%;width:75%;height:9%;min-height:0;padding:.5cqw 2cqw;border-radius:.6cqw}
 .teaching-slide .ha-instruction p{font-size:2.05cqw;line-height:1.25;white-space:nowrap}
 body.lesson-presenting .notebook-paper:has(.slide-hcm-video-demo){width:100%;max-width:none;align-self:stretch}
}
@media(max-width:900px) and (orientation:portrait){
 .ha-card-label{font-size:5.5cqw}
 .teaching-slide .ha-title h2{font-size:clamp(26px,6.5cqw,38px)}
}

/* Archive dialogs: source popup geometry 2143 x 1343, independent of page width. */
dialog.ha-dialog[data-kind]{width:min(94vw,calc(88dvh * 2143 / 1343),1740px);max-height:88dvh;--archive-display:'Archive Oswald',sans-serif}
.ha-dialog[data-kind] .ha-popup{position:relative;display:block;padding:0}
.ha-dialog[data-kind] .ha-popup-heading{position:absolute;left:3%;right:2%;top:3%;height:10%;gap:2%}
.ha-dialog[data-kind] .ha-kicker{font:600 2.05cqw/1.2 var(--archive-display);margin:0 0 .55cqw}
.ha-dialog[data-kind] .ha-popup-heading h2{font:600 3.05cqw/1.2 var(--archive-display);white-space:nowrap;text-wrap:nowrap;text-shadow:0 2px #704d27,0 4px 5px #000}
.ha-dialog[data-kind] .ha-close{align-self:start;min-width:0;min-height:0;width:9%;height:100%;font-size:4.7cqw;gap:.65cqw}
.ha-dialog[data-kind] .ha-popup-grid{position:absolute;left:2.7%;right:2.2%;top:14.6%;height:65.5%;grid-template-columns:minmax(0,2.04fr) minmax(0,1fr);gap:2.8%}
.ha-dialog[data-kind] .ha-viewer{position:relative;display:block;container-type:normal}
.ha-dialog[data-kind] .ha-media-frame{width:100%;aspect-ratio:1328/833}
.ha-dialog[data-kind] .ha-media-status{position:absolute;left:0;right:0;top:95.5%;font:400 1.25cqw/1.3 var(--archive-display);white-space:nowrap}
.ha-dialog[data-kind] .ha-playlist{width:100%;height:auto;max-height:none;aspect-ratio:651/831}
.ha-dialog[data-kind] .ha-playlist h3{font:600 1.8cqw/1.2 var(--archive-display);gap:.6cqw}
.ha-dialog[data-kind] .ha-playlist h3 svg{width:2.2cqw;height:2.2cqw}
.ha-dialog[data-kind] .ha-scroll svg{width:2.15cqw;height:2.15cqw;filter:drop-shadow(0 2px 2px #0009)}
.ha-dialog[data-kind] .ha-list{top:23%;bottom:10%;gap:.65cqw;padding:.4cqw;left:6.2%;right:6.2%}
.ha-dialog[data-kind] .ha-list button{font:500 1.38cqw/1.2 var(--archive-display);flex:1;min-height:0;aspect-ratio:auto;border-radius:.6cqw}
.ha-dialog[data-kind] .ha-row-content{gap:2%;inset:12% 4%}
.ha-dialog[data-kind] .ha-row-content>span:nth-child(2){white-space:nowrap}
.ha-dialog[data-kind] .ha-item-icon{width:8%;max-width:none}
.ha-dialog[data-kind=video] .ha-list button:not(.is-selected) .ha-row-content>img{display:none}
.ha-dialog[data-kind] .ha-list button.is-selected{color:#ffda83;background:linear-gradient(#523122,#34271e);box-shadow:0 0 .6cqw #ff742bb3,inset 0 0 .6cqw #ed783466}
.ha-dialog[data-kind] .ha-list button.is-selected::after{border:.18cqw solid #ffdd75;border-radius:.6cqw;box-shadow:inset 0 0 .3cqw #ffb74e,0 0 .25cqw #ffb74e}
.ha-dialog[data-kind] .ha-caption{position:absolute;left:2.7%;right:2.2%;top:82.4%;height:15.3%;min-height:0;margin:0;padding:1.6cqw 3.5cqw .7cqw}
.ha-dialog[data-kind] .ha-caption h3{font:600 1.8cqw/1.2 var(--archive-display);padding:.5cqw 1.7cqw;min-height:0;min-width:0;transform:translate(-50%,-25%)}
.ha-dialog[data-kind] .ha-caption p{font:600 1.95cqw/1.35 var(--archive-display);text-wrap:balance}
.ha-dialog[data-kind] .ha-time{font:400 1.35cqw/1.2 var(--archive-display)}
.ha-dialog[data-kind] .ha-video-controls button{min-width:0;min-height:0}
.ha-dialog[data-kind] .ha-seek{appearance:none;-webkit-appearance:none;height:.9cqw;border:1px solid #81714e;border-radius:1cqw;background:linear-gradient(to right,#d94d36 0 var(--ha-progress,0%),#193e39 var(--ha-progress,0%) 100%);box-shadow:inset 0 2px 4px #0009;opacity:1}
.ha-dialog[data-kind] .ha-seek::-webkit-slider-thumb{appearance:none;width:1.2cqw;height:1.7cqw;border:1px solid #82785e;border-radius:.2cqw;background:linear-gradient(90deg,#555c51,#aaa587,#555c51);box-shadow:0 2px 3px #0008}
.ha-dialog[data-kind] .ha-seek::-moz-range-thumb{width:1.2cqw;height:1.7cqw;border:1px solid #82785e;border-radius:.2cqw;background:#8b8a70}
.ha-dialog[data-kind] .ha-seek:disabled{background:#243b35;opacity:.65}
@media(max-width:900px) and (orientation:portrait), (max-height:520px) and (orientation:landscape){
 dialog.ha-dialog[data-kind]{width:min(96vw,720px);max-height:94dvh;aspect-ratio:auto;height:auto;overflow:auto;container-type:inline-size}
 .ha-dialog[data-kind] .ha-popup{display:flex;flex-direction:column;gap:22px;height:auto;min-height:0;padding:18px 12px}
 .ha-dialog[data-kind] .ha-popup-heading{position:static;height:auto;gap:10px}
 .ha-dialog[data-kind] .ha-kicker{font-size:16px;margin-bottom:8px}
 .ha-dialog[data-kind] .ha-popup-heading h2{font-size:clamp(20px,5.5cqw,30px);white-space:normal;text-wrap:balance}
 .ha-dialog[data-kind] .ha-close{width:48px;height:48px;min-width:48px;font-size:34px;gap:3px}
 .ha-dialog[data-kind] .ha-popup-grid{position:static;display:flex;flex-direction:column;height:auto;gap:24px}
 .ha-dialog[data-kind] .ha-viewer{display:flex;flex-direction:column;gap:10px}
 .ha-dialog[data-kind] .ha-media-status{position:static;font-size:14px;white-space:normal}
 .ha-dialog[data-kind] .ha-time{font-size:12px}
 .ha-dialog[data-kind] .ha-video-controls button{min-width:20px;min-height:20px}
 .ha-dialog[data-kind] .ha-playlist{aspect-ratio:auto;height:350px;flex:none}
 .ha-dialog[data-kind] .ha-playlist h3{font-size:21px}
 .ha-dialog[data-kind] .ha-playlist h3 svg{width:27px;height:27px}
 .ha-dialog[data-kind] .ha-scroll svg{width:26px;height:26px}
 .ha-dialog[data-kind] .ha-list{gap:9px;padding:5px}
 .ha-dialog[data-kind] .ha-list button{font-size:clamp(14px,4cqw,20px);flex:none;min-height:48px;aspect-ratio:auto;border-radius:7px}
 .ha-dialog[data-kind] .ha-list button.is-selected::after{border-width:2px;border-radius:7px}
 .ha-dialog[data-kind] .ha-row-content>img{width:17%}
 .ha-dialog[data-kind] .ha-caption{position:relative;inset:auto;height:auto;min-height:140px;margin-top:8px;padding:30px 18px 18px}
 .ha-dialog[data-kind] .ha-caption h3{font-size:16px;padding:7px 12px}
 .ha-dialog[data-kind] .ha-caption p{font-size:18px;line-height:1.4}
 .ha-dialog[data-kind] .ha-seek{height:6px}
 .ha-dialog[data-kind] .ha-seek::-webkit-slider-thumb{width:8px;height:12px}
}

/* Photo-specific controls and album title spacing; keep actual item count. */
.ha-dialog[data-kind=photo] .ha-list button{font-size:1.22cqw}
.ha-dialog[data-kind=photo] .ha-counter{font:400 1.65cqw/1.2 var(--archive-display);white-space:nowrap}
.ha-dialog[data-kind=photo] .ha-counter::before{content:'[ '}
.ha-dialog[data-kind=photo] .ha-counter::after{content:' ]'}
.ha-dialog[data-kind=photo] .ha-photo-controls button{min-width:0;min-height:0}
.ha-dialog[data-kind=photo] .ha-photo-prev,.ha-dialog[data-kind=photo] .ha-photo-next{min-height:0}
@media(max-width:900px) and (orientation:portrait), (max-height:520px) and (orientation:landscape){
 .ha-dialog[data-kind=photo] .ha-list button{font-size:clamp(12px,3.6cqw,18px)}
 .ha-dialog[data-kind=photo] .ha-counter{font-size:17px}
 .ha-dialog[data-kind=photo] .ha-photo-controls button{min-width:24px;min-height:24px}
}

/* Historical photo source attribution below the frame. */
.ha-dialog[data-kind=photo] .ha-media-status{font-size:1.05cqw}
.ha-dialog[data-kind=photo] .ha-media-status a{color:#e8c67f;text-decoration:underline;text-underline-offset:2px}
@media(max-width:900px) and (orientation:portrait), (max-height:520px) and (orientation:landscape){
 .ha-dialog[data-kind=photo] .ha-media-status{font-size:13px;line-height:1.45;white-space:normal}
}

/* Fill the album viewport proportionally. Fullscreen retains the complete photo. */
.ha-dialog[data-kind=photo] .ha-screen:not(:fullscreen) .ha-current-photo{object-fit:cover;object-position:var(--ha-photo-position,50% 50%)}

/* Long chronological album: keep row size stable and scroll groups. */
.ha-dialog[data-kind=photo] .ha-list button{flex:none;height:4.4cqw;min-height:0;aspect-ratio:auto}
.ha-dialog[data-kind=photo] .ha-list .ha-group-label{flex:none;margin:0;padding:.45cqw .35cqw .25cqw;color:#88cda0;border-bottom:1px solid #8ba77a66;font:500 1.05cqw/1.3 var(--archive-display);letter-spacing:.025em}
@media(max-width:900px) and (orientation:portrait), (max-height:520px) and (orientation:landscape){
 .ha-dialog[data-kind=photo] .ha-list button{height:48px;min-height:48px}
 .ha-dialog[data-kind=photo] .ha-list .ha-group-label{font-size:13px;padding:8px 4px 5px}
 .ha-dialog[data-kind=photo] .ha-caption h3{font-size:13px;white-space:normal;text-align:center}
 .ha-dialog[data-kind=photo] .ha-caption{padding-top:38px}
}

/* Crop publisher scan margins in the fitted viewer. */
.ha-dialog[data-kind=photo] .ha-screen:not(:fullscreen) .ha-current-photo[src*=rooftop]{transform:scale(1.12);transform-origin:50% 30%}
