/* Desktop layout shares the mobile theme, content and study controller. */
.desktop-header{display:none}
@media(min-width:600px) and (max-width:799px){body{padding-top:20px}.phone{min-height:calc(100dvh - 40px)}}
@media(min-width:800px){
  :root{background:var(--bg)}
  body{padding:0}
  .desktop-header{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:auto;padding:28px 40px;border-bottom:1px solid var(--line)}
  .desktop-brand{display:flex;align-items:center;gap:20px;color:var(--ink);text-decoration:none;font-size:21px;font-weight:600}
  .desktop-brand span{font-size:12px;color:var(--muted);font-weight:400;border-left:1px solid var(--line);padding-left:20px}
  .desktop-header nav{display:flex;align-items:center;gap:28px;font-size:12px;color:var(--muted)}
  .desktop-header nav a{color:var(--green);text-decoration:none}
  .desktop-header a:focus-visible{outline:2px solid var(--green);outline-offset:6px;border-radius:4px}
  .phone{max-width:1200px;min-height:calc(100dvh - 88px);padding:0 40px 36px;border:0;border-radius:0;box-shadow:none;overflow:visible}
  .book-home{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr);column-gap:64px;align-content:start;padding-top:48px}
  .book-home .header{display:none}
  .book-home h1{grid-column:1/-1;grid-row:1;margin:0;font-size:32px;line-height:1.5;letter-spacing:-.8px}
  .book-home .subtitle{grid-column:1/-1;grid-row:2;margin-top:10px;font-size:14px}
  .book-stage{grid-column:1;grid-row:3/7;height:390px;margin:36px 0 0;border-radius:var(--radius);background:var(--soft)}
  .book{top:64px}
  .book-home .chapter-picker{grid-column:2;grid-row:3;margin-top:76px;padding:28px;border-radius:var(--radius)}
  .chapter-label .chapter-name{font-size:24px}
  .chapter-current{gap:10px}
  .chapter-range{margin-top:28px}
  .ticks{font-size:12px}
  .book-home .picker-hint{grid-column:2;grid-row:4;margin:16px 0 0;text-align:left;font-size:12px}
  .book-home .launch{grid-column:2;grid-row:5;margin:24px 0 0;height:56px}
  .book-dots{grid-column:1;grid-row:7;margin:20px 0 0}
  .book-home .footer{grid-column:1/-1;grid-row:8;text-align:left;margin-top:44px;padding-top:22px;border-top:1px solid var(--line);font-size:12px}
  .study{max-width:960px;min-height:0;margin:28px auto 0;display:grid;grid-template-columns:1fr auto;column-gap:24px}
  .study-top{grid-column:1/-1;padding:0 0 14px}
  .icon{margin-left:0;background:var(--soft);font-size:28px}
  .unit-title{font-size:18px}
  .unit-title small{font-size:12px;margin-top:6px}
  .count{font-size:14px;min-width:44px}
  .study .track{grid-column:1/-1;margin:4px 0 24px}
  .study .mode{grid-column:2;grid-row:3;width:240px;margin:0 0 18px}
  .study-intro{grid-column:1;grid-row:3;align-self:center;justify-content:flex-start;gap:24px;font-size:13px;margin:0 0 18px}
  .study .card{grid-column:1/-1;min-height:350px;padding:40px 48px;border-radius:20px}
  .question{font-size:32px;font-weight:500;max-width:760px}
  .en{font-size:30px}
  .question.long,.en.long{font-size:24px}
  .card .hint{margin-top:16px}
  .card:has(.en){display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);grid-template-rows:auto 1fr;gap:24px 36px;align-items:center;text-align:left}
  .card:has(.en) .label:first-child{grid-column:1;grid-row:1}
  .card:has(.en) .question{grid-column:1;grid-row:2;margin:0;align-self:center}
  .card:has(.en) hr{grid-column:2;grid-row:1/3;width:1px;height:100%;border:0;background:var(--line);margin:0}
  .card:has(.en) hr + .label{grid-column:3;grid-row:1}
  .card:has(.en) .en{grid-column:3;grid-row:2;margin:0}
  .grammar-study .card{min-height:390px}
  .grammar-study .question{font-size:23px}
  .grammar-study .en{font-size:20px}
  .under{grid-column:1/-1;margin-top:20px;font-size:12px}
  .study .actions{grid-column:1/-1;justify-self:center;width:460px;max-width:100%;position:static;padding:20px 0 0;gap:16px}
  .complete{max-width:700px;min-height:0;margin:56px auto 0;padding:44px 64px;background:var(--surface);border:1px solid var(--line);border-radius:20px}
  .complete h1{font-size:30px;margin:0 0 10px}
  .complete .number{margin:24px 0 0;font-size:64px}
  .complete .actions{background:transparent;margin-top:12px;padding-bottom:0}
  .complete .footer{margin-top:24px}
}
@media(min-width:800px) and (max-width:1023px){
  .desktop-header{padding:24px 32px}
  .phone{padding-left:32px;padding-right:32px}
  .book-home{column-gap:32px;grid-template-columns:minmax(0,1fr) minmax(280px,1fr);padding-top:36px}
  .book-home h1{font-size:28px}
  .book-home .chapter-picker{padding:20px}
  .study .card{padding:32px}
  .card:has(.en){column-gap:24px}
  .question,.en{font-size:26px}
  .question.long,.en.long{font-size:21px}
}
@media(min-width:800px) and (max-height:800px){
  .desktop-header{padding-top:20px;padding-bottom:20px}
  .phone{min-height:calc(100dvh - 72px);padding-bottom:24px}
  .book-home{padding-top:28px}
  .book-stage{height:340px;margin-top:24px}
  .book{top:40px}
  .book-home .chapter-picker{margin-top:36px}
  .book-home .footer{margin-top:28px;padding-top:18px}
  .study{margin-top:20px}
  .study .card{min-height:280px;padding-top:28px;padding-bottom:28px}
  .grammar-study .card{min-height:320px}
  .study .actions{padding-top:16px}
  .under{margin-top:16px}
  .complete{margin-top:28px;padding-top:32px;padding-bottom:32px}
}