:root{--red: #B83227;--red-dark: #8B1A12;--red-soft: #FBEAE7;--yellow: #F4C20D;--yellow-soft: #FEF6D6;--bg: #F4EFE3;--surface: #FFFFFF;--surface-2: #FAF6EB;--ink: #1A1410;--ink-soft: #6B5F4F;--ink-mute: #A89D8A;--line: #E5DDC8;--line-soft: #EFE8D6;--ok: #1F8A5B;--ok-soft: #DBEFE4;--blue: #2F6F9F;--blue-soft: #E6F0F8;--shadow-card: 0 1px 0 rgba(255,255,255,.8) inset, 0 1px 2px rgba(26,20,16,.04), 0 4px 12px -4px rgba(26,20,16,.06);--shadow-elevated: 0 1.5px 0 rgba(255,255,255,.95) inset, 0 -1px 0 rgba(26,20,16,.04) inset, 0 1px 2px rgba(26,20,16,.04), 0 10px 24px -8px rgba(26,20,16,.12), 0 28px 56px -20px rgba(26,20,16,.22);--shadow-red: 0 6px 16px rgba(184,50,39,.28);--radius-pill: 99px;--radius-nav: 28px;--radius-modal: 26px;--radius-card: 18px;--radius-btn: 14px;--radius-input: 12px;--radius-chip: 12px;--font-body: "Be Vietnam Pro", -apple-system, sans-serif;--font-display: "Bricolage Grotesque", "Be Vietnam Pro", sans-serif;--font-mono: "JetBrains Mono", monospace}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{font-family:var(--font-body);font-size:15px;line-height:1.6;color:var(--ink);background:radial-gradient(circle at 15% 0%,#fbf5e5 0%,transparent 35%),radial-gradient(circle at 95% 100%,#f0e4c9 0%,transparent 45%),var(--bg);min-height:100dvh;overflow-x:hidden;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}ul{list-style:none}button{font-family:inherit;cursor:pointer;border:none;background:none}input,textarea,select{font-family:inherit}img{display:block;max-width:100%}.app-shell{position:relative;min-height:100dvh;overflow-x:hidden}.tab-panel{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:0;min-height:0;overflow:hidden;visibility:hidden;opacity:0;transform:translate3d(0,12px,0) scale(.985);filter:blur(1px);pointer-events:none;z-index:0;transition:opacity .28s cubic-bezier(.2,.8,.2,1),transform .34s cubic-bezier(.2,.8,.2,1),filter .24s ease;will-change:opacity,transform,filter}.tab-panel.active{position:relative;height:auto;min-height:100dvh;overflow:visible;visibility:visible;opacity:1;transform:translateZ(0) scale(1);filter:blur(0);pointer-events:auto;z-index:1}.page{max-width:480px;margin:0 auto;padding:20px 16px 72px}@keyframes pageFade{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.page-fade{animation:pageFade .22s ease-out both}.top-progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:200;background:linear-gradient(90deg,var(--red),var(--yellow),var(--red));background-size:200% 100%;animation:progressSlide 1.1s linear infinite}.skip-link{position:fixed;top:12px;left:12px;z-index:300;transform:translateY(-150%);padding:9px 12px;border-radius:12px;background:var(--ink);color:#fff;font-weight:700;box-shadow:var(--shadow-elevated);transition:transform .15s}.skip-link:focus{transform:translateY(0);outline:2px solid var(--yellow);outline-offset:2px}@keyframes progressSlide{0%{background-position:200% 0}to{background-position:0 0}}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);padding:14px;box-shadow:var(--shadow-card)}.card.tinted{background:var(--surface-2)}.card.elevated{box-shadow:var(--shadow-elevated)}.card.red{background:linear-gradient(135deg,var(--red),var(--red-dark));color:#fff;border-color:var(--red);box-shadow:0 6px 14px -4px #b8322740,0 16px 32px -10px #b8322773}.card.yellow{background:var(--yellow-soft);border-color:var(--yellow)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:13px 16px;border-radius:var(--radius-btn);font-family:var(--font-body);font-size:14px;font-weight:600;cursor:pointer;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);transition:transform .1s,box-shadow .15s,background .15s;white-space:nowrap}.btn:active{transform:scale(.98)}.btn.primary{background:var(--red);color:#fff;border-color:var(--red);box-shadow:var(--shadow-red)}.btn.primary:hover{background:var(--red-dark)}.btn.yellow{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}.btn.ghost{background:transparent}.btn.full{width:100%}.btn.sm{padding:9px 12px;font-size:13px}.btn:disabled{opacity:.55;cursor:not-allowed}.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--radius-pill);font-size:12px;font-weight:500;background:var(--surface);border:1px solid var(--line);color:var(--ink-soft)}.pill.red{background:var(--red);color:#fff;border-color:var(--red)}.pill.yellow{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}.pill.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}.pill.blue{background:var(--blue-soft);color:var(--blue);border-color:transparent}.field{width:100%;padding:11px 13px;border-radius:var(--radius-input);border:1.5px solid var(--line);background:var(--surface);font-family:var(--font-body);font-size:14px;color:var(--ink);outline:none;transition:border-color .15s;-webkit-appearance:none}.field:focus{border-color:var(--red)}.field::placeholder{color:var(--ink-mute)}textarea.field{resize:vertical;min-height:120px;line-height:1.55}.field-label{display:block;font-size:12px;font-weight:500;color:var(--ink-soft);margin-bottom:6px}.field-group{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}.chip{width:36px;height:36px;border-radius:var(--radius-chip);display:inline-flex;align-items:center;justify-content:center;background:var(--surface-2);border:1px solid var(--line);color:var(--ink);flex-shrink:0}.chip.red{background:var(--red-soft);color:var(--red);border-color:transparent}.chip.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}.chip.ink{background:var(--ink);color:#fff;border-color:var(--ink)}.chip.lg{width:44px;height:44px;border-radius:14px}.section-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.9px;color:var(--ink-mute);margin-bottom:10px}h1,h2,h3{font-family:var(--font-display)}.msg{font-size:13px;padding:8px 12px;border-radius:10px;margin-top:8px}.msg.success{background:var(--ok-soft);color:var(--ok)}.msg.error{background:var(--red-soft);color:var(--red)}.msg.neutral{background:var(--surface-2);color:var(--ink-soft)}.msg:empty{display:none}.page-header{background:linear-gradient(135deg,var(--red),var(--red-dark));color:#fff;padding:18px 16px 20px;margin:-20px -16px 20px;border-radius:0 0 24px 24px}.page-header h1{font-size:22px;font-weight:800;letter-spacing:-.5px;line-height:1.2}.page-header p{font-size:13px;opacity:.88;margin-top:4px}.learning-page{padding-bottom:88px}.learning-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:5px;margin-bottom:14px;border:1px solid var(--line);border-radius:18px;background:#ffffffb8;box-shadow:var(--shadow-card)}.learning-tab{min-width:0;min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:7px 4px;border-radius:13px;color:var(--ink-soft);font-size:11px;font-weight:700;line-height:1.05;transition:background .18s,color .18s,box-shadow .18s,transform .1s}.learning-tab:active{transform:scale(.97)}.learning-tab.active{background:var(--red-soft);color:var(--red);box-shadow:0 1px #ffffffd9 inset,0 6px 12px -10px #b8322759}.video-view-page{max-width:760px}.learning-toolbar{margin-bottom:10px}.learning-search{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink-mute);box-shadow:var(--shadow-card)}.learning-search:focus-within{border-color:var(--red)}.learning-search input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:var(--ink);font-size:14px}.learning-filter{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}.pill-button{display:inline-flex;align-items:center;justify-content:center;min-height:31px;padding:7px 10px;border-radius:var(--radius-pill);border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);font-size:12px;font-weight:700;line-height:1;box-shadow:0 1px #ffffffb3 inset}.pill-button.active{background:var(--red);border-color:var(--red);color:#fff;box-shadow:var(--shadow-red)}.video-grid{display:grid;gap:12px}.video-card{width:100%;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-card);color:var(--ink);cursor:pointer;text-align:left;transition:transform .14s,box-shadow .14s,border-color .14s}.video-card:hover{border-color:#b8322752;box-shadow:var(--shadow-elevated)}.video-card:active{transform:scale(.99)}.video-thumb{position:relative;display:block;aspect-ratio:16 / 9;overflow:hidden;background:var(--ink)}.video-thumb img{width:100%;height:100%;object-fit:cover}.video-play{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(180deg,#1a141014,#1a141061)}.video-play svg{filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}.video-card-body{display:flex;flex-direction:column;gap:7px;padding:12px}.video-card-title{display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-family:var(--font-display);font-size:15px;font-weight:800;line-height:1.28}.video-card-desc{display:-webkit-box;overflow:hidden;-webkit-line-clamp:3;-webkit-box-orient:vertical;color:var(--ink-soft);font-size:12px;line-height:1.5}.video-detail{display:flex;flex-direction:column;gap:12px}.video-backbar{display:flex;align-items:center;gap:10px;min-height:46px;padding:8px 10px;border-radius:16px;background:var(--ink);color:#fff;box-shadow:var(--shadow-card)}.video-backbar button{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.22);color:#fff;font-size:13px;font-weight:700}.video-backbar span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#ffffffb8;font-size:12px;font-weight:600}.video-frame{overflow:hidden;aspect-ratio:16 / 9;border-radius:18px;background:#000;box-shadow:var(--shadow-elevated)}.video-frame iframe{display:block;width:100%;height:100%;border:0}.learning-title{margin:10px 0 7px;font-size:19px;line-height:1.25}.learning-description{color:var(--ink-soft);font-size:13px;line-height:1.65;white-space:pre-line}.infographic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.infographic-card{overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-card);color:var(--ink-soft);text-align:left}.infographic-card img{width:100%;aspect-ratio:3 / 4;object-fit:cover;object-position:top;background:var(--surface-2)}.infographic-card span{display:block;padding:9px 10px 10px;font-size:12px;font-weight:700}.learning-lightbox{position:fixed;top:0;right:0;bottom:0;left:0;z-index:260;display:flex;align-items:center;justify-content:center;padding:16px;background:#0e0c0ae0}.lightbox-content{position:relative;width:min(100%,760px);max-height:92dvh;display:flex;flex-direction:column;align-items:center;gap:10px}.lightbox-content img{max-width:100%;max-height:calc(92dvh - 58px);border-radius:14px;object-fit:contain;box-shadow:0 18px 44px #00000057}.lightbox-close{position:absolute;top:-12px;right:-8px;z-index:1;width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--surface);color:var(--ink);box-shadow:var(--shadow-elevated)}.lightbox-controls{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--radius-pill);background:#ffffff24;color:#fff;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.lightbox-controls button{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#ffffff2e;color:#fff}.lightbox-controls span{min-width:42px;text-align:center;font-size:12px;font-weight:800}.notebook-card{padding:22px 18px;text-align:center}.notebook-icon{width:58px;height:58px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;border-radius:18px;background:var(--blue-soft);color:var(--blue)}.notebook-card h2{margin-bottom:7px;font-size:21px}.notebook-card p{margin:0 auto 18px;max-width:330px;color:var(--ink-soft);font-size:13px;line-height:1.6}.quiz-embedded{display:flex;flex-direction:column;gap:12px}.quiz-embedded-header{padding:16px;border-radius:18px;background:linear-gradient(135deg,var(--red),var(--red-dark));color:#fff;box-shadow:var(--shadow-red)}.quiz-embedded-header h1{font-size:19px;font-weight:800;line-height:1.2}.quiz-embedded-header p{margin-top:4px;font-size:13px;opacity:.88}@media(max-width:360px){.learning-tab{font-size:10px}.infographic-grid{grid-template-columns:1fr}}.empty{text-align:center;padding:32px 16px;color:var(--ink-mute);font-size:14px}@keyframes spin{to{transform:rotate(360deg)}}.spinner{animation:spin .8s linear infinite;display:inline-block}.row{display:flex;align-items:center;gap:8px}.col{display:flex;flex-direction:column;gap:8px}.grow{flex:1}.text-mute{color:var(--ink-mute)}.text-soft{color:var(--ink-soft)}.text-sm{font-size:13px}.text-xs{font-size:12px}.mono{font-family:var(--font-mono)}.divider{height:1px;background:var(--line-soft);margin:12px 0}.bottom-nav-spacer{height:82px}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.page-fade,.tab-panel,.spinner{animation:none!important;transition:none!important}.tab-panel{transform:none;filter:none}}