/* Lelin brand v1. Shared by all three HTML entry points. */
:root{
  --ink:#3d2b1f;--muted:#806f62;--green:#a84614;--lime:#ffe0b7;
  --paper:#fffaf5;--line:#eadfd3;--white:#fff;--soft:#fff1e2;
  --brand-orange:#ff9a3c;--brand-deep:#a84614;--success:#34734d;
  --card-shadow:0 14px 36px -24px rgb(80 45 20 / .32);
  color:var(--ink);background:var(--paper);
}
body{background:radial-gradient(ellipse at 85% 0%,#fff0df 0,transparent 42%),var(--paper);color:var(--ink)}
:focus-visible{outline-color:#bc5a20!important}
::selection{background:#ffdfb8;color:var(--ink)}
.brand{gap:10px;text-decoration:none;color:var(--ink)}
.brand-icon{display:block;flex-shrink:0;border-radius:12px}
.brand .brand-name{display:block;letter-spacing:0;line-height:1.2}
.brand .brand-wordmark{display:block;width:120px;height:29px;object-fit:contain}
.brand small{color:var(--muted);font-size:8px;letter-spacing:2px;margin-top:3px}
.sidebar .brand .brand-wordmark{width:112px;height:27px}
.brand-mascot{display:block;position:relative;width:144px;height:158px;flex-shrink:0;margin:0 auto 10px;padding:0;border:0;border-radius:18px;background:transparent;appearance:none;contain:layout style;cursor:pointer;touch-action:manipulation}
.brand-mascot:hover,.brand-mascot:active{background:transparent;box-shadow:none}
.brand-mascot:disabled{opacity:1;cursor:default}
.brand-mascot-hint{position:absolute;bottom:0;left:0;width:100%;font-size:11px;line-height:16px;color:var(--muted);font-weight:400;letter-spacing:.5px}
.brand-mascot>span{pointer-events:none}
.brand-mascot-image,.brand-mascot-mount{position:absolute;inset:0;width:100%;height:100%;display:block}
.brand-mascot-image{object-fit:contain}
.brand-mascot-mount svg{display:block;width:100%;height:100%}
.brand-mascot.is-ready .brand-mascot-image{visibility:hidden}
.brand-mascot.is-still .mz-root *,.brand-mascot.is-paused .mz-root *{animation:none!important}
/* Seasonal loops keep playing in the resting clickable state. One-shots retain the outfit. */
.hw-site-action{transform-origin:250px 474px}
.hw-site-bounce .hw-site-action{animation:mz-bounce-main var(--hw-site-duration) linear both}
.hw-site-stomp .hw-site-action{animation:mz-stomp-main var(--hw-site-duration) linear both}
.hw-site-stomp .hw-character{animation:none;transform:none}
.hw-site-stomp .hw-arm{animation:none;transform:rotate(-10deg)}
.hw-site-stomp .hw-foot-r{animation:mz-stomp-foot var(--hw-site-duration) linear both}
.hw-site-stomp .hw-foot-l{animation:mz-stomp-support var(--hw-site-duration) linear both}
.hw-site-stomp .hw-site-angry{display:inline;animation:mz-stomp-expression var(--hw-site-duration) linear both}
.hw-site-stomp .hw-decoration{visibility:hidden}
.hw-site-stomp .hw-eye{animation:none;transform:scaleY(1)}
.hw-site-stomp .hw-gaze{animation:none;transform:none}
.hw-root.hw-reduced .hw-site-action{animation:none!important}
@media(prefers-reduced-motion:reduce){.hw-site-action{animation:none!important}}
.primary{background:var(--brand-orange);color:var(--ink);border-color:transparent;box-shadow:0 3px 0 #d87a25,0 8px 18px -14px #b96021}
.primary:hover:not(:disabled){background:#ffac5c;color:var(--ink)}
.quiet,.nav-item{color:var(--muted)}
.eyebrow{color:#98532b}
.eyebrow i,.live-dot{background:#e68a3e}
.progress-track{background:#f4e7d8}.progress-track>div{background:#e89448}
.panel,.assignment-card,.pack-card,.welcome-card,.entry-card,.completion-card,.login-card,.exercise-card,.stats-row{border-color:var(--line);box-shadow:var(--card-shadow)}
.panel,.assignment-card,.pack-card{border-radius:18px}
.welcome-card,.entry-card,.completion-card,.login-card,.exercise-card{background:#fff;border-radius:24px}
.hero h1 span:after{background:#ffdfb3}
.hero-art{background:radial-gradient(ellipse,#ffebd1,transparent 68%)}
.hero-art .brand-mascot{position:absolute;width:210px;height:231px;right:0;top:-70px;z-index:2;margin:0}
.art-card{border-color:var(--line);box-shadow:0 20px 45px -28px #61361650;transform:rotate(-3deg)}
.art-prompt{color:var(--muted)}
.art-words span{background:#fff6e9;border-color:#f0d4ae;border-bottom-color:#e1b98b;color:var(--ink)}
.art-feedback{color:var(--success)}
.art-sticker{background:#ffe0b7;box-shadow:0 4px 0 #edc591;color:#70401f;right:-8px;bottom:-25px}
.art-star{color:#e4a25c}.hero-art .star-a{display:none}
.hero-note>svg{background:#fffaf3;color:#a65a27}
.public-footer,.workspace-footer,.sidebar-bottom{color:var(--muted)}
.sidebar,.navigation{border-color:var(--line);background:#fffdf9}
.workspace-top{background:rgb(255 255 255 / .7);border-color:var(--line)}
.workspace-label{color:#9a8270}
.nav-item.active,.nav-active{background:#fff0df;color:#92481b}
.nav-item>span{background:#ffe0b7;color:#8d481f}
.teacher-avatar,.name-avatar{background:#ffecd5;color:#8f4b21}
.stats-row .stats-quote{background:#fff0de;color:#87502a}.stats-quote svg{color:#dca369}
.empty{border-color:#e9d4bd}.empty-icon,.pack-symbol{background:#fff0df;color:#b5723a}
.pack-card>svg,.pack-icon,.roster-person code{color:#97572f}
input,textarea,select{border-color:var(--line);accent-color:var(--brand-deep)}
input:focus,textarea:focus,select:focus{border-color:#cd824d}
input::placeholder,textarea::placeholder{color:#9a8c80}
.modal-backdrop{background:rgb(54 35 22 / .34)}
.modal{border-color:var(--line);box-shadow:0 24px 80px -30px #43200c66}
.question-number{background:#fff0df;color:#98572b}
.pill{background:#edf5eb;color:var(--success)}
.exercise-meta>.pill{background:#fff0dd;color:#975224}
.pill.gray{background:#f2efeb;color:#81796f}
.pill.amber{background:#fff0d4;color:#886024}
.is-removed{background:#faf7f2}
.word-token,.token-placeholder{background:#fff9f0;border-color:#ead8c1;border-bottom-color:#d8bea0;color:var(--ink)}
.word-token:hover:not(:disabled){background:#fff0db;border-color:#d9a674}
.word-token.selected{background:#ffe6c3;border-color:#d9a674}
.selected-token{background:#ffe6c3;border-color:#dfb586;border-bottom-color:#ce9b66}
.word-token:disabled{color:#8a7968}
.token-placeholder{color:transparent;background:#fbf3e8;border-color:#eadccb}
.answer-zone{background:#fffaf4;border-color:#e6cdb0}
.answer-zone.drag-over,.word-bank.drag-over{background:#fff0db;border-color:#c78143}
.answer-zone.has-answer{border-color:#deb180}
.answer-zone.has-words{background:#fff6e9}
.answer-zone:focus-within{border-color:#c78143}
.spelling-guide{background:#fff3e3;border-color:#edd2ae}
.mini-tokens span{background:#fff5e7;border-color:#e6d1b5}
.interaction-hint,.save-status,.grammar-context,[data-reading-status]{color:var(--muted)}
.reading-art,.lesson-image{border-color:var(--line)}
.reading-rounds span{background:#f1e4d4;border-color:#e3caae}
.reading-rounds .done{background:#e89448;border-color:#e89448}
.reading-skip .button{color:var(--muted)}
.lesson-phases span{background:#f5ede3;color:var(--muted)}
.lesson-phases .active{background:#ffebd0;color:#945025}
.lesson-stages span{background:#f5ede3;color:var(--muted)}
.lesson-stages .active{background:#ffebd0;color:#945025}
.vocabulary-options .button{border-color:var(--line);box-shadow:0 3px 0 #e7d7c4}
.vocabulary-options .button:hover:not(:disabled){background:#fff3e2;border-color:#dfb887}
.welcome-art{display:none}
.answer-placeholder{color:#a18c78}
#reading-status{color:var(--muted)}
.choice-option{background:#fff;border-color:var(--line);box-shadow:0 3px 0 #e7d7c4}
.choice-option:hover:not(:disabled){background:#fff4e4;border-color:#dfb887}
.grammar-preview,.library-filters{background:#fff2e2}
.finish-badge{background:#fff0d8;color:#b46b26;box-shadow:0 9px 0 #eed6b5}
.finish-spark{color:#e5a04d}
.finish-art[hidden]{display:none}
.result-score strong{color:var(--success)}
.all-correct-note{background:#f0f6ec;color:var(--success)}
.volume-hint{background:#fff2da;border-color:#ebcea3;color:#865421;box-shadow:0 4px 0 #e7c89b}
.voice-loader{color:var(--muted)}
.voice-loader-wave i,.voice-loader-track i{background:#db914c}.voice-loader-track{background:#f2e4d3}
/* The library keeps its compact table; only its surfaces and selected controls change. */
.navigation .brand{gap:7px}.navigation .brand-icon{width:30px;height:30px;border-radius:9px}
.navigation .brand .brand-name{width:auto;height:auto;background:transparent;color:inherit;border-radius:0;min-width:0;flex:1;font-weight:normal}
.navigation .brand .brand-wordmark{width:94px;height:23px}.navigation .brand small{font-size:7px;letter-spacing:1.4px}
body[data-base] header{background:#fffdf9;border-color:var(--line)}
body[data-base] button,body[data-base] input,body[data-base] select{border-radius:8px}
body[data-base] button:not(.primary):not(.quiet):hover{background:#fff2e2}
body[data-base] .primary{border-color:#e3924b}
body[data-base] .primary:hover{background:#ffac5c}
body[data-base] #levels button[aria-pressed=true],body[data-base] .views button[aria-pressed=true]{background:#ffecd6;color:#914b21}
.table-wrap{border-color:var(--line);border-radius:12px;box-shadow:var(--card-shadow)}
body[data-base] thead{background:#f9efe3}body[data-base] td{border-color:#eee3d6}body[data-base] tbody tr:hover{background:#fffbf6}
.cell[aria-pressed=true],.cell-wrap:has([aria-pressed=true]){background:#fff0dc;border-color:#d58a4c}
.matrix-entry[aria-pressed=true]{outline-color:#c87837}
.chip.ready{color:var(--success);background:#edf5eb;border-color:#dce9d9}
.extras button{background:#f7eee3}.unit-num{color:#975127}
#detail{border-color:var(--line);border-radius:14px;box-shadow:0 16px 45px -20px #60341150}
.variant-options button[aria-pressed=true]{border-color:#cb803f;background:#fff0df;box-shadow:0 0 0 1px #cb803f}
.confirm-box{background:#fff9ef;border-color:#ebd3b4}
.preview-area details p{background:#fff8ef}.success{background:#edf5eb;color:#34734d}
dialog{border-color:var(--line);box-shadow:0 24px 70px -25px #49290d66}dialog::backdrop{background:#36231655}
.mobile-brand{display:none}
@media(max-width:900px){.navigation .brand-name{display:none}.navigation .brand{justify-content:center}}
@media(max-width:600px){
  .brand .brand-wordmark{width:105px;height:26px}.brand-icon{width:34px;height:34px}
  .student-header .brand .brand-wordmark{width:105px;height:26px}
  .hero-art .brand-mascot{width:162px;height:178px;right:0;top:-35px}
  .brand-mascot{width:108px;height:119px;margin-bottom:5px}
  .welcome-card,.entry-card,.completion-card,.login-card,.exercise-card{border-radius:20px}
  body[data-base] tbody tr{border-radius:12px;border-color:var(--line);box-shadow:0 6px 16px -12px #60341145}
  .mobile-brand{display:flex;align-items:center;gap:6px}.mobile-brand .brand-icon{width:24px;height:24px;border-radius:7px}.mobile-brand .brand-wordmark{width:80px;height:21px}
  .library-breadcrumb{display:none}
}
@media(prefers-reduced-motion:reduce){.brand-mascot .mz-root *{animation:none!important}.art-card{transform:none}}
/* Portrait seasonal artwork needs more room; keep the hint at its normal text size. */
@media(orientation:portrait){
  .brand-mascot[data-mascot-theme=halloween]{width:220px;height:242px;max-width:100%}
  .hero-art .brand-mascot[data-mascot-theme=halloween]{width:319px;height:350px}
  .learner-welcome .brand-mascot[data-mascot-theme=halloween]{width:200px;height:220px}
}
@media(orientation:portrait) and (max-width:600px){
  .brand-mascot[data-mascot-theme=halloween]{width:168px;height:185px}
  .hero-art .brand-mascot[data-mascot-theme=halloween]{width:246px;height:270px}
  .learner-welcome .brand-mascot[data-mascot-theme=halloween]{width:140px;height:154px}
}