:root{
  --ink:#23211E;
  --paper:#FFFFFF;
  --coral:#E2543F;
  --teal:#2C7A6F;
  --mustard:#D89B3F;
  --navy:#2E3F63;
  --line:rgba(35,33,30,.16);
  --soft:rgba(35,33,30,.06);
  --muted:rgba(35,33,30,.62);
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{min-height:100%;}
body{
  font-family:'Noto Sans TC',sans-serif;
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
[hidden]{display:none !important;}
button{font-family:inherit;color:inherit;}
:focus-visible{outline:2.5px solid var(--coral);outline-offset:3px;border-radius:4px;}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--ink);color:var(--paper);
  padding:10px 18px;border-radius:0 0 10px 0;font-size:14px;
}
.skip-link:focus{left:0;}

/* ---------- NAV ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(20px,5vw,64px);
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.brand{
  display:flex;align-items:center;gap:10px;
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;letter-spacing:.04em;font-size:15px;
}
.brand .zh{font-family:'Noto Serif TC',serif;font-weight:900;font-size:17px;letter-spacing:.18em;margin-right:2px;}
.links{display:flex;gap:clamp(16px,2.6vw,38px);font-size:14.5px;font-weight:500;}
.links a{position:relative;padding:4px 2px;}
.links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--ink);
  transition:right .25s ease;
}
.links a:hover::after,
.links a.is-active::after{right:0;}
.links a.is-active{font-weight:700;}
.nav-actions{display:flex;align-items:center;gap:10px;}
.nav-toggle{
  display:none;
  width:42px;height:42px;
  border:1.5px solid var(--ink);border-radius:12px;
  background:transparent;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.nav-toggle span{
  width:17px;height:1.8px;border-radius:2px;background:var(--ink);
  transition:transform .22s ease,opacity .22s ease;
}
.nav.menu-open .nav-toggle span:nth-child(1){transform:translateY(6.8px) rotate(45deg);}
.nav.menu-open .nav-toggle span:nth-child(2){opacity:0;}
.nav.menu-open .nav-toggle span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg);}

/* ---------- KEYBOARD HELP ---------- */
.kbd-help-btn{
  width:42px;height:42px;
  border:1.5px solid var(--ink);border-radius:12px;
  background:transparent;cursor:pointer;
  font-family:'Space Grotesk',sans-serif;
  font-size:16px;font-weight:600;
  transition:background .2s ease,color .2s ease;
}
.kbd-help-btn:hover{background:var(--ink);color:var(--paper);}
@media (hover:none){.kbd-help-btn{display:none;}}
.kbd-dialog{
  margin:auto;
  width:min(460px,calc(100vw - 40px));
  border:1.5px solid var(--ink);
  border-radius:22px;
  padding:28px;
  background:var(--paper);color:var(--ink);
  box-shadow:6px 6px 0 var(--soft);
}
.kbd-dialog::backdrop{background:rgba(35,33,30,.35);}
.kbd-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.kbd-head h3{font-family:'Noto Serif TC',serif;font-weight:900;font-size:19px;letter-spacing:.06em;}
.kbd-close{
  width:30px;height:30px;border-radius:50%;
  border:none;background:transparent;cursor:pointer;
  font-size:18px;color:var(--muted);
  transition:background .2s ease,color .2s ease;
}
.kbd-close:hover{background:var(--coral);color:#fff;}
.kbd-list{display:flex;flex-direction:column;gap:12px;}
.kbd-list > div{display:flex;align-items:baseline;gap:14px;font-size:14px;line-height:1.7;}
.kbd-list dt{flex:none;min-width:86px;}
.kbd-list dd{color:var(--muted);margin:0;}
kbd{
  font-family:'Space Grotesk',sans-serif;
  font-size:12px;font-weight:600;
  border:1.5px solid var(--line);border-bottom-width:2.5px;
  border-radius:6px;padding:2px 7px;
  background:var(--paper);
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  cursor:crosshair;
}
/* 彩色圖右側貼底、往左收 4vw；左右兩緣淡出遮罩＋純白背景，透鏡掃到哪都不會有斷層 */
.stage{
  position:absolute;
  right:4vw;
  bottom:0;
  width:min(920px,70vw);
  height:auto;
  pointer-events:none;
  user-select:none;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 16%, #000 92%, transparent 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 16%, #000 92%, transparent 100%);
}

/* ---------- THE REVEAL LENS ---------- */
.reveal{
  position:absolute;inset:0;z-index:2;
  pointer-events:none;
  background:var(--paper);
  --mx:62%;
  --my:58%;
  --r:0px;
  -webkit-mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my), #000 50%, transparent 100%);
          mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my), #000 50%, transparent 100%);
}

