/*
 * P3-006A extracted visual tokens.
 * P3-006B runtime integration: enqueued before the component stylesheet.
 * Preserve/optimize screenshots are required by the G3B acceptance record.
 */

:root {
  --aper-color-canvas: #101219;
  --aper-color-fullscreen: #000000;
  --aper-color-surface: #161926;
  --aper-color-media-surface: #222222;
  --aper-color-placeholder: #e9e9e9;
  --aper-color-text: #ffffff;
  --aper-color-text-strong: rgb(225, 225, 225);
  --aper-color-text-title: rgb(205, 205, 205);
  --aper-color-text-secondary: rgb(156, 156, 156);
  --aper-color-text-muted: #a0a0a0;
  --aper-color-control: #bbbbbb;
  --aper-color-divider: #2d3347;
  --aper-color-field-border: #3d4357;
  --aper-color-caption-overlay: rgba(50, 50, 50, 0.75);

  --aper-font-ui: "Helvetica Neue", Arial, sans-serif;
  --aper-font-caption: "繁Think黑", "PingFang SC", "Microsoft YaHei", sans-serif;

  --aper-logo-width: 55px;
  --aper-header-padding-block-start: 50px;
  --aper-header-padding-block-end: 20px;
  --aper-header-padding-inline-desktop: 120px;
  --aper-header-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  --aper-nav-gap: 35px;
  --aper-nav-font-size: 0.75rem;
  --aper-nav-letter-spacing: 1px;

  --aper-footer-padding-block: 10px;
  --aper-footer-padding-inline: 30px;
  --aper-footer-social-gap: 1.5em;
  --aper-footer-font-size: 0.8rem;

  --aper-stage-media-max-inline: 72vw;
  --aper-stage-media-max-block: 62vh;
  --aper-stage-media-radius: 8px;
  --aper-stage-media-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  --aper-stage-title-size: 0.85rem;
  --aper-stage-title-tracking: 0.5px;

  --aper-album-container-max: 1200px;
  --aper-album-grid-gap: 1.5rem;
  --aper-card-radius: 8px;
  --aper-card-hover-lift: -5px;
  --aper-card-hover-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);

  --aper-control-hit-size: 40px;
  --aper-control-edge: 2vw;
  --aper-control-opacity: 0.7;
  --aper-control-transition: 0.25s;
  --aper-caption-title-size: 1.1rem;
  --aper-caption-body-size: 0.9rem;
  --aper-caption-line-height: 1.5;
  --aper-caption-min-block: 140.396px;
  --aper-caption-padding-block-start: 10px;
  --aper-caption-padding-block-end: 20px;
}

/* Non-CSS interaction constants: homepage 5000ms autoplay; L2 3000ms;
 * fade 900ms; L3 idle 2000ms; pointer movement threshold 3px. */

/* P3-010A: Owner-approved R7 paper palette and measured shared chrome. */
:root {
 --aper-color-canvas:#f4efe7; --aper-color-surface:#f8f4ed; --aper-color-text:#221d16;
 --aper-color-text-strong:#221d16; --aper-color-text-title:#221d16;
 --aper-color-text-secondary:#756d61; --aper-color-text-muted:#756d61;
 --aper-color-control:#756d61; --aper-color-divider:#b9b7b2; --aper-color-accent:#b0482e;
 --aper-color-field-border:#b9b7b2; --aper-header-shadow:none;
 --aper-safe-top:env(safe-area-inset-top,0px); --aper-safe-bottom:env(safe-area-inset-bottom,0px);
 --aper-top-clearance:var(--aper-safe-top); --aper-page-gutter:120px; --aper-footer-gutter:30px;
 --aper-header-top:50px; --aper-header-bottom:20px; --aper-logo-width:55px;
 --aper-footer-clearance:39px; --aper-content-weight:100;
 --aper-ui-paper:var(--aper-color-canvas); --aper-ui-ink:var(--aper-color-text);
 --aper-ui-muted:var(--aper-color-text-muted); --aper-ui-accent:var(--aper-color-accent);
 --aper-ui-gutter:var(--aper-page-gutter); --aper-ui-chrome-top:calc(var(--aper-top-clearance) + 20px);
 --aper-ui-chrome-bottom:calc(var(--aper-safe-bottom) + 24px);
 --paper:var(--aper-color-canvas); --ink:var(--aper-color-text); --ink-muted:var(--aper-color-text-muted);
 --accent:var(--aper-color-accent); --line:rgba(34,29,22,.18); --gutter:var(--aper-page-gutter);
 --safe-bottom:var(--aper-safe-bottom); --footer-h:var(--aper-footer-clearance);
 --chrome-bottom:var(--aper-ui-chrome-bottom); --font-ui:var(--aper-font-ui); --font-cn:var(--aper-font-caption);
 --hkc:1;
}
@media(min-width:701px) and (max-width:1200px) {
 :root { --aper-page-gutter:44px; --aper-header-top:28px; --aper-header-bottom:18px; --aper-nav-gap:28px; }
}
@media(min-width:701px) and (max-width:1100px) and (orientation:portrait) {
 :root { --aper-page-gutter:40px; }
}
@media(max-width:700px) {
 :root { --aper-page-gutter:max(18px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));
 --aper-footer-gutter:var(--aper-page-gutter); --aper-top-clearance:max(56px,var(--aper-safe-top));
 --aper-header-top:8px; --aper-header-bottom:8px; --aper-footer-clearance:44px;
 --aper-ui-chrome-top:calc(var(--aper-top-clearance) + 10px); --aper-ui-chrome-bottom:calc(var(--aper-safe-bottom) + 12px); }
}
@media(max-width:940px) and (orientation:landscape) and (max-height:520px) {
 :root { --aper-page-gutter:max(22px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));
 --aper-top-clearance:max(24px,var(--aper-safe-top)); --aper-header-top:6px; --aper-header-bottom:6px;
 --aper-logo-width:40px; --aper-footer-clearance:0px;
 --aper-ui-chrome-top:calc(var(--aper-top-clearance) + 8px); --aper-ui-chrome-bottom:calc(var(--aper-safe-bottom) + 8px); }
}

:root { --aper-ui-footer-height:var(--aper-footer-clearance); }