/* Phraseflow, edition 03. A quiet workspace with a precise motion system. */
html[data-theme]{--bg:#101012;--white:#1c1c1f;--ink:#f5f5f7;--muted:#a1a1a9;--line:#ffffff12;--soft:#2997ff12;--blue:#2997ff10;--accent:#64b5ff;--green:#64b5ff;--navy:#17171b;--radius:26px;--shadow:0 12px 40px #00000012;--surface-2:#252529;--glass:#17171bd9;--highlight:#ffffff09;--ease:cubic-bezier(.22,1,.36,1);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
html[data-theme="light"]{--bg:#f5f5f7;--white:#fff;--ink:#1d1d1f;--muted:#6e6e73;--line:#0000000c;--soft:#0071e30b;--blue:#0071e309;--accent:#0071e3;--green:#0071e3;--navy:#1d1d1f;--shadow:0 12px 40px #00000005;--surface-2:#f0f0f3;--glass:#fafafcdd;--highlight:#00000003}
html[data-theme] body{background:var(--bg);color:var(--ink)}
html[data-theme] h1,html[data-theme] h2,html[data-theme] h3{color:var(--ink);font-weight:600;letter-spacing:-.055em;text-wrap:balance}
html[data-theme] h1{font-size:clamp(32px,3.6vw,48px);line-height:1.2}
html[data-theme] .shell{padding:78px 0 0}
html[data-theme] .sidebar{inset:0 0 auto;width:100%;height:78px;padding:0 max(30px,calc((100vw - 1240px)/2));flex-direction:row;align-items:center;justify-content:space-between;gap:28px;background:var(--glass);border:0;border-bottom:1px solid var(--line);backdrop-filter:blur(24px) saturate(150%);box-shadow:none}
html[data-theme] .brand{margin:0;padding:0;gap:10px;color:var(--ink);flex-shrink:0}
html[data-theme] .brand-mark{width:33px;height:33px;border-radius:11px;background:var(--ink);color:var(--bg);font-size:23px;box-shadow:inset 0 1px 0 #ffffff20}
html[data-theme] .brand-name{color:var(--ink);font-size:20px;letter-spacing:-1px;font-weight:650}
html[data-theme] .brand-sub{font-size:9px;letter-spacing:2px;color:var(--muted);margin-top:0}
html[data-theme] .nav-label,html[data-theme] .sidebar-bottom{display:none}
html[data-theme] .nav-list{display:flex;gap:3px;align-items:center}
html[data-theme] .nav-link{font-size:12px;padding:10px 13px;border-radius:30px;color:var(--muted);white-space:nowrap;gap:6px;transition:color .25s,background .25s}
html[data-theme] .nav-link svg{display:none}
html[data-theme] .nav-link.active{color:var(--ink);background:var(--surface-2);box-shadow:none;font-weight:600;border-radius:30px}
html[data-theme] .nav-link:hover{color:var(--ink);background:var(--highlight)}
html[data-theme] .nav-link .badge{background:var(--soft);color:var(--accent);border-radius:20px;font-size:10px;min-width:18px}
html[data-theme] .topbar{height:66px;max-width:1240px;margin:auto;padding:0 30px;background:transparent;backdrop-filter:none;border:0}
html[data-theme] .breadcrumb{font-size:11px;color:var(--muted);gap:9px}
html[data-theme] .breadcrumb strong{color:var(--ink)}
html[data-theme] .top-right{gap:12px}
html[data-theme] .date-label{font-size:11px;color:var(--muted)}
html[data-theme] .avatar{display:none}
html[data-theme] .icon-btn{background:var(--surface-2);border:0;color:var(--ink);border-radius:50%;width:36px;height:36px;transition:transform .3s var(--ease),background .25s}
html[data-theme] .icon-btn:hover{background:var(--soft);color:var(--accent);transform:scale(1.08)}
html[data-theme] .icon-btn:active{transform:scale(.94)}
html[data-theme] .icon-btn svg{width:18px;height:18px}
html[data-theme] .content{max-width:1240px;padding:30px 30px 60px;margin:auto}
html[data-theme] .page-heading{margin-bottom:30px;align-items:end}
html[data-theme] .page-heading p{font-size:14px;color:var(--muted);margin-top:14px;letter-spacing:0;max-width:580px}
html[data-theme] .page-heading>.pill{display:none}
html[data-theme] .eyebrow{color:var(--muted);font-size:10px;letter-spacing:2px;font-weight:600}
html[data-theme] .track-picker{display:flex;gap:5px;padding:5px;background:var(--surface-2);border-radius:18px;width:max-content;max-width:100%;margin-bottom:34px;border:1px solid var(--line)}
html[data-theme] .track-choice{display:flex;align-items:center;gap:10px;background:transparent;border:0;padding:11px 20px;border-radius:13px;min-height:44px;box-shadow:none;transform:none;transition:background .3s,color .3s,box-shadow .3s}
html[data-theme] .track-choice.selected{background:var(--white);box-shadow:0 2px 8px #0000000d}
html[data-theme] .track-choice::before{display:none}
html[data-theme] .track-code{font-size:10px;color:var(--muted);opacity:1;min-width:0;letter-spacing:0;font-weight:600;margin:0}
html[data-theme] .track-name{font-size:12px;color:var(--muted);font-weight:500}
html[data-theme] .selected .track-name{color:var(--ink);font-weight:600}
html[data-theme] .selected .track-code{color:var(--accent)}
html[data-theme] .track-tag{display:none}
html[data-theme] .dashboard-grid{grid-template-columns:minmax(0,1.9fr) minmax(280px,1fr);gap:24px;align-items:start}
html[data-theme] .main-column,html[data-theme] .aside-column{gap:24px}
html[data-theme] .daily-hero{min-height:354px;padding:40px;gap:20px;border:1px solid #ffffff16;border-radius:30px;background:radial-gradient(ellipse at 95% 5%,#2b3e78 0,transparent 55%),radial-gradient(ellipse at 60% 120%,#262d55,transparent 60%),#12151f;box-shadow:0 20px 45px #0000000a;isolation:isolate}
html[data-theme] .daily-hero::after{display:none}
html[data-theme] .daily-hero::before{content:"";position:absolute;width:440px;height:440px;border:1px solid #ffffff09;border-radius:50%;right:-180px;top:-170px;box-shadow:0 0 0 35px #ffffff02,0 0 0 90px #ffffff02;z-index:-1;pointer-events:none}
html[data-theme] .daily-hero>div:first-child{position:relative;z-index:2;max-width:64%}
html[data-theme] .daily-hero .eyebrow{color:#a6b7da;letter-spacing:2.1px;font-size:9px}
html[data-theme] .daily-hero h2{font-size:clamp(28px,3vw,40px);color:#f5f5f7;font-weight:600;line-height:1.25;margin:22px 0 12px;letter-spacing:-1.4px}
html[data-theme] .daily-hero .sub{font-family:inherit;font-size:15px;font-style:normal;color:#b3bdd2;line-height:1.5}
html[data-theme] .daily-hero .hero-meta{margin:20px 0 30px;gap:12px;font-size:10px;color:#a5b1c9;flex-wrap:wrap}
html[data-theme] .hero-ring{width:150px;height:150px;min-width:150px;padding:3px;transform:rotate(-30deg);background:conic-gradient(#8bc9ff calc(var(--p)*1%),#ffffff17 0);box-shadow:0 0 0 17px #a4b8ff05,0 0 0 34px #a4b8ff04,0 0 60px #658aff15;position:relative;margin-right:4px}
html[data-theme] .hero-ring-inner{background:linear-gradient(135deg,#222b44,#171d2e);box-shadow:inset 0 1px #ffffff18}
html[data-theme] .hero-ring strong{font-family:inherit;font-size:46px;font-weight:300;color:#fff;letter-spacing:-3px;line-height:1.3}
html[data-theme] .hero-ring strong small{font-size:17px;letter-spacing:0;color:#a9c1e5}
html[data-theme] .hero-ring span{font-size:10px;color:#a9b8d0}
html[data-theme] .btn{background:var(--surface-2);border:1px solid transparent;border-radius:30px;padding:11px 20px;color:var(--ink);font-size:13px;font-weight:500;transition:transform .3s var(--ease),background .25s,box-shadow .25s}
html[data-theme] .btn:hover:not(:disabled){background:var(--highlight);border-color:var(--line);transform:translateY(-2px);box-shadow:0 5px 14px #00000009}
html[data-theme] .btn.primary,html[data-theme] .btn.lime{background:#0071e3;color:#fff;border-color:transparent}
html[data-theme] .btn.primary:hover,html[data-theme] .btn.lime:hover{background:#1684f3;color:#fff;box-shadow:0 6px 20px #0071e32a;border-color:transparent}
html[data-theme] .daily-hero .btn.lime{background:#f5f5f7;color:#171d2e}
html[data-theme] .daily-hero .btn:hover{background:#fff;box-shadow:0 8px 24px #0003}
html[data-theme] .btn:active:not(:disabled){transform:scale(.97)}
html[data-theme] .btn.ghost{color:var(--muted);background:transparent}
html[data-theme] .btn.small{padding:7px 13px;font-size:12px}
html[data-theme] .link-btn,html[data-theme] summary{color:var(--accent);font-size:13px}
html[data-theme] .panel,html[data-theme] .course-card,html[data-theme] .chunk-card,html[data-theme] .stat-card{background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--radius);color:var(--ink)}
html[data-theme] .panel{padding:28px}
html[data-theme] .section-head h2{font-size:19px;font-weight:600}
html[data-theme] .section-head{margin-bottom:24px}
html[data-theme] .stat-grid{gap:0;background:var(--white);border-radius:24px;padding:22px 8px;border:1px solid var(--line)}
html[data-theme] .stat-card{padding:0 21px;background:transparent;border:0;border-right:1px solid var(--line);border-radius:0;box-shadow:none}
html[data-theme] .stat-card:last-child{border:0}
html[data-theme] .stat-top,html[data-theme] .stat-card .stat-top{font-size:11px;color:var(--muted)}
html[data-theme] .stat-top svg{display:none}
html[data-theme] .stat-value{font-size:37px;letter-spacing:-1.6px;font-weight:500;color:var(--ink);line-height:1.65;font-variant-numeric:tabular-nums}
html[data-theme] .stat-value small{font-size:11px;color:var(--muted);font-weight:400}
html[data-theme] .stat-foot{color:var(--muted);font-size:10px}
html[data-theme] .task-row{border-color:var(--line);padding:18px 0;gap:14px;transition:transform .3s var(--ease)}
html[data-theme] .task-row:hover{transform:translateX(4px)}
html[data-theme] .task-title{color:var(--ink);font-size:14px;font-weight:500}
html[data-theme] .task-desc,html[data-theme] .task-status{color:var(--muted);font-size:11px}
html[data-theme] .step-num{background:var(--surface-2);color:var(--muted);border:0;border-radius:50%;width:34px;height:34px}
html[data-theme] .step-num.current,html[data-theme] .step-num.done,html[data-theme] .task-row:hover .step-num{background:var(--soft);color:var(--accent);border:0}
html[data-theme] .task-status.done{color:var(--accent)}
html[data-theme] .task-row>svg{color:var(--muted);opacity:.5}
html[data-theme] .pill,html[data-theme] .pill.neutral{background:var(--surface-2);border:0;color:var(--muted);border-radius:20px;font-size:10px;padding:5px 10px}
html[data-theme] .day-item,html[data-theme] .week-note{color:var(--muted);border-color:var(--line)}
html[data-theme] .day-circle{background:var(--surface-2);color:var(--muted);width:30px;height:30px;border:0}
html[data-theme] .day-circle.today{outline:1px solid var(--accent);outline-offset:3px;color:var(--accent);background:var(--soft)}
html[data-theme] .day-circle.done{background:#0071e3;color:#fff}
html[data-theme] .spotlight{background:linear-gradient(150deg,#172936,#1a2029);border-color:#ffffff0e;min-height:338px;display:flex;flex-direction:column;position:relative;overflow:hidden}
html[data-theme="light"] .spotlight{background:linear-gradient(135deg,#eaf3ff,#f2f6fb);border-color:#d8e6f550}
html[data-theme] .spotlight .eyebrow{color:var(--muted);font-size:9px;letter-spacing:1.6px}
html[data-theme] .spotlight .pill{background:var(--highlight)!important;color:var(--muted)}
html[data-theme] .spotlight .quote-mark{color:var(--accent);opacity:.4;font-size:55px;margin:25px 0 0;height:42px}
html[data-theme] .spotlight .phrase{font-family:inherit;font-size:32px;font-weight:500;letter-spacing:-1.3px;color:var(--ink);line-height:1.2}
html[data-theme] .spotlight .translation,html[data-theme] .spotlight .example,html[data-theme] .spotlight-bottom .muted{color:var(--muted);font-size:13px}
html[data-theme] .spotlight-bottom{margin-top:auto;border-color:var(--line)}
html[data-theme] .loop-note{padding:10px 18px}
html[data-theme] .loop-note h3,html[data-theme] .loop-note p{color:var(--muted)}
html[data-theme] .loop-line span{background:var(--accent)}
html[data-theme] .loop-line i{background:var(--line)}
html[data-theme] .course-card{padding:27px;gap:17px;transition:transform .45s var(--ease),box-shadow .45s,border-color .3s}
html[data-theme] .course-card:hover,html[data-theme] .chunk-card:hover{background:var(--white);border-color:color-mix(in srgb,var(--accent) 20%,var(--line));transform:translateY(-5px);box-shadow:0 18px 35px #0000000c}
html[data-theme] .course-card h3{font-size:24px;color:var(--ink)}
html[data-theme] .course-card p,html[data-theme] .chunk-card .meaning,html[data-theme] .chunk-card details p{color:var(--muted)}
html[data-theme] .course-no,html[data-theme] .course-card:hover .course-no{color:var(--accent);font-size:9px;letter-spacing:1.7px}
html[data-theme] .chunk-card{padding:28px;gap:17px;transition:transform .45s var(--ease),box-shadow .45s,border-color .3s}
html[data-theme] .chunk-card h3{color:var(--ink);font-size:27px;letter-spacing:-.8px;font-weight:500}
html[data-theme] .chunk-card .english-example{background:var(--highlight);color:var(--ink);border-left-color:var(--accent);font-size:15px;padding:18px}
html[data-theme] .search input,html[data-theme] .select,html[data-theme] .player-options select,html[data-theme] .clip-controls input{background:var(--white);color:var(--ink);border-color:var(--line);border-radius:12px}
html[data-theme] input::placeholder,html[data-theme] textarea::placeholder{color:var(--muted);opacity:.7}
html[data-theme] .filter{border:1px solid var(--line);background:var(--white);color:var(--muted);border-radius:22px;padding:8px 16px}
html[data-theme] .filter.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
html[data-theme] .study-layout{grid-template-columns:190px minmax(0,1fr);gap:28px}
html[data-theme] .study-panel{padding:40px;border-radius:30px}
html[data-theme] .stage-nav{top:100px;gap:8px}
html[data-theme] .stage-nav button{color:var(--muted);border-radius:16px;padding:13px 10px}
html[data-theme] .stage-nav button.active{color:var(--ink);background:var(--white);border-color:var(--line);box-shadow:var(--shadow)}
html[data-theme] .stage-nav small,html[data-theme] .stage-nav .future{color:var(--muted);border-color:var(--line)}
html[data-theme] .study-top .eyebrow,html[data-theme] .stage-nav .future a{color:var(--accent)}
html[data-theme] .study-top h2{font-size:29px;font-weight:500}
html[data-theme] .context{background:var(--soft);color:var(--muted);border:0;padding:19px 22px;border-radius:16px}
html[data-theme] .reading{color:var(--ink);font-size:25px;line-height:1.95;font-weight:400}
html[data-theme] .reading mark{background:var(--soft);color:var(--accent);padding:3px 4px;border-radius:5px}
html[data-theme] .translation-box{color:var(--muted);background:var(--highlight);border-color:var(--line);border-radius:15px}
html[data-theme] .flashcard{padding:36px 12px;min-height:295px}
html[data-theme] .flashcard h3{font-size:clamp(30px,3.6vw,46px);color:var(--ink);font-weight:500;letter-spacing:-1.5px}
html[data-theme] .flashcard .example,html[data-theme] .flashcard .scene{color:var(--ink)}
html[data-theme] .flashcard .hint,html[data-theme] .tip{color:var(--muted)}
html[data-theme] .recall-input,html[data-theme] .output-area{background:var(--highlight);border-color:var(--line);color:var(--ink);border-radius:18px;padding:22px}
html[data-theme] .rating-btn{background:var(--surface-2);border:1px solid transparent;border-radius:18px;color:var(--ink);padding:17px 8px;transition:transform .3s var(--ease),background .2s}
html[data-theme] .rating-btn:hover{background:var(--soft);border-color:var(--accent);transform:translateY(-3px)}
html[data-theme] .rating-btn.again{color:#d07a61}
html[data-theme] .rating-btn.good{color:var(--accent)}
html[data-theme] .rating-btn small,html[data-theme] .output-meta,html[data-theme] .checklist{color:var(--muted)}
html[data-theme] .player{background:radial-gradient(ellipse at 50% 0%,var(--soft),transparent 75%),var(--highlight);border-color:var(--line);border-radius:24px;padding:34px 25px}
html[data-theme] .wave{color:var(--accent);height:70px;gap:6px;opacity:.75}
html[data-theme] .wave span{width:3px}
html[data-theme] .play-main{width:70px;height:70px;background:var(--ink);color:var(--bg);box-shadow:0 0 0 9px var(--highlight);transition:transform .3s var(--ease),box-shadow .3s}
html[data-theme] .play-main:hover{transform:scale(1.07);box-shadow:0 0 0 14px var(--highlight)}
html[data-theme] .speech-status,html[data-theme] .listen-hints div{color:var(--muted)}
html[data-theme] .listen-text{color:var(--ink);font-size:28px;font-weight:400}
html[data-theme] .listen-hints div{background:var(--highlight);border-color:var(--line);border-radius:15px;padding:17px}
html[data-theme] .listen-hints b{color:var(--ink)}
html[data-theme] .hidden-text{background:repeating-linear-gradient(0deg,transparent,transparent 12px,var(--highlight) 12px,var(--highlight) 24px)}
html[data-theme] .hidden-text span{background:var(--white);color:var(--muted);padding:8px 16px;border-radius:20px}
html[data-theme] .chunk-tag{background:var(--soft);color:var(--accent);border-color:transparent;border-radius:20px}
html[data-theme] .studio-tabs{border-color:var(--line);gap:6px}
html[data-theme] .studio-tab{color:var(--muted);border-radius:20px}
html[data-theme] .studio-tab.active{background:var(--white);color:var(--ink);border-color:var(--line)}
html[data-theme] .dialogue-screen{background:radial-gradient(ellipse at top right,#34476b,transparent 75%),#171d29;border-color:#ffffff16;border-radius:30px;padding:38px}
html[data-theme] .scene-title h2{color:#f5f5f7;font-family:inherit;letter-spacing:-2px;font-weight:500}
html[data-theme] .episode{background:var(--white);border-color:var(--line);border-radius:20px;padding:24px;transition:transform .3s var(--ease),background .3s}
html[data-theme] .episode:hover{transform:translateX(3px);background:var(--surface-2)}
html[data-theme] .episode.active{background:var(--soft);border-color:var(--accent)}
html[data-theme] .episode strong{color:var(--ink);font-family:inherit;letter-spacing:-.5px;font-size:18px}
html[data-theme] .episode small,html[data-theme] .episode-no,html[data-theme] .scene-focus p{color:var(--muted)}
html[data-theme] .scene-focus .eyebrow,html[data-theme] .episode.active .episode-no,html[data-theme] .episode>svg{color:var(--accent)}
html[data-theme] .script-line{border-color:var(--line)}
html[data-theme] .script-line p{color:var(--ink)}
html[data-theme] .script-line>span{color:var(--accent)}
html[data-theme] .clip-drop,html[data-theme] .transcript-hidden{border-color:var(--line);background:var(--highlight);color:var(--muted);border-radius:20px}
html[data-theme] .clip-drop p,html[data-theme] .clip-controls,html[data-theme] .local-studio>.field{color:var(--muted)}
html[data-theme] .clip-drop>svg,html[data-theme] .local-studio .eyebrow{color:var(--accent)}
html[data-theme] .empty{background:var(--white);border:1px solid var(--line);border-radius:30px;padding:65px 28px}
html[data-theme] .empty p{color:var(--muted)}
html[data-theme] .empty>.empty-icon{background:var(--soft);color:var(--accent);border-radius:50%}
html[data-theme] .heat-cell{background:var(--surface-2);border-color:var(--line);border-radius:5px}
html[data-theme] .heat-cell.lv1{background:#0071e340}
html[data-theme] .heat-cell.lv2{background:#0071e390}
html[data-theme] .heat-cell.lv3{background:#1684f3}
html[data-theme] .heat-cell.today{outline-color:var(--accent)}
html[data-theme] .bar{background:var(--surface-2)}
html[data-theme] .bar span{background:linear-gradient(90deg,#0071e3,#80bdff)}
html[data-theme] .timeline-row,html[data-theme] .saved-output{border-color:var(--line)}
html[data-theme] .timeline-row .timeline-content,html[data-theme] .saved-output p{color:var(--ink)}
html[data-theme] .success-note{background:var(--soft);color:var(--accent);border:0}
html[data-theme] .notice{background:#cc962014;border-color:#cc962030;color:#b88a39}
html[data-theme] .theme-option{border-radius:20px;border-color:var(--line);background:var(--highlight);padding:12px}
html[data-theme] .theme-option[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
html[data-theme] .theme-swatch{border-radius:12px}
html[data-theme] .theme-swatch.light{background:linear-gradient(135deg,#fff,#eceef4);color:#0071e3}
html[data-theme] .theme-swatch.dark{background:linear-gradient(135deg,#31323a,#111114);color:#64b5ff}
html[data-theme] .footer{border-color:var(--line);color:var(--muted);font-size:10px;margin-top:40px;padding-top:25px;opacity:.75}
html[data-theme] .audio-dock{left:50%;bottom:24px;border:1px solid var(--line);background:var(--glass);box-shadow:0 16px 60px #0003;border-radius:24px;padding:14px 18px;backdrop-filter:blur(28px)}
html[data-theme] .audio-dock strong{color:var(--ink)}
html[data-theme] .audio-dock #audio-dock-status{color:var(--muted)}
html[data-theme] .audio-orb{color:var(--accent);background:var(--soft)}
html[data-theme] .audio-dock .icon-btn{background:var(--surface-2);color:var(--ink);border:0}
html[data-theme] #toast{left:50%;background:var(--ink);color:var(--bg);border-radius:30px;box-shadow:0 12px 35px #0002}
html[data-theme] dialog{background:var(--white);color:var(--ink);border-color:var(--line);border-radius:28px}
html[data-theme] dialog p{color:var(--muted)}
html[data-theme] .skip-link{background:var(--ink);color:var(--bg)}
@keyframes surface-enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes answer-enter{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:no-preference){
  html[data-theme] .fade-in{animation:surface-enter .6s var(--ease) both}
  html[data-theme] .fade-in .main-column>*,html[data-theme] .fade-in .aside-column>*,html[data-theme] .fade-in .chunk-grid>.chunk-card,html[data-theme] .fade-in .course-grid>.course-card{animation:surface-enter .7s var(--ease) both}
  html[data-theme] .fade-in .main-column>:nth-child(2),html[data-theme] .fade-in .aside-column>:nth-child(2),html[data-theme] .fade-in .chunk-grid>:nth-child(2){animation-delay:65ms}
  html[data-theme] .fade-in .main-column>:nth-child(3),html[data-theme] .fade-in .aside-column>:nth-child(3){animation-delay:110ms}
  html[data-theme] .flashcard .answer{animation:answer-enter .45s var(--ease) both}
  html[data-theme] body,html[data-theme] .sidebar,html[data-theme] .panel{transition:background-color .35s,color .35s,border-color .35s}
}
@media(max-width:1050px){
 html[data-theme] .sidebar{padding:0 24px;gap:16px}
 html[data-theme] .nav-link{padding:9px 10px;font-size:11px}
 html[data-theme] .dashboard-grid{grid-template-columns:minmax(0,1.65fr) minmax(260px,1fr);gap:20px}
 html[data-theme] .daily-hero{padding:30px;min-height:330px}
 html[data-theme] .hero-ring{width:106px;height:106px;min-width:106px;box-shadow:0 0 0 13px #ffffff04,0 0 0 26px #ffffff03}
 html[data-theme] .hero-ring strong{font-size:34px}
 html[data-theme] .hero-ring span{font-size:8px}
 html[data-theme] .panel{padding:24px}
 html[data-theme] .stat-card{padding:0 15px}
 html[data-theme] .study-layout{grid-template-columns:1fr}
 html[data-theme] .stage-nav{position:static;display:flex;overflow:auto}
}
@media(max-width:800px){
 html[data-theme] .brand-sub{display:none!important}
 html[data-theme] .brand-name{font-size:18px}
 html[data-theme] .nav-link{padding:8px;font-size:10px}
 html[data-theme] .dashboard-grid{grid-template-columns:1fr}
 html[data-theme] .aside-column{display:grid;grid-template-columns:1fr 1fr;gap:20px}
 html[data-theme] .aside-column .loop-note{grid-column:1/-1}
 html[data-theme] .hero-ring{width:154px;height:154px;min-width:154px;margin-right:20px}
 html[data-theme] .hero-ring strong{font-size:46px}
 html[data-theme] .hero-ring span{font-size:10px}
 html[data-theme] .daily-hero h2{font-size:36px}
 html[data-theme] .daily-hero{min-height:326px;padding:35px}
}
@media(max-width:700px){
 html[data-theme] .shell{padding:0 0 calc(96px + env(safe-area-inset-bottom,0px))}
 html[data-theme] .sidebar{inset:auto 10px 10px;bottom:max(10px,env(safe-area-inset-bottom));width:calc(100% - 20px);height:68px;padding:4px 5px;display:block;border:1px solid var(--line);border-radius:24px;box-shadow:0 5px 30px #00000018}
 html[data-theme] .sidebar .brand{display:none}
 html[data-theme] .nav-list{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;height:100%}
 html[data-theme] .nav-link{flex-direction:column;justify-content:center;font-size:9px;padding:7px 1px;gap:5px;line-height:1.3;white-space:normal;text-align:center;border-radius:17px}
 html[data-theme] .nav-link svg{display:block;width:19px;height:19px}
 html[data-theme] .nav-link.active{border-radius:17px;background:var(--surface-2);color:var(--accent)}
 html[data-theme] .nav-link.active svg{color:var(--accent)}
 html[data-theme] .nav-link .badge{right:2px;top:0}
 html[data-theme] .topbar{height:72px;padding:0 22px}
 html[data-theme] .mobile-brand{color:var(--ink);gap:9px;font-size:18px}
 html[data-theme] .mobile-brand .brand-mark{border-radius:10px!important;width:30px;height:30px}
 html[data-theme] .content{padding:22px 20px 28px}
 html[data-theme] h1,html[data-theme] .page-heading h1{font-size:32px;line-height:1.25;letter-spacing:-1.2px}
 html[data-theme] .page-heading{margin-bottom:25px}
 html[data-theme] .page-heading p{font-size:12px;line-height:1.8;max-width:100%;margin-top:12px}
 html[data-theme] .track-picker{width:100%;border-radius:16px;gap:3px;margin-bottom:25px}
 html[data-theme] .track-choice{flex:1;flex-direction:column;padding:9px 4px;gap:3px;border-radius:11px}
 html[data-theme] .track-code{font-size:9px}
 html[data-theme] .track-name{font-size:11px}
 html[data-theme] .daily-hero{min-height:325px;padding:28px 25px;border-radius:26px;gap:8px;align-items:center}
 html[data-theme] .daily-hero>div:first-child{max-width:68%}
 html[data-theme] .daily-hero h2{font-size:29px;letter-spacing:-1.2px;margin:20px 0 12px}
 html[data-theme] .daily-hero .sub{font-size:13px}
 html[data-theme] .daily-hero .eyebrow{font-size:8px;letter-spacing:1px}
 html[data-theme] .daily-hero .hero-meta{font-size:9px;gap:8px;margin:18px 0 24px}
 html[data-theme] .daily-hero .btn{font-size:12px;padding:10px 16px}
 html[data-theme] .hero-ring{width:90px;height:90px;min-width:90px;margin:0;padding:2px;box-shadow:0 0 0 10px #ffffff04,0 0 0 20px #ffffff03}
 html[data-theme] .hero-ring strong{font-size:29px;letter-spacing:-1.5px}
 html[data-theme] .hero-ring strong small{font-size:12px}
 html[data-theme] .hero-ring span{font-size:8px}
 html[data-theme] .stat-grid{padding:20px 0;border-radius:22px}
 html[data-theme] .stat-card{padding:0 13px}
 html[data-theme] .stat-top,html[data-theme] .stat-card .stat-top{font-size:10px}
 html[data-theme] .stat-value{font-size:30px}
 html[data-theme] .stat-value small{font-size:9px}
 html[data-theme] .stat-foot{font-size:9px}
 html[data-theme] .panel{padding:24px 20px;border-radius:24px}
 html[data-theme] .task-title{font-size:13px}
 html[data-theme] .task-row{gap:11px}
 html[data-theme] .task-desc{font-size:10px;line-height:1.7}
 html[data-theme] .task-status{display:none}
 html[data-theme] .aside-column{grid-template-columns:1fr}
 html[data-theme] .spotlight{min-height:330px;padding:30px}
 html[data-theme] .spotlight .phrase{font-size:36px}
 html[data-theme] .course-grid{grid-template-columns:1fr!important}
 html[data-theme] .course-card{padding:26px}
 html[data-theme] .main-column>.between{gap:10px;align-items:start}
 html[data-theme] .main-column>.between h2{font-size:18px!important;white-space:nowrap}
 html[data-theme] .main-column>.between .link-btn{font-size:11px}
 html[data-theme] .study-panel{padding:26px 20px}
 html[data-theme] .study-top h2{font-size:24px}
 html[data-theme] .stage-nav button{padding:8px;font-size:12px;gap:6px}
 html[data-theme] .reading{font-size:21px}
 html[data-theme] .flashcard{padding:28px 0}
 html[data-theme] .flashcard h3{font-size:31px}
 html[data-theme] .listen-text{font-size:23px}
 html[data-theme] .studio-tab{padding:9px;font-size:11px;gap:5px}
 html[data-theme] .studio-tabs{gap:3px}
 html[data-theme] .dialogue-screen{padding:28px}
 html[data-theme] .episode{padding:17px}
 html[data-theme] .episode strong{font-size:14px}
 html[data-theme] .audio-dock{bottom:92px;min-width:285px;max-width:calc(100% - 32px)}
 html[data-theme] #toast{bottom:170px;max-width:calc(100% - 32px)}
 html[data-theme] .footer{font-size:10px}
}
@media(max-width:370px){html[data-theme] .content{padding-left:14px;padding-right:14px}html[data-theme] .daily-hero{padding:24px 19px}html[data-theme] .hero-ring{width:78px;height:78px;min-width:78px}html[data-theme] .daily-hero h2{font-size:26px}html[data-theme] .track-name{font-size:10px}}
@media(prefers-reduced-motion:reduce){html[data-theme] *,html[data-theme] *::before,html[data-theme] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Floating navigation. The active lens is one shared element across routes. */
html[data-theme] .shell{padding-top:100px}
html[data-theme] .sidebar{top:18px;left:50%;right:auto;bottom:auto;transform:translateX(-50%);width:calc(100% - 60px);max-width:1180px;height:68px;padding:0;gap:35px;background:transparent;border:0;box-shadow:none;backdrop-filter:none;pointer-events:none}
html[data-theme] .sidebar .brand{pointer-events:auto;background:var(--glass);backdrop-filter:blur(20px);border:1px solid var(--line);padding:10px 15px 10px 10px;border-radius:24px;box-shadow:0 8px 24px #00000006;gap:10px}
html[data-theme] .sidebar .brand-mark{background:linear-gradient(150deg,#459cec,#145ba8);color:#fff;box-shadow:inset 0 1px #ffffff65,0 3px 10px #0071e320;border-radius:12px;width:36px;height:36px}
html[data-theme] .brand-name{font-size:19px}
html[data-theme] .brand-sub{font-size:8px;letter-spacing:2.4px;opacity:.7}
html[data-theme] .nav-list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;position:relative;isolation:isolate;width:730px;max-width:calc(100% - 215px);height:68px;padding:6px;pointer-events:auto;border-radius:25px;border:1px solid #ffffff1c;background:linear-gradient(150deg,#ffffff0b,#ffffff00 55%),#202024d9;backdrop-filter:blur(28px) saturate(150%);box-shadow:0 12px 35px #00000025,inset 0 1px #ffffff12}
html[data-theme="light"] .nav-list{background:linear-gradient(140deg,#ffffffed,#f9f9fcbd);border-color:#ffffff;box-shadow:0 8px 32px #1d2d4810,0 1px 3px #00000008,inset 0 1px #fff}
html[data-theme] .nav-indicator{position:absolute;z-index:-1;top:6px;bottom:6px;left:calc(6px + (100% - 12px) / 6 * var(--nav-index));width:calc((100% - 12px) / 6);border-radius:19px;background:linear-gradient(135deg,#a2ceff27,#548fe21c);border:1px solid #bbdaff29;box-shadow:0 3px 9px #00000015,inset 0 1px #e4f4ff20;pointer-events:none}
html[data-theme="light"] .nav-indicator{background:linear-gradient(145deg,#fff,#eaf3ff);border-color:#fff;box-shadow:0 2px 9px #3262a01a,inset 0 1px #fff}
html[data-theme] .nav-indicator::after{content:"";position:absolute;width:20px;height:2px;background:#6eb8ff;border-radius:4px;left:50%;bottom:4px;transform:translateX(-50%);box-shadow:0 0 8px #2997ff50}
html[data-theme="light"] .nav-indicator::after{background:#0071e3;box-shadow:0 0 6px #0071e329}
html[data-theme] .nav-list .nav-link{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;padding:9px 8px;border:0;border-radius:19px;background:transparent;box-shadow:none;position:relative;color:var(--muted);font-size:12px;line-height:1.3;font-weight:450;min-width:0;transition:color .25s,background .25s}
html[data-theme] .nav-list .nav-link.active{color:var(--ink);background:transparent;border-radius:19px;box-shadow:none;font-weight:600}
html[data-theme] .nav-list .nav-link:hover{color:var(--ink);background:var(--highlight)}
html[data-theme] .nav-list .nav-link.active:hover{background:transparent}
html[data-theme] .nav-list .nav-link svg{display:block;width:18px;height:18px;stroke-width:1.5;color:var(--muted);transition:transform .35s var(--ease),color .25s;opacity:.85}
html[data-theme] .nav-list .nav-link.active svg{color:var(--accent);opacity:1}
html[data-theme] .nav-list .nav-link:hover svg{transform:translateY(-2px);color:var(--accent)}
html[data-theme] .nav-list .nav-link:active svg{transform:scale(.9)}
html[data-theme] .nav-copy{display:flex;flex-direction:column;gap:4px;text-align:left}
html[data-theme] .nav-copy>span{font-size:12px;letter-spacing:.6px}
html[data-theme] .nav-copy small{font-size:8px;line-height:1;letter-spacing:.4px;color:var(--muted);font-weight:400;opacity:.8}
html[data-theme] .nav-link.active .nav-copy small{color:var(--accent);opacity:.9}
html[data-theme] .nav-list .nav-link .badge{position:absolute;right:8px;top:3px;min-width:14px;height:14px;line-height:14px;padding:0 3px;margin:0;border-radius:8px;background:#0071e3;color:#fff;font-size:8px;box-shadow:0 0 0 2px var(--white)}
html[data-theme] .nav-list .nav-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:1000px){html[data-theme] .sidebar{gap:20px}html[data-theme] .nav-list{max-width:calc(100% - 200px)}html[data-theme] .nav-list .nav-link{gap:7px}html[data-theme] .nav-copy>span{font-size:11px}html[data-theme] .nav-list .nav-link svg{width:16px;height:16px}}
@media(min-width:701px) and (max-width:820px){html[data-theme] .sidebar{width:calc(100% - 36px);gap:15px}html[data-theme] .sidebar .brand{padding-right:12px}html[data-theme] .brand-name{font-size:16px}html[data-theme] .nav-list{max-width:calc(100% - 168px)}html[data-theme] .nav-list .nav-link{flex-direction:column;gap:5px;padding:6px 3px}html[data-theme] .nav-copy small{display:none}html[data-theme] .nav-copy>span{font-size:10px}}
@media(max-width:700px){
 html[data-theme] .shell{padding-top:0}
 html[data-theme] .sidebar{inset:auto auto max(12px,env(safe-area-inset-bottom)) 50%;width:calc(100% - 24px);max-width:480px;height:72px;padding:0;transform:translateX(-50%);background:transparent;border:0;box-shadow:none;border-radius:26px}
 html[data-theme] .sidebar .brand{display:none}
 html[data-theme] .nav-list{max-width:none;width:100%;height:72px;padding:5px;border-radius:26px;box-shadow:0 10px 40px #00000030,inset 0 1px #ffffff12}
 html[data-theme="light"] .nav-list{box-shadow:0 10px 40px #20355d18,inset 0 1px #fff}
 html[data-theme] .nav-indicator{top:5px;bottom:5px;left:calc(5px + (100% - 10px) / 6 * var(--nav-index));width:calc((100% - 10px) / 6);border-radius:20px}
 html[data-theme] .nav-list .nav-link{flex-direction:column;gap:6px;padding:8px 2px 11px;border-radius:20px}
 html[data-theme] .nav-list .nav-link.active{border-radius:20px}
 html[data-theme] .nav-list .nav-link svg{width:20px;height:20px}
 html[data-theme] .nav-copy{gap:0;text-align:center}
 html[data-theme] .nav-copy>span{font-size:10px;letter-spacing:.6px}
 html[data-theme] .nav-copy small{display:none}
 html[data-theme] .nav-indicator::after{width:14px;bottom:5px}
 html[data-theme] .nav-list .nav-link .badge{right:8px;top:3px}
}
@media(prefers-reduced-motion:reduce){html[data-theme] .nav-list .nav-link svg{transition:none;transform:none!important}}