:root{color-scheme:dark;--night:#061d39;--navy:#09284a;--glass:rgba(5,26,48,.76);--white:#faf9f3;--muted:#c0ccd6;--line:rgba(235,243,249,.17);--gold:#efcb78;--panel-width:244px;--edge:28px;--font:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{height:100svh;height:100dvh;background:radial-gradient(ellipse at 68% 75%,#0c4464 0,transparent 54%),linear-gradient(150deg,#04172f,#082849 62%,#07304a);color:var(--white);font:14px/1.5 var(--font);-webkit-font-smoothing:antialiased;overscroll-behavior:none}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button{border:0}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:5px}button:disabled{cursor:default;opacity:.35}[hidden]{display:none!important}svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}.symbol-library{position:absolute;width:0;height:0;overflow:hidden}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.stage{position:absolute;inset:0;display:grid;grid-template-columns:1fr;isolation:isolate;touch-action:none;user-select:none;-webkit-user-select:none}.frame{position:relative;width:100%;height:100%;min-width:0;min-height:0;margin:0;overflow:hidden;touch-action:none}.image-wrap{position:absolute;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%);transform-origin:center;will-change:transform}.image-wrap img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;user-select:none;-webkit-user-drag:none}.stage.is-comparison{grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}.stage.is-comparison .frame{background:var(--night)}.image-label{position:absolute;top:max(94px,env(safe-area-inset-top));left:22px;border:1px solid var(--line);border-radius:30px;background:rgba(3,19,36,.64);backdrop-filter:blur(14px);padding:6px 13px;font-size:12px;letter-spacing:.06em;color:#fff;pointer-events:none}.image-label:before{content:"";display:inline-block;width:5px;height:5px;background:var(--gold);border-radius:50%;margin-right:8px;vertical-align:2px}.old-frame .image-label:before{background:#bbc6cf}
.edge-shade{position:absolute;inset-inline:0;pointer-events:none;z-index:1;transition:opacity .25s}.shade-top{top:0;height:145px;background:linear-gradient(rgba(2,16,33,.76),transparent)}.shade-bottom{bottom:0;height:230px;background:linear-gradient(transparent,rgba(2,16,33,.8))}.topbar{position:absolute;z-index:5;left:var(--edge);right:var(--edge);top:max(22px,env(safe-area-inset-top));display:flex;align-items:center;justify-content:space-between;gap:20px}.brand-group{display:flex;align-items:center;gap:16px}.brand{display:flex;flex-direction:column;gap:3px;text-shadow:0 1px 12px #00112680}.brand-name{font-size:17px;letter-spacing:.13em;font-weight:500;display:flex;align-items:center;white-space:nowrap}.brand-rule{height:13px;width:1px;background:#d9e5ee65;margin:0 12px}.brand-en{font-size:8px;letter-spacing:.26em;color:#c1cfdb}.icon-button{display:grid;place-items:center;width:46px;height:46px;min-width:46px;padding:0;border:1px solid rgba(244,248,252,.25);border-radius:50%;background:rgba(5,28,50,.42);color:var(--white);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:background .2s,border-color .2s,color .2s}.icon-button svg{width:22px;height:22px}.icon-button:hover{background:rgba(13,54,84,.8);border-color:#f2cf7bb3;color:var(--gold)}.menu-toggle[aria-expanded="true"]{background:#eec979;color:#082641;border-color:#eec979}.top-actions{display:flex;gap:23px;align-items:center}.text-action{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;background:transparent;font-size:12px;letter-spacing:.12em;text-shadow:0 1px 12px #001126}.text-action svg{width:18px;height:18px}.text-action:hover{color:var(--gold)}
.panel{position:absolute;z-index:6;left:var(--edge);top:96px;bottom:96px;width:var(--panel-width);max-height:760px;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;background:linear-gradient(150deg,rgba(8,41,71,.83),rgba(4,25,47,.74));box-shadow:0 16px 50px #00112433;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);animation:panel-in .23s ease-out}.panel-top{display:flex;justify-content:space-between;align-items:center;padding:15px 17px 8px;color:#d5dfe5;font-size:11px;letter-spacing:.1em;flex-shrink:0}.icon-button.small{width:30px;height:30px;min-width:30px;border:0;background:transparent;backdrop-filter:none}.icon-button.small svg{width:17px;height:17px}.panel-scroll{overflow:auto;min-height:0;flex:1;padding:8px 15px 16px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#d4e1eb35 transparent}.panel-scroll::-webkit-scrollbar{width:3px}.panel-scroll::-webkit-scrollbar-thumb{background:#d4e1eb35;border-radius:5px}.section-label{display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:.12em;color:#aabfcf;padding:7px 7px 10px}.section-label span:last-child{font-size:9px;letter-spacing:.1em;color:#91aabd}.set-list,.space-list{display:flex;flex-direction:column;gap:3px}.set-button,.space-button{display:flex;width:100%;align-items:center;text-align:left;background:transparent;color:#d3dee5;border-radius:7px;min-height:35px;padding:7px 9px;font-size:12px;line-height:1.6;letter-spacing:.035em;transition:background .16s,color .16s}.set-button:before{content:"";width:4px;height:4px;border-radius:50%;background:#c6d4df55;margin-right:12px;flex:none}.set-button .set-number{margin-left:auto;color:#abc0d055;font-size:9px;font-variant-numeric:tabular-nums}.set-button[aria-pressed="true"]{color:var(--gold);background:#eccb8017}.set-button[aria-pressed="true"]:before{background:var(--gold);box-shadow:0 0 12px #efcb7866}.set-button[aria-pressed="true"] .set-number{color:#e2c078}.set-button:hover,.space-button:hover{background:#ffffff0b;color:#fff}.set-button[aria-pressed="true"]:hover{color:var(--gold)}.space-heading{margin-top:17px;padding-top:17px;border-top:1px solid var(--line)}.space-number{font-size:10px;color:#94adbe;margin-right:12px;font-variant-numeric:tabular-nums}.space-button[aria-current="true"]{color:#fff;background:#ffffff11}.space-button[aria-current="true"] .space-number{color:var(--gold)}.space-button[aria-current="true"]:after{content:"";width:4px;height:4px;border-radius:50%;background:var(--gold);margin-left:auto}.panel-bottom{padding:14px 16px 12px;border-top:1px solid var(--line);flex:none}.mode-switch{display:flex;border:1px solid #b6cad82b;padding:3px;border-radius:8px;background:#03182a45;gap:3px}.mode-switch button{background:transparent;color:#c5d4dd;flex:1;min-height:37px;border-radius:5px;font-size:12px;letter-spacing:.08em}.mode-switch button[aria-pressed="true"]{background:var(--gold);color:#122c43;font-weight:600}.mode-switch button:hover:not([aria-pressed="true"]){background:#ffffff0d}.panel-note{margin:9px 0 0;font-size:9px;letter-spacing:.13em;color:#9eb4c4;text-align:center}
.image-navigation{position:absolute;right:var(--edge);top:50%;transform:translateY(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:20px}.nav-button{width:48px;height:48px}.nav-button svg{width:23px;height:23px}.position{display:flex;flex-direction:column;align-items:center;gap:8px;font-variant-numeric:tabular-nums;font-size:11px;color:#b8c9d6;letter-spacing:.08em;text-shadow:0 2px 12px #00111c}.position #current-index{color:var(--gold);font-size:16px}.position-line{width:1px;height:26px;background:#c7d6df65}.scene-dots{display:flex;align-items:center;gap:5px}.scene-dots button{width:28px;height:28px;padding:12px 3px;background:transparent}.scene-dots button:after{content:"";display:block;height:2px;border-radius:2px;background:#d2dee570;transition:background .2s,transform .2s}.scene-dots button[aria-current="true"]:after{background:var(--gold);transform:scaleY(1.5)}.scene-dots button:hover:after{background:#fff}.interaction-hint{font-size:10px;letter-spacing:.06em;color:#bacbd7;text-shadow:0 1px 10px #001427}.touch-hint{display:none}.about-button{margin-left:auto;padding:8px 0 8px 10px;min-height:32px;font-size:10px;letter-spacing:.12em;color:#c4d1db;background:transparent}.about-button:hover{color:var(--gold)}
.restore-ui{position:absolute;z-index:10;left:var(--edge);top:max(22px,env(safe-area-inset-top));opacity:.68}.restore-ui:hover{opacity:1}.clean-view .chrome,.clean-view .edge-shade{visibility:hidden;opacity:0;pointer-events:none}.clean-view .image-label{display:none}.zoom-reset{position:absolute;z-index:7;left:50%;bottom:max(27px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:8px;background:var(--glass);border:1px solid var(--line);border-radius:30px;padding:10px 17px;font-size:11px;backdrop-filter:blur(18px);box-shadow:0 4px 20px #00132644}.zoom-reset svg{width:15px;height:15px}.load-status{position:absolute;z-index:8;top:50%;left:50%;transform:translate(-50%,-50%);padding:12px 17px;border-radius:30px;display:flex;align-items:center;gap:10px;background:var(--glass);backdrop-filter:blur(12px);font-size:12px;pointer-events:none}.load-status span{width:12px;height:12px;border:1px solid #fff4;border-top-color:var(--gold);border-radius:50%;animation:spin 1s linear infinite}.image-error{position:absolute;z-index:8;left:50%;top:50%;transform:translate(-50%,-50%);padding:22px 26px;background:#092641ed;border:1px solid var(--line);border-radius:12px;text-align:center}.image-error p{margin:0 0 12px;font-size:13px}.image-error button{border-radius:5px;padding:8px 18px;background:var(--gold);color:var(--night)}.toast{position:absolute;z-index:12;left:50%;bottom:80px;transform:translateX(-50%);max-width:calc(100vw - 40px);padding:10px 16px;border:1px solid var(--line);background:#05243eef;border-radius:30px;font-size:12px;backdrop-filter:blur(18px);text-align:center;pointer-events:none}.no-script{position:absolute;z-index:20;left:20px;top:20px;padding:20px;background:var(--night)}.no-script a{color:var(--gold)}
dialog{color:var(--white);padding:0;border:1px solid var(--line);border-radius:18px;max-width:480px;width:calc(100vw - 40px);max-height:calc(100dvh - 40px);background:#082640ed;backdrop-filter:blur(24px);box-shadow:0 24px 90px #00112788}dialog::backdrop{background:#00142abf;backdrop-filter:blur(6px)}.about-content{padding:45px 35px 32px}.about-content>.icon-button{position:absolute;right:14px;top:14px;width:34px;height:34px;min-width:34px}.about-content>.icon-button svg{width:17px;height:17px}.eyebrow{font-size:9px;letter-spacing:.22em;color:var(--gold)}.about-content h2{font-size:24px;line-height:1.5;font-weight:400;letter-spacing:.03em;margin:18px 0}.about-content p{font-size:13px;line-height:1.9;color:#c9d7e1}.about-shortcuts{display:flex;flex-wrap:wrap;gap:10px 18px;font-size:10px;border-top:1px solid var(--line);margin-top:24px;padding-top:18px;color:#b5c8d6}@keyframes spin{to{transform:rotate(360deg)}}@keyframes panel-in{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
@media(hover:none),(pointer:coarse){.desktop-hint{display:none}.touch-hint{display:block}.icon-button:hover{background:rgba(5,28,50,.42);color:var(--white);border-color:rgba(244,248,252,.25)}}
@media(min-width:1800px){:root{--panel-width:270px;--edge:40px}.panel{top:110px;bottom:110px}.set-button,.space-button{font-size:13px;min-height:39px}.panel-top{padding:18px 20px 10px}.panel-scroll{padding-inline:18px}}
@media(max-width:760px){:root{--edge:18px;--panel-width:246px}.topbar{top:max(15px,env(safe-area-inset-top));gap:8px}.brand-group{gap:11px}.brand-name{font-size:14px;letter-spacing:.08em}.brand-rule{margin-inline:8px;height:11px}.brand-en{font-size:7px;letter-spacing:.16em}.top-actions{gap:13px}.text-action{padding:0;min-width:40px;gap:4px}.text-action span{display:none}.text-action svg{width:20px;height:20px}.icon-button{width:42px;height:42px;min-width:42px}.panel{top:76px;bottom:70px;max-width:calc(100vw - 80px)}.image-navigation{right:14px;gap:14px}.nav-button{width:42px;height:42px}.position{font-size:10px;gap:7px}.position #current-index{font-size:14px}.position-line{height:20px}.scene-dots{gap:0}.scene-dots button{width:23px}.interaction-hint{font-size:9px;letter-spacing:0}.about-button{font-size:9px}.restore-ui{top:max(15px,env(safe-area-inset-top))}.image-label{top:76px;left:15px;font-size:10px;padding:5px 10px}.zoom-reset{bottom:55px}.about-content{padding:40px 25px 25px}}
@media(orientation:portrait){.stage.is-comparison{grid-template-columns:1fr;grid-template-rows:1fr 1fr}.stage.is-comparison .old-frame .image-label{top:76px}.stage.is-comparison .new-frame .image-label{top:12px}.stage.is-comparison~.shade-bottom{height:170px}}
@media(orientation:landscape) and (max-height:600px){:root{--edge:18px;--panel-width:224px}.topbar{top:max(12px,env(safe-area-inset-top));left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right))}.brand-name{font-size:14px}.brand-en{font-size:7px}.icon-button{width:38px;height:38px;min-width:38px}.icon-button svg{width:19px;height:19px}.top-actions{gap:18px}.text-action{font-size:10px;min-height:38px}.text-action svg{width:17px;height:17px}.panel{top:64px;bottom:18px;left:max(18px,env(safe-area-inset-left));border-radius:12px}.panel-top{padding:8px 13px 2px;font-size:10px}.panel-scroll{padding:1px 12px 12px}.section-label{padding-top:5px}.set-button,.space-button{min-height:33px;font-size:11px}.panel-bottom{padding:8px 12px}.panel-note{display:none}.mode-switch button{min-height:32px;font-size:11px}.image-navigation{right:max(16px,env(safe-area-inset-right));gap:10px}.position{gap:4px;font-size:9px}.position-line{height:16px}.position #current-index{font-size:13px}.interaction-hint{font-size:9px}.scene-dots button{width:23px}.image-label{top:64px;left:16px;font-size:10px;padding:4px 10px}.shade-top{height:95px}.shade-bottom{height:160px}.zoom-reset{bottom:max(18px,env(safe-area-inset-bottom))}.restore-ui{left:max(18px,env(safe-area-inset-left));top:max(12px,env(safe-area-inset-top))}.toast{bottom:48px}.about-content{padding:32px 27px 23px}.about-content h2{font-size:21px;margin:10px 0}.about-content p{font-size:12px;line-height:1.7}.about-shortcuts{margin-top:15px;padding-top:12px}}
/* Colors are sampled from the current photograph; photography stays untouched. */
:root{--panel-rgb:241,232,214;--panel-ink:#403a2c;--panel-muted:#746954;--panel-accent:#85622d;--panel-on-accent:#fff9ea;--panel-border:rgba(111,88,46,.19);--panel-active:rgba(146,108,45,.11);--panel-hover:rgba(108,82,40,.07);--panel-dot:#b1a183;--hud-ink:#fff7e7;--hud-muted:#ebdfc9;--hud-accent:#efd095}
.panel{background:linear-gradient(145deg,rgba(var(--panel-rgb),.9),rgba(var(--panel-rgb),.79));border-color:var(--panel-border);color:var(--panel-ink);box-shadow:0 15px 65px #00112426;transition:background .35s,color .35s,border-color .35s}.panel-top{color:var(--panel-muted)}.panel .icon-button{color:var(--panel-ink)}.panel-scroll{scrollbar-color:var(--panel-dot) transparent}.panel-scroll::-webkit-scrollbar-thumb{background:var(--panel-dot)}.section-label,.section-label span:last-child,.panel-note{color:var(--panel-muted)}.space-heading,.panel-bottom{border-color:var(--panel-border)}.set-button,.space-button{color:var(--panel-ink)}.set-button:before{background:var(--panel-dot)}.set-button .set-number{color:var(--panel-muted);opacity:.7}.set-button[aria-pressed="true"]{background:var(--panel-active);color:var(--panel-accent);font-weight:600}.set-button[aria-pressed="true"]:before{background:var(--panel-accent);box-shadow:none}.set-button[aria-pressed="true"] .set-number{color:var(--panel-accent)}.set-button:hover,.space-button:hover{background:var(--panel-hover);color:var(--panel-ink)}.set-button[aria-pressed="true"]:hover{color:var(--panel-accent)}.space-number{color:var(--panel-muted)}.space-button[aria-current="true"]{background:var(--panel-active);color:var(--panel-ink);font-weight:550}.space-button[aria-current="true"] .space-number{color:var(--panel-accent)}.space-button[aria-current="true"]:after{background:var(--panel-accent)}.mode-switch{background:var(--panel-hover);border-color:var(--panel-border)}.mode-switch button{color:var(--panel-muted)}.mode-switch button[aria-pressed="true"]{background:var(--panel-accent);color:var(--panel-on-accent)}.mode-switch button:hover:not([aria-pressed="true"]){background:var(--panel-hover)}.menu-toggle[aria-expanded="true"]{background:rgba(var(--panel-rgb),.91);border-color:var(--panel-border);color:var(--panel-accent)}.brand-name,.text-action{color:var(--hud-ink)}.brand-en,.caption p,.interaction-hint,.about-button{color:var(--hud-muted)}.caption h1{color:var(--hud-ink)}.caption h1 #scene-code,.position #current-index{color:var(--hud-accent)}.scene-dots button[aria-current="true"]:after{background:var(--hud-accent)}.nav-button,.restore-ui{background:rgba(var(--panel-rgb),.68);color:var(--panel-ink);border-color:var(--panel-border)}.nav-button:hover,.restore-ui:hover{background:rgba(var(--panel-rgb),.94);color:var(--panel-accent);border-color:var(--panel-accent)}.image-label{background:rgba(var(--panel-rgb),.87);border-color:var(--panel-border);color:var(--panel-ink)}.image-label:before{background:var(--panel-accent)}.old-frame .image-label:before{background:var(--panel-muted)}.panel button:focus-visible{outline-color:var(--panel-accent)}
/* Photo-derived three-stop glass: the color and opacity both graduate. */
:root{--panel-start-rgb:245,235,216;--panel-mid-rgb:225,210,187;--panel-end-rgb:215,195,166}
.panel{background:linear-gradient(118deg,rgba(var(--panel-start-rgb),.88) 0%,rgba(var(--panel-mid-rgb),.78) 48%,rgba(var(--panel-end-rgb),.68) 100%);border-color:var(--panel-border);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 15px 55px rgba(0,15,30,.15);backdrop-filter:blur(19px) saturate(.76);-webkit-backdrop-filter:blur(19px) saturate(.76)}
.panel-top{background:linear-gradient(110deg,rgba(var(--panel-start-rgb),.16),rgba(var(--panel-start-rgb),0));border-radius:15px 15px 0 0}.panel-bottom{background:linear-gradient(110deg,rgba(var(--panel-mid-rgb),.2),rgba(var(--panel-end-rgb),.03));border-radius:0 0 15px 15px}
[data-panel-tone="dark"] .panel{background:linear-gradient(118deg,rgba(var(--panel-start-rgb),.79) 0%,rgba(var(--panel-mid-rgb),.59) 48%,rgba(var(--panel-end-rgb),.34) 100%);backdrop-filter:blur(19px) saturate(.74) brightness(.52);-webkit-backdrop-filter:blur(19px) saturate(.74) brightness(.52);box-shadow:inset 0 1px 0 rgba(255,245,220,.1),0 15px 55px rgba(0,10,20,.18)}
.menu-toggle[aria-expanded="true"],.nav-button,.restore-ui{background:linear-gradient(125deg,rgba(var(--panel-start-rgb),.82),rgba(var(--panel-end-rgb),.5));backdrop-filter:blur(15px) saturate(.76);-webkit-backdrop-filter:blur(15px) saturate(.76)}
.image-label{background:linear-gradient(115deg,rgba(var(--panel-start-rgb),.85),rgba(var(--panel-end-rgb),.65))}
@media(pointer:coarse){.set-button,.space-button{min-height:42px;font-size:13px}.icon-button.nav-button{width:44px;height:44px;min-width:44px}.mode-switch button{min-height:39px;font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* A single information dock gives the photograph and its caption separate space. */
:root{--dock-height:88px;--dock-space:calc(var(--dock-height) + env(safe-area-inset-bottom))}
.stage{bottom:var(--dock-space)}
.shade-bottom{display:none}
.panel{bottom:calc(var(--dock-space) + 18px)}
.bottom-bar{
  position:absolute;z-index:3;inset:auto 0 0;
  height:var(--dock-space);display:flex;align-items:center;gap:28px;
  padding:14px max(var(--edge),env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(var(--edge),env(safe-area-inset-left));
  border-top:1px solid rgba(224,234,239,.12);
  background:linear-gradient(105deg,rgba(var(--panel-start-rgb),.06),rgba(var(--panel-end-rgb),.015)),#061d30;
}
.caption{min-width:0;flex:1;pointer-events:none}
.caption h1{display:flex;align-items:baseline;gap:12px;margin:0;font-size:22px;font-weight:400;letter-spacing:.065em;line-height:1.3}
.caption h1 #scene-code{font-size:11px;letter-spacing:.05em;font-variant-numeric:tabular-nums}
.caption .caption-meta{display:flex;flex-wrap:wrap;align-items:center;gap:3px 12px;margin:7px 0 0;font-size:11px;line-height:1.55;letter-spacing:.025em}
.caption-meta>span{display:inline-flex;align-items:center;white-space:nowrap}
.caption-meta>span+span:before{content:"";height:9px;width:1px;background:currentColor;opacity:.3;margin-right:12px;flex:none}
.browse-tools{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none}
.browse-tools .interaction-hint{text-shadow:none;font-size:10px}
.bottom-bar .about-button{margin:0;padding:8px 0 8px 20px;border-left:1px solid rgba(224,234,239,.14);min-height:36px;white-space:nowrap;font-size:10px}
.image-navigation{top:calc((100% - var(--dock-space))/2)}
.zoom-reset{bottom:calc(var(--dock-space) + 16px)}
.toast{bottom:calc(var(--dock-space) + 22px)}
.clean-view .stage{bottom:0}
.clean-view .zoom-reset{bottom:max(20px,env(safe-area-inset-bottom))}
@media(max-width:1100px) and (min-width:761px){
  .bottom-bar{gap:20px}.caption h1{font-size:20px}.caption .caption-meta{font-size:10px;gap:3px 10px}.caption-meta>span+span:before{margin-right:10px}.browse-tools .interaction-hint{display:none}
}
@media(max-width:760px) and (orientation:portrait){
  :root{--dock-height:122px}
  .bottom-bar{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 28px;align-content:center;gap:6px 16px;padding-top:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .caption{grid-column:1/-1}.caption h1{font-size:19px;gap:10px;letter-spacing:.04em}.caption h1 #scene-code{font-size:10px}
  .caption .caption-meta{margin-top:5px;font-size:10px;gap:2px 9px;line-height:1.55;letter-spacing:0}.caption-meta>span+span:before{margin-right:9px;height:8px}
  .browse-tools{flex-direction:row;align-items:center;gap:12px}.browse-tools .interaction-hint{font-size:9px}.bottom-bar .about-button{min-height:28px;padding:4px 0 4px 12px;font-size:9px}
}
@media(orientation:landscape) and (max-height:600px){
  :root{--dock-height:62px}
  .bottom-bar{gap:18px;padding-top:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  .caption h1{font-size:17px;gap:9px;letter-spacing:.045em}.caption h1 #scene-code{font-size:10px}
  .caption .caption-meta{margin-top:4px;font-size:9px;line-height:1.45;gap:2px 9px;letter-spacing:0}.caption-meta>span+span:before{height:8px;margin-right:9px}
  .browse-tools .interaction-hint{display:none}.bottom-bar .about-button{min-height:30px;padding-left:15px;font-size:9px}
  .panel{bottom:calc(var(--dock-space) + 10px)}.zoom-reset{bottom:calc(var(--dock-space) + 10px)}
}
@media(orientation:landscape) and (max-width:660px) and (max-height:600px){
  :root{--dock-height:74px}.bottom-bar{gap:12px}.browse-tools{display:none}
}
/* Phones start with the photograph filling the viewport and minimal floating controls. */
.mobile-fullscreen{position:absolute;z-index:10;right:max(var(--edge),env(safe-area-inset-right));top:max(16px,env(safe-area-inset-top));display:flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:10px 16px;border:1px solid var(--panel-border);border-radius:30px;background:linear-gradient(115deg,rgba(var(--panel-start-rgb),.82),rgba(var(--panel-end-rgb),.53));color:var(--panel-ink);font-size:11px;letter-spacing:.05em;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}
.mobile-fullscreen svg{width:17px;height:17px}
.orientation-hint{display:none;position:absolute;z-index:4;left:50%;bottom:max(82px,calc(env(safe-area-inset-bottom) + 72px));transform:translateX(-50%);align-items:center;gap:7px;margin:0;white-space:nowrap;font-size:11px;letter-spacing:.06em;color:var(--hud-muted);text-shadow:0 1px 10px #001427}
.orientation-hint svg{width:18px;height:18px}
.mobile-view:not(.clean-view) .mobile-fullscreen,.mobile-view:not(.clean-view) .orientation-hint{display:none}
.mobile-view.clean-view .image-navigation{visibility:visible;opacity:1;pointer-events:auto;top:50%}
.mobile-view.clean-view .position{display:none}
.mobile-view.clean-view .image-navigation{gap:26px}
.mobile-view.clean-view .toast{bottom:max(80px,calc(env(safe-area-inset-bottom) + 72px))}
@media(orientation:portrait){
  .mobile-view.clean-view .orientation-hint{display:flex}
  .mobile-view .mobile-fullscreen{top:auto;right:auto;left:50%;bottom:max(24px,calc(env(safe-area-inset-bottom) + 14px));transform:translateX(-50%);font-size:12px;min-height:44px;padding-inline:19px}
}
@media(orientation:landscape) and (max-height:600px){
  .mobile-fullscreen{top:max(12px,env(safe-area-inset-top));min-height:38px;padding:8px 13px;font-size:10px}
  .mobile-view.clean-view .image-navigation{gap:24px}
}
html:fullscreen .mobile-view .orientation-hint{display:none}
@media(prefers-reduced-motion:reduce){.mobile-fullscreen{transition:none}}