:root {
  --page:#EDF0F3; --surface:#FAFBFC; --ink:#263B50; --muted:#596B7D; --brand:#334C63;
  --accent:#D4D48A; --on-accent:#263B50; --line:#CDD7E0; --boundary:#728598; --focus:#334C63;
  --entry-tint:#F4F6EA; --header:rgba(237,240,243,.94); --hover:#E2E8EE;
  --space-xs:.5rem; --space-sm:.75rem; --space-md:1rem; --space-lg:1.5rem; --space-xl:2rem; --space-2xl:3rem; --space-3xl:4rem;
  --ease:cubic-bezier(.22,1,.36,1); --z-sticky:10; --z-menu:20; --header-height:5rem;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;
  color:var(--ink); background:var(--page); font-synthesis:none; text-rendering:optimizeLegibility; transition:background-color 180ms,color 180ms;
}
:root[data-theme="dark"] { --page:#172430; --surface:#223545; --ink:#F2F7FB; --muted:#BDCDD9; --brand:#C0D7E9; --line:#486174; --boundary:#8298AA; --focus:#C0D7E9; --entry-tint:#2C3E3E; --header:rgba(23,36,48,.94); --hover:#304758; }
* { box-sizing:border-box; }
html { scroll-padding-top:calc(var(--header-height) + 1rem); }
body { margin:0; line-height:1.65; -webkit-font-smoothing:antialiased; }
button,select { font:inherit; color:inherit; }
button,a,select { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button { cursor:pointer; }
button:disabled { cursor:default; }
a { color:inherit; text-decoration:none; }
p,h1,h2 { margin:0; }
h1,h2 { text-wrap:balance; }
p { text-wrap:pretty; }
svg { display:block; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
:focus-visible { outline:2px solid var(--focus); outline-offset:5px; }
[hidden] { display:none!important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.skip-link { position:fixed; inset:1rem auto auto 1rem; z-index:var(--z-menu); padding:.75rem 1rem; background:var(--surface); transform:translateY(-200%); }
.skip-link:focus { transform:none; }
.container,.header-inner { width:min(100% - 2.5rem,76rem); margin-inline:auto; }
.site-header { position:sticky; top:0; z-index:var(--z-sticky); background:var(--header); backdrop-filter:blur(12px); padding-top:env(safe-area-inset-top); }
.header-inner { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-sm); min-height:5rem; border-bottom:1px solid var(--line); padding-block:.75rem; position:relative; }
.wordmark { font-size:1.5rem; font-weight:700; letter-spacing:-.025em; line-height:1.3; min-height:44px; display:flex; align-items:center; gap:.5rem; }
.menu-toggle { display:flex; align-items:center; gap:.5rem; background:none; border:0; min-height:44px; padding:.5rem; margin-left:auto; }
.menu-toggle span { font-size:1.25rem; }
.main-nav { display:none; order:4; width:100%; }
.main-nav.open { display:flex; flex-direction:column; gap:.5rem; padding-block:1rem; }
.main-nav a,.nav-unavailable { display:flex; align-items:center; justify-content:space-between; min-height:44px; padding:.5rem .75rem; }
.nav-unavailable { color:var(--muted); }
.nav-unavailable small { font-size:.8125rem; font-weight:400; }
.main-nav a:hover { background:var(--hover); border-radius:6px; }
.theme-control { display:flex; align-items:center; min-height:44px; gap:.25rem; margin-left:.25rem; }
.theme-control svg { width:19px; height:19px; flex-shrink:0; }
.theme-control select { border:0; background:transparent; max-width:7rem; min-height:44px; font-size:.875rem; cursor:pointer; border-radius:4px; }
.theme-control option { background:var(--surface); color:var(--ink); }
.hub { padding-top:clamp(3rem,6vw,5rem); position:relative; }
.hub h1 { position:relative; font-size:clamp(2.125rem,4.8vw,4.5rem); font-weight:650; line-height:1.2; }
.hub h1>span { display:block; }
.hub h1>span[lang] { letter-spacing:-.025em; }
.title-rest { margin-top:.1em; }
.path-texture { position:absolute; right:0; top:0; width:100%; height:24rem; overflow:hidden; pointer-events:none; color:var(--line); opacity:.52; }
.path-texture svg { width:100%; height:100%; stroke-width:1; }
.path-texture circle { fill:var(--line); stroke:none; }
.texture-alive svg { animation:drift 30s ease-in-out infinite alternate; }
.texture-alive.paused svg { animation-play-state:paused; }
body:has(.viewer[open]) .texture-alive svg { animation-play-state:paused; }
@keyframes drift { to { transform:translate3d(.75rem,-.5rem,0); } }
.product-space { position:relative; margin-top:3rem; padding-top:1rem; }
.connections { position:absolute; width:100%; height:100%; inset:0; overflow:visible; pointer-events:none; color:var(--line); stroke-width:1; }
.connections path { transition:stroke 140ms,opacity 140ms; }
.connections path.active { stroke:var(--brand); }
.product-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:1rem; position:relative; }
.product-entry { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; min-width:0; background:var(--surface); padding:1.5rem; border-radius:12px; position:relative; transition:background-color 160ms,transform 120ms var(--ease); }
.product-entry>div { flex:1 1 13rem; min-width:0; }
.product-entry h2 { font-size:1.5rem; font-weight:600; line-height:1.25; margin-bottom:.75rem; }
.product-entry p { color:var(--muted); font-size:1rem; }
.product-entry.travel-entry { background:var(--entry-tint); }
.entry-action { display:flex; align-items:center; gap:.75rem; font-size:.875rem; flex-shrink:0; }
.entry-action svg { width:18px; height:18px; }
.unavailable-label { font-size:.8125rem; color:var(--muted); flex-shrink:0; }
.product-entry:is(a):active { transform:scale(.99); transition-duration:60ms; }
.photo-section { margin-top:clamp(4rem,8vw,7rem); }
.section-heading { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1.5rem; }
.section-heading h2 { font-size:clamp(1.5rem,2.5vw,1.75rem); font-weight:600; }
.gallery-actions { display:flex; align-items:center; gap:.5rem; }
.gallery-count { color:var(--muted); font-size:.875rem; font-variant-numeric:tabular-nums; margin-right:.75rem; }
.icon-button { display:grid; place-items:center; width:44px; min-height:44px; font-size:1.25rem; border:1px solid var(--boundary); border-radius:8px; background:transparent; transition:background 140ms,transform 100ms; }
.icon-button:disabled { color:var(--muted); border-color:var(--line); }
.icon-button:not(:disabled):active { transform:scale(.95); }
.gallery-track { display:flex; gap:1rem; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:var(--boundary) transparent; padding:6px 6px 1rem; margin-inline:-6px; touch-action:pan-x pan-y pinch-zoom; }
.photo-button { --photo-height:clamp(12rem,42vw,21rem); position:relative; display:block; align-self:center; flex:0 0 auto; padding:0; border:0; border-radius:0; background:transparent; scroll-snap-align:start; height:auto; width:calc(var(--photo-height) * var(--aspect)); max-width:100%; aspect-ratio:var(--ratio); overflow:hidden; user-select:none; }
.photo-button img { display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.photo-button::after { content:""; position:absolute; inset:0; border:1px solid transparent; transition:border-color 140ms; pointer-events:none; }
.photo-button:focus-visible { outline-offset:2px; }
.photo-button:active::after { border-color:var(--focus); }
.photo-error { position:absolute; inset:0; background:var(--surface); color:var(--ink); display:grid; place-content:center; padding:1rem; }
.gallery-bottom { display:flex; flex-wrap:wrap; gap:.5rem 2rem; justify-content:space-between; align-items:center; margin-top:1rem; color:var(--muted); font-size:.8125rem; }
.text-link { min-height:44px; display:inline-flex; align-items:center; gap:1rem; font-size:.875rem; color:var(--ink); }
.site-footer { margin-top:4rem; padding-block:1.5rem max(1.5rem,env(safe-area-inset-bottom)); border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; color:var(--muted); font-size:.8125rem; }
.site-footer strong { font-weight:600; color:var(--ink); }
.product-name { font-size:.875rem; color:var(--muted); font-weight:400; letter-spacing:0; }
.album-header nav { margin-left:auto; }
.back-link { min-height:44px; display:flex; align-items:center; gap:.5rem; font-size:.875rem; }
.album-main { padding-top:clamp(2rem,6vw,5rem); }
.album-intro { margin-bottom:3rem; }
.album-intro h1 { font-size:clamp(1.875rem,4vw,2.75rem); line-height:1.2; font-weight:650; margin-bottom:1rem; }
.album-intro p,.gallery-hint { color:var(--muted); }
[data-page="album"] .photo-button { border-radius:8px; --photo-height:clamp(14rem,46vw,28rem); }
.album-note { margin-top:3rem; max-width:44rem; }
.album-note h2 { font-size:1rem; font-weight:600; margin-bottom:.75rem; }
.album-note p { font-size:1rem; color:var(--muted); }
.viewer { --focus:#C0D7E9; position:fixed; inset:0; width:100%; height:100%; height:100dvh; max-width:none; max-height:none; padding:0; margin:0; border:0; background:#172430; color:#F2F7FB; overflow:hidden; }
.viewer::backdrop { background:#172430; }
.viewer-stage { position:absolute; inset:max(5rem,env(safe-area-inset-top)) max(1.25rem,env(safe-area-inset-right)) max(6rem,calc(env(safe-area-inset-bottom) + 5rem)) max(1.25rem,env(safe-area-inset-left)); display:grid; place-items:center; touch-action:pan-y pinch-zoom; }
.viewer-frame { position:relative; max-width:100%; max-height:100%; width:100%; height:100%; display:grid; place-items:center; }
.viewer-frame img { position:absolute; max-width:100%; max-height:100%; width:100%; height:100%; object-fit:contain; user-select:none; pointer-events:none; }
.viewer-low { opacity:1; }
.viewer-high { opacity:0; transition:opacity 180ms linear; }
.viewer-high.loaded { opacity:1; }
.viewer-close { position:absolute; top:max(1rem,env(safe-area-inset-top)); right:max(1.25rem,env(safe-area-inset-right)); min-height:44px; padding:.5rem 1rem; border:1px solid #8298AA; background:#223545; border-radius:8px; color:#F2F7FB; display:flex; align-items:center; gap:1rem; }
.viewer-tools { position:absolute; bottom:max(1.25rem,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:1.5rem; padding:.5rem; border-radius:10px; background:#223545; opacity:0; pointer-events:none; transition:opacity 160ms; }
.viewer.show-tools .viewer-tools,.viewer-tools:focus-within { opacity:1; pointer-events:auto; }
.viewer .icon-button { color:#F2F7FB; border-color:#8298AA; }
.viewer .icon-button:disabled { color:#BDCDD9; border-color:#486174; }
.viewer .icon-button:not(:disabled):hover { background:#304758; }
.viewer-progress { min-width:5rem; text-align:center; font-variant-numeric:tabular-nums; }
.viewer-error { z-index:1; position:relative; max-width:24rem; text-align:center; padding:1.5rem; background:#223545; border-radius:8px; }
.viewer-error button { margin-top:1rem; min-height:44px; padding:.5rem 1.5rem; background:#D4D48A; color:#263B50; border:0; border-radius:6px; }
@media (hover:hover) { .product-entry:is(a):hover { background:var(--hover); } .photo-button:hover::after { border-color:var(--focus); } .icon-button:not(:disabled):hover { background:var(--hover); } .text-link:hover { text-decoration:underline; text-underline-offset:.25em; } }
@media (min-width:48rem) {
  .container,.header-inner { width:min(100% - 5rem,76rem); }
  .hub h1>span { display:inline; }
  .title-rest { margin-left:.18em; }
  .product-space { margin-top:4rem; padding-top:1rem; }
  .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem 2rem; }
  .product-entry { min-height:9rem; padding:2rem; }
  .product-entry h2 { font-size:1.75rem; }
  .entry-action { align-self:flex-end; }
  .gallery-track { scroll-snap-type:none; cursor:grab; }
  .gallery-track.dragging { cursor:grabbing; }
  .photo-button { max-width:none; }
}
@media (min-width:64rem) { .hub h1 { font-size:clamp(3.5rem,4.8vw,4.5rem); } .menu-toggle { display:none; } .main-nav { display:flex; align-items:center; order:0; width:auto; margin-left:auto; gap:1rem; } .nav-unavailable { gap:.5rem; } .header-inner { gap:1.5rem; } .theme-control { margin-left:.5rem; } }
@media (max-width:30rem) { .theme-control svg { display:none; } .entry-action { font-size:0; gap:0; } .product-entry { padding:1.25rem; } .product-entry h2 { font-size:1.375rem; } .product-name { display:none; } .album-header { gap:.5rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } .product-entry:is(a):active,.icon-button:not(:disabled):active { transform:none; } }
@media (prefers-reduced-transparency:reduce) { .site-header { background:var(--page); backdrop-filter:none; } }
@media (prefers-contrast:more) { :root { --line:var(--boundary); } .product-entry { border:1px solid var(--boundary); } .site-header { background:var(--page); backdrop-filter:none; } }