@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700;800;900&display=swap');
@import url('/ui.css?v=20260914e');
:root{--ink:#111;--muted:#747474;--paper:#f8f8f6;--line:#d8d8d5;--aqua:#9feee5;--radius:32px;--font:"Noto Sans TC",-apple-system,"PingFang TC",sans-serif}*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}body{font-family:var(--font);background:var(--paper);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased}.shell{width:min(1180px,calc(100% - 48px));margin:auto}a{color:inherit;text-decoration:none}.nav{height:96px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.brand{display:flex;align-items:center;gap:10px;font-size:21px;letter-spacing:-.04em}.brand img{border-radius:10px}.nav-links{display:flex;gap:38px;font-size:14px;font-weight:600}.nav-links a:hover{opacity:.5}.nav-cta{justify-self:end}.pill{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:52px;padding:0 25px;border-radius:99px;font-size:14px;font-weight:800;transition:.2s}.pill:hover{transform:translateY(-2px)}.dark{background:#151515;color:#fff}.light{background:#fff;color:#111}.outline{border:1px solid #555;color:#fff}.hero{text-align:center;padding:90px 0 105px}.eyebrow,.kicker,.intro>p{font-size:12px;text-transform:uppercase;letter-spacing:.14em;font-weight:800}.eyebrow{display:flex;align-items:center;justify-content:center;gap:10px}.eyebrow i{width:7px;height:7px;border-radius:50%;background:#13cfc6;box-shadow:0 0 0 5px #bdf5ef}.hero h1{font-size:clamp(58px,8.7vw,124px);line-height:.98;letter-spacing:-.075em;font-weight:900;margin:28px auto 37px}.hero h1 span,.every h2 span,.steps h2 span,.pricing h2 span,.final h2 span{color:#9a9a98}.hero-copy{max-width:760px;margin:auto;color:#686868;font-size:18px;line-height:1.8}.actions{display:flex;gap:25px;align-items:center;justify-content:center;margin-top:35px}.under{font-size:14px;font-weight:700;border-bottom:1px solid #999;padding-bottom:4px}.micro{display:block;font-size:11px;color:#999;margin-top:18px}.demo{background:#dededc;border-radius:38px;padding:22px;overflow:hidden}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px}.stats>div{background:#ffffffa6;border:1px solid #fff;border-radius:22px;padding:22px 25px}.stats small{display:block;font-size:12px;font-weight:800}.stats strong{font-size:49px;line-height:1.1;letter-spacing:-.06em}.stats em{font-style:normal;font-size:12px;letter-spacing:0;margin-left:5px;color:#777}.stats .active{background:#171717;color:#fff}.workspace{position:relative;min-height:520px;border-radius:25px;background:linear-gradient(145deg,#f7f7f6,#e8e8e5);box-shadow:0 25px 70px #0000001f;overflow:hidden}.window{height:62px;display:flex;align-items:center;padding:0 20px;border-bottom:1px solid #ddd;color:#777;font-size:12px}.window i{width:10px;height:10px;border-radius:50%;background:#cacaca;margin-right:7px}.window span{position:absolute;left:50%;transform:translateX(-50%);font-weight:700}.window b{margin-left:auto;color:#14a69e}.message{max-width:690px;margin:62px auto;padding:0 40px}.message label{display:block;font-size:10px;font-weight:800;letter-spacing:.12em;color:#999;margin-bottom:10px}.raw{font-size:19px;color:#8d8d8d;text-decoration:line-through #bbb}.transform{display:flex;align-items:center;gap:5px;margin:24px 0;color:#22a89e;font-size:11px;font-weight:800}.transform:before,.transform:after{content:"";height:1px;background:#d5d5d2;flex:1}.transform i{width:4px;height:4px;background:#20cfc5;border-radius:50%;animation:blink 1.2s infinite}.polished{font-size:28px;font-weight:700;line-height:1.65;letter-spacing:-.025em}.polished i{display:inline-block;width:2px;height:30px;background:#12bcb3;animation:blink .8s infinite}.dock{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);height:62px;width:min(440px,80%);border-radius:18px;background:#151515;color:#fff;display:flex;align-items:center;padding:0 18px;box-shadow:0 18px 40px #0004;font-size:12px}.dock span{margin-left:15px;color:#bbb}.dock>b{margin-left:auto;background:#333;padding:6px 9px;border-radius:7px;font-size:9px}.waves{height:28px;display:flex;align-items:center;gap:3px}.waves i{width:3px;height:30%;border-radius:2px;background:var(--aqua);animation:wave 1s ease-in-out infinite}.waves i:nth-child(2n){animation-delay:.15s}.waves i:nth-child(3n){animation-delay:.3s}@keyframes wave{50%{height:100%}}@keyframes blink{50%{opacity:.2}}.every{text-align:center;padding:170px 0}.every h2,.intro h2,.privacy h2,.final h2{font-size:clamp(45px,6.4vw,84px);line-height:1.04;letter-spacing:-.065em}.every>p{max-width:550px;margin:30px auto 50px;color:var(--muted)}.apps{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}.apps i{font-style:normal;width:74px;height:74px;border-radius:19px;display:grid;place-items:center;font-size:24px;font-weight:900;background:#fff;box-shadow:0 10px 30px #00000012}.apps .line{background:#20cb62;color:#fff}.apps .notes{background:#ffd95b}.apps .mail{background:#1879ef;color:#fff}.apps .chat{background:#111;color:#fff}.apps .doc{background:#226bc3;color:#fff}.apps .web{color:#149d95}.apps .msg{background:#55c55b;color:#fff}.platform{margin-top:44px;display:flex;justify-content:center;gap:8px}.platform span{border:1px solid var(--line);border-radius:99px;padding:8px 13px;font-size:11px;font-weight:700}.platform b{color:#17a89e;margin-left:5px}.features,.steps,.pricing,.faq{padding:140px 0}.intro{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:70px}.intro>p{padding-top:13px}.intro h2{text-align:right}.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.card{min-height:400px;border-radius:var(--radius);background:#e9e9e7;padding:34px;position:relative;overflow:hidden}.card.wide{grid-column:span 2;min-height:470px}.card>small{font-size:11px;color:#8c8c8c;font-weight:700}.card h3{font-size:34px;letter-spacing:-.04em;margin:55px 0 14px}.card p{max-width:470px;color:#686868;font-size:14px}.black{background:#171717;color:white}.black p{color:#aaa}.tag{position:absolute;right:28px;top:28px;border:1px solid #555;border-radius:99px;padding:7px 12px;font-size:10px}.keyboard{position:absolute;right:45px;bottom:45px;width:48%;display:grid;grid-template-columns:repeat(5,1fr);gap:7px;transform:rotate(-3deg)}.keyboard i,.keyboard b{font-style:normal;height:59px;border:1px solid #4a4a4a;background:#262626;border-radius:11px;display:grid;place-items:center;font-size:14px}.keyboard b{grid-column:span 5;color:#111;background:var(--aqua)}.aqua{background:var(--aqua)}.lines{position:absolute;left:34px;right:34px;bottom:35px;height:120px;background:#ffffffa6;border-radius:20px;padding:28px}.lines i{display:block;height:8px;background:#bddbd7;border-radius:5px;margin-bottom:12px}.lines i:nth-child(2){width:72%}.lines i:nth-child(3){width:42%;background:#1f403c}.lines b{position:absolute;right:18px;top:18px;background:#111;color:#fff;font-size:9px;border-radius:99px;padding:5px 8px}.edit{position:absolute;bottom:50px;left:34px;font-size:24px;font-weight:700}.edit del{color:#999}.edit ins{color:#10aaa1;text-decoration:none;border-bottom:3px solid}.langs{position:absolute;bottom:40px;left:34px;display:flex;align-items:center;gap:12px}.langs i{font-style:normal;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#fff;font-weight:800}.dictionary{background:#d9e7ff}.words{position:absolute;right:45px;bottom:45px;width:48%;display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}.words i{font-style:normal;background:#fff;border-radius:99px;padding:14px 20px;font-size:13px;box-shadow:0 10px 25px #14509614}.privacy{background:#151515;color:#fff;padding:150px 0}.privacy-inner{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}.privacy-copy h2{font-size:clamp(42px,5vw,70px);margin:35px 0}.privacy-copy h2 span{color:#7d7d7d}.privacy-copy>p:not(.kicker){color:#aaa}.privacy-copy ul{list-style:none;padding:0;margin-top:50px}.privacy-copy li{border-top:1px solid #333;padding:18px 0;font-size:14px}.privacy-copy li b{color:#777;margin-right:30px}.lock{height:540px;border-radius:50%;background:radial-gradient(circle,#254b49,#172321 40%,#151515 70%);position:relative;display:grid;place-items:center;overflow:hidden}.lock>div{width:160px;height:170px;border-radius:30px;background:linear-gradient(145deg,#b8fff7,#38d5cc);position:relative;z-index:2;box-shadow:0 20px 80px #44ffec33}.lock>div:before{content:"";position:absolute;width:90px;height:90px;border:17px solid #8dece4;border-bottom:0;border-radius:60px 60px 0 0;left:18px;top:-82px}.lock>div i{position:absolute;width:16px;height:45px;background:#163a37;border-radius:50% 50% 6px 6px;left:72px;top:64px}.lock>b{position:absolute;width:400px;height:180px;border:1px solid #8dece43d;border-radius:50%;transform:rotate(25deg)}.lock>b:last-child{width:500px;height:260px;transform:rotate(-22deg)}.steps ol{list-style:none;padding:0;border-top:1px solid var(--line)}.steps li{display:grid;grid-template-columns:120px 1fr;padding:35px 0;border-bottom:1px solid var(--line)}.steps li>b{font-size:12px;color:#999}.steps h3{font-size:26px;margin-bottom:8px}.steps li p{color:var(--muted);max-width:650px}.prices{display:grid;grid-template-columns:1fr 1fr;gap:18px}.prices article{position:relative;background:#151515;color:#fff;border-radius:var(--radius);padding:40px;min-height:520px}.prices .featured{background:#dbdbd8;color:#111}.prices article>p{font-size:13px;font-weight:700;margin-bottom:45px}.prices strong{display:block;font-size:54px;letter-spacing:-.06em}.prices article>small{color:#888}.prices ul{list-style:none;padding:0;margin:55px 0}.prices li{padding:10px 0;border-bottom:1px solid #333;font-size:13px}.featured li{border-color:#bbb}.popular{position:absolute;top:30px;right:30px;background:var(--aqua);font-size:10px;border-radius:99px;padding:7px 10px}.faq{display:grid;grid-template-columns:1fr 1.35fr;gap:80px}.faq .intro{display:block}.faq .intro h2{text-align:left;margin-top:25px}.faq>div:last-child{border-top:1px solid var(--line)}details{border-bottom:1px solid var(--line)}summary{list-style:none;cursor:pointer;padding:26px 0;font-size:17px;font-weight:700;display:flex;justify-content:space-between}summary::-webkit-details-marker{display:none}summary b{font-size:22px;font-weight:400;transition:.2s}details[open] summary b{transform:rotate(45deg)}details p{color:var(--muted);padding:0 40px 28px 0;font-size:14px}.final{background:#151515;color:#fff;text-align:center;padding:145px 0}.final img{width:92px;border-radius:22px;margin-bottom:45px}.final h2{font-size:clamp(54px,7vw,96px)}.final>div>p{color:#888;margin-top:30px}.footer{height:110px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;font-size:11px;color:#777}.footer p:nth-child(2){text-align:center}.footer p:last-child{text-align:right}
@media(max-width:800px){.shell{width:min(100% - 28px,1180px)}.nav{height:78px;grid-template-columns:1fr auto}.nav-links{display:none}.nav-cta{padding:0 16px;min-height:44px}.hero{padding:70px 0 75px}.hero h1{font-size:clamp(54px,15vw,78px)}.hero-copy{font-size:15px}.actions{flex-direction:column}.demo{padding:10px;border-radius:26px}.stats{grid-template-columns:1fr 1fr}.stats>div:last-child{display:none}.stats>div{padding:16px}.stats strong{font-size:35px}.workspace{min-height:480px}.message{margin:38px auto;padding:0 22px}.raw{font-size:15px}.polished{font-size:22px}.window span{display:none}.dock{bottom:16px}.every,.features,.steps,.pricing,.faq{padding:100px 0}.every h2,.intro h2,.privacy h2{font-size:46px}.apps i{width:58px;height:58px}.intro{display:block;margin-bottom:45px}.intro h2{text-align:left;margin-top:22px}.feature-grid,.prices,.privacy-inner,.faq{grid-template-columns:1fr}.card.wide{grid-column:auto}.card,.card.wide{min-height:410px}.keyboard,.words{left:24px;right:24px;width:auto;bottom:26px}.keyboard i{height:48px}.dictionary{min-height:480px}.privacy{padding:90px 0}.privacy-inner{gap:45px}.lock{height:360px;order:2}.lock>div{transform:scale(.75)}.steps li{grid-template-columns:55px 1fr}.prices article{min-height:500px;padding:30px}.faq{gap:15px}.final{padding:100px 0}.final h2{font-size:52px}.footer{height:auto;grid-template-columns:1fr;padding:35px 0;gap:12px}.footer p:nth-child(2),.footer p:last-child{text-align:left}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.waves i,.transform i,.polished i{animation:none}}

/* 首頁 hero 的 Android 測試版：實色底（描邊款在淺色底上看不清，勿再用） */
.aqua-pill{background:var(--aqua);color:#111}


/* Google Play 官方徽章：取代 Android 下載藥丸。
   高度對齊 .pill 的 min-height(52px)，在按鈕列裡才不會突一塊（2026-08-26 使用者回報過大） */
/* 【2026-09-05】App Store 官方徽章：與 Google Play 徽章等高對齊。
   Apple 規範：徽章不可變形、不可改色、四周要留白，故只設高度、寬度自動。
   ⚠️ Apple 規範：App Store 徽章「不得小於」頁面上其他商店徽章。
   Google Play 圖檔(646x250)含 23% 留白，設 52px 後可見圖形 134x40；
   Apple SVG 無留白、比例 2.72:1，設 50px 得 136x50 —— 寬度與 Google Play 齊平且不小於它。
   （曾設 40px：可見寬僅 109px 比 Google Play 窄，既違規又顯得小，別再調回去。）
   ⚠️ border-radius:0 是必要的：頁尾 .final img 有 border-radius:22px（給 App 圖示用），
   會連徽章一起套，50px 高配 22px 圓角就被切成藥丸形（使用者實測回報）。
   Apple 徽章的圓角本來就畫在圖檔裡，外面再加圓角等於竄改官方素材。*/
.store-badge { display: inline-flex; align-items: center; }
.store-badge img { height: 50px; width: auto; margin: 0 5px; display: block;
                   border-radius: 0; }   /* 見下方說明，別拿掉 */
.store-badge:hover { transform: translateY(-2px); transition: .2s; }

.play-badge { display: inline-flex; align-items: center; }
/* width/margin 要覆寫 .final img（那是 App 圖示用的：width:92px + margin-bottom:45px），
   否則徽章會被壓成 92px 寬又整個上移 45px（2026-08-26 實測） */
.play-badge img { height: 52px; width: auto; margin: 0; display: block; border-radius: 8px; }
.play-badge:hover { transform: translateY(-2px); transition: .2s; }


/* ── 首次到訪的互動試用（onboarding.js）─────────────────────────
   刻意用「直式流程」而不是左右分割：你說的 → ▼ → 輸出，
   跟 App Store 上架圖卡同一套視覺語彙，一眼認得出是 SogaType。 */
.ob{position:fixed;inset:0;z-index:9999;background:var(--paper);overflow:auto;
    animation:ob-fade .3s ease both}
@keyframes ob-fade{from{opacity:0}to{opacity:1}}
.ob-inner{width:min(760px,calc(100% - 44px));margin:auto;padding:76px 0 56px;
    min-height:100%;display:flex;flex-direction:column;justify-content:center}
.ob-x{position:fixed;top:22px;right:28px;z-index:2;border:0;background:none;font-size:32px;
    line-height:1;color:#a8a8a5;cursor:pointer}
.ob-x:hover{color:var(--ink)}
.ob-eyebrow{display:flex;align-items:center;gap:10px;font-size:12px;text-transform:uppercase;
    letter-spacing:.14em;font-weight:800}
.ob-eyebrow i{width:7px;height:7px;border-radius:50%;background:#13cfc6;
    box-shadow:0 0 0 5px #bdf5ef;flex:none}
.ob h2{font-size:clamp(36px,5.4vw,62px);line-height:1.02;letter-spacing:-.06em;
    font-weight:900;margin:26px 0 20px}
.ob h2 span{color:#9a9a98}
.ob-lead{color:#686868;font-size:17px;line-height:1.8}
.ob-actions{display:flex;gap:20px;align-items:center;margin-top:38px;flex-wrap:wrap}
.ob-skip,.ob-again{border:0;background:none;font:inherit;font-size:14px;font-weight:700;
    color:#747474;cursor:pointer;border-bottom:1px solid #c9c9c6;padding-bottom:3px}
.ob-skip:hover,.ob-again:hover{color:var(--ink)}
.ob button.pill{border:0;font:inherit;cursor:pointer}

/* 直式流程 */
.ob-flow{margin-top:26px}
.ob-block{border-radius:26px;padding:26px 28px}
.ob-block-say{background:#ececea}
.ob-block-out{background:linear-gradient(120deg,#2492f5,#2ed3c2);color:#fff}
.ob-tag{display:block;font-size:12px;font-weight:800;letter-spacing:.08em;
    text-transform:uppercase;color:#8a8a88}
.ob-block-out .ob-tag{color:rgba(255,255,255,.85)}
.ob-say{margin:14px 0 0;font-size:17px;line-height:1.9;font-weight:600;color:#4a4a48}
.ob-out{margin-top:14px;font-size:18px;line-height:1.9;font-weight:700;white-space:pre-wrap;
    min-height:84px;display:flex;align-items:center}
.ob-out>*{width:100%}
.ob-placeholder,.ob-live{font-weight:600;color:rgba(255,255,255,.72)}
.ob-result{animation:ob-in .4s ease both}
@keyframes ob-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ob-arrow{text-align:center;font-size:26px;color:#2ed3c2;margin:14px 0;font-weight:900}

.ob-wins{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:11px}
.ob-wins li{position:relative;padding-left:28px;font-size:14.5px;font-weight:700;color:#3a3a38;
    animation:ob-in .4s ease both}
.ob-wins li::before{content:"✓";position:absolute;left:0;top:-1px;color:#13cfc6;font-weight:900;
    font-size:16px}

/* 底部操作列：麥克風在左、下一步在右 */
.ob-bar{display:flex;align-items:center;gap:18px;margin-top:34px;flex-wrap:wrap}
.ob-bar-right{margin-left:auto;display:flex;align-items:center;gap:18px}
.ob-mic{display:inline-flex;align-items:center;gap:13px;border:0;cursor:pointer;
    background:#151515;color:#fff;border-radius:99px;padding:0 28px;min-height:54px;
    font:inherit;font-size:15px;font-weight:800;transition:.2s}
.ob-mic:hover{transform:translateY(-2px)}
.ob-mic-dot{width:11px;height:11px;border-radius:50%;background:#9feee5;flex:none}
.ob-mic[data-state="live"]{background:linear-gradient(120deg,#2492f5,#2ed3c2)}
.ob-mic[data-state="live"] .ob-mic-dot{background:#fff;animation:ob-pulse 1.1s infinite}
.ob-mic[data-state="busy"]{background:#3a3a38}
.ob-mic[data-state="busy"] .ob-mic-dot{background:#ffd479;animation:ob-pulse .8s infinite}
@keyframes ob-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.ob-err{flex:1 1 100%;font-size:13px;color:#c0392b;font-weight:600;margin:0}

.ob-plats{list-style:none;padding:0;margin:28px 0 0;display:flex;gap:12px;flex-wrap:wrap}
.ob-plats li{background:#ececea;border-radius:99px;padding:9px 20px;font-size:14px;font-weight:700}

@media (max-width:640px){
  .ob-inner{padding:64px 0 40px}
  .ob-block{padding:22px 20px;border-radius:22px}
  /* 手機改直排：麥克風 → 繼續 → 離開測試（最下面）。
     橫排在窄螢幕會擠成「2/4 離開測試 繼續」黏成一團，很難看（2026-08-26 使用者回報） */
  .ob-bar{flex-direction:column;align-items:stretch;gap:14px}
  .ob-mic{width:100%;justify-content:center}
  .ob-bar-right{margin-left:0;width:100%;display:flex;flex-direction:column;
      align-items:stretch;gap:16px}
  .ob-bar-right .pill{width:100%;justify-content:center}
  .ob-progress{order:0;text-align:center}
  .ob-next{order:1}
  .ob-leave{order:2;align-self:center}
}

/* 【踩過三次的坑】.pill 是 display:inline-flex，會蓋掉 UA 樣式表的 [hidden]{display:none}，
   於是 JS 設 hidden 也藏不住按鈕。全站統一用 !important 把 hidden 釘死。 */
[hidden]{display:none!important}

/* 試用的進度與「離開測試」——放在繼續鍵左邊，讓人隨時走得掉 */
.ob-progress{font-size:12px;font-weight:800;letter-spacing:.1em;color:#a8a8a5}
.ob-leave{border:0;background:none;font:inherit;font-size:14px;font-weight:700;color:#747474;
    cursor:pointer;border-bottom:1px solid #c9c9c6;padding-bottom:3px}
.ob-leave:hover{color:var(--ink)}

/* 翻譯段：箭頭旁的語言選單（選什麼語言就翻成什麼） */
.ob-arrow-row{display:flex;align-items:center;justify-content:center;gap:14px;margin:14px 0}
.ob-arrow-row .ob-arrow{margin:0}
.ob-lang{font:inherit;font-size:14px;font-weight:700;color:var(--ink);background:#fff;
    border:1px solid var(--line);border-radius:99px;padding:8px 16px;cursor:pointer}
.ob-lang:hover{border-color:#9a9a98}

/* 語言切換鈕（i18n.js 動態塞進 nav） */
.soga-lang-switch{display:inline-flex;align-items:center;margin-left:14px}
.soga-lang-switch select{font:inherit;font-size:13px;padding:4px 8px;border:1px solid #d9d9d5;border-radius:999px;background:#fff;color:inherit}
.soga-lang-switch.floating{position:fixed;top:12px;right:12px;z-index:9999}