/* ---------- SPARK HINTS ---------- */
.sparkles{
  position:absolute;inset:0;z-index:3;
  pointer-events:none;
  transition:opacity .5s ease;
}
.hero.is-exploring .sparkles{opacity:0;}
.spark-bubble{
  position:absolute;
  width:clamp(96px,10vw,150px);
  transform:translate(-50%,-50%);
  animation:bubbleFloat 5s ease-in-out infinite;
}
.spark-bubble:nth-child(5){width:clamp(110px,12vw,176px);}
.spark-bubble img{position:relative;z-index:1;display:block;width:100%;height:auto;}
/* 星光背光：柔和的金黃光暈一閃一閃 */
.spark-bubble::before{
  content:"";position:absolute;z-index:0;
  left:50%;top:50%;
  width:120%;aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,228,150,.8), rgba(255,228,150,0) 72%);
  animation:twinkle 2.6s ease-in-out infinite;
}
/* 負延遲：立即從週期中段開始，節奏錯開且不會有起跑前的空窗 */
.spark-bubble:nth-child(2),.spark-bubble:nth-child(2)::before{animation-delay:-.6s;}
.spark-bubble:nth-child(3),.spark-bubble:nth-child(3)::before{animation-delay:-1.2s;}
.spark-bubble:nth-child(4),.spark-bubble:nth-child(4)::before{animation-delay:-1.8s;}
.spark-bubble:nth-child(5),.spark-bubble:nth-child(5)::before{animation-delay:-2.4s;}
@keyframes bubbleFloat{
  0%,100%{transform:translate(-50%,-50%);}
  50%{transform:translate(-50%,calc(-50% - 7px));}
}
@keyframes twinkle{
  0%,100%{opacity:.2;transform:translate(-50%,-50%) scale(.85);}
  50%{opacity:.9;transform:translate(-50%,-50%) scale(1.12);}
}

/* ---------- HERO COPY ---------- */
.copy{
  position:absolute;z-index:4;
  left:clamp(20px,6vw,80px);
  top:50%;transform:translateY(-46%);
  max-width:560px;
  pointer-events:none;
}
.copy a,.copy button{pointer-events:auto;}
.eyebrow{
  font-family:'Space Grotesk',sans-serif;
  font-size:12.5px;letter-spacing:.32em;font-weight:500;
  color:var(--coral);
  margin-bottom:22px;
  display:flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:34px;height:1.5px;background:var(--coral);display:inline-block;flex:none;}
h1{
  font-family:'Noto Serif TC',serif;
  font-weight:900;
  font-size:clamp(42px,5.6vw,74px);
  line-height:1.18;
  letter-spacing:.02em;
}
h2{
  font-family:'Noto Serif TC',serif;
  font-weight:900;
  font-size:clamp(26px,3vw,38px);
  line-height:1.3;
  letter-spacing:.02em;
}
.accent{
  position:relative;white-space:nowrap;
}
.accent::after{
  content:"";position:absolute;left:0;right:0;bottom:6%;height:.32em;
  background:linear-gradient(90deg,var(--mustard),var(--coral));
  opacity:.32;z-index:-1;border-radius:3px;
}
.sub{
  margin-top:26px;
  font-size:clamp(15px,1.25vw,17px);
  line-height:2;
  color:rgba(35,33,30,.78);
  max-width:46ch;
}
.ctas{margin-top:38px;display:flex;align-items:center;gap:26px;flex-wrap:wrap;}

/* ---------- BUTTONS ---------- */
.btn-primary{
  font-family:'Noto Sans TC',sans-serif;
  font-size:15.5px;font-weight:700;letter-spacing:.06em;
  background:var(--ink);color:var(--paper);
  border:none;border-radius:999px;
  padding:14px 28px;
  cursor:pointer;
  display:inline-flex;align-items:center;gap:10px;
  transition:transform .2s ease,box-shadow .2s ease;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(35,33,30,.22);}
