/* 由 scripts/motion/build.mjs 產生，請改 scripts/motion/base.css */
/* ANIMA 配圖的共用外觀：Motion film 的 modules/base.css 與網站 /site/motion/motion.css 同一份。 */
#stage, .mo-stage { --ground:#F7FBFD; --main:#1F59E0; --second:#42BFFF; --accent:#2FB7BA; --ink:#10212A; --text:#30444E; --muted:#557483; --line:#D9E6EC; --panel:#FFFFFF; --wash:#EAF4F9; --deep:#0D2230; color:var(--text); font-family:var(--sans, "Nunito Sans", "Noto Sans TC", "PingFang TC", system-ui, sans-serif); font-synthesis:none;
  /* 不繼承頁面的排版設定，網站與 Motion 播放器畫出來才會一樣 */
  font-size:16px; font-weight:400; line-height:normal; letter-spacing:normal; text-align:left; white-space:normal; text-transform:none }
.mo-stage { position:absolute; left:0; top:0; transform-origin:0 0; overflow:hidden }
.m-ring { position:absolute; border-radius:50%; border:4px solid var(--accent); box-sizing:border-box }

/* ===== 配圖語言：大面積水流漸層背景 + 浮在上面的白色產品介面，色彩只用 anima-brand 五組色階 =====
   背景：tide（天空藍＋深海藍水流）、shallow（淺水）、sky（天空）、foam（浪花白點格）、deep（深水）
   前景：白色圓角面板、搜尋列＋工具 chip、對話、說明清單；小字標籤用等寬字 */
