/* Hallmark · shape: app screen · genre: modern-minimal · theme: Coral (deal 2/3) · nav: study sidebar and search toolbar · footer: quiet source note · signature: word distinction review card · states: full, empty, error · axes: light/grotesk-sans/warm · posture: restrained · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: E, constrained navigation and offline states to native accessible controls */
@import url('./tokens.css');
@import url('./base.css');
:root{--font-display:"General Sans","Microsoft YaHei","PingFang SC",sans-serif;--font-body:var(--font-display);--space-panel:32px;--space-inset:20px;--space-tiny:6px;--color-transparent:transparent;--color-overlay:oklch(21% .012 38 / .4);--color-soft-accent:oklch(94% .025 35);--color-soft-success:oklch(95% .018 150);--color-neutral:oklch(99% .003 60);--color-gold:oklch(48% .075 68);--color-gold-paper:oklch(95% .025 70);--shadow-dialog:8px 16px 64px oklch(21% .012 38 / .16);--gutter:40px;--container:1500px}
*{box-sizing:border-box}html,body{overflow-x:clip}body{margin:0;background:var(--color-paper);font-family:var(--font-body);font-size:16px;color:var(--color-ink);line-height:1.65;font-synthesis:none}h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;overflow-wrap:break-word;min-width:0;letter-spacing:normal;text-wrap:balance}h1{font-size:30px;line-height:1.4;margin:0}h2{font-size:21px;line-height:1.5;margin:0}h3{font-size:17px;margin:0}p{margin:var(--space-xs) 0 var(--space-md)}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit;color:inherit}button,a,input,select,textarea,summary{ -webkit-tap-highlight-color:var(--color-transparent)}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}button:active{transform:translateY(1px)}:where(a,button,input,select,textarea,summary):focus-visible{outline:2px solid var(--color-focus);outline-offset:3px;transition:none}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.app-shell{max-width:var(--container);margin-inline:auto;display:grid;grid-template-columns:222px minmax(0,1fr);min-height:100dvh}.sidebar{background:var(--color-paper-2);border-right:1px solid var(--color-rule);display:flex;flex-direction:column;padding:var(--space-panel) var(--space-inset);position:sticky;top:0;height:100dvh}.brand{display:flex;align-items:center;gap:var(--space-sm);font-size:22px;font-weight:600;line-height:1.5}.brand small{display:block;font-size:11px;font-weight:400;color:var(--color-muted);margin-top:var(--space-2xs)}.brand-mark{display:grid;place-items:center;background:var(--color-board);color:var(--color-cotton);border-radius:10px;width:41px;height:45px;font-size:24px}.nav-label{color:var(--color-muted);font-size:12px;margin:var(--space-xl) var(--space-sm) var(--space-sm)}nav{display:grid;gap:var(--space-2xs)}.nav-item{display:flex;gap:var(--space-sm);align-items:center;min-height:44px;border-radius:var(--radius-card);padding:var(--space-xs) var(--space-sm);font-size:14px;color:var(--color-muted)}.nav-item:hover{background:var(--color-paper-3);color:var(--color-ink)}.nav-item.active{background:var(--color-cotton);color:var(--color-ink);box-shadow:var(--shadow-card)}.nav-item.active svg{color:var(--color-accent-2)}.nav-count{margin-left:auto;font-size:11px;background:var(--color-soft-accent);color:var(--color-accent-2);padding:0 var(--space-tiny);border-radius:4px}.sidebar-foot{margin-top:auto;padding-top:var(--space-xl)}.sidebar-foot p{font-size:15px;line-height:1.9}.small,small{font-size:12px;color:var(--color-muted)}.text-link{font-size:13px;text-decoration:underline;text-underline-offset:4px}.local-account{display:flex;align-items:center;gap:var(--space-xs);border-top:1px solid var(--color-rule);padding-top:var(--space-lg);margin-top:var(--space-lg);font-size:13px}.local-account small{display:block;font-size:10px}.avatar{display:grid;place-items:center;width:32px;height:32px;background:var(--color-paper-3);border:1px solid var(--color-rule);border-radius:50%;font-size:12px;flex-shrink:0}.workspace{min-width:0}.topbar{height:79px;display:flex;align-items:center;gap:var(--space-lg);padding:0 var(--space-xl);border-bottom:1px solid var(--color-rule);font-size:12px;color:var(--color-muted)}#global-search{margin-left:auto}.search-wrap{display:flex;align-items:center;gap:var(--space-xs);background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:var(--radius-input);padding:var(--space-tiny) var(--space-sm)}.search-wrap svg{width:16px;height:16px;display:block}.search-wrap input{background:var(--color-transparent);border:0;font-size:12px;width:205px;min-height:24px}.search-wrap kbd{border:1px solid var(--color-rule);border-radius:3px;padding:0 var(--space-2xs);font:inherit}.header-link{white-space:nowrap}#main{padding:var(--space-panel) var(--space-xl) var(--space-xl);outline:none;min-height:calc(100dvh - 140px)}.page-title{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-lg);margin-bottom:var(--space-lg)}.page-title p{font-size:13px;color:var(--color-muted);margin:var(--space-xs) 0 0}.date-label{font-size:12px;color:var(--color-muted);white-space:nowrap}.welcome{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--space-lg);margin-bottom:var(--space-lg)}.hero-copy{padding:var(--space-panel);background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:var(--radius-card);min-height:264px;display:flex;flex-direction:column;justify-content:center}.hero-copy h2{font-size:28px;line-height:1.65}.hero-copy p{font-size:13px;color:var(--color-muted);margin:var(--space-sm) 0 var(--space-lg)}.actions{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap}.btn{display:inline-flex;justify-content:center;align-items:center;gap:var(--space-xs);background:var(--color-board);color:var(--color-cotton);border:1px solid var(--color-board);border-radius:var(--radius-input);padding:var(--space-xs) var(--space-md);font-size:13px;min-height:40px;line-height:1.5;transition:background-color var(--dur-micro),transform var(--dur-micro)}.btn:hover{background:var(--color-ink-2)}.btn.quiet{background:var(--color-transparent);color:var(--color-ink);border-color:var(--color-rule)}.btn.quiet:hover{background:var(--color-paper-2)}.btn.danger{background:var(--color-transparent);border-color:var(--color-error);color:var(--color-error)}.btn svg{width:16px;height:16px}.word-preview{padding:var(--space-lg) var(--space-panel);border:1px solid var(--color-rule);border-radius:var(--radius-card);background:var(--color-cotton);box-shadow:var(--cast-stock);display:flex;flex-direction:column}.row-between{display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm)}.word-pair{font-size:26px;line-height:1.5;margin:var(--space-md) 0 var(--space-sm);font-weight:600}.word-pair span{font-size:12px;color:var(--color-muted);font-weight:400;margin-inline:var(--space-sm)}.word-preview p{font-size:13px;color:var(--color-muted)}.word-bottom{border-top:1px dashed var(--color-rule);margin-top:auto;padding-top:var(--space-sm);display:flex;justify-content:space-between;font-size:12px;color:var(--color-muted)}.inline-button{border:0;background:var(--color-transparent);padding:0;color:var(--color-accent-2);font-size:13px;min-height:28px}.icon-button{width:32px;height:32px;display:inline-grid;place-items:center;border:0;background:var(--color-transparent);color:var(--color-muted);border-radius:var(--radius-input);font-size:24px}.icon-button:hover{background:var(--color-paper-3)}.icon-button.saved{color:var(--color-accent-2)}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--color-rule);padding:var(--space-sm) 0 var(--space-lg);margin-bottom:var(--space-lg)}.metric{padding-left:var(--space-lg);border-left:1px solid var(--color-rule)}.metric:first-child{padding-left:0;border:0}.metric strong{display:block;font-size:26px;font-weight:500;line-height:1.3;font-variant-numeric:tabular-nums}.metric strong small{margin-left:var(--space-2xs)}.metric>span{font-size:12px;color:var(--color-muted)}.dashboard-bottom{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:var(--space-lg)}.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-md)}.section-title h2{font-size:17px}.section-title a{font-size:12px;color:var(--color-muted)}.task-list{border-top:1px solid var(--color-rule)}.task-row{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md) 0;border-bottom:1px solid var(--color-rule)}.task-row>a{flex:1}.task-row h3{font-size:13px}.task-row p{font-size:11px;color:var(--color-muted);margin:var(--space-2xs) 0 0}.task-number{color:var(--color-muted);font-size:12px;min-width:22px}.tag{font-size:11px;color:var(--color-muted);background:var(--color-paper-2);border:1px solid var(--color-rule);padding:var(--space-2xs) var(--space-xs);border-radius:4px;white-space:nowrap}.tag.free{background:var(--color-soft-success);color:var(--color-success);border-color:var(--color-transparent)}.tag.paid{background:var(--color-gold-paper);color:var(--color-gold);border-color:var(--color-transparent)}.tip-block{border:1px solid var(--color-rule);border-radius:var(--radius-card);padding:var(--space-lg);background:var(--color-cotton)}.tip-block h3{font-size:15px}.tip-block p{font-size:12px;color:var(--color-muted)}.week{display:flex;justify-content:space-between;gap:var(--space-xs);margin-top:var(--space-md)}.day{text-align:center;font-size:10px;color:var(--color-muted)}.day b{display:grid;place-items:center;width:25px;height:28px;border-radius:4px;background:var(--color-paper-2);font-size:11px;font-weight:400;margin-top:var(--space-tiny)}.day.done b{background:var(--color-soft-accent);color:var(--color-accent-2)}.resource-section{margin-top:var(--space-panel)}.resource-list{border-top:1px solid var(--color-rule)}.resource-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto auto;gap:var(--space-md);align-items:center;padding:var(--space-md) 0;border-bottom:1px solid var(--color-rule)}.file-mark{border:1px solid var(--color-rule);width:36px;height:44px;display:grid;place-items:center;font-size:10px;color:var(--color-muted);background:var(--color-cotton);border-radius:4px}.resource-row h3{font-size:14px}.resource-row p{font-size:11px;color:var(--color-muted);margin:var(--space-2xs) 0 0}.resource-row .actions{gap:var(--space-sm)}.footer{display:flex;justify-content:space-between;gap:var(--space-lg);padding:var(--space-md) var(--space-xl);font-size:10px;color:var(--color-muted);border-top:1px solid var(--color-rule)}.filters{display:flex;gap:var(--space-xs);align-items:center;flex-wrap:wrap;margin:var(--space-lg) 0}.chip{border:1px solid var(--color-rule);background:var(--color-transparent);padding:var(--space-tiny) var(--space-sm);border-radius:var(--radius-input);font-size:13px;min-height:36px}.chip:hover{background:var(--color-paper-2)}.chip.active{background:var(--color-board);border-color:var(--color-board);color:var(--color-cotton)}.field{display:flex;flex-direction:column;gap:var(--space-xs);font-size:13px;margin-bottom:var(--space-lg)}input.field-input,select,textarea{border:1px solid var(--color-rule-2);border-radius:var(--radius-input);background:var(--color-cotton);padding:var(--space-sm);min-height:42px}textarea{resize:vertical;line-height:1.9;width:100%}.toolbar{display:flex;gap:var(--space-sm);align-items:center;flex-wrap:wrap;margin-bottom:var(--space-lg)}.toolbar input{flex:1;min-width:160px}.word-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md)}.word-entry{border-top:1px solid var(--color-rule);padding:var(--space-lg) 0}.word-entry h3{font-size:22px}.word-entry p{font-size:13px;color:var(--color-muted)}.word-entry .pair-detail{font-size:13px;color:var(--color-ink)}.study-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--space-lg)}.flashcard{background:var(--color-cotton);border:1px solid var(--color-rule);border-radius:var(--radius-card);padding:var(--space-panel);min-height:330px;box-shadow:var(--cast-stock)}.flashcard h2{font-size:32px;margin:var(--space-lg) 0}.flashcard p{font-size:14px}.answer-details{border-top:1px dashed var(--color-rule);padding-top:var(--space-md);margin-top:var(--space-lg)}.answer-details dt{font-size:12px;color:var(--color-accent-2);margin-top:var(--space-md)}.answer-details dd{margin:var(--space-2xs) 0 0;font-size:14px}.study-actions{display:flex;gap:var(--space-sm);margin-top:var(--space-lg);flex-wrap:wrap}.side-note{border-left:1px solid var(--color-rule);padding-left:var(--space-lg);font-size:13px;color:var(--color-muted)}.side-note h3{color:var(--color-ink);font-size:15px;margin-bottom:var(--space-sm)}.side-note li{margin-bottom:var(--space-sm)}.progress{width:100%;height:4px;border:0;background:var(--color-rule);accent-color:var(--color-accent-2);margin:var(--space-md) 0}.empty{padding:var(--space-xl) var(--space-lg);text-align:center;border:1px dashed var(--color-rule-2);border-radius:var(--radius-card)}.empty h2{font-size:22px}.empty p{font-size:14px;color:var(--color-muted)}.quiz-stem{font-size:18px;line-height:1.9;margin:var(--space-lg) 0}.options{display:grid;gap:var(--space-sm)}.option{display:flex;gap:var(--space-md);text-align:left;padding:var(--space-md);border:1px solid var(--color-rule);background:var(--color-cotton);border-radius:var(--radius-input);font-size:14px}.option:hover{border-color:var(--color-rule-2);background:var(--color-paper-2)}.option.correct{border-color:var(--color-success);background:var(--color-soft-success)}.option.incorrect{border-color:var(--color-error);background:var(--color-soft-accent)}.explanation{margin-top:var(--space-lg);padding:var(--space-lg);background:var(--color-paper-2);font-size:14px}.article{font-size:15px;line-height:1.95;max-width:70ch}.article h2{margin:var(--space-lg) 0 var(--space-sm);font-size:20px}.article h3{margin:var(--space-lg) 0 var(--space-sm);font-size:17px}.article p{margin-bottom:var(--space-md)}.article strong{font-weight:600}.editor-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--space-lg)}.material{padding:var(--space-lg);border:1px solid var(--color-rule);border-radius:var(--radius-card);font-size:14px;background:var(--color-cotton)}.material h3{margin-bottom:var(--space-sm)}.writing-area{min-height:390px}.editor-meta{font-size:12px;color:var(--color-muted);display:flex;justify-content:space-between;margin-top:var(--space-xs)}.rubric{margin-top:var(--space-lg);font-size:13px}.rubric label{display:flex;gap:var(--space-xs);margin:var(--space-xs) 0}.rubric input{accent-color:var(--color-accent-2)}.timer{font-variant-numeric:tabular-nums;font-size:26px}.interview-entry{padding:var(--space-lg) 0;border-top:1px solid var(--color-rule)}.interview-entry h3{font-size:17px}.interview-entry p{font-size:13px;color:var(--color-muted)}.plan-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-lg)}.notice{padding:var(--space-md);border-left:2px solid var(--color-accent-2);background:var(--color-paper-2);font-size:13px;color:var(--color-muted);margin:var(--space-md) 0 var(--space-lg)}.setting-section{border-top:1px solid var(--color-rule);padding:var(--space-lg) 0}.setting-section p{font-size:13px;color:var(--color-muted)}.setting-section h2{font-size:18px}.menu-toggle{display:none}dialog{border:0;border-radius:var(--radius-card);background:var(--color-cotton);color:var(--color-ink);padding:0;width:min(760px,calc(100% - 32px));max-height:85dvh;box-shadow:var(--shadow-dialog)}dialog::backdrop{background:var(--color-overlay)}.dialog-head{position:relative;display:flex;justify-content:space-between;align-items:center;padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--color-rule);background:var(--color-cotton);z-index:var(--z-raised)}#reader-content{padding:var(--space-lg) var(--space-panel)}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:var(--z-toast);background:var(--color-board);color:var(--color-cotton);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-input);font-size:13px;max-width:90%;display:none}.toast.visible{display:block}.skip{position:fixed;left:16px;top:-80px;background:var(--color-board);color:var(--color-cotton);z-index:var(--z-toast);padding:var(--space-sm)}.skip:focus-visible{top:8px}a:hover.text-link{text-decoration-color:var(--color-accent-2)}.sr-only{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:clip}
@media(min-width:1500px){.app-shell{border-inline:1px solid var(--color-rule)}}
@media(max-width:1100px){.app-shell{grid-template-columns:190px minmax(0,1fr)}.sidebar{padding-inline:var(--space-md)}#main,.topbar,.footer{padding-inline:var(--space-lg)}.topbar{gap:var(--space-md)}.search-wrap input{width:160px}.hero-copy,.word-preview{padding:var(--space-lg)}.hero-copy h2{font-size:24px}.word-pair{font-size:22px}.dashboard-bottom{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}.resource-row{gap:var(--space-sm)}}
@media(max-width:800px){.app-shell{display:block}.sidebar{display:none;position:fixed;width:230px;z-index:var(--z-modal);box-shadow:var(--shadow-dialog)}.sidebar.open{display:flex}.menu-toggle{display:inline-grid}.topbar{height:64px;gap:var(--space-sm)}#breadcrumb,.header-link,.search-wrap kbd{display:none}#global-search{flex:1}.search-wrap input{width:100%}.topbar .avatar{width:28px;height:28px}.page-title h1{font-size:26px}.date-label{display:none}.welcome{gap:var(--space-md)}.dashboard-bottom{grid-template-columns:minmax(0,1fr)}.word-grid,.plan-grid{grid-template-columns:minmax(0,1fr)}.study-layout,.editor-layout{grid-template-columns:minmax(0,1fr)}.side-note{border-left:0;border-top:1px solid var(--color-rule);padding:var(--space-lg) 0 0}.footer{font-size:10px;flex-direction:column;gap:var(--space-2xs)}}
@media(max-width:540px){#main{padding:var(--space-lg) var(--space-md)}.topbar{padding-inline:var(--space-md)}.welcome{grid-template-columns:minmax(0,1fr)}.hero-copy{min-height:230px}.word-preview{min-height:245px}.hero-copy h2{font-size:26px}.metrics{gap:var(--space-xs);grid-template-columns:repeat(4,minmax(0,1fr))}.metric{padding-left:var(--space-xs)}.metric strong{font-size:23px}.metric>span{font-size:10px}.metric strong small{font-size:10px}.resource-row{grid-template-columns:32px minmax(0,1fr) auto}.resource-row>.tag{display:none}.file-mark{width:30px;height:38px}.resource-row h3{font-size:13px}.resource-row p{font-size:10px}.resource-row .actions{gap:var(--space-2xs)}.resource-row .inline-button{font-size:12px}.flashcard{padding:var(--space-lg)}.flashcard h2{font-size:28px}.page-title{align-items:flex-start}.page-title>.btn{font-size:11px;white-space:nowrap}.task-row p{font-size:11px}.task-row>.tag{display:none}#reader-content{padding:var(--space-lg)}.footer{padding-inline:var(--space-md)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.brand-logo{width:42px;height:42px;flex-shrink:0;border-radius:10px}.brand-name{font-size:16px;white-space:nowrap}.brand-name small{font-size:11px}.site-note{border-top:1px solid var(--color-rule);padding-top:var(--space-lg);margin-top:var(--space-lg);font-size:12px}.site-note small{display:block;font-size:10px;margin-top:var(--space-2xs)}.content-index{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-md);padding:var(--space-md) 0 var(--space-lg);margin-bottom:var(--space-lg);border-bottom:1px solid var(--color-rule);font-size:12px}.content-index>span{color:var(--color-muted)}.content-index a{text-decoration:underline;text-underline-offset:4px}.static-resource-row{grid-template-columns:40px minmax(0,1fr) auto auto}.reading-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-md);border-bottom:1px solid var(--color-rule);padding-bottom:var(--space-lg);margin-bottom:var(--space-lg)}.reading-detail{font-size:14px;border-top:1px dashed var(--color-rule);padding-top:var(--space-sm);margin-top:var(--space-md)}.reading-detail summary{cursor:pointer;min-height:36px;display:list-item;color:var(--color-accent-2)}.reading-detail[open]>summary{margin-bottom:var(--space-sm)}.reading-detail p{font-size:14px;line-height:1.95}.question-article{padding:var(--space-lg) 0;border-top:1px solid var(--color-rule);max-width:72ch}.question-article h2{font-size:17px;margin:var(--space-md) 0}.static-options{padding-left:var(--space-lg);font-size:14px;line-height:2}.static-options li{padding-left:var(--space-xs)}.static-essay{padding:var(--space-lg) 0;border-top:1px solid var(--color-rule);margin-top:var(--space-md);max-width:75ch}.static-essay>.material{margin-top:var(--space-md)}.static-essay>.small{display:block;margin-top:var(--space-2xs)}.catalog-list{font-size:13px;line-height:2.1;padding-left:var(--space-lg);list-style:none}.catalog-list li{padding:var(--space-2xs) 0;border-bottom:1px solid var(--color-rule)}.word-entry h2{font-size:22px}.brand-story{display:flex;align-items:center;gap:var(--space-lg);padding:var(--space-lg) 0;border-bottom:1px solid var(--color-rule);margin-bottom:var(--space-lg);max-width:75ch}.brand-story img{width:80px;height:80px;flex-shrink:0}.brand-story h2{font-size:20px}.brand-story p{font-size:14px;color:var(--color-muted);margin-bottom:0}.guide-article a{display:inline-block;margin-bottom:var(--space-sm)}.article ol{font-size:14px}.word-entry .answer-details{border:0;padding-top:0;margin-top:0}a:hover.inline-button{text-decoration:underline;text-underline-offset:4px}
@media(max-width:1100px) and (min-width:801px){.brand-name{font-size:13px}.brand-logo{width:34px;height:34px}.brand{gap:var(--space-xs)}}
@media(max-width:540px){.static-resource-row{grid-template-columns:30px minmax(0,1fr) auto}.static-resource-row .inline-button{font-size:11px}.brand-story{align-items:flex-start;gap:var(--space-md)}.brand-story img{width:56px;height:56px}.brand-story h2{font-size:18px}.content-index{gap:var(--space-sm)}.word-entry h2{font-size:20px}}
.brand-logo{width:52px;height:52px;object-fit:contain;border-radius:0}.brand-name{font-size:14px}.brand-story img{width:160px;height:160px;object-fit:contain}
@media(max-width:1100px) and (min-width:801px){.brand-name{font-size:13px}.brand-logo{width:48px;height:48px}}
@media(max-width:540px){.brand-story{flex-direction:column;align-items:flex-start}}