.btn-primary .arr{transition:transform .2s ease;}
.btn-primary:hover .arr{transform:translateX(4px);}
.btn-outline{
  font-size:14.5px;font-weight:500;
  border:1.5px solid var(--ink);border-radius:999px;
  padding:12px 24px;background:transparent;
  cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  transition:background .2s ease,color .2s ease;
}
.btn-outline:hover{background:var(--ink);color:var(--paper);}
.btn-ghost{
  font-size:15px;font-weight:500;
  display:inline-flex;align-items:center;gap:9px;
  background:none;border:none;cursor:pointer;
  border-bottom:1.5px solid rgba(35,33,30,.35);
  padding-bottom:3px;
  transition:border-color .2s ease;
}
.btn-ghost:hover{border-color:var(--ink);}
.btn-ghost .play{
  width:26px;height:26px;border-radius:50%;
  border:1.5px solid var(--ink);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:9px;
}

/* ---------- HINT ---------- */
.hint{
  position:absolute;z-index:4;
  left:clamp(20px,6vw,80px);bottom:30px;
  display:flex;align-items:center;gap:12px;
  font-size:13px;color:rgba(35,33,30,.6);
  letter-spacing:.05em;
  pointer-events:none;
}
.hint-ring{
  position:relative;width:14px;height:14px;border-radius:50%;
  border:1.5px solid var(--coral);
  flex:none;
}
.hint-ring::after{
  content:"";position:absolute;inset:-2px;border-radius:50%;
  border:1.5px solid var(--coral);
  animation:ping 1.8s ease-out infinite;
}
@keyframes ping{
  0%{transform:scale(1);opacity:.8;}
  100%{transform:scale(2.4);opacity:0;}
}
.hint .touch-text{display:none;}
@media (hover:none){
  .hint .mouse-text{display:none;}
  .hint .touch-text{display:inline;}
  .hero{cursor:default;}
}

/* ---------- APP PAGES ---------- */
.app-page{
  min-height:100svh;
  max-width:1240px;
  margin:0 auto;
  padding:130px clamp(20px,5vw,64px) 70px;
}
.page-title{margin-bottom:44px;}
.page-title .eyebrow{margin-bottom:16px;}

.workspace-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:30px;
  align-items:start;
}

/* ---------- PANELS ---------- */
.panel{
  border:1.5px solid var(--ink);
  border-radius:22px;
  padding:30px 28px;
  background:var(--paper);
  box-shadow:6px 6px 0 var(--soft);
}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px;}
.panel-title{
  font-family:'Noto Serif TC',serif;
  font-weight:900;
  font-size:19px;
  letter-spacing:.06em;
  margin-bottom:18px;
}
.panel-head .panel-title{margin-bottom:0;}

/* ---------- FORM FIELDS ---------- */
.field-row{margin-top:18px;display:flex;flex-direction:column;gap:8px;}
.field-row label,
.field-label{
  font-family:'Space Grotesk','Noto Sans TC',sans-serif;
  font-size:12px;letter-spacing:.18em;font-weight:600;
  color:var(--muted);
}
.field-row input[type="file"],
.field-row input[type="search"],
.field-row select,
.field-row textarea{
  font-family:'Noto Sans TC',sans-serif;
  font-size:15px;
  border:1.5px solid var(--line);
  border-radius:14px;
  padding:12px 14px;
  background:var(--paper);
  color:var(--ink);
  transition:border-color .2s ease;
}
.field-row select:hover,
.field-row input[type="search"]:hover,
.field-row textarea:hover{border-color:var(--ink);}
.field-row select:focus,
.field-row input[type="search"]:focus,
.field-row textarea:focus{border-color:var(--ink);outline:none;}
.field-row textarea{resize:vertical;line-height:1.8;}

/* ---------- CHIPS ---------- */
.mode-switch{display:flex;gap:10px;margin-bottom:6px;}
.chips-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px;}
.chip-btn{
  font-size:13.5px;font-weight:500;
  border:1.5px solid var(--ink);
  border-radius:999px;
  padding:7px 16px;
  background:transparent;
  cursor:pointer;
  transition:background .2s ease,color .2s ease;
}
.chip-btn:hover{background:var(--soft);}
.chip-btn.is-active{background:var(--ink);color:var(--paper);}