#stage, .mo-stage { --g-ink:#10212A; --g-muted:#557483; --g-line:#D9E6EC; --g-soft:#EAF4F9; --g-accent:#1F59E0; --g-ok:#2FB7BA; --g-warn:#E5484D }
.g-ground { position:absolute; inset:0; overflow:hidden; background:#EAF6FC }
.g-ground.g-shallow { background:#F1F9FD } .g-ground.g-sky { background:#ECF2FD } .g-ground.g-foam { background:#F6F8F9 } .g-ground.g-deep { background:#0A1A23 } .g-ground.g-paper { background:#F5FBFE }
.g-ground.g-foam::before { content:""; position:absolute; inset:0; background:radial-gradient(rgba(51,69,78,.09) 1.4px, transparent 1.6px) 0 0/26px 26px }
.g-blob { position:absolute; border-radius:50%; filter:blur(46px); will-change:transform }
.g-ribbon { position:absolute; inset:0; width:100%; height:100%; overflow:visible }
.g-card { position:absolute; box-sizing:border-box; background:#fff; border-radius:22px; border:1px solid rgba(16,33,42,.07); box-shadow:0 40px 80px -42px rgba(13,37,94,.38), 0 2px 8px rgba(16,33,42,.05); color:var(--g-ink) }
.g-deep .g-card { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); box-shadow:none; color:#fff; backdrop-filter:blur(12px) }
.g-glass { background:rgba(255,255,255,.62); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.7) }
.g-eyebrow { font:500 18px/1.3 ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, monospace; letter-spacing:.01em; color:var(--g-muted) }
.g-deep .g-eyebrow { color:rgba(255,255,255,.6) }
.g-h { font-size:30px; line-height:1.25; font-weight:700; color:var(--g-ink); letter-spacing:-.015em }
.g-deep .g-h { color:#fff }
.g-t { font-size:22px; line-height:1.5; color:var(--g-ink) } .g-deep .g-t { color:#fff }
.g-s { font-size:19px; line-height:1.45; color:var(--g-muted) } .g-deep .g-s { color:rgba(255,255,255,.62) }
.g-pill { display:inline-flex; align-items:center; gap:8px; padding:6px 13px 6px 7px; border-radius:999px; background:var(--g-soft); font-size:18px; color:var(--g-ink); white-space:nowrap; line-height:1.2 }
.g-deep .g-pill { background:rgba(255,255,255,.1); color:#fff }
.g-logo { flex:none; display:inline-block; border-radius:50%; background:center/contain no-repeat; box-shadow:0 0 0 1px rgba(16,33,42,.08) }
.g-app { flex:none; display:inline-grid; place-items:center; color:#fff; font-weight:800; border-radius:28%; line-height:1; font-family:"Nunito Sans", "Noto Sans TC", sans-serif }
.g-btn { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:999px; background:var(--g-ink); color:#fff; font-size:20px; font-weight:700; white-space:nowrap }
.g-btn.g-accent { background:var(--g-accent) } .g-btn.g-ghost { background:var(--g-soft); color:var(--g-ink) }
.g-row { display:flex; align-items:center; gap:12px }
.g-hr { height:1px; background:var(--g-line); border:0; margin:0 }
.g-cmp { display:flex; flex-direction:column; gap:16px; padding:18px 20px }
.g-cmp-bar { display:flex; align-items:center; gap:14px; font-size:24px; color:var(--g-ink) }
.g-caret { display:inline-block; width:2px; height:28px; background:var(--g-ink); vertical-align:middle; margin-left:2px }
.g-ico { flex:none; display:inline-block; vertical-align:middle }
.g-av { flex:none; display:inline-grid; place-items:center; border-radius:50%; color:#fff; font-weight:800 }
.g-tag { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:8px; font-size:16px; font-weight:700; white-space:nowrap }
.g-tag.g-ok { background:color-mix(in srgb, var(--g-ok) 14%, #fff); color:#16797B } .g-tag.g-wait { background:#FFF1E2; color:#A55A12 } .g-tag.g-run { background:#EAF0FF; color:var(--g-accent) } .g-tag.g-no { background:#FDECEC; color:#B4232A }
.g-card.g-dark { background:rgba(10,26,35,.76); border-color:rgba(255,255,255,.14); box-shadow:none; color:#fff; backdrop-filter:blur(14px) }

/* ===== 部落格既有三篇：照原圖重做的資訊圖 ===== */
.f-head { display:grid; gap:10px; justify-items:center; text-align:center }
.f-title { font-weight:900; line-height:1.15; letter-spacing:-.01em; background:linear-gradient(90deg, #1F59E0, #42BFFF); -webkit-background-clip:text; background-clip:text; color:transparent }
.f-sub { font-weight:700; color:#33454E; line-height:1.4 }
.f-card { position:relative; box-sizing:border-box; background:#fff; border:1px solid #D9E6EC; border-radius:22px; box-shadow:0 24px 50px -34px rgba(13,37,94,.45); color:#10212A }
.f-pill { display:inline-flex; align-items:center; gap:18px; padding:12px 34px 12px 16px; border-radius:999px; background:rgba(255,255,255,.9); border:1px solid #C4EBFF; font-size:26px; color:#1F59E0; box-shadow:0 16px 36px -26px rgba(13,37,94,.5) }
.f-pill b { font-weight:800 } .f-pill i { font-style:normal; color:#80D4FF; font-weight:400 }
.f-ic { flex:none; display:inline-grid; place-items:center; border-radius:50% }
.f-num { flex:none; display:inline-grid; place-items:center; border-radius:50%; background:#1F59E0; color:#fff; font-weight:800 }
.f-hl { background:linear-gradient(transparent 12%, #FFF1A8 12%, #FFF1A8 92%, transparent 92%); padding:0 4px; border-radius:4px }
.f-warn { color:#D9433C; border-color:#F5B5AE !important }
.f-arrow { flex:none; width:64px; height:44px; background:linear-gradient(90deg, rgba(66,191,255,.15), #42BFFF); clip-path:polygon(0 30%, 60% 30%, 60% 0, 100% 50%, 60% 100%, 60% 70%, 0 70%) }
.f-arrow.f-red { background:linear-gradient(90deg, rgba(229,72,77,.15), #EF6A5E) }

/* 輕量模式：UI.put 在版位上加 g-lite（觸控裝置或 1024px 以下，掛載時判斷一次）。手機 Safari 對濾鏡與毛玻璃特別吃力，背景又會動。
   光暈改用 shared.js 產生的柔焦漸層、不套濾鏡（獨立圖層，流動只剩合成）；毛玻璃保留原本的半透明，只拿掉背景模糊——底下本來就是柔焦光暈，看起來幾乎一樣 */
.g-lite .g-blob { filter:none }
.g-lite .g-glass { backdrop-filter:none; background:rgba(255,255,255,.72) }
.g-lite .g-deep .g-card, .g-lite .g-card.g-dark { backdrop-filter:none }

/* 網站版位：保留比例避免版面跳動；沒有 JS 時顯示預渲染的最後一格 */
.mo { position:relative; width:100%; max-width:100%; overflow:hidden; display:block }
/* 舞台是固定尺寸：場景裡改寬高（形狀變形）的重排只算舞台內部，不波及整頁 */
.mo > .mo-stage { pointer-events:none; contain:layout paint }
@media (max-width:640px) { .mo[data-m] { aspect-ratio:var(--mar) !important } }
.mo[data-narrow] { aspect-ratio:var(--mar) !important }
/* once 版位的控制鈕（暫停／繼續／重播）：平常很淡，滑到配圖上或鍵盤選到時才清楚；圖說移到 .mo-sr */
.mo-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.mo-ctl { position:absolute; right:10px; bottom:10px; z-index:2; width:30px; height:30px; padding:0; border:0; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:rgba(255,255,255,.72); color:#10212A; box-shadow:0 1px 2px rgba(16,33,42,.12); opacity:.22; transition:opacity .2s }
.mo-ctl[data-s="end"] { opacity:.45 }
.mo:hover .mo-ctl, .mo-ctl:focus-visible { opacity:1 }
.mo-ctl:focus-visible { outline:2px solid #1F59E0; outline-offset:2px }
/* 觸控的點擊範圍放大到 44px，按鈕外觀維持 30px */
.mo-ctl::after { content:""; position:absolute; inset:-7px; border-radius:50% }
@media (hover:none) { .mo-ctl { opacity:.5 } }
/* 播完後整張圖可點重播 */
@media (hover:hover) { .mo[data-end] { cursor:pointer } }