/* 會議記錄 v4：互動式教學（Joey 10/18 09:12「依故事線顯示不同的介面流程，讓使用者邊看動畫邊操作」；分鏡 docs/plans/meeting-notes-howto-interactive-20261018/，Atlas 審過）。
   一格三塊：上＝哪條線＋第幾格；中＝示範手機（照 Apple／Android 說明畫的示意，沒有用官方圖示）；下＝真的按的東西。
   動畫只用 CSS（不載套件）；prefers-reduced-motion 時手機停在那一格的樣子，流程照舊。
   字：內文 17px 以上、標題 26px 以上、按鈕 56px 高（同 drop.css 的無障礙規格）。 */
.d4g { --rec: #E5352B; --blue: #02539C; --soft: #6b5a48; --ink: #2b2118; --loop: 3.6s; --expo: cubic-bezier(.16, 1, .3, 1);
  position: relative; min-height: calc(100svh - 64px); padding: 18px 18px 22px; color: var(--ink); overflow: clip; /* 不能用 hidden：會讓底部按鈕卡的 sticky 失效 */
  background: radial-gradient(130% 70% at 85% -5%, rgba(255, 236, 190, .85), transparent 55%), linear-gradient(#F4EEE4, #E6DCCB); }
.d4g[hidden] { display: none; }
body.d4-guiding #d4, body.d4-guiding #d4-price, body.d4-guiding .d4-by { display: none; }
.d4g > * { max-width: 620px; margin-left: auto; margin-right: auto; }
.d4g button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.d4g .u { text-decoration: underline; text-underline-offset: 4px; font: 600 16px/1.5 var(--font-body); color: #5B6B7C; min-height: 44px; }

/* ── 開場 ── */
.g-hello h2 { margin: 26px 0 8px;   /* 10/18 主頁換 v4（Atlas）：整頁只留一個 h1＝「會議記錄產生器」，這句改 h2，樣式照舊 */ font: 900 clamp(29px, 7.6vw, 40px)/1.32 var(--font-head); }
.g-hello p { margin: 0; font: 500 17px/1.6 var(--font-body); color: #5B6B7C; }
.g-lines { display: flex; flex-direction: column; gap: 12px; margin: 26px auto 0; }
.g-line { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px; border-radius: 18px; background: #FFFDF9; text-align: left;
  box-shadow: 0 14px 30px -18px rgba(70, 45, 20, .55), 0 0 0 1px rgba(120, 90, 50, .08); transition: transform .3s var(--expo), box-shadow .3s; }
.g-line:hover, .g-line:focus-visible { transform: translateY(-2px); box-shadow: 0 0 0 2.5px var(--blue), 0 18px 30px -18px rgba(2, 40, 80, .6); outline: none; }
.g-line b { display: block; font: 900 20px/1.3 var(--font-head); }
.g-line small { display: block; margin-top: 3px; font: 500 15px/1.4 var(--font-body); color: #5B6B7C; }
.g-line::after { content: "›"; margin-left: auto; font: 400 30px/1 var(--font-body); color: #B9A88F; }
.g-line em { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-style: normal; }
.g-ic-cal { background: #E3ECF7; } .g-ic-cal::before { content: ""; width: 22px; height: 20px; border-radius: 4px; border: 2.5px solid var(--blue); border-top-width: 6px; }
.g-ic-mic { background: #FDECEA; } .g-ic-mic::before { content: ""; width: 22px; height: 16px; background: repeating-linear-gradient(90deg, var(--rec) 0 2.5px, transparent 2.5px 5px); clip-path: polygon(0 40%, 15% 10%, 30% 50%, 45% 0, 60% 35%, 75% 15%, 100% 45%, 100% 100%, 0 100%); }
.g-ic-q { background: #F3EBDD; font: 900 24px var(--font-head); color: #8b6a2e; } .g-ic-q::before { content: "?"; }
.g-os { margin: 18px auto 0; font: 500 16px/1.6 var(--font-body); color: #5B6B7C; }
.g-os .u { margin-left: 4px; min-height: 0; }
.g-more { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 6px; }

/* ── 一格 ── */
.g-top { display: flex; align-items: center; gap: 10px; }
.g-chip { padding: 7px 12px; border-radius: 999px; background: #fff; color: var(--blue); font: 700 15px var(--font-body); box-shadow: 0 4px 12px -6px rgba(2, 40, 80, .35); }
.g-top .u { min-height: 0; font-size: 15px; }
.g-cnt { margin-left: auto; font: 700 15px var(--font-body); color: #5B6B7C; }
.g-cnt b { color: var(--ink); font-size: 20px; }
.g-ticks { display: flex; gap: 5px; margin-top: 12px; }
.g-ticks i { flex: 1; height: 4px; border-radius: 2px; background: rgba(14, 20, 27, .14); }
.g-ticks i.on { background: var(--blue); }
.g-ticks i.tail { background: rgba(2, 83, 156, .12); }
.g-ticks i.tail.on { background: var(--blue); }
.g-toast { margin-top: 12px; padding: 11px 14px; border-radius: 12px; background: #0E2A44; color: #F2F6FA; font: 700 16px/1.5 var(--font-body); }
.g-toast small { display: block; font-weight: 500; font-size: 15px; color: #B3CBE1; }
.g-cap h2 { margin: 16px 0 4px; font: 900 26px/1.32 var(--font-head); }
.g-cap p { margin: 0; font: 500 17px/1.6 var(--font-body); color: #5B6B7C; }
.g-stage { position: relative; height: 420px; margin-top: 8px; perspective: 1100px; }
.g-pool { position: absolute; left: 50%; top: 392px; width: 220px; height: 40px; margin-left: -110px; border-radius: 50%; background: radial-gradient(closest-side, rgba(70, 45, 20, .35), transparent); filter: blur(6px); }
.g-act { margin-top: 6px; padding: 14px 14px 8px; border-radius: 20px; background: rgba(255, 253, 249, .94); box-shadow: 0 18px 40px -20px rgba(70, 45, 20, .55), 0 0 0 1px rgba(120, 90, 50, .08); }
.g-hint { margin: 0 2px 10px; font: 600 17px/1.55 var(--font-body); color: #4a4036; }
.g-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 56px; padding: 8px 14px; border-radius: 14px; background: var(--blue) !important; color: #fff !important;
  font: 800 18px/1.3 var(--font-body) !important; text-decoration: none; box-shadow: 0 10px 20px -10px rgba(2, 60, 120, .7); transition: transform .15s, filter .15s; text-align: center; }
.g-btn:active { transform: scale(.97); filter: brightness(.92); }
.g-btn.drop { flex-direction: column; gap: 2px; min-height: 72px; background: #FBF8F2 !important; color: #5a4a38 !important; border: 2px dashed #C7B79F !important; box-shadow: none; }
.g-btn.drop small { font: 600 15px var(--font-body); color: #8b7a66; }
.g-btn.drop.over { border-color: var(--blue) !important; background: #F2F7FC !important; }
.g-sec { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; }
.g-help { margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: #FFF8E8; font: 500 17px/1.65 var(--font-body); }
.g-help p { margin: 0 0 6px; }
.g-help .u { min-height: 0; color: var(--blue); }
.g-got { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.g-got span { padding: 6px 10px; border-radius: 10px; background: #fff; font: 700 15px var(--font-body); box-shadow: 0 6px 12px -8px rgba(60, 40, 20, .5); }
.d4g input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* 收尾：教學縮成一條，桌子（#d4）接著演 */
.d4g.tail { min-height: 0; padding-bottom: 6px; }
.d4g.tail .g-cap h2 { font-size: 22px; margin-top: 10px; }

/* 時數不夠（T3） */
.g-short { margin-top: 12px; }
.g-plan { display: flex; gap: 8px; margin-bottom: 10px; }
.g-plan button { flex: 1; padding: 10px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px #E1D6C4; text-align: left; font: 800 17px/1.3 var(--font-body); }
.g-plan button small { display: block; font: 500 15px/1.4 var(--font-body); color: #5B6B7C; }
.g-plan button[aria-pressed=true] { box-shadow: inset 0 0 0 2.5px var(--blue); background: #F2F7FC; }

/* ── 示範手機（抄分鏡 A） ── */
.g-ph { position: absolute; left: 50%; top: 0; width: 236px; height: 496px; margin-left: -118px; border-radius: 46px; background: #11161D; padding: 9px; transform-origin: 50% 0;
  transform: scale(.82) rotateY(-7deg) rotateX(4deg); transition: transform .8s var(--expo);
  box-shadow: inset 0 0 0 1.5px #3a4350, 0 2px 0 #000, 0 60px 80px -40px rgba(10, 20, 35, .55), 0 24px 40px -24px rgba(10, 20, 35, .45); }
.g-ph::after { content: ""; position: absolute; left: 50%; top: 18px; width: 74px; height: 21px; border-radius: 12px; background: #000; transform: translateX(-50%); z-index: 9; }
.g-ph.and::after { width: 12px; height: 12px; border-radius: 50%; top: 20px; }
.g-ph.and { border-radius: 34px; } .g-ph.and .g-scr { border-radius: 26px; }
.g-scr { position: relative; width: 100%; height: 100%; border-radius: 37px; overflow: hidden; background: #fff; color: #0E141B; font-family: "Noto Sans TC", "PingFang TC", sans-serif; }
.g-sb { position: absolute; left: 24px; right: 20px; top: 15px; display: flex; justify-content: space-between; font: 700 12px system-ui, sans-serif; z-index: 8; }
.g-glare { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, .22), transparent 38%); pointer-events: none; z-index: 10; }
.g-scene { position: absolute; inset: 0; animation: g-in .6s var(--expo) both; }
@keyframes g-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }

/* 手指：每一圈 3.6 秒，按下去、漣漪、放開 */
.g-tap { position: absolute; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; background: rgba(2, 83, 156, .18); box-shadow: 0 0 0 2px rgba(2, 83, 156, .7), 0 6px 16px rgba(0, 0, 0, .2); z-index: 12;
  animation: g-tap var(--loop) var(--expo) infinite; }
.g-tap::before, .g-tap::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(2, 83, 156, .45); animation: g-ring var(--loop) ease-out infinite; }
.g-tap::after { inset: -22px; border-color: rgba(2, 83, 156, .2); animation-delay: .08s; }
.g-tap.lt { background: rgba(255, 255, 255, .25); box-shadow: 0 0 0 2px rgba(255, 255, 255, .95), 0 6px 16px rgba(0, 0, 0, .3); }
.g-tap.lt::before { border-color: rgba(255, 255, 255, .7); } .g-tap.lt::after { border-color: rgba(255, 255, 255, .3); }
@keyframes g-tap { 0%, 22% { opacity: 0; transform: scale(1.5); } 32% { opacity: 1; transform: scale(1); } 40% { transform: scale(.82); } 52% { transform: scale(1); opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes g-ring { 0%, 36% { opacity: 0; transform: scale(.6); } 42% { opacity: 1; } 70%, 100% { opacity: 0; transform: scale(1.35); } }

/* 語音備忘錄（iPhone）／錄音 App（Android 通用） */
.g-vm { position: absolute; inset: 0; background: #F2F2F7; }
.g-vm.and { background: #F7F9FC; }
.g-vm .ttl { position: absolute; left: 18px; top: 48px; font: 800 25px/1 "Noto Sans TC", sans-serif; }
.g-vm.and .ttl { font-size: 21px; font-weight: 700; }
.g-vm .row { position: absolute; left: 18px; right: 18px; height: 46px; border-bottom: 1px solid #D9D9DE; font: 700 13px/1.3 sans-serif; }
.g-vm .row small { display: block; font: 500 11px system-ui, sans-serif; color: #8A8A90; }
.g-vm .row.hl { background: #E3ECF7; margin: 0 -8px; padding: 6px 8px 0; border-radius: 10px; border: 0; animation: g-hl var(--loop) infinite; }
@keyframes g-hl { 0%, 36% { background: transparent; } 44%, 100% { background: #E3ECF7; } }
.g-vm .more { position: absolute; right: 20px; top: 92px; width: 26px; height: 26px; border-radius: 50%; background: #E3ECF7; color: #0A84FF; font: 900 14px/26px sans-serif; text-align: center; }
.g-sheet { position: absolute; left: 0; right: 0; bottom: 0; height: 300px; border-radius: 24px 24px 0 0; background: #fff; box-shadow: 0 -10px 30px rgba(0, 0, 0, .08); text-align: center; }
.g-vm.and .g-sheet { border-radius: 0; height: 330px; box-shadow: none; background: #F7F9FC; }
.g-sheet h5 { margin: 22px 0 2px; font: 800 15px sans-serif; }
.g-sheet .tm { font: 500 34px/1.2 system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.g-wave { position: relative; height: 70px; margin: 12px 14px 0; display: flex; align-items: center; gap: 2px; justify-content: center; }
.g-wave i { display: block; width: 2.4px; border-radius: 2px; background: #1C1C1E; }
.g-wave.grow { justify-content: flex-start; padding-left: 50%; }
.g-wave.grow i { animation: g-bar var(--loop) steps(1) infinite; }
@keyframes g-bar { 0%, 40% { opacity: 0; } 41%, 100% { opacity: 1; } }
.g-wave .pl { position: absolute; left: 50%; top: -6px; bottom: -6px; width: 2px; background: var(--rec); }
.g-wave .pl::before { content: ""; position: absolute; left: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--rec); }
.g-rb { position: absolute; left: 50%; bottom: 34px; width: 64px; height: 64px; margin-left: -32px; border-radius: 50%; box-shadow: 0 0 0 4px #fff, 0 0 0 6px #D4D4D9; display: grid; place-items: center; animation: g-press var(--loop) var(--expo) infinite; }
.g-rb i { width: 54px; height: 54px; border-radius: 50%; background: var(--rec); }
.g-rb.stop i { width: 26px; height: 26px; border-radius: 6px; }
.g-vm.and .g-rb { box-shadow: none; width: 70px; height: 70px; margin-left: -35px; }
.g-vm.and .g-rb i { width: 70px; height: 70px; }
.g-vm.and .g-rb.stop i { width: 70px; height: 70px; border-radius: 50%; position: relative; }
.g-vm.and .g-rb.stop i::after { content: ""; position: absolute; inset: 24px; border-radius: 4px; background: #fff; }
@keyframes g-press { 0%, 34% { transform: scale(1); } 40% { transform: scale(.88); } 54%, 100% { transform: scale(1); } }
.g-note { position: absolute; left: 12px; right: 12px; top: 44px; padding: 10px 12px; border-radius: 16px; background: rgba(250, 250, 252, .97); box-shadow: 0 10px 24px rgba(0, 0, 0, .18); font: 700 12px/1.35 sans-serif; display: flex; gap: 10px; align-items: center; z-index: 6;
  animation: g-drop var(--loop) var(--expo) infinite; }
.g-note i { flex: none; width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, #FF5F6D, #FFC371); display: grid; place-items: center; color: #fff; font-style: normal; font-size: 16px; position: relative; }
.g-note i::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 3px; background: var(--rec); transform: rotate(-35deg); box-shadow: 0 0 0 1.5px #fff; animation: g-strike var(--loop) infinite; transform-origin: 0 50%; }
.g-note small { display: block; font-weight: 500; color: #8A8A90; }
@keyframes g-drop { 0% { transform: translateY(-80px); opacity: 0; } 18%, 80% { transform: none; opacity: 1; } 95%, 100% { transform: translateY(-80px); opacity: 0; } }
@keyframes g-strike { 0%, 40% { transform: rotate(-35deg) scaleX(0); } 52%, 100% { transform: rotate(-35deg) scaleX(1); } }

/* 分享表單（iPhone）／分享面板（Android） */
.g-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .28); animation: g-fade var(--loop) infinite; }
@keyframes g-fade { 0%, 4% { opacity: 0; } 20%, 100% { opacity: 1; } }
.g-share { position: absolute; left: 0; right: 0; bottom: 0; height: 356px; border-radius: 22px 22px 0 0; background: #F2F2F7; box-shadow: 0 -20px 40px rgba(0, 0, 0, .18); padding: 14px 12px 0; animation: g-up var(--loop) var(--expo) infinite; }
@keyframes g-up { 0%, 4% { transform: translateY(100%); } 22%, 100% { transform: none; } }
.g-share .fh { display: flex; gap: 10px; align-items: center; padding: 4px 4px 12px; border-bottom: 1px solid #DCDCE1; text-align: left; }
.g-share .fh i { width: 40px; height: 40px; border-radius: 10px; background: #fff; display: grid; place-items: center; }
.g-share .fh i::before { content: ""; width: 18px; height: 14px; background: repeating-linear-gradient(90deg, var(--rec) 0 2px, transparent 2px 4px); }
.g-share .fh b { font: 800 13px/1.3 sans-serif; } .g-share .fh small { display: block; font: 500 11px system-ui, sans-serif; color: #8A8A90; }
.g-share .apps { display: flex; gap: 12px; padding: 12px 4px; border-bottom: 1px solid #DCDCE1; }
.g-share .apps span { width: 44px; text-align: center; font: 600 9.5px/1.2 sans-serif; color: #3a3a3f; }
.g-share .apps span::before { content: ""; display: block; width: 44px; height: 44px; border-radius: 12px; margin-bottom: 5px; background: var(--c); }
.g-share .acts { margin-top: 10px; border-radius: 12px; background: #fff; overflow: hidden; text-align: left; }
.g-share .acts div { height: 40px; padding: 0 14px; display: flex; align-items: center; border-bottom: 1px solid #EBEBF0; font: 600 13px sans-serif; }
.g-share .acts .hit { animation: g-hit var(--loop) infinite; }
@keyframes g-hit { 0%, 38% { background: #fff; color: inherit; } 44%, 100% { background: #E3ECF7; color: #02539C; } }
.g-share.and { border-radius: 26px 26px 0 0; background: #fff; height: 300px; }
.g-share.and h6 { margin: 4px 6px 12px; font: 600 14px sans-serif; text-align: left; }
.g-share.and .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 6px; padding: 4px; }
.g-share.and .grid span { text-align: center; font: 600 10px/1.25 sans-serif; color: #3a3a3f; border-radius: 12px; padding: 4px 0; }
.g-share.and .grid span::before { content: ""; display: block; width: 40px; height: 40px; margin: 0 auto 5px; border-radius: 50%; background: var(--c); }
.g-share.and .grid .hit { animation: g-hit var(--loop) infinite; }
.g-amenu { position: absolute; right: 12px; top: 40px; width: 150px; border-radius: 12px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); padding: 6px 0; z-index: 5; text-align: left; animation: g-fadein var(--loop) infinite; }
.g-amenu div { padding: 10px 14px; font: 600 12.5px sans-serif; }
.g-amenu .hit { animation: g-hit var(--loop) infinite; }
@keyframes g-fadein { 0%, 6% { opacity: 0; transform: scale(.9); } 18%, 100% { opacity: 1; transform: none; } }

/* 檔案選擇器（iPhone「最近項目」／Android「最近」） */
.g-ours { position: absolute; inset: 0; background: radial-gradient(120% 70% at 70% 0%, #F7F1E6, #E2D6C3); }
.g-ours .say { position: absolute; left: 18px; right: 16px; top: 58px; font: 900 19px/1.35 "Noto Serif TC", serif; }
.g-pick { position: absolute; left: 0; right: 0; bottom: 0; top: 46px; border-radius: 18px 18px 0 0; background: #F2F2F7; box-shadow: 0 -14px 30px rgba(0, 0, 0, .2); text-align: left; animation: g-up var(--loop) var(--expo) infinite; }
.g-pick .hd { display: flex; justify-content: space-between; padding: 14px 16px 6px; font: 600 12px sans-serif; color: #0A84FF; }
.g-pick .hd b { color: #0E141B; font-weight: 800; }
.g-pick h6 { margin: 6px 16px 8px; font: 800 22px sans-serif; }
.g-pick .r { display: flex; align-items: center; gap: 10px; margin: 0 12px; padding: 9px 8px; border-bottom: 1px solid #DCDCE1; font: 700 12.5px/1.3 sans-serif; }
.g-pick .r small { display: block; font: 500 10.5px system-ui, sans-serif; color: #8A8A90; }
.g-pick .r i { flex: none; width: 30px; height: 36px; border-radius: 5px; background: #fff; box-shadow: inset 0 0 0 1px #D8D8DE; display: grid; place-items: center; }
.g-pick .r i::before { content: ""; width: 14px; height: 10px; background: repeating-linear-gradient(90deg, var(--rec) 0 2px, transparent 2px 3.5px); }
.g-pick .r i.doc::before { background: repeating-linear-gradient(#bbb 0 2px, transparent 2px 4px); height: 16px; }
.g-pick .r.new { border-radius: 10px; border-bottom-color: transparent; animation: g-hl var(--loop) infinite; background: #E3ECF7; }
.g-pick .tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 52px; display: flex; justify-content: space-around; align-items: center; border-top: 1px solid #DCDCE1; font: 700 10px sans-serif; color: #8A8A90; }
.g-pick .tabs b { color: #0A84FF; }
.g-pick.and { background: #fff; border-radius: 0; top: 40px; }
.g-pick.and .hd { color: #0E141B; font-size: 15px; justify-content: flex-start; gap: 16px; padding: 12px 14px; }
.g-pick.and .side { position: absolute; left: 0; top: 40px; bottom: 0; width: 64%; background: #fff; box-shadow: 8px 0 20px rgba(0, 0, 0, .15); padding: 14px 0; z-index: 3; animation: g-side var(--loop) var(--expo) infinite; }
.g-pick.and .side div { padding: 10px 16px; font: 600 12.5px sans-serif; border-radius: 0 20px 20px 0; margin-right: 10px; }
.g-pick.and .side .hit { animation: g-hit var(--loop) infinite; }
@keyframes g-side { 0%, 8% { transform: translateX(-105%); } 24%, 100% { transform: none; } }

/* 相機（拍開會通知） */
.g-cam { position: absolute; inset: 0; background: #141414; }
.g-cam .board { position: absolute; inset: 40px 0 110px; background: linear-gradient(160deg, #C9B08A, #A88B63); }
.g-cam .notice { position: absolute; left: 34px; top: 52px; width: 150px; height: 200px; background: #FBFAF6; transform: rotate(-3deg); box-shadow: 0 10px 18px -8px rgba(0, 0, 0, .5); padding: 14px 12px; }
.g-cam .notice b { display: block; font: 900 10px/1.3 "Noto Serif TC", serif; text-align: center; }
.g-cam .notice b + b { font-size: 12px; margin: 2px 0 8px; }
.g-cam .notice i { display: block; height: 3px; margin: 6px 0; background: #cfc8bb; border-radius: 2px; }
.g-cam .notice i:nth-child(odd) { width: 60%; }
.g-cam .pin { position: absolute; left: 104px; top: 46px; width: 10px; height: 10px; border-radius: 50%; background: var(--rec); }
.g-cam .frm { position: absolute; inset: 78px 22px 140px; }
.g-cam .frm::before, .g-cam .frm::after { content: ""; position: absolute; width: 26px; height: 26px; border: 3px solid #FFD43B; }
.g-cam .frm::before { left: 0; top: 0; border-right: 0; border-bottom: 0; } .g-cam .frm::after { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.g-cam .shut { position: absolute; left: 50%; bottom: 26px; width: 58px; height: 58px; margin-left: -29px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px #141414, 0 0 0 7px #fff; animation: g-press var(--loop) var(--expo) infinite; }
.g-cam .mode { position: absolute; left: 0; right: 0; bottom: 96px; text-align: center; font: 700 10px sans-serif; letter-spacing: .2em; color: #FFD43B; }
.g-cam .flash { position: absolute; inset: 0; background: #fff; opacity: 0; animation: g-flash var(--loop) infinite; z-index: 7; }
@keyframes g-flash { 0%, 40% { opacity: 0; } 43% { opacity: .85; } 60%, 100% { opacity: 0; } }

/* 1280：手機左、字和按鈕右 */
@media (min-width: 900px) {
  .d4g.step > .g-body { display: grid; grid-template-columns: 320px 1fr; gap: 0 36px; align-items: start; max-width: 860px; }
  .d4g.step .g-stage { grid-row: 1 / span 3; grid-column: 1; height: 470px; }
  .d4g.step .g-ph { transform: scale(.92) rotateY(-7deg) rotateX(4deg); }
  .d4g.step .g-pool { top: 440px; }
  .d4g.step .g-act { margin-top: 18px; }
}
/* 減少動態：手機停在這一格的樣子（每個動畫的最後一格就是預設樣式），流程照舊 */
@media (prefers-reduced-motion: reduce) {
  .d4g *, .d4g *::before, .d4g *::after { animation: none !important; transition: none !important; }
  .g-tap::before, .g-tap::after, .g-cam .flash { opacity: 0; }
}
/* 開頁先不露出桌子，等 guide.js 決定要不要先走教學（避免桌子閃一下又換成開場）；JS 沒跑起來時 1.5 秒後桌子照樣出來 */
body:not(.d4-g-ready) #d4 { visibility: hidden; animation: d4-g-reveal 0s 1.5s forwards; }
@keyframes d4-g-reveal { to { visibility: visible; } }
/* 手機直式：示範手機縮一點，讓「做好了」那顆按鈕在 390×844 第一屏裡看得到 */
@media (max-width: 899px) {
  .g-stage { height: 372px; }
  .g-ph { transform: scale(.73) rotateY(-7deg) rotateX(4deg); }
  .g-pool { top: 348px; }
}
.g-vm.and .g-sheet { height: 290px; }
/* 第一屏一定看得到主按鈕＋跳過（Atlas 10/18：390×664、375×548 實測按鈕在摺線下）：
   按鈕卡黏在畫面底部；手機依可視高度縮放（guide.js fit()）；矮螢幕改成「手機在左、說明在右」 */
@media (max-width: 899px) {
  .d4g.step .g-act { position: sticky; bottom: calc(8px + var(--ecb, 0px)); z-index: 20; }
  .d4g.step .g-help { max-height: 34svh; overflow: auto; }
  .d4g.step.compact .g-body { display: grid; grid-template-columns: auto 1fr; gap: 0 14px; align-items: start; }
  .d4g.step.compact .g-stage { grid-column: 1; grid-row: 1; margin-top: 14px; }
  .d4g.step.compact .g-cap { grid-column: 2; grid-row: 1; }
  .d4g.step.compact .g-cap h2 { font-size: 23px; margin-top: 12px; }
  .d4g.step.compact .g-cap p { font-size: 16px; }
  .d4g.step.compact .g-act { grid-column: 1 / -1; }
  .d4g.step.compact .g-ph { left: 0; margin-left: 0; transform-origin: 0 0; }
  .d4g.step.compact .g-pool { display: none; }
  .d4g.step.compact .g-toast { padding: 8px 12px; font-size: 15px; }
  .d4g.step.compact .g-toast small { display: none; }
  /* 矮螢幕：按鈕卡只留按鈕與連結（提示句與「收到的東西」收起來），示範手機才不會被蓋住 */
  .d4g.step.compact .g-act > .g-hint, .d4g.step.compact .g-got { display: none; }
}
/* 說明展開時示範手機先收起來（不然說明撐高的按鈕卡會蓋住手機，Atlas 10/18）；收起說明就回來 */
.d4g.step.helping .g-stage { display: none; }
.d4g.step.helping .g-help { max-height: none; }
.d4g.step.helping .g-act { position: static; }   /* 說明展開時按鈕卡跟著內容走，不黏底蓋住標題 */

/* Joey 10/18 15:03 實機（iPhone 17 Pro Max、Discord 內建瀏覽器）說資遣費開場「字好擠」，這套選項卡是同一份：
   大標降一階（襯線粗體 20px → 18px 黑體粗）、圖示框縮小、卡片內外留白加大、卡片間距加大；開場那句大標也降一階 */
.g-hello h2 { font-size: clamp(25px, 6.4vw, 34px); margin-top: 18px; }
.g-lines { gap: 14px; }
.d4g .g-line { gap: 14px; padding: 16px 18px; }   /* 要寫 .d4g .g-line：上面 .d4g button { padding: 0 } 權重比 .g-line 高，原本卡片其實一直沒有內距 */
.g-line b { font: 700 18px/1.35 var(--font-body); }
.g-line small { margin-top: 4px; font-size: 15px; }
.g-line em { width: 40px; height: 40px; border-radius: 12px; }