/* ---------- ACTIONS / STATUS ---------- */
.action-row{margin-top:24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
/* 次要動作（清除／重置）靠右並降低視覺權重 */
.action-row .btn-ghost{
  margin-left:auto;
  font-size:14px;color:var(--muted);
  border-bottom-color:rgba(35,33,30,.2);
}
.action-row .btn-ghost:hover{color:var(--ink);border-color:var(--ink);}
.status-note{
  margin-top:18px;
  font-size:13.5px;
  line-height:1.9;
  color:var(--muted);
  padding-left:14px;
  border-left:2.5px solid var(--mustard);
}

.status-dot{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:500;letter-spacing:.06em;
  border:1.5px solid var(--line);
  border-radius:999px;
  padding:5px 13px;
  color:var(--muted);
}
.status-dot::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:rgba(35,33,30,.3);
  transition:background .2s ease;
}
.status-dot[data-state="active"]{border-color:var(--coral);color:var(--coral);}
.status-dot[data-state="active"]::before{background:var(--coral);animation:blink 1s ease-in-out infinite;}
.status-dot[data-state="done"]{border-color:var(--teal);color:var(--teal);}
.status-dot[data-state="done"]::before{background:var(--teal);}
@keyframes blink{50%{opacity:.3;}}

/* ---------- PREVIEW ---------- */
.preview-box{
  position:relative;
  margin-top:18px;
  border:1.5px dashed var(--line);
  border-radius:16px;
  overflow:hidden;
  min-height:150px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(35,33,30,.02);
}
.landmark-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.hands-badge{
  position:absolute;left:10px;bottom:10px;
  padding:4px 12px;border-radius:999px;
  background:rgba(35,33,30,.78);color:#fff;
  font-size:12px;letter-spacing:.05em;
  pointer-events:none;
}
.hands-badge[data-state="active"]{background:rgba(226,84,63,.88);}
.hands-badge[data-state="loading"]{animation:blink 1.2s ease-in-out infinite;}
.preview-box video{width:100%;display:block;max-height:260px;background:#000;}
.preview-box.is-dragover{border-color:var(--coral);border-style:solid;background:rgba(226,84,63,.05);}
.empty-preview{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  width:100%;align-self:stretch;
  background:transparent;border:none;cursor:pointer;
  color:rgba(35,33,30,.45);
  font-size:13px;letter-spacing:.08em;
  padding:30px 0;
  transition:background .2s ease,color .2s ease;
}
.empty-preview:hover{background:var(--soft);color:var(--ink);}
.empty-preview strong{font-size:15px;font-weight:700;letter-spacing:.1em;}
.empty-preview .empty-sub{font-size:12px;color:var(--muted);}

/* ---------- STEPS ---------- */
.steps-list{display:flex;gap:10px;margin:18px 0 6px;flex-wrap:wrap;}
.step-item{
  flex:1;min-width:120px;
  display:flex;align-items:center;gap:10px;
  border:1.5px solid var(--line);
  border-radius:14px;
  padding:12px 14px;
  font-size:13.5px;
  transition:border-color .25s ease,background .25s ease;
}
.step-dot{
  width:24px;height:24px;border-radius:50%;flex:none;
  border:1.5px solid var(--line);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk',sans-serif;
  font-size:12px;font-weight:600;
  transition:all .25s ease;
}
.step-item.is-active{border-color:var(--coral);}
.step-item.is-active .step-dot{border-color:var(--coral);background:var(--coral);color:#fff;}
.step-item.is-complete{border-color:var(--teal);}
.step-item.is-complete .step-dot{border-color:var(--teal);background:var(--teal);color:#fff;}

/* ---------- RESULTS ---------- */
.result-block{margin-top:22px;}
.result-block-header{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.result-tag{
  font-family:'Space Grotesk','Noto Sans TC',sans-serif;
  font-size:11.5px;letter-spacing:.2em;font-weight:600;
  color:var(--muted);
  display:block;margin-bottom:10px;
}
.spoken-text{
  font-family:'Noto Serif TC',serif;
  font-weight:700;
  font-size:22px;
  letter-spacing:.04em;
  line-height:1.6;
}
.token-row{display:flex;flex-wrap:wrap;gap:9px;min-height:38px;}
.token{
  font-size:15px;font-weight:500;letter-spacing:.04em;
  border:1.5px solid var(--ink);
  border-radius:999px;
  padding:7px 16px;
  background:var(--paper);
  animation:tokenIn .35s ease both;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.token.is-highlighted{
  background:var(--coral);border-color:var(--coral);color:#fff;
  box-shadow:0 6px 16px rgba(226,84,63,.35);
}
@keyframes tokenIn{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}

/* ---------- FAVORITE ---------- */
.fav-btn{
  font-size:13px;font-weight:500;
  border:1.5px solid var(--ink);
  border-radius:999px;
  padding:5px 14px;
  background:transparent;cursor:pointer;
  transition:background .2s ease,color .2s ease;
}
.fav-btn:hover{background:var(--soft);}
.fav-btn.is-favorited{background:var(--mustard);border-color:var(--mustard);color:#fff;}

.plain-list{list-style:none;display:flex;flex-direction:column;gap:10px;}
.plain-list li{
  font-size:14.5px;line-height:1.8;
  border:1.5px solid var(--line);
  border-radius:14px;
  padding:12px 16px;
}
.plain-list li.history-item{padding:0;transition:border-color .2s ease;}
.plain-list li.history-item:hover{border-color:var(--ink);}
.history-item button{
  width:100%;text-align:left;
  font-size:14.5px;line-height:1.8;
  padding:12px 16px;
  background:none;border:none;border-radius:12px;
  cursor:pointer;
  transition:background .2s ease;
}
.history-item button:hover{background:var(--soft);}
.plain-list li.empty-item{
  border-style:dashed;color:rgba(35,33,30,.4);
  text-align:center;
}
.link-btn{
  background:none;border:none;cursor:pointer;
  font-size:inherit;color:var(--coral);
  border-bottom:1.5px solid currentColor;
  padding:0 0 1px;margin-left:6px;
  transition:opacity .2s ease;
}
.link-btn:hover{opacity:.7;}
.clear-btn{
  font-size:12.5px;font-weight:500;letter-spacing:.06em;
  border:1.5px solid var(--line);
  border-radius:999px;
  padding:5px 14px;
  background:transparent;cursor:pointer;
  color:var(--muted);
  transition:border-color .2s ease,color .2s ease;
}
.clear-btn:hover{border-color:var(--coral);color:var(--coral);}
.clear-btn.is-armed{border-color:var(--coral);color:var(--coral);background:rgba(226,84,63,.06);}

/* ---------- FAVORITES UNDO ---------- */
.undo-bar{
  margin-top:14px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1.5px dashed var(--line);
  border-radius:12px;
  padding:10px 14px;
  font-size:13.5px;color:var(--muted);
}
.fav-list li{display:flex;align-items:center;gap:12px;}
.fav-play{
  width:30px;height:30px;border-radius:50%;flex:none;
  border:1.5px solid var(--ink);
  background:transparent;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .2s ease,color .2s ease;
}
.fav-play:hover{background:var(--ink);color:var(--paper);}
.fav-sentence{flex:1;cursor:pointer;}
.fav-sentence:hover{color:var(--coral);}
.fav-del{
  width:26px;height:26px;border-radius:50%;flex:none;
  border:none;background:transparent;cursor:pointer;
  font-size:16px;color:var(--muted);
  transition:background .2s ease,color .2s ease;
}
.fav-del:hover{background:var(--coral);color:#fff;}

/* ---------- AVATAR ---------- */
.avatar-wrap{
  margin-top:26px;
  border:1.5px solid var(--line);
  border-radius:18px;
  padding:24px;
}
.avatar-stage{
  height:200px;
  display:flex;align-items:flex-end;justify-content:center;
  border-radius:14px;
  background:
    radial-gradient(ellipse 90px 12px at 50% 96%, rgba(216,155,63,.3), transparent 70%),
    rgba(35,33,30,.02);
  overflow:hidden;
}
.avatar-figure{position:relative;width:120px;height:170px;}
.avatar-head{
  position:absolute;left:50%;top:8px;transform:translateX(-50%);
  width:54px;height:54px;border-radius:50%;
  background:#E5B08C;
}
.avatar-hair{
  position:absolute;left:0;top:-2px;width:54px;height:26px;
  border-radius:27px 27px 6px 6px;
  background:#241B14;
}
.avatar-bun{
  position:absolute;left:50%;top:-12px;transform:translateX(-50%);
  width:18px;height:18px;border-radius:50%;
  background:#241B14;
}
.avatar-eye{
  position:absolute;top:28px;width:5px;height:5px;border-radius:50%;
  background:#241B14;
}
.avatar-eye-l{left:15px;}
.avatar-eye-r{right:15px;}
.avatar-smile{
  position:absolute;left:50%;top:36px;transform:translateX(-50%);
  width:14px;height:7px;
  border:2px solid #241B14;border-top:none;
  border-radius:0 0 14px 14px;
}
.avatar-body{
  position:absolute;left:50%;top:58px;transform:translateX(-50%);
  width:74px;height:96px;
  border-radius:26px 26px 18px 18px;
  background:var(--coral);
}
.avatar-figure-alt .avatar-body{background:var(--teal);}
.avatar-arm{
  position:absolute;top:66px;width:15px;height:62px;
  border-radius:999px;
  background:var(--coral);
  transform-origin:50% 10px;
}
.avatar-figure-alt .avatar-arm{background:var(--teal);}
.avatar-arm::after{
  content:"";position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);
  width:17px;height:17px;border-radius:50%;
  background:#E5B08C;
}
.avatar-arm-l{left:9px;transform:rotate(12deg);}
.avatar-arm-r{right:9px;transform:rotate(-12deg);}
.avatar-figure.is-signing .avatar-arm-l{animation:signL 1.1s ease-in-out infinite;}
.avatar-figure.is-signing .avatar-arm-r{animation:signR 1.1s ease-in-out infinite;}
@keyframes signL{
  0%,100%{transform:rotate(18deg);}
  50%{transform:rotate(135deg);}
}
@keyframes signR{
  0%,100%{transform:rotate(-135deg);}
  50%{transform:rotate(-18deg);}
}

.speed-row{
  margin-top:18px;
  display:flex;align-items:center;gap:9px;
}
.speed-label{
  font-family:'Space Grotesk','Noto Sans TC',sans-serif;
  font-size:11.5px;letter-spacing:.2em;font-weight:600;
  color:var(--muted);
  margin-right:4px;
}
.speed-btn{
  font-size:13px;font-weight:500;
  border:1.5px solid var(--line);
  border-radius:999px;
  padding:5px 15px;
  background:transparent;cursor:pointer;
  transition:all .2s ease;
}
.speed-btn:hover{border-color:var(--ink);}
.speed-btn.is-active{background:var(--ink);border-color:var(--ink);color:var(--paper);}

.meta-row{
  margin-top:20px;
  display:flex;align-items:center;gap:24px;
  border-top:1.5px solid var(--line);
  padding-top:18px;
}
.meta-item{flex:1;}
.meta-item strong{
  font-family:'Noto Serif TC',serif;
  font-weight:700;font-size:17px;letter-spacing:.04em;
}
.meta-divider{width:1.5px;align-self:stretch;background:var(--line);}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .workspace-grid{grid-template-columns:1fr;}
}
@media (max-width:900px){
  .nav-toggle{display:flex;}
  .links{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;
    background:rgba(255,255,255,.97);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    border-bottom:1.5px solid var(--line);
    padding:6px clamp(20px,5vw,64px) 14px;
  }
  .nav.menu-open .links{display:flex;}
  .links a{padding:13px 2px;border-bottom:1px solid var(--soft);font-size:15.5px;}
  .links a:last-child{border-bottom:none;}
  .links a::after{display:none;}
  .copy{
    top:auto;transform:none;
    bottom:auto;
    position:relative;
    padding:110px clamp(20px,6vw,40px) 0;
    left:0;max-width:100%;
  }
  .hero{display:flex;flex-direction:column;}
  /* 直式螢幕：貼底置中，左右兩緣淡出避免裁切線 */
  .stage{
    right:auto;left:50%;
    transform:translateX(-50%);
    width:min(640px,124vw);
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
            mask-image:linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
  }
  .sparkles{top:55%;}
  .spark-bubble{width:clamp(76px,17vw,120px);}
  .spark-bubble:nth-child(5){width:clamp(88px,20vw,140px);}
  .hint{bottom:14px;}
  .sub{line-height:1.9;}
  .app-page{padding-top:110px;}
}

@media (max-width:480px){
  .brand span:not(.zh){display:none;}
  .nav{padding-top:16px;padding-bottom:16px;}
}

@media (prefers-reduced-motion:reduce){
  .hint-ring::after{animation:none;}
  .spark-bubble,.spark-bubble::before{animation:none;}
  .btn-primary,.btn-primary .arr,.links a::after{transition:none;}
  .avatar-figure.is-signing .avatar-arm-l,
  .avatar-figure.is-signing .avatar-arm-r{animation-duration:2.4s;}
  .token{animation:none;}
}