:root{
  --ink:#56336f;
  --ink-dark:#4a285f;
  --muted:#8c7094;
  --gold:#c89a48;
  --cream:#fff1d8;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100vh;min-height:100vh;background:#1f1f66;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;overflow:hidden}
button,select,input{font:inherit}
button{cursor:pointer}
.app{position:relative;width:min(100vw,440px);height:100vh;min-height:100vh;margin:0 auto;overflow:hidden;background:transparent;color:var(--ink)}
.scene{display:none}
.scene::after{display:none}
.scene-glow{position:absolute;z-index:1;left:50%;top:44%;width:88%;height:70%;transform:translate(-50%,-50%);background:radial-gradient(ellipse,rgba(255,224,163,.20),rgba(119,81,191,.09) 45%,transparent 72%);filter:blur(12px);pointer-events:none}
.sparkles{position:absolute;z-index:2;inset:0;pointer-events:none;background-image:radial-gradient(circle at 12% 18%,rgba(255,238,185,.95) 0 1px,transparent 1.7px),radial-gradient(circle at 81% 13%,rgba(255,226,153,.8) 0 1.3px,transparent 2px),radial-gradient(circle at 74% 38%,rgba(255,255,255,.62) 0 1px,transparent 1.8px),radial-gradient(circle at 22% 71%,rgba(255,236,187,.7) 0 1px,transparent 1.8px);opacity:.72}

.player-stage{position:absolute;z-index:4;left:50%;top:max(20px,env(safe-area-inset-top));width:min(104vw,458px);aspect-ratio:2/3;transform:translateX(-50%);filter:drop-shadow(0 15px 24px rgba(16,8,41,.28))}
.parchment-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none}
.player-content{position:absolute;inset:0;padding:10.4% 9.5% 9.2%;display:flex;flex-direction:column;align-items:center;overflow:hidden}
.player-topbar{width:100%;display:grid;grid-template-columns:112px 1fr 105px;align-items:center;gap:6px;height:40px;margin-bottom:3px}
.asset-btn{position:relative;border:0;background:transparent center/100% 100% no-repeat;padding:0;color:#71455f;font-weight:700;text-shadow:0 1px 0 rgba(255,255,255,.55)}
.asset-btn span{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%;white-space:nowrap}
.top-return{width:112px;height:36px;background-image:url('assets/return_button.webp');font-size:13px;justify-self:start}
.top-settings{width:102px;height:35px;background-image:url('assets/return_button.webp');font-size:13px;justify-self:end}
.word-count{text-align:center;color:#6b3f8d;font:800 22px/1 Georgia,"Times New Roman",serif;letter-spacing:.5px}

.progress-wrap{width:100%;margin-top:4px}
.word-range{appearance:none;-webkit-appearance:none;width:100%;height:17px;background:transparent;margin:0;display:block}
.word-range::-webkit-slider-runnable-track{height:7px;border-radius:999px;background:linear-gradient(90deg,#8b53c7,#a16fd3 43%,#d5b66c 100%);box-shadow:inset 0 0 0 1px rgba(112,61,140,.17),0 1px 1px rgba(255,255,255,.7)}
.word-range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-6.5px;border-radius:50%;border:2px solid #e8bc55;background:radial-gradient(circle,#fff6c7 0 22%,#d79b2a 28% 55%,#7e3bb6 58% 100%);box-shadow:0 0 8px rgba(217,174,65,.55)}
.word-range::-moz-range-track{height:7px;border-radius:999px;background:linear-gradient(90deg,#8b53c7,#a16fd3 43%,#d5b66c 100%)}
.word-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;border:2px solid #e8bc55;background:#8d4cbf}
.progress-helper{text-align:center;color:#94779c;font-size:10.5px;font-weight:600;margin-top:2px;line-height:1.2}
.ordinal{margin-top:8px;color:#60387f;font:800 16px/1.1 "Songti SC","STSong",serif;letter-spacing:.4px}
.ordinal::before,.ordinal::after{content:"✦";color:#d5a23c;font-size:10px;margin:0 8px;vertical-align:2px}

.prompt-card{position:relative;width:96%;height:121px;margin-top:8px;display:grid;place-items:center}
.prompt-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
.prompt-copy{position:relative;z-index:1;text-align:center;transform:translateY(-1px)}
.pos{font:700 16px/1 Georgia,serif;color:#8b6899;margin-bottom:7px}
.meaning{font:900 clamp(35px,9.4vw,42px)/1.05 "Songti SC","STSong","STKaiti",serif;color:#55306d;letter-spacing:1px;text-shadow:0 1px 0 rgba(255,255,255,.65)}

.ipa-zone{height:58px;margin-top:5px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.ipa-btn{height:34px;min-width:112px;border:1px solid rgba(186,139,73,.65);border-radius:999px;background:linear-gradient(180deg,rgba(255,247,227,.96),rgba(245,226,194,.92));box-shadow:0 2px 5px rgba(101,63,54,.15),inset 0 1px rgba(255,255,255,.8);color:#69477f;padding:0 15px;display:flex;align-items:center;justify-content:center;gap:7px;font-weight:700;font-size:12px}
.ipa-icon{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#79548c;color:#fff2da;font:700 12px/1 Georgia,serif}
.ipa-text{height:20px;margin-top:3px;color:#6c4d7d;font:600 11.5px/20px Georgia,serif;opacity:0;transition:opacity .15s}
.ipa-text.show{opacity:1}
.play-state{height:25px;margin-top:-1px;color:#673d82;font:800 14.5px/25px "Songti SC","STSong",serif;letter-spacing:.2px}

.transport{position:relative;width:100%;height:151px;margin-top:0;display:grid;grid-template-columns:60px 1fr 60px;align-items:center}
.round-btn{width:50px;height:50px;border:0;background:transparent center/100% 100% no-repeat;display:grid;place-items:center;justify-self:center;color:#684186}
.round-btn.prev{background-image:url('assets/round_button_left.webp')}
.round-btn.next{background-image:url('assets/round_button_right.webp')}
.round-btn span{font:700 34px/1 Georgia,serif;transform:translateY(-1px)}
.pause-orb{position:relative;width:142px;height:142px;justify-self:center;border:0;background:transparent;padding:0;display:grid;place-items:center;color:#fff1cf;filter:drop-shadow(0 0 11px rgba(246,213,114,.45))}
.pause-orb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.pause-symbol{position:relative;z-index:1;font:900 42px/1 Arial,sans-serif;letter-spacing:-4px;transform:translateY(-7px)}
.pause-label{position:absolute;z-index:1;left:0;right:0;bottom:29px;text-align:center;font:800 15px/1 "Songti SC","STSong",serif}
.replay-btn{width:68%;height:39px;background-image:url('assets/replay_button.webp');font-size:14px;color:#633d83;margin-top:-3px}
.setting-summary{margin-top:6px;color:#80698e;font-size:11px;font-weight:600;letter-spacing:.2px}

.foreground-art{position:absolute;z-index:6;left:50%;bottom:max(-7px,calc(env(safe-area-inset-bottom) - 12px));width:118%;height:auto;transform:translateX(-50%);pointer-events:none;filter:drop-shadow(0 -3px 6px rgba(40,17,61,.18))}
.toast{position:absolute;z-index:40;left:50%;bottom:18%;transform:translate(-50%,14px);background:rgba(49,25,78,.88);color:#fff5dd;border:1px solid rgba(238,194,93,.55);border-radius:999px;padding:8px 14px;font-size:12px;opacity:0;pointer-events:none;transition:.2s;white-space:nowrap}.toast.show{opacity:1;transform:translate(-50%,0)}

.settings-layer{position:absolute;z-index:30;inset:0;opacity:0;pointer-events:none;transition:opacity .22s ease}
.settings-layer.open{opacity:1;pointer-events:auto}
.settings-backdrop{position:absolute;inset:0;border:0;background:rgba(12,6,38,.48);backdrop-filter:blur(2px) saturate(.78);-webkit-backdrop-filter:blur(2px) saturate(.78)}
.settings-card{position:absolute;left:50%;top:50%;width:min(82%,356px);aspect-ratio:1209/1614;transform:translate(-50%,-48%) scale(.97);transition:transform .22s ease;filter:drop-shadow(0 15px 24px rgba(11,6,31,.36))}
.settings-layer.open .settings-card{transform:translate(-50%,-50%) scale(1)}
.settings-parchment{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
.settings-content{position:absolute;inset:0;padding:11.5% 11.5% 10%;display:flex;flex-direction:column;align-items:stretch}
.settings-close{position:absolute;right:11%;top:7.3%;width:28px;height:28px;border:1px solid rgba(150,103,82,.34);border-radius:50%;background:rgba(255,245,224,.72);color:#795b73;font:500 25px/24px Arial,sans-serif}
.settings-content header{text-align:center;margin:1px 0 13px}
.settings-content h2{margin:0;color:#633b78;font:800 20px/1.1 "Songti SC","STSong",serif;letter-spacing:.5px}
.settings-content header span{display:block;margin-top:3px;color:#947985;font:600 9.5px/1.2 Georgia,serif;font-style:italic}
.setting-fields{display:flex;flex-direction:column;gap:10px}
.setting-fields label{display:block;color:#684f62;font-size:11px;font-weight:700}
.setting-fields label>span{display:block;margin:0 0 4px 3px}
.select-wrap{position:relative}
.select-wrap::after{content:"⌄";position:absolute;right:11px;top:50%;transform:translateY(-54%);color:#8a6692;font-size:14px;pointer-events:none}
.setting-fields select{appearance:none;-webkit-appearance:none;width:100%;height:35px;border:1px solid rgba(166,123,92,.36);border-radius:11px;background:linear-gradient(180deg,rgba(255,249,235,.95),rgba(244,229,203,.92));padding:0 30px 0 12px;color:#5e455d;font-size:12px;font-weight:650;outline:none;box-shadow:inset 0 1px rgba(255,255,255,.8)}
.settings-done{position:relative;margin-top:auto;align-self:center;width:78%;height:40px;border:0;background:transparent url('assets/settings_done_button.webp') center/100% 100% no-repeat;color:#fff3d8;font:800 14px/1 "Songti SC","STSong",serif;text-shadow:0 1px 1px rgba(58,21,89,.28)}
.settings-done span{position:relative;z-index:1}

@media(max-height:820px){
  .player-stage{width:min(96vw,422px);top:max(14px,env(safe-area-inset-top))}
  .player-content{padding-top:10%}
  .transport{height:137px}.pause-orb{width:130px;height:130px}.pause-label{bottom:26px}
  .prompt-card{height:112px}.meaning{font-size:34px}
  .foreground-art{width:112%}
}

/* V2 — settings controls inherit the word-list drawer picker language. */
.setting-fields{gap:13px !important}
.setting-field{display:block;color:#684f62;font-weight:700}
.setting-field>span{
  display:block;
  margin:0 0 5px 3px;
  color:#684f62;
  font-size:12px; /* one step larger than drawer label */
  line-height:1.2;
}
.setting-picker{position:relative;min-width:0;width:100%}
.setting-picker-trigger{
  box-sizing:border-box;
  width:100%;
  height:32px;
  min-height:32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  padding:2px 4px 2px 5px;
  border:0;
  border-bottom:1px solid rgba(141,113,101,.42);
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:#5e4569;
  text-align:left;
  font:550 13px/1 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;
}
.setting-picker-trigger>span{flex:1 1 0;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.setting-picker-trigger>i{flex:0 0 auto;color:#9773a4;font:400 15px/1 Georgia,serif;font-style:normal}
.setting-picker-menu{
  position:absolute;
  z-index:100;
  left:0;
  top:calc(100% + 4px);
  width:100%;
  min-width:100%;
  max-width:100%;
  margin:0;
  padding:5px;
  border:1px solid #c8a575;
  border-radius:11px;
  background:#fff0d4;
  box-shadow:0 6px 17px rgba(44,24,59,.23);
  overflow:hidden;
}
.setting-picker-menu[hidden]{display:none!important}
.setting-picker-menu button{
  box-sizing:border-box;
  display:block;
  width:100%;
  min-height:38px;
  padding:8px 11px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#563b60;
  text-align:left;
  white-space:nowrap;
  font:550 13px/20px -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;
}
.setting-picker-menu button:active,
.setting-picker-menu button.selected{background:#ead8ed}

/* Retire native select styling from V1. */
.select-wrap,.setting-fields select{display:none!important}

/* V4 — unify secondary buttons, use source capsule asset for IPA, enlarge pause orb, lower parchment content. */
.player-content{
  padding:13.0% 9.5% 6.6% !important;
}
.player-topbar{
  grid-template-columns:112px 1fr 112px !important;
}
.top-return,
.top-settings{
  width:112px !important;
  height:36px !important;
  background-image:url('assets/return_button.webp') !important;
  font-size:13px !important;
}
.top-settings{justify-self:end !important;}

.ipa-btn{
  width:128px !important;
  min-width:128px !important;
  height:34px !important;
  padding:0 14px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent url('assets/ipa_button_gold.webp') center/100% 100% no-repeat !important;
  box-shadow:none !important;
  color:#69477f !important;
  gap:7px !important;
}
.ipa-icon{
  width:19px !important;
  height:19px !important;
  box-shadow:none !important;
}

.transport{
  height:168px !important;
  grid-template-columns:60px 1fr 60px !important;
}
.pause-orb{
  width:160px !important;
  height:160px !important;
  display:grid !important;
  place-items:center !important;
}
.pause-copy{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:72px;
  height:82px;
  transform:translateY(2px);
  pointer-events:none;
}
.pause-symbol{
  position:static !important;
  display:block;
  transform:none !important;
  font:900 45px/.86 Arial,sans-serif !important;
  letter-spacing:-4px !important;
  text-align:center;
}
.pause-label{
  position:static !important;
  display:block;
  width:auto !important;
  font:800 15.5px/1 "Songti SC","STSong",serif !important;
  text-align:center;
  white-space:nowrap;
}

@media(max-height:820px){
  .player-content{padding:12.8% 9.5% 6.3% !important;}
  .transport{height:158px !important;}
  .pause-orb{width:152px !important;height:152px !important;}
}


/* V6 — IPA toggles inside the existing gold capsule; no separate text below. */
.ipa-zone{
  height:58px !important; /* preserve the established vertical rhythm */
  margin-top:5px !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
}
.ipa-btn{
  width:128px !important;
  max-width:128px !important;
  overflow:hidden !important;
  white-space:nowrap !important;
}
.ipa-btn.is-showing-ipa{
  gap:0 !important;
}
.ipa-btn.is-showing-ipa .ipa-icon{
  display:none !important;
}
.ipa-btn.is-showing-ipa #ipaBtnLabel{
  width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font:600 12.5px/1 Georgia,"Times New Roman",serif !important;
  letter-spacing:.05px;
  text-align:center;
}
.ipa-text{display:none !important;}

/* V7 — rebalance vertical rhythm and enlarge the main pause control to 120%. */
.progress-wrap{margin-top:2px !important;}
.progress-helper{
  margin-top:1px !important;
  line-height:1.12 !important;
}
.ordinal{
  margin-top:6px !important;
  line-height:1.05 !important;
}
.prompt-card{
  margin-top:6px !important;
}
.ipa-zone{
  height:49px !important;
  margin-top:4px !important;
  justify-content:flex-start !important;
}
.play-state{
  height:22px !important;
  margin-top:0 !important;
  line-height:22px !important;
}
.transport{
  height:202px !important;
  margin-top:1px !important;
  grid-template-columns:60px 1fr 60px !important;
}
.pause-orb{
  width:192px !important;
  height:192px !important;
  filter:drop-shadow(0 0 14px rgba(246,213,114,.5)) !important;
}
.pause-copy{
  width:86px !important;
  height:98px !important;
  gap:9px !important;
  transform:none !important;
}
.pause-symbol{
  width:50px !important;
  height:50px !important;
  flex:0 0 50px !important;
}
.pause-symbol::before,
.pause-symbol::after{
  top:6px !important;
  width:13px !important;
  height:38px !important;
  border-radius:4px !important;
}
.pause-symbol::before{left:10px !important;}
.pause-symbol::after{right:10px !important;}
.pause-orb.is-paused .pause-symbol::before{
  top:5px !important;
  left:12px !important;
  border-top-width:20px !important;
  border-bottom-width:20px !important;
  border-left-width:32px !important;
}
.pause-label{
  font-size:16.5px !important;
  line-height:1 !important;
}
.replay-btn{
  margin-top:-2px !important;
}
.setting-summary{
  margin-top:5px !important;
  line-height:1.2 !important;
}
@media(max-height:820px){
  .ipa-zone{height:46px !important;}
  .transport{height:190px !important;}
  .pause-orb{width:182px !important;height:182px !important;}
  .pause-copy{width:82px !important;height:93px !important;gap:8px !important;}
}


/* V8 — one viewport model only; root paints the scene once. */
html{
  width:100%;
  height:100vh;
  min-height:100vh;
  margin:0;
  padding:0;
  overflow:hidden;
  background-color:#1f1f66;
  background-image:url('assets/scene_bg_iphone17pm.jpg');
  background-repeat:no-repeat;
  background-size:auto 100vh;
  background-position:right top;
  background-attachment:scroll;
}
body{
  position:fixed;
  inset:0;
  width:100%;
  height:100vh;
  min-height:100vh;
  margin:0;
  padding:0;
  overflow:hidden;
  background:transparent;
}
.app{
  position:fixed;
  inset:0 auto 0 50%;
  width:min(100vw,440px);
  height:100vh;
  min-height:100vh;
  margin:0;
  transform:translateX(-50%);
  overflow:hidden;
  background:transparent;
}
/* Preserve the approved V7 upper composition. */
.player-stage{
  top:133px !important;
}
.foreground-art{
  bottom:-7px !important;
}

/* V8 — robust pause/play glyphs. No emoji, no inherited bar dimensions. */
.pause-symbol{
  position:relative !important;
  width:50px !important;
  height:50px !important;
  flex:0 0 50px !important;
  display:block !important;
  font-size:0 !important;
  line-height:0 !important;
}
.pause-symbol::before,
.pause-symbol::after{
  content:"";
  position:absolute;
  display:block;
  background:#fff0c8;
  box-shadow:0 1px 1px rgba(91,43,112,.18);
}
.pause-orb:not(.is-paused) .pause-symbol::before,
.pause-orb:not(.is-paused) .pause-symbol::after{
  top:6px;
  width:13px;
  height:38px;
  border:0;
  border-radius:4px;
  clip-path:none;
}
.pause-orb:not(.is-paused) .pause-symbol::before{left:10px}
.pause-orb:not(.is-paused) .pause-symbol::after{right:10px}
.pause-orb.is-paused .pause-symbol::before{
  left:9px !important;
  top:4px !important;
  width:38px !important;
  height:42px !important;
  border:0 !important;
  border-radius:2px !important;
  background:#fff0c8 !important;
  clip-path:polygon(0 0,100% 50%,0 100%) !important;
  box-shadow:0 1px 1px rgba(91,43,112,.18) !important;
}
.pause-orb.is-paused .pause-symbol::after{display:none !important}

/* V9 — reuse the proven dictation-page App Shell geometry exactly. */
html,body{
  margin:0 !important;
  padding:0 !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  overflow:hidden !important;
  overscroll-behavior:none;
  background:#1f1f66 !important;
}
html{
  background:#1f1f66 !important;
  background-image:none !important;
}
body{
  position:static !important;
  inset:auto !important;
  background:#1f1f66 !important;
}
.app{
  position:fixed !important;
  inset:0 !important;
  width:100% !important;
  max-width:440px !important;
  height:100dvh !important;
  min-height:0 !important;
  margin:0 auto !important;
  transform:none !important;
  overflow:hidden !important;
  background:#1f1f66 !important;
}
@media(min-width:500px){
  .app{
    left:50% !important;
    right:auto !important;
    width:440px !important;
    transform:translateX(-50%) !important;
  }
}
.scene{
  display:block !important;
  position:absolute !important;
  z-index:0 !important;
  left:0 !important;
  right:0 !important;
  top:0 !important;
  bottom:0 !important;
  width:auto !important;
  height:auto !important;
  overflow:hidden !important;
  background:#1f1f66 !important;
  pointer-events:none !important;
}
.scene-img{
  position:absolute !important;
  top:0 !important;
  right:0 !important;
  bottom:auto !important;
  left:auto !important;
  height:100% !important;
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  object-fit:contain !important;
  object-position:right top !important;
}
/* V8 root background painting is intentionally disabled in V9. */
.scene-glow,.sparkles{pointer-events:none}
/* Keep the approved V8 upper composition untouched. */
.player-stage{top:133px !important}
.foreground-art{bottom:-7px !important}

/* V10 — use the prepared iPhone 17 Pro Max screen-ratio background directly. */
html,body{
  margin:0 !important;
  padding:0 !important;
  width:100% !important;
  height:100% !important;
  min-height:100% !important;
  overflow:hidden !important;
  background:#332b78 !important; /* only a fallback behind the full-screen image */
}
body{
  position:fixed !important;
  inset:0 !important;
}
.app{
  position:fixed !important;
  top:0 !important;
  bottom:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  max-width:440px !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 auto !important;
  transform:none !important;
  overflow:hidden !important;
  background:transparent !important;
}
.scene{
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  overflow:hidden !important;
  background:transparent !important;
}
.scene-img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:fill !important;
  object-position:center center !important;
  display:block !important;
}
@media(min-width:500px){
  .app{left:50% !important;right:auto !important;width:440px !important;transform:translateX(-50%) !important;}
}