@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap');
.study-page{--bg:#111317;--ink:#f5f2ef;--muted:#b5b5bd;--accent:#ffa6c7;--line:#36383e;background:var(--bg);color:var(--ink);font:15px/1.6 'Be Vietnam Pro',system-ui,sans-serif;margin:0;min-width:320px;color-scheme:dark}
.study-page *{box-sizing:border-box}.study-page [hidden]{display:none!important}.study-page button,.study-page textarea,.study-page select{font:inherit}.study-page button,.study-page a,.study-page select{touch-action:manipulation}.study-page a{color:inherit}.study-page button{cursor:pointer}.study-page button:disabled{opacity:.55;cursor:wait}.study-page :focus-visible{outline:3px solid var(--accent);outline-offset:4px}.study-page .sr-only{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0,0,0,0)}.skip-link{position:absolute;top:-60px;background:var(--accent);color:#29151e;padding:10px;z-index:10}.skip-link:focus{top:5px}
.classroom-nav{height:74px;border-bottom:1px solid #ffffff0d;display:flex;align-items:center;justify-content:space-between;padding:0 36px}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:22px;letter-spacing:-.5px}.brand img{width:30px;height:30px;object-fit:contain}.brand span{margin-left:6px;color:var(--muted);font-weight:400;font-size:15px;letter-spacing:0}.back-link{text-decoration:none;font-size:13px;color:var(--muted)!important}.back-link span{margin-left:12px;color:var(--accent)}
.classroom{max-width:1720px;min-height:calc(100dvh - 74px);margin:0 auto;display:grid;grid-template-columns:320px minmax(0,1fr);gap:46px;padding:40px 36px 50px}.question-desk{display:flex;flex-direction:column;align-self:start;padding-top:8px;min-width:0}.eyebrow{font-size:10px;letter-spacing:.14em;font-weight:600;color:var(--muted)}.desk-heading h1{font-size:27px;line-height:1.3;font-weight:500;letter-spacing:-1px;margin:13px 0 32px}.question-desk label{font-size:13px;display:block;margin-bottom:11px;font-weight:500}.question-paper{position:relative;isolation:isolate;min-height:234px;border:1px solid #4d454a;border-radius:4px;background:linear-gradient(150deg,#242125,#1c1d21);box-shadow:0 9px 25px #0002}.question-paper:focus-within{border-color:var(--accent)}.question-paper textarea{display:block;resize:vertical;width:100%;min-height:234px;max-height:520px;padding:18px 18px 38px;color:var(--ink);background:transparent;border:0;outline:none!important;font-size:16px;line-height:1.7}.question-paper textarea::placeholder{color:#909098}.paper-mark{position:absolute;bottom:6px;right:15px;font-size:23px;color:var(--accent);pointer-events:none}.explain-button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 18px;margin-top:14px;border:1px solid #ffc6dc;border-radius:4px;background:var(--accent);color:#29111c;font-weight:600!important;box-shadow:0 5px 18px #ff7db014;transition:background .2s,transform .2s}.explain-button:hover{background:#ffc4da;transform:translateY(-1px)}.explain-button>span:last-child{font-size:21px;line-height:1}.price-note{text-align:center;color:var(--muted);font-size:11px;margin:11px 0}.context-note{font-size:12px;margin-top:10px;color:var(--accent);border-left:2px solid var(--accent);padding-left:10px}#form-status{font-size:13px;margin:14px 0;color:#ffd6df;overflow-wrap:anywhere}.example-question{margin-top:22px;background:transparent;border:0;text-align:left;padding:0;color:var(--muted);font-size:12px!important;line-height:1.8!important}.example-question:hover{color:var(--ink)}.example-question span{color:var(--accent)}.desk-foot{margin-top:56px;color:#93979e;font-size:11px;line-height:1.9}.small-rule{display:block;width:28px;height:1px;background:#665961;margin-bottom:16px}
.lesson-area{min-width:0}.board-toolbar{height:37px;display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:8px}.board-label{font-size:10px;font-weight:500;letter-spacing:.15em;display:flex;align-items:center;gap:9px;color:#c7ccca}.live-dot{height:5px;width:5px;border-radius:50%;background:#e6e4bb}.lesson-navigation{display:flex;align-items:center;gap:16px}.lesson-navigation select{max-width:200px;background:#1a1c20;border:1px solid var(--line);border-radius:3px;padding:7px 25px 7px 10px;color:#d4d4d7;font-size:11px}.lesson-navigation button{border:0;background:transparent;color:var(--muted);font-size:11px;white-space:nowrap}.lesson-navigation button span{margin-left:8px;color:var(--accent);font-size:15px}
.board-frame{padding:10px 10px 0;background:linear-gradient(160deg,#4a4640,#242621 50%,#46433b);border:1px solid #686356;border-radius:6px;box-shadow:0 22px 55px #0005,0 2px 0 #0008}.chalkboard{position:relative;aspect-ratio:16/10;min-height:430px;overflow:hidden;display:grid;place-items:center;background:radial-gradient(ellipse at 40% 30%,#2b3d35 0%,#1b2a24 60%,#17231f);border:1px solid #151b17;border-radius:2px;box-shadow:inset 0 0 70px #0005}.chalkboard:before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.13;background-image:repeating-linear-gradient(92deg,transparent,transparent 47px,#adc7aa0e 48px),repeating-linear-gradient(2deg,transparent,transparent 63px,#c9d6c50c 64px)}.board-empty{position:relative;width:100%;text-align:center;padding:30px 28px 52px}.chalk-note{font:italic clamp(14px,1.3vw,20px) Georgia,serif;color:#d9dfcf;display:block;transform:rotate(-2deg)}.chalk-diagram{display:block;width:76%;max-width:590px;margin:20px auto 8px;opacity:.9}.board-empty h2{font-size:clamp(23px,2.25vw,37px);line-height:1.3;font-weight:400;letter-spacing:-.9px;margin:5px 0 15px;color:#eeefde}.board-empty p{color:#bbc9bd;font-size:12px;margin:0}.board-corner{position:absolute;bottom:16px;left:20px;font-size:10px;letter-spacing:.08em;color:#94a393}.chalk-tray{height:20px;position:relative;border-top:1px solid #a0977a66;box-shadow:0 3px 4px #0005;background:linear-gradient(#625e52,#373930 40%,#32362e)}.chalk-tray i{position:absolute;width:44px;height:5px;bottom:9px;right:20%;border-radius:2px;background:#e6e4cf;transform:rotate(-3deg);box-shadow:0 2px 3px #0007}.chalk-tray i+i{right:calc(20% + 54px);background:#f4aac5;transform:rotate(1deg)}.chalk-tray b{position:absolute;width:58px;height:12px;bottom:6px;left:7%;background:#bca483;border-radius:2px;box-shadow:inset 0 -4px #62604e,0 3px 3px #0008}.board-message{text-align:center;max-width:600px;padding:35px;position:relative}.board-message h2{font-size:28px;font-weight:500;line-height:1.4;letter-spacing:-.7px}.board-message p{color:#d1dccf;font-size:14px}.board-message .board-subtle{font-size:12px;color:#a5b6a9;margin-top:30px}.chalk-spinner{width:36px;height:36px;border:2px solid #b4c6af33;border-top-color:#f6acce;border-radius:50%;margin:0 auto 25px;animation:study-spin 1.2s linear infinite}#lesson-video{position:relative;width:100%;max-height:100%;aspect-ratio:16/9;background:#14251e;z-index:1}.inline-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.inline-actions button,.inline-actions a{padding:9px 13px;background:#f4bbd0;color:#281820;border:0;border-radius:3px;text-decoration:none;font-size:13px}
.lesson-result{padding:25px 2px 0}.result-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}.result-heading h2{font-size:22px;line-height:1.4;font-weight:500;letter-spacing:-.6px;margin:5px 0}.progress-label{font-size:11px;white-space:nowrap;color:#e8ced9;padding:4px 9px;border:1px solid #5a4754;border-radius:3px}.takeaway{font-size:14px;color:#d0d0d6;max-width:750px;margin:12px 0 22px}.next-actions{display:flex;gap:8px;flex-wrap:wrap}.next-actions button,.learning-panel button{font-size:12px;min-height:39px;padding:8px 13px;border:1px solid #4b4b52;background:#202227;border-radius:3px;color:#eeedf0}.next-actions .primary-small,.learning-panel .primary-small{background:#efb0ca;color:#2b1720;border-color:#efb0ca}.next-actions button:hover,.learning-panel button:hover{border-color:#ffc1d9}.learning-panel{margin-top:20px;padding:22px;background:#1c2022;border:1px solid #3c4941;border-radius:4px}.panel-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.learning-panel h3{font-size:16px;font-weight:500;margin:8px 0 16px}.learning-panel p{font-size:13px;color:#c4c9c5}.learning-panel .close-panel{font-size:22px;padding:0 9px;min-height:30px;border:0;background:transparent;color:#cacdd0}#practice-options{border:0;margin:0 0 12px;padding:0;display:grid;gap:8px}#practice-options label{display:flex;gap:12px;align-items:baseline;padding:11px;border:1px solid #444c49;border-radius:3px;font-size:14px}#practice-options label:has(input:checked){border-color:var(--accent);background:#ffa6c70b}#practice-options input{accent-color:#ed9ebe}#course-list{padding-left:23px}#course-list li{padding:7px;font-size:14px}#course-list button{background:transparent;border:0;text-align:left;color:#f0cedd}.transcript{margin-top:24px;border-top:1px solid var(--line);padding-top:15px;font-size:13px}.transcript summary{cursor:pointer;color:#c7c8cb;padding:5px 0}.transcript button{display:block;width:100%;text-align:left;background:none;border:0;border-left:2px solid #526455;color:#d4ded3;margin:15px 0;padding:4px 12px;line-height:1.8;font-size:14px}.transcript button:hover{border-color:var(--accent)}.sources{font-size:11px;display:flex;gap:12px;flex-wrap:wrap;margin:14px 0}.sources a{color:#b0bbbd}.lesson-foot{display:flex;justify-content:space-between;gap:16px;color:#92999b;font-size:10px;padding-top:15px}.lesson-foot button{border:0;padding:0;background:none;color:#c9acb9;text-decoration:underline;font-size:11px}
@keyframes study-spin{to{transform:rotate(360deg)}}
@media(min-width:1500px){.classroom{grid-template-columns:350px minmax(0,1fr);gap:65px;padding-top:58px}.question-paper textarea{min-height:270px}.chalkboard{aspect-ratio:16/10}}
@media(max-width:1050px){.classroom{grid-template-columns:280px minmax(0,1fr);gap:24px;padding:28px 24px}.classroom-nav{padding:0 24px}.board-toolbar{height:auto;align-items:flex-start}.board-label{padding-top:10px;font-size:9px}.lesson-navigation{gap:4px;flex-direction:column;align-items:flex-end}.lesson-navigation select{max-width:155px}.chalkboard{min-height:440px;aspect-ratio:auto}.board-empty{padding:30px 14px 50px}.chalk-diagram{width:100%}.board-empty p{max-width:250px;margin:auto}.desk-heading h1{font-size:25px}}
@media(max-width:740px){.classroom-nav{height:62px;padding:0 20px}.classroom{display:flex;flex-direction:column;gap:28px;padding:26px 18px 40px}.question-desk{width:100%;padding:0}.desk-heading h1{font-size:27px;margin:8px 0 23px}.desk-heading h1 br{display:none}.question-paper,.question-paper textarea{min-height:154px}.question-paper textarea{max-height:310px}.desk-foot,.example-question{display:none}.board-toolbar{align-items:center}.lesson-navigation{flex-direction:row;gap:10px}.chalkboard{min-height:0;aspect-ratio:4/3}.board-empty{padding:22px 14px 32px}.chalk-note{font-size:14px}.chalk-diagram{width:65%;margin:2px auto}.board-empty h2{font-size:21px;margin:1px 0 8px}.board-empty p{font-size:11px;max-width:260px}.board-corner{font-size:8px;bottom:10px;left:12px}.board-frame{padding:6px 6px 0}.board-message{padding:25px 20px}.board-message h2{font-size:21px}.board-message p{font-size:12px}.board-message .board-subtle{margin-top:16px;font-size:11px}.chalk-spinner{margin-bottom:12px;width:24px;height:24px}.next-actions button{flex:1 1 auto}.lesson-foot{flex-wrap:wrap}.result-heading h2{font-size:20px}.board-label{font-size:8px}.lesson-navigation select{max-width:135px}.lesson-navigation button{font-size:10px}}
@media(prefers-reduced-motion:reduce){.study-page *, .study-page *:before{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:740px){.question-paper textarea{height:174px}}