/* Visual identity. Screen styles only; printed practice sheets keep their layout. */
@media screen {
  :root{--ink:#172d25;--green:#205c48;--muted:#52655c;--line:#dce5df;--bg:#f4f6f3;--type-page-title:50px;--type-section-title:25px;--type-subtitle:20px}
  body{background:var(--bg);font-family:system-ui,'Segoe UI',Arial,sans-serif;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
  .wrap{max-width:1160px;padding-inline:32px}
  .top{height:auto;min-height:82px;background:#fff;border-bottom:1px solid var(--line);box-shadow:none}
  .nav{min-height:82px;gap:28px}
  .brand{margin-right:0;padding-right:28px;border-right:1px solid var(--line);gap:12px;font-size:22px;letter-spacing:-.04em;color:#173e2c}
  .logo{width:40px;height:40px;border-radius:12px;background:#205c48;box-shadow:inset 0 0 0 1px #ffffff1c;font-size:23px}
  .navlinks{gap:6px}
  .nav-tab,.navlinks>a{min-height:42px;padding:0 18px;border:1px solid transparent;border-radius:10px;background:transparent;font-size:14px;font-weight:600;color:#40594d;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
  .nav-tab:hover,.navlinks>a:hover{background:#edf3ef;border-color:transparent;color:#205c48}
  .nav-tab.active,.nav-tab.active:hover{background:#205c48;border-color:#205c48;color:#fff;box-shadow:none}
  .lang{min-height:34px;padding:0 10px;border:1px solid #dce5df;border-radius:8px;font-size:12px;font-weight:600;letter-spacing:.04em;background:#fafcfb;color:#40594d}
  .hero{margin:32px 0 28px;padding:44px 48px;min-height:320px;border:1px solid #dce5df;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 8px 28px #213d2f05;align-items:center}
  .hero::before{inset:0;width:100%;height:100%;transform:none;background-image:linear-gradient(90deg,#fffffffa 0%,#ffffffed 34%,#ffffff9c 57%,#ffffff08 82%),url('assets/hero-centered.webp?r=ffc8ea75668bbbe3bfbf0327789bdf568c77648561979ca6e17a25c42c81d67d');background-position:center;background-size:cover}
  .hero[data-view="worksheet"]::before{background-image:linear-gradient(90deg,#fffffffa 0%,#fffffff0 35%,#ffffff99 57%,#ffffff10 84%),url('assets/practice-desk-jade.webp?r=ffc8ea75668bbbe3bfbf0327789bdf568c77648561979ca6e17a25c42c81d67d');background-position:center 48%}
  .hero[data-view="dictation"]::before{background-image:linear-gradient(90deg,#fffffffa 0%,#fffffff0 35%,#ffffff99 57%,#ffffff10 84%),url('assets/hero-dictado.webp?r=ffc8ea75668bbbe3bfbf0327789bdf568c77648561979ca6e17a25c42c81d67d');background-position:center}
  .hero::after{display:none}
  .hero>div{width:100%;max-width:580px}
  .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:10px;line-height:1.4;font-weight:700;letter-spacing:.16em;color:#205c48}
  .eyebrow::before{content:'';width:18px;height:2px;background:#205c48;flex:none}
  .hero h1{font-family:system-ui,'Segoe UI',sans-serif;font-size:clamp(36px,4.2vw,50px);line-height:1.12;letter-spacing:-.045em;font-weight:700;margin:18px 0 18px;max-width:620px;color:#172d25;text-wrap:balance}
  .hero h1 span{color:#205c48}
  .hero p,.hero .lead{max-width:490px;margin:0;font-size:16px;line-height:1.7;text-align:left;text-align-last:auto;color:#40594d}
  .layout{padding-bottom:64px}
  .card,.layout.view-dictation #dictationPanel{padding:32px;border:1px solid #dce5df;border-radius:20px;background:#fff;box-shadow:0 8px 30px #243c2e05}
  .layout.view-practice .leftcol,.layout.view-worksheet .rightcol,.layout.view-dictation #dictationPanel{max-width:none;width:100%}
  .cardhead{margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid #e3eae5}
  .cardhead h2{font-family:system-ui,'Segoe UI',sans-serif;font-size:25px;line-height:1.25;letter-spacing:-.025em;font-weight:650;color:#172d25}
  .tabs{gap:28px;margin-top:0;margin-bottom:28px}
  .tab{padding:0 0 14px;font-size:14px;font-weight:600;letter-spacing:0}
  .tab.active{color:#205c48;border-bottom:2px solid #205c48}
  .fieldlabel{display:block;font-size:13px;font-weight:650;color:#304f40;margin-bottom:10px;letter-spacing:0}
  .textinput,.dictsearch,.sentrow input{min-height:54px;border-radius:11px;background:#fff;font-size:17px;padding:13px 16px;color:#172d25;box-shadow:0 1px 2px #1b3a2904}
  .textinput:hover,.dictsearch:hover,.sentrow input:hover{background:#fcfdfc}
  .textinput:focus,.dictsearch:focus,.sentrow input:focus{background:#fff;box-shadow:0 0 0 4px #205c4810}
  .inputrow,.worksheet-search-row,.dictation-add-row{gap:12px}
  .primary,.printbtn,.savebtn{min-height:48px;padding:12px 22px;border-radius:11px;font-size:14px;font-weight:650;letter-spacing:0;box-shadow:none}
  .primary,.printbtn{background:#205c48}
  .primary:hover,.printbtn:hover{background:#174735}
  .hint{margin-top:10px;font-size:13px;line-height:1.65}
  .card .hint{font-size:13px;line-height:1.65}
  .iconbtn,.audio-btn{border-radius:8px;font-size:13px;min-height:36px}
  .workspace{gap:20px;margin-top:28px}
  .pane,#practicar .pane{border:1px solid #e0e8e2;border-radius:16px;background:#f8faf8;padding:24px}
  .pane-title{font-size:11px;letter-spacing:.09em;border-left-color:#205c48}
  .meaning{font-size:15px;line-height:1.65}
  .pinyin{font-size:20px}
  .worksheet-draw-prompt,.dictation-draw-prompt{color:#205c48;font-size:13px;font-weight:600;text-underline-offset:4px;padding-block:7px}
  #worksheetPanel .worksheet-character-search{padding-bottom:20px}
  #worksheetPanel .worksheet-character-details{padding:20px;border:1px solid #dce5df;border-radius:14px;margin-top:16px;background:#f8faf8}
  .stroke-display-controls{margin-block:18px;gap:12px 24px}
  .stroke-display-controls select,.dictation-controls select{min-height:36px;border-radius:8px;font-size:13px;padding:6px 10px}
  #worksheetPanel .worksheet-preview{margin-top:18px;border:1px solid #dce5df;border-radius:14px;padding:18px;background:#fcfdfc}
  .previewtitle{margin-bottom:14px}
  .worksheet-actions{gap:12px;margin-top:18px}
  .dictation-mode-tabs{gap:24px;margin-bottom:24px}
  .dictation-mode-tabs span{padding-bottom:13px;font-weight:600}
  .dictation-mode-tabs small{margin-left:6px;padding:3px 7px;border-radius:5px;background:#eef2ef;font-size:10px;font-weight:500;white-space:nowrap}
  .dictation-intro{margin-bottom:22px;font-size:15px;line-height:1.65;text-align:left}
  #dictationPanel .dictation-intro{font-size:15px;line-height:1.65;margin-bottom:22px}
  .dictation-selection-head{margin-top:24px;padding-top:20px;font-size:14px}
  .dictation-choice{padding:16px 18px;border-radius:13px;background:#f8faf8;border-color:#dce5df}
  .dictation-choice strong{font-size:23px}
  .dictation-choice .dictation-choice-reading,.dictation-choice .dictation-choice-meaning{font-family:inherit;font-size:14px;line-height:1.6}
  .dictation-controls{margin-top:20px;padding-top:20px}
  .dictation-answer-card,.sentence-result{padding:22px;border-radius:14px;background:#fff;border-color:#dce5df}
  .autocomplete{border-radius:12px;box-shadow:0 12px 30px #173a2410;border-color:#dce5df;margin-top:8px}
  .autocomplete button{padding:12px 14px;border-bottom-color:#edf1ee}
  .privacy-examples{background:#f4f7f4;border-color:#c8d5cc;border-radius:12px;padding:16px;font-size:14px}
  .privacy-examples p{font-size:13px}
  .foot{max-width:none;border-top:1px solid #dce5df;padding:28px 24px 36px;background:#edf2ed;font-size:12px;line-height:1.7;text-align:center}
  .foot>p{margin:0 0 14px;font-weight:500}
  .foot nav{gap:4px 24px}
  .foot nav a{text-decoration-color:#99afa2;text-underline-offset:4px}
  .foot nav a:hover{text-decoration-color:#205c48}
  .content{padding:32px;border-radius:20px;border-color:#dce5df;box-shadow:0 8px 30px #243c2e05}
  .section>p,.feature p{text-align:left;text-align-last:auto;line-height:1.7}
  .feature{padding:20px;border-radius:12px;background:#f8faf8;border-color:#dce5df}
  .legal-page{background:#f4f6f3;font-size:16px}
  .legal-page header,.legal-page footer,.legal-page main{max-width:960px}
  .legal-page header{padding-block:30px 12px}
  .legal-page header>a{font-size:14px;font-weight:600}
  .legal-page nav{gap:6px 22px;font-size:13px}
  .legal-page main{padding:40px 44px;border-color:#dce5df;border-radius:20px;box-shadow:0 8px 30px #243c2e05;margin-block:22px}
  .legal-page h1{font-size:38px;letter-spacing:-.035em;margin:12px 0 26px;line-height:1.2}
  .legal-page h2{font-size:22px;font-weight:650;letter-spacing:-.015em;margin-top:32px}
  .legal-page .legal-notice{border:1px solid #dbcda9;border-radius:12px;background:#faf6eb;font-size:14px;line-height:1.7;padding:18px 20px}
  .legal-page .updated{font-size:12px;text-transform:uppercase;letter-spacing:.08em}
  @media(max-width:850px){
    .wrap{padding-inline:24px}.nav{gap:18px}.brand{padding-right:20px;font-size:21px}.nav-tab,.navlinks>a{padding-inline:13px;font-size:13px}
    .hero{padding:36px;min-height:300px}.hero h1{font-size:42px}.hero p{max-width:460px;font-size:15px}
    .card,.layout.view-dictation #dictationPanel{padding:26px}
  }
  @media(max-width:640px){
    .wrap{padding-inline:16px}.top{min-height:0}.nav{min-height:0;gap:12px;padding-block:16px}.brand{border:0;padding:0;font-size:21px}.logo{width:36px;height:36px;font-size:21px}
    .navlinks{width:100%;display:flex;gap:6px;padding:0;overflow:visible}.nav-tab,.navlinks>a{flex:1;min-height:40px;padding-inline:8px;font-size:12px;text-align:center;white-space:nowrap}.navright{display:none}
    .hero{margin:20px 0;padding:28px 24px;min-height:275px;border-radius:18px}.hero h1{font-size:34px;margin:15px 0;line-height:1.14}.hero p{font-size:14px;line-height:1.7}.eyebrow{font-size:9px;letter-spacing:.12em}
    .hero::before{background-image:linear-gradient(90deg,#fffffff5,#ffffffd6 65%,#ffffffb3),url('assets/hero-centered.webp?r=ffc8ea75668bbbe3bfbf0327789bdf568c77648561979ca6e17a25c42c81d67d')}
    .hero[data-view="worksheet"]::before{background-image:linear-gradient(90deg,#fffffff5,#ffffffde 65%,#ffffffb3),url('assets/practice-desk-jade.webp?r=ffc8ea75668bbbe3bfbf0327789bdf568c77648561979ca6e17a25c42c81d67d')}
    .hero[data-view="dictation"]::before{background-image:linear-gradient(90deg,#fffffff5,#ffffffde 65%,#ffffffb3),url('assets/hero-dictado.webp?r=ffc8ea75668bbbe3bfbf0327789bdf568c77648561979ca6e17a25c42c81d67d')}
    .card,.layout.view-dictation #dictationPanel{padding:22px 18px;border-radius:16px}.cardhead{padding-bottom:17px;margin-bottom:20px}.cardhead h2{font-size:22px}.tabs{margin-bottom:24px}
    .pane,#practicar .pane{padding:18px}.textinput,.dictsearch,.sentrow input{font-size:16px;min-height:50px}.primary{padding-inline:16px}
    #worksheetPanel .worksheet-character-details{padding:16px}.dictation-add-row{gap:8px}.dictation-add-row button{min-width:84px}.dictation-choice{padding:16px}.foot{padding-inline:20px}.foot nav{gap:2px 18px}
    .content{padding:22px 18px}.legal-page header,.legal-page footer{padding-inline:22px}.legal-page main{margin:16px 12px;padding:26px 22px;border-radius:16px}.legal-page h1{font-size:30px}.legal-page h2{font-size:20px}
  }
}

@media screen and (max-width:760px){.hero[data-view="dictation"]::before{background-image:linear-gradient(90deg,#fffffff5,#ffffffde 65%,#ffffffb3),url("assets/hero-dictado-mobile.webp?r=ffc8ea75668bbbe3bfbf0327789bdf568c77648561979ca6e17a25c42c81d67d");}}