/* 一言官网 V4: stable hero demo, offline privacy, OS-aware downloads, photographic editorial social-proof layout */
:root { --v4-muted: #8d98a6; }
[hidden] { display: none !important; }
/* Eliminate scroll layout shift at every stage of the hero animation. */
.hero { padding-top: 68px; }
.hero h1 { max-width: 940px; margin-inline: auto; line-height: 1.24; }
.hero-copy > p:not(.meta) { max-width: 730px; }
.hero .actions { margin-top: 26px; }
.hero .actions .button { min-width: 202px; }
.hero-stage { height: 420px; margin-top: 43px; overflow: visible; }
.hero .desktop-stage { height: 100%; box-sizing: border-box; }
.hero .note-window { height: 100%; box-sizing: border-box; }
.hero .note-layout { min-height: 0; height: calc(100% - 38px); }
.hero .note-page { box-sizing: border-box; overflow: hidden; }
.hero .note-page h2 { margin-top: 11px; }
.hero-writing { height: 42px; min-height: 42px; max-height: 42px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hero .ime { width: min(100%, 428px); height: 176px; min-height: 176px; max-height: 176px; overflow: hidden; box-sizing: border-box; }
.hero .ime-raw { height: 30px; min-height: 30px; max-height: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: normal; }
.hero .ime-list { height: 81px; min-height: 81px; overflow: hidden; }
.hero .ime-en-option { max-height: 52px; overflow: hidden; font-size: 11px; }
.hero .ime-bottom { margin-top: 0; padding-top: 5px; }
.privacy-copy p { max-width: 460px; }
.privacy-copy h2 { font-size: clamp(29px,3vw,43px); }
/* Mail retains input flow but no decorative keyboard. */
.expression-section .mail-demo { max-width: 810px; }
.expression-section .mail-window { box-shadow: 0 17px 45px #25354a0e; }
/* Editorial feedback row: a *real* photo is a visual illustration, never a customer identity. */
.voices-heading h2 { font-size: clamp(29px,3.1vw,44px); }
.voices-heading p { max-width: 580px; margin: 13px auto 0; }
.marquee-field { margin-top: 40px; gap: 15px; }
.voice-pill { padding: 9px 15px 9px 7px; gap: 12px; border-radius: 100px; font-size: 12px; color: #4c596a; text-decoration: none; }
.voice-pill:hover { box-shadow: 0 8px 22px #2b3f550f; border-color: #d1dce8; }
.voice-avatar { border-radius: 50%; height: 36px; width: 36px; flex: none; position: relative; background: radial-gradient(circle at 50% 37%,#f7e6d7 0 22%,transparent 24%),radial-gradient(ellipse at 50% 110%,#9daec0 0 39%, transparent 40%),#e8eef4; overflow:hidden; }
.voice-avatar img { width: 100%; height: 100%; object-fit: cover; display:block; }
.voice-avatar.photo-unavailable img { opacity: 0; }
.feedback-pill-source { font-size: 10px; font-weight: 400; color: #abb5c1; border-left: 1px solid #e6eaf0; padding-left: 9px; white-space: nowrap; }
.feedback-source-note { margin-top: 27px; text-align: center; font-size: 10px; color: #a2aebc; letter-spacing: .05px; }
/* Download area: primary complete edition plus secondary standard edition. */
.download-panel { gap: 45px; grid-template-columns: minmax(0,0.93fr) minmax(0,1.07fr); padding: 58px 58px; }
.download-copy h2 { font-size: clamp(26px,2.65vw,35px); max-width: 440px; line-height:1.4; }
.os-hint { color: #9eb1c3; font-size: 11px; margin-top: 23px; line-height: 1.6; }
.platform-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 4px; background: #19222c80; border: 1px solid #576373; border-radius: 9px; margin-bottom: 27px; }
.platform-tabs button { min-height: 42px; padding: 9px 15px; color: #abb6c3; font-size: 13px; border-radius: 6px; display:flex; gap:9px; align-items:center; justify-content:center; transition:background .15s, color .15s; }
.platform-tabs button[aria-pressed="true"] { color: #1d2833; background: #f6f8fa; font-weight: 600; box-shadow: 0 2px 7px #10182528; }
.platform-mark { font-size: 18px; line-height: 1; }
.download-version-tag { font-size: 11px; color: #afbed0; margin: 0 0 9px; }
.download-choice h3 { font-size: 23px; letter-spacing: -.45px; }
.download-choice #edition-description { min-height: 45px; color: #b3c0cc; margin-top: 10px; font-size: 12px; }
.download-primary-actions { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(110px,.72fr); gap: 10px; margin-top: 20px; }
.download-choice .download-primary-actions .button { width: 100%; min-width: 0; padding-inline: 13px; box-sizing: border-box; margin-top: 0; font-size: 13px; }
.download-primary-actions .dictionary-button { border: 1px solid #727f8c; background: transparent; color: #f2f6fa; }
.download-primary-actions .dictionary-button:hover { background: #425263; }
.download-choice #download-status { margin-top: 10px; min-height: 21px; font-size: 10px; color: #93a2b3; }
.download-secondary-actions { border-top: 1px solid #495665; padding-top: 15px; margin-top: 14px; display:flex; gap: 26px; align-items:center; flex-wrap:wrap; }
.download-secondary-actions a,.download-secondary-actions .text-button { color:#c2cdda; text-decoration:none; font-size:12px; margin-top:0; padding:5px 0; cursor:pointer; }
.download-secondary-actions a:hover,.download-secondary-actions .text-button:hover { color:white; text-decoration: underline; text-underline-offset: 4px; }
.download-secondary-actions a[aria-disabled="true"] { opacity:.52; cursor:default; }
.mac-minimum { margin: 13px 0 0 !important; font-size: 11px !important; color: #a7bdd3 !important; }
.compare-table thead th:nth-child(2) { background: #f8f9fb; }
.compare-table thead th:nth-child(3) { background: #eef3f8; }
/* Dictionary modal */
#dictionary-dialog { width:min(540px,calc(100% - 25px)); }
.dictionary-intro { margin-bottom: 16px; }
.dictionary-list { border: 1px solid #e9edf1; border-radius: 10px; overflow:hidden; margin: 18px 0 25px; }
.dictionary-item { display:flex; gap:18px; justify-content:space-between; align-items:center; padding: 15px 16px; border-bottom:1px solid #edf0f3; }
.dictionary-item:last-child {border-bottom:0;}
.dictionary-item strong { display:block; font-size:13px; color:#344154; font-weight:620; }
.dictionary-item p { font-size:11px; line-height:1.7; margin:4px 0 0; color:#84909d; }
.dictionary-download-link { display:inline-block; flex:none; font-size:11px; border:1px solid #d4dce5; border-radius:5px; padding:7px 9px; color:#345474; }
.dictionary-download-link[aria-disabled="true"] { color:#a5b1bc; background:#fafbfd; cursor:default; }
@media(max-width:1000px) {
  .download-panel { gap:27px; padding: 38px; }
  .hero .desktop-stage { padding-inline:32px; }
}
@media(max-width:760px) {
  .hero { padding-top: 52px; }
  .hero-stage { height: 370px; margin-top: 30px; }
  .hero .desktop-stage { padding-inline: 9px; }
  .hero .note-page { padding: 24px 24px; }
  .hero .note-layout { height:calc(100% - 38px); }
  .hero .note-sidebar { padding-top:19px; }
  .hero-writing { height: 35px; max-height:35px; font-size: 13px; }
  .hero .ime { height: 164px; min-height:164px; max-height:164px; }
  .download-panel { grid-template-columns:1fr; gap:28px; }
  .download-choice { padding-top: 24px; }
  .privacy-copy p { max-width: 600px; }
}
@media(max-width:480px) {
  .hero h1 { font-size: clamp(32px,9vw,37px); letter-spacing:-1.15px; }
  .hero .actions { flex-direction:row; margin-top: 24px; }
  .hero .actions .button { min-width:195px; }
  .hero-stage { height: 342px; }
  .hero .desktop-stage { padding:0; }
  .hero .note-page { padding:18px 17px; }
  .hero .note-page h2 { font-size:19px; margin-top:10px; }
  .note-recipient { font-size:9px; }
  .hero-writing { font-size:12px; margin-top:13px; height:32px; min-height:32px; max-height:32px; }
  .hero .ime { width:100%; height:160px; min-height:160px; max-height:160px; }
  .hero .ime-raw { font-size:11px; height:26px; min-height:26px; max-height:26px; }
  .hero .ime-list { height:77px; min-height:77px; }
  .hero .ime-en-option { font-size:10px; }
  .voice-pill { font-size:11px; }
  .feedback-pill-source { display:none; }
  .feedback-source-note {font-size:9px; line-height:1.7; padding-inline: 17px;}
  .download-panel { padding: 31px 24px; }
  .download-primary-actions { grid-template-columns: 1fr 0.7fr; gap:7px; }
  .download-choice .download-primary-actions .button {font-size:11px;padding:11px 8px;}
  .download-choice h3 {font-size:20px;}
  .site-header .button { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) {
  .hero .caret,.mail-demo .caret {animation:none;}
}