/* 共用底：每個案例都先載這支，再載自己的 style.css。
   顏色只從 skin.js 寫進來的 --accent／--bg／--surface／--ink 推導（其他色用 color-mix 算），換皮只改 JSON。
   動效 token：全站一條緩動（借 post-lab M01）＋低回彈彈簧（借 M02）。 */
:root {
  --accent: #4f46e5;
  --accent-ink: #fff;
  --bg: #f6f6f8;
  --surface: #fff;
  --ink: #16161d;
  --radius: 14px;
  --font-sans: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, Menlo, monospace;

  --ink-2: color-mix(in oklab, var(--ink) 66%, var(--bg));
  --ink-3: color-mix(in oklab, var(--ink) 46%, var(--bg));
  --line: color-mix(in oklab, var(--ink) 10%, transparent);
  --line-2: color-mix(in oklab, var(--ink) 16%, transparent);
  --well: color-mix(in oklab, var(--ink) 4%, var(--bg));
  --accent-soft: color-mix(in oklab, var(--accent) 14%, var(--surface));
  --accent-line: color-mix(in oklab, var(--accent) 40%, transparent);

  --ease: cubic-bezier(.45, 0, .15, 1);
  --ease-out: cubic-bezier(.2, .7, .1, 1);
  /* 阻尼比 0.75 的彈簧（過衝約 3%、約 0.5s），M02 springToCSS() 產出 */
  --spring: linear(0, 0.0181, 0.0653, 0.1325, 0.2121, 0.2982, 0.3862, 0.4726, 0.5547, 0.6308, 0.7, 0.7615, 0.8153, 0.8616, 0.9006, 0.9329, 0.9592, 0.98, 0.9962, 1.0083, 1.0169, 1.0228, 1.0263, 1.028, 1.0283, 1.0276, 1.0261, 1.0241, 1.0218, 1.0193, 1.0168, 1.0144, 1.0121, 1.01, 1.0081, 1.0064, 1.0049, 1.0036, 1.0026, 1.0017, 1.001, 1);
  --dur: .8s;
  color-scheme: light;
}
:root[data-mode='dark'] {
  --line: color-mix(in oklab, var(--ink) 12%, transparent);
  --well: color-mix(in oklab, var(--ink) 5%, var(--bg));
  --accent-soft: color-mix(in oklab, var(--accent) 22%, var(--surface));
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.55 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 品牌標（skin.js paintLogo 畫） */
[data-logo] { display: inline-flex; align-items: center; gap: .55em; font-weight: 700; letter-spacing: -.01em; text-decoration: none; }
.logo-mark {
  display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; flex: none;
  background: var(--accent); color: var(--accent-ink); font-size: .82em; font-weight: 800; line-height: 1;
  border-radius: 32%;
}
.logo-mark[data-shape='circle'] { border-radius: 50%; }
.logo-mark[data-shape='square'] { border-radius: 4px; }
.logo-img { height: 1.9em; width: auto; }

/* 進場：依序淡入＋去模糊、不位移太多（借 M22）。--i 由 renderList 寫入，可自己設 --d 覆蓋 */
[data-reveal] { opacity: 0; filter: blur(6px); transform: translateY(10px); }
[data-reveal].is-in {
  opacity: 1; filter: none; transform: none;
  transition: opacity .6s var(--ease-out), filter .6s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: calc(var(--d, calc(var(--i, 0) * 60ms)));
}

/* 換皮切換器 */
.skin-switcher {
  position: fixed; z-index: 90; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 14px;
  background: color-mix(in oklab, #111 88%, transparent); color: #fff;
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border-radius: 999px; box-shadow: 0 10px 30px -12px rgb(0 0 0 / .45), inset 0 0 0 1px rgb(255 255 255 / .08);
  font: 500 12.5px/1 var(--font-sans);
  animation: switcher-in .7s var(--spring) .9s both;
}
.skin-switcher__label { opacity: .78; margin-right: 2px; white-space: nowrap; }
.skin-switcher__dot {
  width: 28px; height: 28px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: conic-gradient(from 210deg, var(--dot) 0 62%, var(--dot-2) 62% 100%);
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .22);
  transition: transform .4s var(--spring), box-shadow .3s var(--ease);
}
.skin-switcher__dot[aria-pressed='true'] { box-shadow: 0 0 0 2px #111, 0 0 0 4px #fff; }
@media (hover: hover) and (pointer: fine) { .skin-switcher__dot:hover { transform: scale(1.12); } }
.skin-switcher__dot:active { transform: scale(.92); }
@keyframes switcher-in { from { opacity: 0; transform: translateY(20px) scale(.9); } }
@media (max-width: 520px) { .skin-switcher__label { display: none; } .skin-switcher { padding: 6px; gap: 8px; } }

/* 換皮的整頁轉場：舊畫面不動，新畫面由 skin.js 用 clip-path 圓長出來 */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* 「回作品集」小標：案例頁左上 */
.back-pill {
  position: fixed; z-index: 90; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px;
  background: color-mix(in oklab, #111 88%, transparent); color: #fff; text-decoration: none;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font: 500 12.5px/1 var(--font-sans); box-shadow: 0 10px 30px -12px rgb(0 0 0 / .45);
}

/* 觸控：圓點 34px＋外圈內距，整顆膠囊高 ≥ 44px */
@media (pointer: coarse) { .skin-switcher__dot { width: 34px; height: 34px; } .skin-switcher { padding: 5px; } .back-pill { min-height: 44px; padding: 0 16px; } }
/* 深色皮：浮動膠囊改成比底亮一階＋細白框，才不會跟背景黏在一起 */
.skin-switcher, .back-pill { box-shadow: 0 10px 30px -12px rgb(0 0 0 / .45), inset 0 0 0 1px rgb(255 255 255 / .14); }
:root[data-mode='dark'] .skin-switcher, :root[data-mode='dark'] .back-pill {
  background: color-mix(in oklab, #fff 14%, var(--bg));
  box-shadow: 0 10px 30px -12px rgb(0 0 0 / .6), inset 0 0 0 1px rgb(255 255 255 / .18);
}

[data-clean] .back-pill, [data-clean] .skin-switcher { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; filter: none; transform: none; }
}