/* finesse: h5/product; four spatial grammars, shared quiet typography. 2026-10-25 */
body.forms-only {
  margin: 0; background: #e9efed; color: #263c38;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif; letter-spacing: 0;
  overflow: hidden; height: 100dvh; min-height: 0;
}
.forms-only *, .forms-only *::before, .forms-only *::after { box-sizing: border-box; letter-spacing: 0; }
.forms-only #app { height: 100%; min-height: 0; padding: 0; max-width: none; }
.forms-only h1, .forms-only h2, .forms-only h3, .forms-only p { margin: 0; }
.forms-only button, .forms-only input, .forms-only select, .forms-only textarea { font: inherit; color: inherit; }
.forms-only button { cursor: pointer; touch-action: manipulation; }
.forms-only button:disabled { cursor: default; opacity: .48; }
.forms-only button:focus-visible, .forms-only input:focus-visible, .forms-only select:focus-visible, .forms-only textarea:focus-visible {
  outline: 2px solid #367568; outline-offset: 3px;
}
.forms-only [hidden] { display: none !important; }
.forms-only .fe-app {
  /* 色板不再写死在这里：--paper/--ink/--accent/--line 由 skin-fx.css 按皮肤接线，
     否则“换皮肤只换颜色”会永远做不到（specs/036）。 */
  width: min(1160px, 100%); height: 100dvh; margin: auto; overflow: hidden;
  display: grid; grid-template-rows: 66px minmax(0, 1fr) 64px;
  padding: env(safe-area-inset-top) 32px env(safe-area-inset-bottom);
  background: var(--paper); color: var(--ink);
}
.fe-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); }
.fe-wordmark { display: flex; align-items: baseline; gap: 14px; }
.fe-brand { font-family: "Songti SC", "STSong", "SimSun", serif; font-size: 21px; font-weight: 700; }
.fe-wordmark small { font-size: 11px; font-weight: 400; }
.fe-header-tools { display: flex; gap: 4px; }
.fe-btn { background: none; border: 1px solid transparent; padding: 10px 14px; min-height: 42px; border-radius: 4px; line-height: 1.4; text-align: center; }
.fe-wordmark.fe-btn { padding: 0; text-align: left; }
.fe-icon { width: 42px; height: 42px; min-width: 42px; display: inline-grid; place-items: center; padding: 10px; }
.fe-icon svg, .fe-empty svg { width: 22px; height: 22px; fill: currentColor; }
.fe-glyph { font-size: 23px; }
.fe-main { min-height: 0; overflow: hidden; outline: none; position: relative; }
.fe-main > * { height: 100%; min-height: 0; }
.fe-nav { display: flex; align-items: center; justify-content: center; gap: 40px; border-top: 1px solid var(--line); }
.fe-nav .fe-btn { display: flex; gap: 9px; min-width: 88px; align-items: center; justify-content: center; font-size: 12px; border-radius: 0; }
.fe-nav small { font-size: 9px; opacity: .7; }
.fe-nav .fe-current { color: var(--accent); box-shadow: inset 0 -2px var(--accent); font-weight: 700; }
.fe-primary { background: var(--ink); color: var(--paper) !important; padding: 12px 24px; min-width: 154px; }
.fe-quiet { padding-left: 4px; padding-right: 4px; font-size: 12px; }
.fe-context { font-size: 11px; padding: 5px 0; min-height: 36px; }
.fe-meta, .fe-subtle { font-size: 12px; line-height: 1.8; font-weight: 400; }
.fe-meta { color: var(--accent); }
.fe-subtle { opacity: .8; }
.fe-running-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 10px; }
.fe-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.fe-photo { display: block; width: 100%; height: 100%; object-fit: cover; min-height: 0; }
.forms-only h1 { font-family: "Songti SC", "STSong", "SimSun", serif; font-size: 32px; line-height: 1.5; font-weight: 500; white-space: pre-line; overflow-wrap: anywhere; }
.forms-only h2 { font-family: "Songti SC", "STSong", "SimSun", serif; font-size: 23px; line-height: 1.5; }
.forms-only h3 { font-size: 12px; font-weight: 500; }
.fe-task-title { display: grid; gap: 8px; }
.fe-task-title h1 { font-size: 27px; }
.fe-step-heading { display: flex; justify-content: space-between; align-items: center; font-size: 11px; }
.fe-mini-controls { display: flex; gap: 4px; }
.fe-mini-controls button { width: 34px; min-height: 32px; padding: 4px; }
.fe-step-copy { font-size: 15px; line-height: 1.9; min-height: 57px; overflow-wrap: anywhere; }
.fe-single-step { border-top: 1px solid var(--line); padding-top: 9px; display: grid; gap: 8px; }
.fe-single-step > button { justify-self: start; font-size: 12px; border: 1px solid var(--line); }
.fe-step-done { background: #e1eadd; }
.fe-notice { font-size: 11px; color: #866241; line-height: 1.5; }
.fe-desk { display: grid; grid-template-columns: 44px minmax(0, 1fr); padding: 24px 0; gap: 26px; }
.fe-desk-margin { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 12px 0; border-right: 1px solid var(--line); }
.fe-date, .fe-vertical { writing-mode: vertical-rl; font-size: 10px; }
.fe-desk-page { display: grid; grid-template-rows: 36px minmax(0, 1fr) 34px; gap: 12px; min-height: 0; }
.fe-desk-cover, .fe-desk-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; min-height: 0; }
.fe-desk-cover > .fe-photo { border-radius: 46% 46% 0 0; object-position: 55% center; }
.fe-cover-caption, .fe-desk-copy { display: flex; flex-direction: column; justify-content: center; gap: 24px; min-height: 0; }
.fe-cover-caption .fe-primary { align-self: flex-start; margin-top: 16px; }
.fe-colophon { border-top: 1px solid var(--line); display: flex; align-items: end; justify-content: space-between; font-size: 10px; }
.fe-map { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: 60px minmax(0, 1fr); column-gap: 32px; padding-bottom: 22px; }
.fe-map-heading { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
.fe-section-title { font-family: serif; font-size: 22px; }
.fe-atlas { position: relative; min-height: 0; overflow: hidden; background: #e4ebdf; }
.fe-atlas-photo { opacity: .28; object-position: center; filter: saturate(.5); }
.fe-atlas-lines { position: absolute; inset: 8%; border: 1px dashed #759379; border-radius: 47% 32% 41% 29%; transform: rotate(-12deg); }
.fe-atlas-lines::before { content: ""; position: absolute; inset: 12%; border: 1px solid #9cad98; border-radius: 22% 61% 37% 51%; transform: rotate(30deg); }
.fe-map-label { position: absolute; bottom: 12px; left: 16px; font-size: 10px; }
.fe-pin { position: absolute; padding: 8px; display: flex; gap: 6px; flex-direction: column; align-items: center; font-size: 11px; }
.fe-pin-number { border-radius: 50%; width: 34px; height: 34px; background: #f8faf5; display: grid; place-items: center; box-shadow: 0 2px 10px #3c5b3421; }
.fe-pin-active .fe-pin-number { background: #335e48; color: #f9faf7; }
.fe-pin-0 { left: 10%; top: 9%; } .fe-pin-1 { left: 56%; top: 10%; }
.fe-pin-2 { left: 32%; top: 35%; } .fe-pin-3 { left: 6%; top: 61%; }
.fe-pin-4 { left: 66%; top: 53%; } .fe-pin-5 { left: 43%; top: 74%; }
.fe-route-slip { display: flex; flex-direction: column; justify-content: center; gap: 23px; min-height: 0; }
.fe-map-invitation { font-family: serif; font-size: 28px; }
.fe-radio { display: grid; grid-template-rows: 55px minmax(0, 1fr) 66px; }
.fe-player { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center; min-height: 0; }
.fe-record { position: relative; width: 100%; max-width: 390px; aspect-ratio: 1; justify-self: center; border-radius: 50%; padding: 33px; background: repeating-radial-gradient(circle, #443c44 0px, #443c44 2px, #675965 3px, #443c44 4px); box-shadow: 0 16px 40px #47374820; }
.fe-record img { border-radius: 50%; opacity: .9; }
.fe-record-center { position: absolute; width: 25%; height: 25%; border-radius: 50%; left: 37.5%; top: 37.5%; background: #f3ebe5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-family: serif; }
.fe-record-center small { font-size: 9px; }
.fe-track { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.fe-stations { display: flex; gap: 4px; }
.fe-stations button { border-bottom: 1px solid var(--line); font-size: 12px; padding: 8px; }
.fe-waveform { display: flex; gap: 4px; align-items: center; justify-content: center; }
.fe-waveform i { width: 2px; height: var(--bar); background: #ac8d9d; }
[data-stage="active"] .fe-waveform i { animation: fe-wave 1.3s ease-in-out var(--delay) infinite alternate; }
.fe-spinning { animation: fe-spin 60s linear infinite; }
.fe-nav-radio { width: 72%; margin: 0 auto; }
.fe-theatre { display: grid; grid-template-rows: 50px minmax(0, 1fr); grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 34px; padding-bottom: 25px; }
.fe-playbill-top { display: flex; align-items: center; justify-content: space-between; grid-column: 1 / -1; font-size: 11px; }
.fe-stage { position: relative; min-height: 0; overflow: hidden; border-radius: 48% 48% 0 0; }
.fe-stage > img { object-position: center; }
.fe-stage::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, #30282ee0); }
.fe-stage-caption { position: absolute; z-index: 1; left: 28px; right: 28px; bottom: 32px; color: #fcf5ef; display: grid; gap: 10px; }
.fe-stage-caption .fe-meta { color: #efe0d4; }
.fe-stage-caption h1 { font-size: 32px; }
.fe-script { display: flex; flex-direction: column; justify-content: center; gap: 30px; }
.fe-script-intro { display: grid; gap: 22px; font-family: serif; font-size: 21px; }
.fe-nav-theatre { justify-content: space-between; gap: 4px; }
.fe-nav-map .fe-current { border: 1px solid var(--line); box-shadow: none; border-radius: 40px; }
.fe-complete { padding: 12px 0; display: grid; gap: 12px; }
.fe-complete-mark { font-size: 32px; color: var(--accent); }
.fe-complete p { font-family: serif; font-size: 18px; line-height: 1.8; }
.fe-list-page, .fe-styles-page { display: flex; flex-direction: column; gap: 20px; padding: 30px 8%; min-height: 0; }
.fe-page-heading { display: grid; gap: 8px; }
.fe-page-heading h1 { font-size: 27px; }
.fe-items { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; }
.fe-item { width: 100%; display: flex; align-items: center; gap: 18px; text-align: left; border-bottom: 1px solid var(--line); border-radius: 0; padding: 14px 0; min-height: 90px; }
.fe-item > .fe-photo { width: 78px; height: 76px; flex: none; }
.fe-item-copy { min-width: 0; display: grid; gap: 7px; flex: 1; }
.fe-item strong { font-weight: 500; font-size: 15px; overflow-wrap: anywhere; }
.fe-item small { font-size: 11px; opacity: .8; }
.fe-item-family { flex: 0 0 80px; font-size: 11px; color: var(--accent); }
.fe-pager { display: flex; justify-content: center; align-items: center; gap: 18px; font-size: 12px; margin-top: auto; }
.fe-pager button { font-size: 20px; }
.fe-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 16px; text-align: center; }
.fe-plan-row { display: flex; align-items: center; border-bottom: 1px solid var(--line); gap: 12px; }
.fe-plan-open { flex: 1; text-align: left; display: grid; gap: 10px; padding: 18px 0; }
.fe-plan-open small { font-size: 11px; color: var(--accent); }
.fe-plan-open strong { font-weight: 500; }
.fe-library-filter { display: flex; gap: 8px; align-items: center; }
.fe-library-filter select { width: 155px; min-width: 0; }
.fe-library-filter input { flex: 1; min-width: 0; }
.forms-only input:not([type="range"]), .forms-only select, .forms-only textarea { background: #ffffff70; border: 1px solid var(--line, #d2d8cf); border-radius: 4px; padding: 10px; min-height: 42px; width: 100%; max-width: 100%; }
.forms-only input[type="file"] { font-size: 12px; }
.forms-only textarea { resize: none; line-height: 1.7; }
.fe-library-filter select, .fe-library-filter input { width: auto !important; }
.fe-journal-item { text-align: left; border-bottom: 1px solid var(--line); display: grid; gap: 10px; padding: 16px 0; }
.fe-journal-item p { max-height: 54px; overflow: hidden; line-height: 1.8; }
.fe-journal-item small { font-size: 11px; }
.fe-settings-list { display: grid; gap: 0; }
.fe-settings-row { display: grid; grid-template-columns: 1fr auto 18px; align-items: center; gap: 12px; text-align: left; border-bottom: 1px solid var(--line); padding: 15px 0; border-radius: 0; font-size: 14px; }
.fe-settings-row small { font-size: 11px; opacity: .7; }
.fe-style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; min-height: 0; flex: 1; }
.fe-style { display: flex; flex-direction: column; gap: 9px; padding: 0; text-align: left; min-height: 0; }
.fe-style-preview { flex: 1; min-height: 0; width: 100%; position: relative; overflow: hidden; background: #e1e8dd; }
.fe-style-preview > img { height: 100%; }
.fe-style-preview span { position: absolute; bottom: 16px; left: 16px; color: #f9fcf6; background: #1f383b9c; padding: 6px 10px; font-size: 13px; }
.fe-preview-desk img { width: 60%; margin: auto; border-radius: 40% 40% 0 0; }
.fe-preview-radio img { aspect-ratio: 1; width: auto; margin: auto; border-radius: 50%; padding: 12px; background: #5b4859; }
.fe-preview-theatre img { width: 75%; margin: auto; border-radius: 48% 48% 0 0; }
.fe-style-label { display: flex; justify-content: space-between; width: 100%; font-size: 13px; gap: 6px; }
.fe-style-label strong { font-weight: 500; }
.fe-style-label span, .fe-style > small { font-size: 10px; }
.fe-detail { padding: 20px 18%; display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.fe-receipt > .fe-photo, .fe-receipt > .fe-stored-photo { min-height: 0; flex: 1; width: 100%; object-fit: cover; }
.fe-receipt-note { font-family: serif; font-size: 18px; line-height: 1.8; max-height: 90px; overflow: hidden; white-space: pre-wrap; }
.fe-account-form { display: flex; flex-direction: column; gap: 16px; width: min(360px, 100%); }
.fe-field { display: grid; gap: 8px; font-size: 12px; text-align: left; }
.fe-onboard { width: min(580px, 100%); margin: auto; display: flex; flex-direction: column; justify-content: space-between; padding: 35px 24px; gap: 22px; }
.fe-main:has(.fe-onboard) { grid-row: 1 / -1; }
.fe-onboard-intro { display: flex; flex-direction: column; min-height: 0; gap: 20px; }
.fe-onboard-intro > .fe-photo { height: 30dvh; max-height: 280px; border-radius: 45% 45% 0 0; }
.fe-onboard-question { display: grid; gap: 20px; }
.fe-age-value { font: 500 58px/1.2 Georgia, serif; text-align: center; }
.forms-only input[type="range"] { width: 100%; accent-color: #496d60; height: 42px; margin: 0; }
.fe-range-labels { display: flex; justify-content: space-between; font-size: 11px; margin-top: -18px; }
.fe-scene-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fe-scene-choices button { border: 1px solid #cad5ce; padding: 9px 4px; font-size: 12px; min-height: 44px; }
.fe-selected { background: #e1e9de !important; color: #234e3b !important; border-color: #7e9f86 !important; }
.fe-dialog { --line: #d5dcd5; --ink: #263c38; --paper: #f6f8f3; background: var(--paper); color: var(--ink); border: 1px solid var(--line); padding: 28px; border-radius: 8px; width: min(480px, calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow: hidden; box-shadow: 0 20px 80px #243b3233; margin: auto; }
.fe-dialog[open] { display: flex; flex-direction: column; gap: 18px; }
.fe-dialog::backdrop { background: #263b3566; backdrop-filter: blur(5px); }
.fe-dialog > .fe-icon:first-child { position: absolute; top: 12px; right: 10px; }
.fe-dialog h2 { padding-right: 28px; font-size: 21px; }
.fe-choice-group { display: grid; gap: 8px; }
.fe-segments { display: flex; gap: 6px; }
.fe-segments .fe-btn { border: 1px solid var(--line); padding: 9px 8px; font-size: 12px; flex: 1; }
.fe-danger { color: #a33d4d !important; border: 1px solid #dcb8be; }
.fe-stored-photo { display: block; max-height: 28dvh; width: 100%; object-fit: contain; }
.fe-entry-text { max-height: 26dvh; font-size: 14px; line-height: 1.8; overflow: hidden; white-space: pre-wrap; }
.fe-toast { position: fixed; bottom: calc(76px + env(safe-area-inset-bottom)); left: 50%; transform: translate(-50%, 8px); background: #2e433e; color: #f5faf4; padding: 12px 18px; border-radius: 6px; width: max-content; max-width: calc(100% - 32px); z-index: 9999; font-size: 13px; line-height: 1.6; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.fe-toast.fe-visible { opacity: 1; transform: translate(-50%, 0); }
/* 入场动画只在「首次进入该路由」时播一次（[data-enter] 由 index.js 上屏时挂、播完摘）。
   以前是无条件 `.fe-main > * { animation: fe-enter }`，而每次交互都重建整棵子树
   → 用户看到的“整屏一闪”就是它（specs/036）。现在只在 skin-fx.css 的 [data-enter] 下生效。 */
@keyframes fe-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fe-spin { to { transform: rotate(360deg); } }
@keyframes fe-wave { from { transform: scaleY(.4); } to { transform: scaleY(1); } }
@media (hover: hover) and (pointer: fine) { .fe-btn:not(:disabled):hover { filter: brightness(.94); } .fe-style:hover .fe-photo { filter: saturate(1.1); } }
@media (max-width: 700px) {
  .forms-only .fe-app { grid-template-rows: 58px minmax(0, 1fr) 58px; padding-left: 20px; padding-right: 20px; }
  .fe-wordmark { flex-direction: column; gap: 0; }
  .fe-brand { font-size: 18px; }
  .fe-wordmark small { font-size: 9px; }
  .fe-header-tools { gap: 0; }
  .fe-icon { min-width: 38px; width: 38px; height: 42px; padding: 9px; }
  .fe-nav { gap: 0; justify-content: space-between; }
  .fe-nav .fe-btn { min-width: 0; padding: 12px 8px; gap: 5px; }
  .fe-nav-radio { width: 100%; }
  .fe-desk { grid-template-columns: 19px minmax(0, 1fr); gap: 13px; padding: 12px 0; }
  .fe-desk-margin { padding: 8px 0; }
  .fe-date, .fe-vertical { font-size: 9px; }
  .fe-desk-page { grid-template-rows: 30px minmax(0, 1fr) 26px; gap: 8px; }
  .fe-running-head { font-size: 8px; gap: 5px; }
  .fe-context { font-size: 10px; min-height: 30px; }
  .fe-desk-cover, .fe-desk-story { display: flex; flex-direction: column; gap: 18px; }
  .fe-desk-cover > .fe-photo { height: 0; flex: 1; max-height: 270px; min-height: 90px; object-position: center 43%; }
  .fe-cover-caption { gap: 12px; flex: none; }
  .fe-cover-caption h1 { font-size: 29px; line-height: 1.5; }
  .fe-cover-caption .fe-primary { margin-top: 3px; }
  .fe-colophon { font-size: 8px; gap: 5px; }
  .fe-desk-story > .fe-photo { height: 0; min-height: 65px; flex: 1; max-height: 190px; }
  .fe-desk-copy { flex: none; gap: 12px; }
  .fe-task-title { gap: 5px; }
  .fe-task-title h1 { font-size: 23px; line-height: 1.5; }
  .fe-meta { font-size: 10px; }
  .fe-step-copy { font-size: 13px; min-height: 45px; line-height: 1.7; }
  .fe-single-step { gap: 5px; padding-top: 5px; }
  .fe-actions { gap: 5px; flex-wrap: nowrap; }
  .fe-actions .fe-primary { min-width: 130px; padding: 11px 16px; font-size: 13px; }
  .fe-actions .fe-quiet { font-size: 11px; }
  .fe-map { display: flex; flex-direction: column; gap: 13px; padding: 12px 0; }
  .fe-map-heading { flex: none; }
  .fe-section-title { font-size: 20px; }
  .fe-atlas { flex: 1; min-height: 100px; max-height: 310px; }
  .fe-pin { padding: 3px; gap: 3px; font-size: 9px; }
  .fe-pin-number { width: 26px; height: 26px; font-size: 10px; }
  .fe-pin-5 { left: 40%; top: 67%; }
  .fe-pin-3 { top: 56%; } .fe-pin-4 { top: 47%; }
  .fe-map-label { font-size: 8px; bottom: 6px; left: 8px; }
  .fe-route-slip { flex: none; gap: 12px; }
  .fe-map-invitation { font-size: 24px; }
  .fe-radio { grid-template-rows: 42px minmax(0, 1fr) 34px; }
  .fe-player { display: flex; flex-direction: column; gap: 18px; justify-content: center; }
  .fe-record { width: auto; height: min(28dvh, 215px); max-height: 35%; padding: 20px; flex: none; }
  .fe-record .fe-photo { aspect-ratio: 1; width: auto; }
  .fe-record-center { font-size: 11px; }
  .fe-record-center small { font-size: 6px; }
  .fe-track { gap: 12px; width: 100%; }
  .fe-track > h1 { font-size: 27px; }
  .fe-stations button { font-size: 10px; }
  .fe-waveform { gap: 3px; overflow: hidden; }
  .fe-waveform i { height: calc(var(--bar) * .5); flex: none; }
  .fe-theatre { grid-template-columns: 1fr; grid-template-rows: 36px minmax(90px, 1fr) auto; gap: 13px; padding-bottom: 16px; }
  .fe-playbill-top { font-size: 10px; }
  .fe-stage { margin: 0 10px; }
  .fe-stage-caption { left: 20px; right: 20px; bottom: 20px; gap: 5px; }
  .fe-stage-caption h1 { font-size: 27px; }
  .fe-script { gap: 14px; }
  .fe-script-intro { gap: 10px; font-size: 17px; }
  .fe-script-intro .fe-context { justify-self: start; }
  .fe-complete { gap: 8px; padding: 0; }
  .fe-complete-mark { font-size: 26px; }
  .fe-complete p { font-size: 15px; }
  .fe-list-page, .fe-styles-page { padding: 22px 0 12px; gap: 16px; }
  .fe-page-heading h1 { font-size: 23px; }
  .fe-page-heading { gap: 4px; }
  .fe-item { min-height: 75px; gap: 12px; padding: 10px 0; }
  .fe-item > .fe-photo { width: 58px; height: 64px; }
  .fe-item strong { font-size: 13px; line-height: 1.6; }
  .fe-item-family { flex-basis: 55px; font-size: 10px; }
  .fe-library-filter { gap: 3px; flex-wrap: wrap; }
  .fe-library-filter select { width: 100px !important; flex: 1; font-size: 11px; }
  .fe-library-filter input { width: 120px !important; flex: 1.3; font-size: 11px; }
  .fe-library-filter .fe-btn { padding: 6px 9px; font-size: 11px; }
  .fe-settings-row { font-size: 13px; padding: 13px 0; gap: 6px; }
  .fe-settings-row small { font-size: 10px; }
  .fe-style-grid { gap: 18px 12px; grid-template-rows: 1fr 1fr; }
  .fe-style-preview { min-height: 80px; }
  .fe-style-preview span { left: 8px; bottom: 8px; font-size: 10px; padding: 4px 5px; }
  .fe-style-label { font-size: 12px; flex-wrap: wrap; gap: 2px; }
  .fe-style > small { line-height: 1.6; font-size: 9px; }
  .fe-detail { padding: 15px 0; gap: 12px; }
  .fe-detail .fe-task-title h1 { font-size: 22px; }
  .fe-receipt-note { font-size: 15px; max-height: 55px; }
  .fe-onboard { padding: 28px 0; }
  .fe-onboard h1 { font-size: 30px; }
  .fe-onboard-question { gap: 18px; }
  .fe-onboard-intro > .fe-photo { height: 28dvh; }
  .fe-scene-choices { gap: 6px; }
  .fe-scene-choices .fe-btn { font-size: 10px; }
  .fe-dialog { padding: 22px 18px; }
  .fe-dialog[open] { gap: 14px; }
}
@media (max-height: 680px) {
  .forms-only .fe-app { grid-template-rows: 52px minmax(0, 1fr) 50px; }
  .fe-desk { padding: 8px 0; }
  .fe-desk-cover, .fe-desk-story { gap: 10px; }
  .fe-cover-caption h1, .fe-track > h1 { font-size: 25px; }
  .fe-cover-caption, .fe-desk-copy, .fe-track { gap: 8px; }
  .fe-desk-story > .fe-photo { min-height: 40px; max-height: 90px; }
  .fe-task-title h1 { font-size: 20px; }
  .fe-record { height: 115px; padding: 12px; }
  .fe-radio { grid-template-rows: 30px minmax(0, 1fr) 22px; }
  .fe-player { gap: 10px; }
  .fe-step-copy { min-height: 35px; font-size: 12px; }
  .fe-map { gap: 8px; }
  .fe-atlas { max-height: 180px; }
  .fe-theatre { gap: 8px; }
  .fe-stage-caption h1 { font-size: 22px; }
  .fe-script { gap: 8px; }
  .fe-list-page, .fe-styles-page { padding-top: 12px; gap: 10px; }
  .fe-item { min-height: 65px; }
  .fe-settings-row { padding: 10px 0; }
  .fe-onboard { padding: 18px 0; gap: 12px; }
  .fe-onboard h1 { font-size: 25px; }
  .fe-onboard-question { gap: 12px; }
  .fe-dialog[open] { gap: 9px; }
  .fe-choice-group { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .fe-main > *, .fe-spinning, [data-stage="active"] .fe-waveform i { animation: none !important; }
  .fe-toast { transition: none; }
}