.bot-container{position:relative;width:100%;height:520px;perspective:1100px;z-index:30}.bot{position:absolute;width:520px;height:520px;bottom:50px;z-index:2;transform:translate(-50%);transform-style:preserve-3d;pointer-events:none}.bot:before{content:"";position:absolute;inset:8% 10% auto 10%;height:34%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffffff5c,#fff0 62%);pointer-events:none;z-index:4}.bot:after{content:none}@media (max-width: 768px){.bot-container{height:340px}.bot{width:370px;height:370px}}.bot-body{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:normal;filter:drop-shadow(0 10px 18px rgba(0,0,0,.25))}.bot-arm-left,.bot-arm-right,.bot-mouth{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:normal;opacity:.98;pointer-events:none}.bot-arm-left{clip-path:inset(45% 66% 12% 8%);transform-origin:34% 58%}.bot-arm-left.idle{animation:arm-l-idle 2.5s ease-in-out infinite}.bot-arm-left.thinking{animation:arm-l-think 1.2s ease-in-out infinite}.bot-arm-left.talking{animation:none;transform:rotate(0)}.bot-arm-left.gesturing,.bot-arm-left.waving,.bot-arm-left.pointing{animation:arm-l-wave .55s ease-in-out infinite}.bot-arm-left.confused{animation:arm-l-confused .4s ease-in-out infinite}@keyframes arm-l-idle{0%,to{transform:rotate(0)}50%{transform:rotate(-7deg)}}@keyframes arm-l-think{0%,to{transform:rotate(-5deg)}50%{transform:rotate(12deg)}}@keyframes arm-l-wave{0%,to{transform:rotate(-10deg)}25%{transform:rotate(14deg)}75%{transform:rotate(-6deg)}}@keyframes arm-l-confused{0%,to{transform:rotate(0)}30%{transform:rotate(10deg)}70%{transform:rotate(-10deg)}}.bot-arm-right{clip-path:inset(45% 8% 12% 66%);transform-origin:66% 58%}.bot-arm-right.idle{animation:arm-r-idle 2.5s ease-in-out infinite .4s}.bot-arm-right.thinking{animation:arm-r-think 1.2s ease-in-out infinite .2s}.bot-arm-right.talking{animation:none;transform:rotate(0)}.bot-arm-right.gesturing,.bot-arm-right.waving,.bot-arm-right.pointing{animation:arm-r-wave .55s ease-in-out infinite .15s}.bot-arm-right.confused{animation:arm-r-confused .4s ease-in-out infinite .1s}@keyframes arm-r-idle{0%,to{transform:rotate(0)}50%{transform:rotate(7deg)}}@keyframes arm-r-think{0%,to{transform:rotate(5deg)}50%{transform:rotate(-12deg)}}@keyframes arm-r-wave{0%,to{transform:rotate(10deg)}25%{transform:rotate(-14deg)}75%{transform:rotate(6deg)}}@keyframes arm-r-confused{0%,to{transform:rotate(0)}30%{transform:rotate(-10deg)}70%{transform:rotate(10deg)}}.bot-mouth{clip-path:inset(42% 45% 48% 45%);transform-origin:50% 50%;mix-blend-mode:normal;opacity:.86;filter:saturate(.72) brightness(.96)}.bot-mouth.neutral{animation:mouth-idle 2s ease-in-out infinite}.bot-mouth.thinking{animation:mouth-thinking 1s ease-in-out infinite}.bot-mouth.happy{animation:mouth-talking .3s ease-in-out infinite}.bot-mouth.confused{animation:mouth-confused .5s ease-in-out infinite}@keyframes mouth-idle{0%,to{transform:scaleX(1) scaleY(1)}50%{transform:scaleX(.98) scaleY(.92)}}@keyframes mouth-thinking{0%,to{transform:scaleX(.9) scaleY(.9)}50%{transform:scaleX(.95) scaleY(.95)}}@keyframes mouth-talking{0%,to{transform:scaleY(1) scaleX(1)}50%{transform:scaleY(1.2) scaleX(1.03)}}@keyframes mouth-confused{0%,to{transform:scaleX(.9) scaleY(.95)}50%{transform:scaleX(.85) scaleY(.9)}}.bot.idle{animation:idle-bob 2.5s ease-in-out infinite}@keyframes idle-bob{0%,to{transform:translate(-50%) translateY(0) rotate(0) rotateX(3deg) rotateY(-4deg)}30%{transform:translate(-50%) translateY(-10px) rotate(1.2deg) rotateX(5deg) rotateY(-2deg)}70%{transform:translate(-50%) translateY(-6px) rotate(-1.2deg) rotateX(3deg) rotateY(-6deg)}}.bot.thinking{animation:thinking-tilt 1.2s ease-in-out infinite}.bot.thinking .bot-body{filter:brightness(.95) saturate(.8)}@keyframes thinking-tilt{0%,to{transform:translate(-50%) rotate(-4deg) translateY(0) rotateX(4deg) rotateY(-10deg)}50%{transform:translate(-50%) rotate(4deg) translateY(-6px) rotateX(6deg) rotateY(6deg)}}.bot.happy,.bot.gesturing,.bot.waving,.bot.pointing{animation:speaking-bounce .5s ease-in-out infinite}.bot.happy .bot-body,.bot.gesturing .bot-body,.bot.waving .bot-body,.bot.pointing .bot-body{filter:brightness(1.05) saturate(1.2)}@keyframes speaking-bounce{0%,to{transform:translate(-50%) translateY(0) scale(1) rotateX(4deg) rotateY(-4deg)}25%{transform:translate(-50%) translateY(-13px) scale(1.04) rotate(2deg) rotateX(6deg) rotateY(-1deg)}75%{transform:translate(-50%) translateY(-8px) scale(1.02) rotate(-1deg) rotateX(5deg) rotateY(-7deg)}}.bot.confused{animation:confused-shake .4s ease-in-out infinite}.bot.confused .bot-body{filter:hue-rotate(10deg) saturate(.9)}@keyframes confused-shake{0%,to{transform:translate(-50%) rotate(0) rotateX(4deg) rotateY(-4deg)}20%{transform:translate(calc(-50% - 5px)) rotate(-6deg) rotateX(5deg) rotateY(-8deg)}40%{transform:translate(calc(-50% + 5px)) rotate(6deg) rotateX(5deg) rotateY(2deg)}60%{transform:translate(calc(-50% - 3px)) rotate(-4deg) rotateX(4deg) rotateY(-9deg)}80%{transform:translate(calc(-50% + 3px)) rotate(4deg) rotateX(4deg) rotateY(0)}}.bubble{position:absolute;top:10px;background:#64c8ffb3;border-radius:50%;animation:floatBubble 1.5s ease-out infinite}.bubble-1{width:14px;height:14px;right:10px;animation-delay:0s}.bubble-2{width:9px;height:9px;right:28px;animation-delay:.3s}.bubble-3{width:6px;height:6px;right:18px;animation-delay:.6s}@keyframes floatBubble{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-60px) scale(.5)}}.think-dots{position:absolute;top:-30px;right:-10px;display:flex;gap:5px;background:#fff;border-radius:20px;padding:6px 10px;box-shadow:0 2px 8px #00000026}.think-dots span{width:8px;height:8px;background:#aaa;border-radius:50%;animation:dotPulse 1s ease-in-out infinite}.think-dots span:nth-child(2){animation-delay:.2s}.think-dots span:nth-child(3){animation-delay:.4s}@keyframes dotPulse{0%,to{transform:scale(1);background:#ccc}50%{transform:scale(1.4);background:#666}}.whiteboard{width:100%;max-width:100%;min-height:var(--board-min-height);height:var(--board-max-height);max-height:var(--board-max-height);flex:1;box-sizing:border-box;background:ivory;border:4px solid #C8860A;border-radius:12px;padding:40px 48px;box-shadow:0 6px 20px #b4640026,inset 0 1px #ffffffe6;display:block;transform:translate(var(--board-shift-x),var(--board-shift-y)) scale(var(--board-scale));transform-origin:center top;margin:0 auto;overflow-y:scroll;overflow-x:hidden;scrollbar-gutter:stable;scrollbar-width:auto;scrollbar-color:#DAA520 #f1f1f1}.whiteboard{-webkit-overflow-scrolling:touch}.whiteboard-content{width:100%;min-height:100%;display:block;padding-right:8px}.whiteboard-markdown{font-size:22px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;color:#3a2800;line-height:1.65;text-align:left;font-style:normal;margin:0;padding:0;animation:fadeIn .5s ease-in}.whiteboard-markdown>:first-child{margin-top:0}.whiteboard-markdown>:last-child{margin-bottom:0}.whiteboard-markdown h1,.whiteboard-markdown h2,.whiteboard-markdown h3{color:#2f2100;margin:10px 0 8px;line-height:1.3}.whiteboard-markdown h1{font-size:31px}.whiteboard-markdown h2{font-size:27px}.whiteboard-markdown h3{font-size:24px}.whiteboard-markdown p{margin:0 0 10px}.whiteboard-markdown ul,.whiteboard-markdown ol{margin:0 0 12px 24px}.whiteboard-markdown li{margin-bottom:4px}.whiteboard-markdown strong{color:#2a1b00}.whiteboard-markdown blockquote{margin:10px 0;padding:8px 12px;border-left:4px solid #D9A52E;background:#fff6d9;border-radius:6px}.whiteboard-markdown code{background:#3a280014;padding:2px 6px;border-radius:6px;font-size:.86em}.whiteboard-markdown pre{background:#fff4cd;border:2px solid #D5AB41;border-radius:10px;padding:12px;overflow-x:auto}.whiteboard-markdown pre code{background:transparent;padding:0}.whiteboard-markdown table{width:100%;border-collapse:collapse;margin:10px 0 14px;font-size:.85em}.whiteboard-markdown th,.whiteboard-markdown td{border:2px solid #D8BC67;padding:6px 8px}.whiteboard-markdown th{background:#ffe9a7}.whiteboard-previews{margin-top:18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.whiteboard-visual-loader{margin-top:18px;display:inline-flex;align-items:center;gap:12px;padding:12px 16px;border-radius:999px;border:2px solid #D9A52E;background:#fff6d9;color:#6a4700;font-size:15px;font-weight:700}.whiteboard-visual-loader-spinner{width:18px;height:18px;border-radius:50%;border:3px solid rgba(179,119,8,.22);border-top-color:#b37708;animation:whiteboardSpinner .9s linear infinite}.preview-card{margin:0;border:2px solid #C8860A;border-radius:10px;overflow:hidden;background:#fffdf4;box-shadow:0 4px 10px #8c5a0a26;aspect-ratio:1 / 1;display:flex;align-items:center;justify-content:center}.preview-card img{width:100%;height:100%;object-fit:contain;display:block;background:#fffaf0}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes whiteboardSpinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.whiteboard::-webkit-scrollbar{width:8px}.whiteboard::-webkit-scrollbar-track{background:#f1f1f1}.whiteboard::-webkit-scrollbar-thumb{background:#daa520;border-radius:4px}.whiteboard::-webkit-scrollbar-thumb:hover{background:#b8860b}@media (max-width: 768px){.whiteboard{border-width:3px;border-radius:10px;padding:22px 18px}.whiteboard-content{padding-right:2px}.whiteboard-markdown{font-size:18px;line-height:1.58}.whiteboard-markdown h1{font-size:25px}.whiteboard-markdown h2{font-size:22px}.whiteboard-markdown h3{font-size:20px}.whiteboard-previews{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.whiteboard-visual-loader{font-size:13px;padding:9px 12px}}@media (max-width: 480px){.whiteboard{padding:16px 12px}.whiteboard-markdown{font-size:16px}.whiteboard-markdown ul,.whiteboard-markdown ol{margin-left:18px}}.input-area{width:100%;max-width:100%;margin:2px 0 0}.input-form{display:flex;gap:10px;align-items:center;background:#fffffff7;padding:15px;border-radius:14px;box-shadow:0 8px 20px #00000024;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.text-input{flex:1;min-width:0;padding:12px 15px;border:2px solid #e0e0e0;border-radius:8px;font-size:14px;font-family:inherit;transition:border-color .3s ease;min-height:88px;resize:vertical;line-height:1.45}.input-actions{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}.text-input:focus{outline:none;border-color:#4caf50}.text-input:disabled{background-color:#f5f5f5;cursor:not-allowed}.mic-button{padding:10px 15px;background:linear-gradient(135deg,#f6b36a,#e78f3c);color:#fff;border:2px solid #C9782F;border-radius:999px;cursor:pointer;font-size:18px;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 4px 10px #c7782f47}.mic-button:hover:not(:disabled){background:linear-gradient(135deg,#f9bf7f,#ee9a49);transform:translateY(-1px) scale(1.04)}.mic-button:disabled{opacity:.5;cursor:not-allowed}.mic-button.listening{background:linear-gradient(135deg,#e37c63,#d95d39);border-color:#b5482a;animation:pulse 1s ease-in-out infinite}.mic-icon{display:inline-block;font-size:28px;line-height:1}.send-icon-img{width:32px;height:32px;display:block}.send-button{padding:10px 20px;background:linear-gradient(135deg,#8cc9e6,#5eaed8);color:#fff;border:2px solid #4F98BE;border-radius:999px;cursor:pointer;font-size:18px;transition:all .3s ease;font-weight:700;box-shadow:0 4px 10px #4f98be47;display:flex;align-items:center;justify-content:center;gap:8px}.send-button:hover:not(:disabled){background:linear-gradient(135deg,#9ed3ec,#6cb9df);transform:translateY(-1px) scale(1.04)}.send-button:disabled{background:#ccc;cursor:not-allowed}.photo-input{display:none;position:absolute;width:0;height:0;opacity:0}.photo-button{padding:10px 14px;background:linear-gradient(135deg,#7eb8a5,#4f9e82);color:#fff;border:2px solid #3E886E;border-radius:999px;cursor:pointer;font-size:18px;transition:all .3s ease;box-shadow:0 4px 10px #3e886e42;display:flex;align-items:center;justify-content:center;gap:8px;user-select:none;-webkit-user-select:none}.photo-button:hover:not(.disabled){background:linear-gradient(135deg,#8cc2b1,#5aa78c);transform:translateY(-1px) scale(1.04)}.photo-button.disabled{opacity:.55;cursor:not-allowed;pointer-events:none}.camera-button{padding:10px 14px;background:linear-gradient(135deg,#5f9be6,#437fcb);color:#fff;border:2px solid #3468ac;border-radius:999px;cursor:pointer;font-size:18px;transition:all .3s ease;box-shadow:0 4px 10px #3468ac47;display:flex;align-items:center;justify-content:center;gap:8px;user-select:none;-webkit-user-select:none}.action-icon{flex:0 0 auto}.action-label{font-size:13px;font-weight:700;line-height:1;white-space:nowrap}.camera-button:hover:not(.disabled){background:linear-gradient(135deg,#73aae9,#518cd3);transform:translateY(-1px) scale(1.04)}.camera-button.disabled{opacity:.55;cursor:not-allowed;pointer-events:none}.input-actions .mic-button,.input-actions .send-button,.input-actions .photo-button,.input-actions .camera-button{flex:0 0 auto}@media (min-width: 821px){.input-form{flex-direction:column;align-items:stretch;gap:12px}.text-input{width:100%}.input-actions{width:100%;justify-content:flex-start;flex-wrap:wrap}}.photo-preview-wrap{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}.photo-preview{position:relative;width:72px;height:72px;border-radius:10px;overflow:hidden;border:2px solid #d9e7f2;background:#fff}.photo-preview img{width:100%;height:100%;object-fit:cover;display:block}.photo-remove{position:absolute;top:2px;right:2px;width:22px;height:22px;border:none;border-radius:999px;background:#000000b8;color:#fff;font-size:15px;line-height:1;cursor:pointer}.mic-button.mic-unsupported{opacity:.4;cursor:not-allowed}.mic-error{margin-top:8px;padding:10px 14px;background:#fff3cd;border-left:4px solid #FFC107;border-radius:4px;font-size:13px;color:#856404}.listening-indicator{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px;background:#fff3e0;border-left:4px solid #FF9800;border-radius:4px;font-size:14px;color:#e65100}.pulse{width:12px;height:12px;background:#ff9800;border-radius:50%;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{box-shadow:0 0 #ff9800b3;transform:scale(1)}50%{box-shadow:0 0 0 10px #ff980000;transform:scale(1.1)}}@media (max-width: 480px){.input-area{width:100%}.input-form{flex-wrap:wrap;gap:8px;padding:10px}.text-input{width:100%;flex:1 1 100%;min-height:72px;margin-bottom:4px;font-size:16px;padding:10px 12px}.input-actions{width:100%;flex-wrap:wrap;gap:8px}.input-actions .mic-button,.input-actions .send-button,.input-actions .photo-button,.input-actions .camera-button{flex:1 1 calc(50% - 4px);min-height:44px;padding:8px 10px}.action-label{font-size:12px}.photo-preview{width:64px;height:64px}}@media (max-width: 820px){.input-form{flex-wrap:wrap;align-items:stretch}.text-input{width:100%;flex:1 1 100%}.input-actions{width:100%;flex-wrap:wrap;justify-content:flex-start}.input-actions .mic-button,.input-actions .send-button,.input-actions .photo-button,.input-actions .camera-button{min-width:56px}}.app-container{min-height:100vh;--board-shift-x: 0px;--board-shift-y: 0px;--board-scale: 1;--board-width: min(92vw, 1080px);--board-min-height: 480px;--board-max-height: 480px;--side-column-width: 320px;--layout-gap: 16px;background-color:#f5e7c0;background-image:url(/assets/aula-C6wiw5J0.png);background-size:cover;background-position:center;background-repeat:no-repeat;padding:20px 20px 170px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.app-container.onboarding-mode{display:flex;align-items:center;justify-content:center;padding:24px 18px}.onboarding-wrap{width:min(1040px,100%);margin:0 auto}.onboarding-card{margin:0 auto;width:min(960px,100%);background:#fffdf2f2;border:3px solid #C8860A;border-radius:18px;box-shadow:0 14px 32px #482c002e;padding:28px}.onboarding-card h1,.onboarding-card h2{margin:0 0 8px;color:#3a2800}.onboarding-card p{margin:0 0 16px;color:#5a3f00;font-size:17px}.onboarding-form{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.onboarding-input{flex:1;min-width:220px;border:2px solid #D8C384;border-radius:10px;font-size:18px;padding:12px 14px;color:#3a2800;background:#fffdf4}.onboarding-input:focus{outline:none;border-color:#c8860a;box-shadow:0 0 0 3px #c8860a2b}.onboarding-primary-button{border:2px solid #B37708;background:linear-gradient(180deg,#ffd95a,#f6c72a);color:#4e3400;border-radius:999px;padding:11px 20px;font-size:16px;font-weight:800;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease;box-shadow:0 7px 14px #a36d0038}.onboarding-primary-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 18px #a36d0047}.onboarding-primary-button:disabled{cursor:not-allowed;opacity:.55}.class-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}.class-option{border:2px solid #D8BC67;background:#fff6d6;color:#4a3200;border-radius:12px;padding:12px 10px;font-size:15px;font-weight:700;cursor:pointer;transition:transform .2s ease,background-color .2s ease}.class-option:hover,.class-option.selected{background:#ffe58e;transform:translateY(-1px)}.area-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.area-option{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;border:3px solid #B47A03;border-radius:16px;background:linear-gradient(180deg,#ffe578,#ffd53a);color:#4d3300;padding:26px 14px;min-height:210px;cursor:pointer;box-shadow:0 10px 18px #8e590033;transition:transform .22s ease,box-shadow .22s ease,filter .22s ease}.area-option:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 14px 24px #8e590047;filter:saturate(1.08)}.area-icon{font-size:52px;line-height:1}.area-title{font-size:23px;font-weight:900}.area-description{font-size:15px;line-height:1.35;max-width:24ch}.page-logo-wrap{width:100%;display:flex;justify-content:center;margin-bottom:-14px;position:relative;z-index:12}.page-logo{width:min(390px,66vw);height:auto;filter:drop-shadow(0 8px 14px rgba(0,0,0,.18))}.main-content{max-width:1200px;margin:0 auto}.scene{margin-bottom:20px}.whiteboard-stage{position:relative;width:var(--board-width);margin:0 auto;padding-bottom:6px}.progress-badge{position:absolute;top:-18px;left:22px;z-index:14;padding:9px 16px;border-radius:999px;color:#fff;font-size:15px;font-weight:700;letter-spacing:.02em}.progress-badge.is-active{background:linear-gradient(135deg,#8cc9e6f5,#5eaed8f5);border:2px solid #4F98BE;box-shadow:0 6px 14px #4f98be47}.progress-badge.is-inactive{background:#fff8e1f2;border:2px solid rgba(200,134,10,.75);color:#8a5a08;box-shadow:0 5px 12px #a078282e}.whiteboard-layout{display:grid;grid-template-columns:minmax(0,1fr) var(--side-column-width);gap:var(--layout-gap);align-items:start}.board-column{display:flex;flex-direction:column;gap:0;min-width:0}.side-column{display:flex;flex-direction:column;gap:14px}.side-bot-wrap{position:relative;min-height:520px}.level-card{background:#fffff0f0;border:3px solid #C8860A;border-radius:12px;box-shadow:0 6px 16px #b4640029;color:#3a2800}.level-card{padding:16px 14px}.level-card h3{margin:0 0 10px;font-size:18px}.level-card p{margin:0 0 8px;line-height:1.4;font-size:16px}.level-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.level-row:last-child{margin-bottom:0}.level-row p{margin:0}.level-action-button{border:2px solid #4F98BE;background:#8cc9e629;color:#2f6c8b;border-radius:999px;padding:6px 12px;font-size:13px;font-weight:700;cursor:pointer;transition:background-color .2s ease,transform .2s ease,opacity .2s ease;white-space:nowrap}.level-action-button:hover:not(:disabled){background:#8cc9e647;transform:translateY(-1px)}.level-action-button:disabled{opacity:.45;cursor:not-allowed}.area-row{margin-bottom:12px}.mini-area-switch{display:flex;flex-direction:column;gap:8px}.lesson-actions{margin-top:12px;display:flex}.lesson-print-button{width:100%;justify-content:center;font-size:14px;padding:9px 14px;border-color:#b37708;background:linear-gradient(180deg,#ffe085,#f8c83a);color:#4a3200}.lesson-print-button:hover:not(:disabled){background:linear-gradient(180deg,#ffe8a8,#ffd75a)}.mini-area-button{width:100%;border:2px solid #D29A1F;background:#fff3ca;color:#5a3d00;border-radius:10px;font-size:14px;font-weight:700;padding:8px 10px;cursor:pointer;transition:background-color .2s ease,transform .2s ease;display:flex;align-items:center;justify-content:center;gap:8px}.mini-area-button:hover{background:#ffe7a4;transform:translateY(-1px)}.mini-area-button.is-selected{background:#ffd54a;border-color:#b47a03}.topic-badge-wrap{margin-top:-16px;position:relative;z-index:8;display:flex;justify-content:flex-start;padding-left:18px}.topic-badge{max-width:min(720px,calc(100% - 24px));display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 16px;border-radius:999px;background:#fffff0f7;border:3px solid #C8860A;box-shadow:0 6px 14px #b4640026;color:#3a2800}.topic-badge-label{font-size:15px;font-weight:700}.topic-badge-value{font-size:15px;font-style:italic}@media (max-width: 768px){.app-container{--board-width: min(96vw, 760px);--board-min-height: 360px;--board-max-height: 360px;--board-scale: 1;--side-column-width: 100%;padding:12px 12px 96px}.page-logo-wrap{margin-bottom:-4px}.onboarding-card{padding:18px}.onboarding-card p{font-size:16px}.area-grid{grid-template-columns:1fr}.area-option{min-height:160px;padding:20px 12px}.area-icon{font-size:42px}.area-title{font-size:20px}.page-logo{width:min(285px,72vw)}.whiteboard-stage{padding-bottom:8px}.progress-badge{top:-14px;left:14px;padding:8px 14px;font-size:13px}.whiteboard-layout{grid-template-columns:1fr;gap:10px}.side-bot-wrap{min-height:230px}.side-column{gap:10px}.topic-badge-wrap{margin-top:-12px;padding-left:12px}.topic-badge{max-width:calc(100% - 12px);padding:8px 12px;border-width:2px}.topic-badge-label,.topic-badge-value{font-size:13px}.level-card{width:100%;padding:12px 10px}.level-row{align-items:flex-start;flex-direction:column;gap:6px;margin-bottom:8px}.level-card p{font-size:14px}.mini-area-switch{display:grid;grid-template-columns:1fr;gap:6px}.mini-area-button{font-size:13px;padding:8px}}@media (max-width: 768px){.scene{min-height:0;padding:4px}}@media (max-width: 480px){.app-container{--board-width: 100%;--board-min-height: 320px;--board-max-height: 320px;--layout-gap: 8px;padding:8px 8px 84px}.main-content{width:100%}.progress-badge{left:10px;top:-12px;font-size:12px;padding:7px 10px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topic-badge-wrap{margin-top:-10px;padding-left:8px}.topic-badge{max-width:calc(100% - 8px)}.lesson-actions{margin-top:10px}.lesson-print-button{font-size:13px;padding:8px 10px}}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f5f5f5}button,input{font-family:inherit}