:root{--ink:#25233e;--muted:#75758d;--line:#e7e4f0;--paper:#fff;--bg:#f7f6fb;--purple:#5c4de0;--purple2:#8273ef;--mint:#2fb693;--gold:#d99a1f;--coral:#e86c5a;--blue:#4188d8;--shadow:0 18px 55px rgba(52,42,115,.12);--radius:24px}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;color:var(--ink);background:var(--bg)}button,input,textarea{font:inherit;color:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:4px solid rgba(92,77,224,.2);outline-offset:2px}body{overflow:hidden}.app-shell{max-width:1580px;height:100vh;margin:0 auto;padding:0 28px 24px}.topbar{height:76px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.brand{display:flex;align-items:center;gap:10px;border:0;background:transparent;padding:0;text-align:left}.brand>span:last-child{display:flex;flex-direction:column}.brand b{font-size:20px}.brand small{margin-top:1px;color:var(--muted);font-size:8px;letter-spacing:1px}.logo{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(145deg,var(--purple2),var(--purple));color:white;font-size:18px;font-weight:900;box-shadow:0 9px 20px rgba(82,63,203,.25)}.top-center{padding:7px 11px;border:1px solid #dfeee8;border-radius:999px;background:#f2faf7;color:#5c7c72;font-size:9px}.top-center b{color:#27876d}.safe-dot{display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#43bd97;box-shadow:0 0 0 4px rgba(67,189,151,.12)}.top-actions{justify-self:end;display:flex;gap:8px}.streak,.profile{height:45px;border:1px solid var(--line);border-radius:14px;background:white}.streak{display:flex;align-items:center;gap:7px;padding:0 12px}.streak span{color:var(--muted);font-size:8px}.streak b{font-size:11px}.profile{display:grid;grid-template-columns:1fr 34px;grid-template-rows:1fr 1fr;column-gap:8px;align-items:center;padding:4px 5px 4px 12px;text-align:right}.profile span{align-self:end;font-size:10px;font-weight:900}.profile small{align-self:start;color:var(--muted);font-size:8px}.profile i{grid-column:2;grid-row:1/3;width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:#eeeaff;color:var(--purple);font-size:9px;font-style:normal;font-weight:900}.screen-stage{height:calc(100vh - 100px)}.screen{display:none;height:100%;animation:screenIn .3s ease}.screen.active{display:block}

/* Intro */
.intro{position:fixed;z-index:200;inset:0;overflow:hidden;color:white;background:#29245f;transition:opacity .55s,visibility .55s}.intro.hide{opacity:0;visibility:hidden;pointer-events:none}.intro-grid{position:absolute;inset:-10%;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:54px 54px;transform:perspective(500px) rotateX(62deg) translateY(27%);mask-image:linear-gradient(transparent,#000 45%,#000)}.intro-skip{position:absolute;z-index:5;right:26px;top:24px;height:40px;padding:0 14px;border:1px solid rgba(255,255,255,.22);border-radius:13px;background:rgba(255,255,255,.08);color:white;font-size:10px}.intro-mark{position:absolute;left:50%;top:24%;width:115px;height:115px;display:grid;place-items:center;border-radius:34px;background:linear-gradient(145deg,#8a7af0,#5543cf);transform:translate(-50%,-50%) rotate(-4deg);box-shadow:0 25px 60px rgba(17,12,61,.38)}.intro-mark span{font-size:26px;font-weight:900;letter-spacing:-2px}.intro-mark i{position:absolute;width:170px;height:47px;border:2px solid #75dec2;border-radius:50%;transform:rotate(-12deg);animation:orbit 8s linear infinite}.intro-scene{position:absolute;left:50%;top:61%;width:min(850px,86%);transform:translate(-50%,-43%) scale(.94);opacity:0;text-align:center;transition:.55s cubic-bezier(.2,.8,.2,1);pointer-events:none}.intro-scene.active{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}.intro-scene>small{display:block;color:#aaa0eb;font-size:11px;font-weight:900;letter-spacing:3px}.intro-scene h1,.intro-scene h2{margin:7px 0 10px;letter-spacing:-2px}.intro-scene h1{font-size:clamp(52px,7vw,84px)}.intro-scene h2{font-size:clamp(34px,5vw,59px)}.intro-scene p{margin:0;color:rgba(255,255,255,.66);font-size:15px}.intro-tags{display:flex;justify-content:center;gap:8px;margin-top:22px}.intro-tags span{padding:7px 12px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.07);font-size:9px}.intro-scene button{height:52px;margin-top:25px;padding:0 22px;border:0;border-radius:15px;background:#f4d768;color:#4c3c9d;font-size:11px;font-weight:900}.intro-scene button b{margin-left:18px}.intro-progress{position:absolute;left:50%;bottom:30px;display:flex;gap:7px;transform:translateX(-50%)}.intro-progress span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.26);transition:.3s}.intro-progress span.active{width:25px;border-radius:99px;background:#75dec2}

/* Home */
.home-screen{overflow:auto;padding-bottom:10px}.home-main{min-height:100%;display:flex;flex-direction:column}.welcome-card{height:35%;min-height:250px;display:grid;grid-template-columns:1.25fr .75fr;gap:20px;overflow:hidden;padding:27px 34px;border-radius:28px;background:linear-gradient(118deg,#4b3dc3,#6756df 58%,#7e70eb);color:white;box-shadow:0 20px 50px rgba(75,57,173,.2)}.welcome-copy{display:flex;flex-direction:column;justify-content:center}.overline{font-size:9px;color:#c9c2ff;font-weight:900;letter-spacing:.5px}.welcome-copy h1{margin:9px 0 7px;font-size:clamp(30px,3.5vw,48px);line-height:1.1;letter-spacing:-1.7px}.welcome-copy h1 em{color:#f4dc71;font-style:normal}.welcome-copy>p{max-width:680px;margin:0;color:rgba(255,255,255,.72);font-size:12px;line-height:1.65}.home-metrics{display:flex;gap:9px;margin-top:15px}.home-metrics span{min-width:100px;padding:8px 10px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.62);font-size:8px}.home-metrics b{display:block;margin-bottom:1px;color:white;font-size:14px}.ai-guide-card{align-self:center;position:relative;display:grid;grid-template-columns:55px 1fr;gap:13px;padding:18px;border:1px solid rgba(255,255,255,.15);border-radius:21px;background:rgba(28,21,89,.25);backdrop-filter:blur(10px)}.ai-avatar{position:relative;width:55px;height:55px;display:grid;place-items:center;border-radius:18px;background:linear-gradient(145deg,#a294ff,#7060e5);box-shadow:0 10px 25px rgba(26,18,92,.25)}.ai-avatar span{font-size:15px;font-weight:900}.ai-avatar i{position:absolute;width:16px;height:4px;bottom:9px;border-radius:99px;background:#75dec2;box-shadow:-7px 0 0 #75dec2,7px 0 0 #75dec2}.ai-guide-card small{color:#aaa1ee;font-size:8px}.ai-guide-card h2{margin:3px 0 5px;font-size:16px}.ai-guide-card p{margin:0;color:rgba(255,255,255,.7);font-size:10px;line-height:1.55}.ai-guide-card button{height:38px;margin-top:10px;padding:0 12px;border:0;border-radius:11px;background:white;color:#5041bc;font-size:9px;font-weight:900}.ai-guide-card button span{float:right;margin-left:20px}.signal{position:absolute;right:14px;top:13px;display:flex;align-items:end;gap:2px}.signal i{width:3px;border-radius:3px;background:#75dec2;animation:signal .7s infinite alternate}.signal i:nth-child(1){height:5px}.signal i:nth-child(2){height:9px;animation-delay:.15s}.signal i:nth-child(3){height:13px;animation-delay:.3s}.signal i:nth-child(4){height:7px;animation-delay:.45s}.section-title{height:12%;min-height:76px;display:flex;align-items:center;justify-content:space-between;padding:8px 3px}.section-title span{color:var(--purple);font-size:8px;font-weight:900;letter-spacing:1.2px}.section-title h2{margin:3px 0 0;font-size:24px}.section-title p{margin:0;color:var(--muted);font-size:9px}.lab-grid{height:53%;display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.lab-card{position:relative;display:flex;flex-direction:column;min-height:270px;padding:17px;overflow:hidden;border:1px solid var(--line);border-radius:22px;background:white;text-align:left;box-shadow:0 9px 28px rgba(52,43,105,.07);transition:.22s}.lab-card:hover{transform:translateY(-5px);border-color:var(--accent);box-shadow:var(--shadow)}.lab-card.story{--accent:var(--purple)}.lab-card.draw{--accent:var(--mint)}.lab-card.learn{--accent:var(--gold)}.lab-card.teacher{--accent:var(--coral)}.lab-index{position:absolute;right:15px;top:14px;color:#c9c6d3;font-size:9px;font-weight:900}.lab-symbol{width:44px;height:44px;display:grid;place-items:center;margin-bottom:12px;border-radius:14px;background:color-mix(in srgb,var(--accent) 12%,white);color:var(--accent);font-size:11px;font-weight:900}.lab-card>small{color:var(--accent);font-size:8px;font-weight:900}.lab-card h3{margin:3px 0 6px;font-size:18px}.lab-card>p{margin:0;color:var(--muted);font-size:9px;line-height:1.55}.lab-cases{display:grid;gap:5px;margin-top:10px}.lab-cases span{padding:6px 8px;border-radius:8px;background:#f7f6fa;color:#66627b;font-size:8px}.lab-card footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:10px;border-top:1px solid #efedf4}.lab-card footer b{font-size:9px}.lab-card footer i{width:27px;height:27px;display:grid;place-items:center;border-radius:9px;background:var(--accent);color:white;font-style:normal}

/* Library */
.library-screen{padding:8px 0 0}.library-head{height:25%;min-height:170px;display:grid;grid-template-columns:170px 1fr 270px;align-items:center;padding:20px 28px;border-radius:25px;background:linear-gradient(120deg,#302b66,#5143b8);color:white}.back-button{height:40px;width:max-content;padding:0 13px;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(255,255,255,.08);color:inherit;font-size:9px;font-weight:900}.library-head>div:nth-child(2){text-align:center}.library-head>div>span{color:#aaa0ec;font-size:8px;font-weight:900;letter-spacing:1.4px}.library-head h1{margin:5px 0 4px;font-size:32px}.library-head p{margin:0;color:rgba(255,255,255,.65);font-size:10px}.library-ai{justify-self:end;display:flex;align-items:center;gap:9px;padding:11px;border:1px solid rgba(255,255,255,.13);border-radius:16px;background:rgba(255,255,255,.07)}.library-ai>span{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:#7565e0;font-size:10px;font-weight:900}.library-ai p{margin:0;text-align:left}.library-ai b,.library-ai small{display:block}.library-ai b{font-size:9px}.library-ai small{max-width:170px;margin-top:2px;color:rgba(255,255,255,.58);font-size:8px;line-height:1.45}.case-grid{height:58%;display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:18px 0}.project-card{position:relative;display:grid;grid-template-columns:1fr 42%;overflow:hidden;border:1px solid var(--line);border-radius:24px;background:white;box-shadow:0 10px 32px rgba(55,44,109,.08);text-align:left;transition:.2s}.project-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.project-copy{display:flex;flex-direction:column;padding:22px}.project-copy>small{color:var(--module-color);font-size:8px;font-weight:900}.project-copy h2{margin:5px 0 6px;font-size:22px}.project-copy>p{margin:0;color:var(--muted);font-size:9px;line-height:1.6}.outcomes{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:11px}.outcomes span{padding:6px 8px;border-radius:8px;background:#f6f5f9;color:#68657a;font-size:7.5px}.project-meta{display:flex;gap:8px;margin-top:auto;padding-top:12px}.project-meta span{padding:5px 7px;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-size:7.5px}.project-enter{height:35px;margin-top:10px;border:0;border-radius:11px;background:var(--module-color);color:white;font-size:9px;font-weight:900}.project-visual{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(145deg,color-mix(in srgb,var(--module-color) 78%,#24203f),var(--module-color));color:white}.project-visual:before,.project-visual:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.14);border-radius:50%}.project-visual:before{width:210px;height:210px}.project-visual:after{width:130px;height:130px}.project-code{position:relative;z-index:2;font-size:44px;font-weight:900;letter-spacing:-5px;opacity:.92}.project-visual small{position:absolute;z-index:3;bottom:16px;left:16px;right:16px;color:rgba(255,255,255,.66);font-size:8px;line-height:1.45}.learning-loop{height:17%;min-height:88px;display:flex;align-items:center;justify-content:center;gap:14px;padding:10px;border:1px solid var(--line);border-radius:18px;background:white}.learning-loop>div{display:grid;grid-template-columns:30px 1fr;column-gap:8px;align-items:center}.learning-loop>div>span{grid-row:1/3;width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:#eeebfb;color:var(--purple);font-size:8px;font-weight:900}.learning-loop b,.learning-loop small{display:block}.learning-loop b{font-size:9px}.learning-loop small{color:var(--muted);font-size:7.5px}.learning-loop>i{color:#c7c2d8;font-style:normal}

/* Studio */
.studio-screen{overflow:hidden}.studio-top{height:67px;display:grid;grid-template-columns:210px 1fr 210px;align-items:center;border:1px solid var(--line);border-radius:20px 20px 0 0;background:white;padding:0 18px}.studio-top .back-button{border-color:var(--line);background:#f7f6fa;color:var(--muted)}.project-name{text-align:center}.project-name span{color:var(--purple);font-size:7px;font-weight:900}.project-name h1{margin:2px 0 0;font-size:17px}.project-status{justify-self:end;text-align:right}.project-status span,.project-status b{display:block}.project-status span{color:var(--mint);font-size:7px;font-weight:900}.project-status b{margin-top:2px;font-size:9px}.studio-layout{height:calc(100% - 67px);display:grid;grid-template-columns:190px minmax(0,1fr) 275px;border:1px solid var(--line);border-top:0;border-radius:0 0 20px 20px;background:white;overflow:hidden}.course-rail{display:flex;flex-direction:column;padding:20px 14px;border-right:1px solid var(--line);background:#faf9fc}.rail-label{padding:0 7px;color:#9b98a9;font-size:7px;font-weight:900;letter-spacing:1.2px}.course-steps{display:grid;gap:4px;margin-top:10px}.course-steps button{display:flex;align-items:center;gap:8px;min-height:57px;padding:7px;border:0;border-radius:13px;background:transparent;text-align:left}.course-steps button i{width:30px;height:30px;display:grid;place-items:center;flex:0 0 auto;border-radius:10px;background:#eeecf3;color:#aaa6b7;font-size:8px;font-style:normal;font-weight:900}.course-steps b,.course-steps small{display:block}.course-steps b{font-size:9px}.course-steps small{margin-top:2px;color:var(--muted);font-size:7px}.course-steps button.active{background:white;box-shadow:0 6px 18px rgba(52,44,100,.08)}.course-steps button.active i,.course-steps button.done i{background:var(--purple);color:white}.course-steps button.done{opacity:.78}.source-card{margin-top:auto;padding:11px;border:1px solid #dcece6;border-radius:13px;background:#f3faf7}.source-card span{color:#2f9a7f;font-size:7px;font-weight:900}.source-card b,.source-card small{display:block}.source-card b{margin-top:3px;font-size:8px;line-height:1.45}.source-card small{margin-top:4px;color:#739088;font-size:6.5px;line-height:1.45}.workspace{position:relative;overflow:auto;padding:19px 24px}.workspace-head{display:grid;grid-template-columns:150px 1fr 80px;align-items:center;gap:12px;margin-bottom:14px}.stage-label{color:var(--purple);font-size:8px;font-weight:900}.progress-line{height:6px;overflow:hidden;border-radius:99px;background:#eeecf3}.progress-line i{display:block;width:25%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--purple),var(--purple2));transition:.35s}.time-label{text-align:right;color:var(--muted);font-size:7px}.stage-panel{display:none;min-height:calc(100% - 30px);animation:screenIn .25s}.stage-panel.active{display:flex;flex-direction:column}.question-context>span{color:var(--purple);font-size:7px;font-weight:900;letter-spacing:1px}.question-context h2{margin:5px 0 5px;font-size:clamp(20px,2.1vw,28px);line-height:1.25}.question-context p{margin:0;color:var(--muted);font-size:8.5px;line-height:1.55}.diagnostic-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}.diagnostic-options button{min-height:75px;padding:11px;border:2px solid transparent;border-radius:14px;background:#f7f6fa;text-align:left;font-size:9px;line-height:1.5}.diagnostic-options button.selected{border-color:var(--purple);background:#f0edff}.diagnostic-options b{display:block;margin-bottom:3px;color:var(--purple);font-size:8px}.thinking-input{display:grid;grid-template-columns:80px 1fr;gap:6px;padding:11px;border:1px solid var(--line);border-radius:14px}.thinking-input>span{grid-row:1/3;font-size:8px;font-weight:900}.thinking-input textarea{resize:none;padding:8px;border:1px solid var(--line);border-radius:10px;font-size:8.5px;line-height:1.5}.thinking-input small{color:var(--muted);font-size:6.5px}.primary-action,.secondary-action{height:45px;padding:0 16px;border-radius:13px;font-size:9px;font-weight:900}.primary-action{align-self:flex-end;margin-top:auto;border:0;background:linear-gradient(120deg,var(--purple),#7565e7);color:white;box-shadow:0 8px 20px rgba(78,59,189,.2)}.primary-action:disabled{opacity:.35;box-shadow:none}.primary-action span{margin-left:15px}.secondary-action{border:1px solid var(--line);background:white;color:var(--muted)}.evidence-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:14px 0}.evidence-card{position:relative;min-height:155px;padding:13px;border:2px solid transparent;border-radius:15px;background:#f8f7fa;text-align:left}.evidence-card.selected{border-color:var(--purple);background:#f0edff}.evidence-card .evidence-type{display:inline-block;padding:4px 6px;border-radius:6px;background:white;color:#78738d;font-size:6.5px;font-weight:900}.evidence-card h3{margin:9px 0 5px;font-size:11px}.evidence-card p{margin:0;color:var(--muted);font-size:7.5px;line-height:1.55}.evidence-card i{display:none;position:absolute;right:10px;top:10px;width:22px;height:22px;place-items:center;border-radius:8px;background:var(--purple);color:white;font-size:8px;font-style:normal}.evidence-card.selected i{display:grid}.evidence-result{display:flex;align-items:center;gap:9px;padding:10px;border:1px solid #e1dff0;border-radius:12px;background:#faf9fd}.evidence-result>span{width:31px;height:31px;display:grid;place-items:center;border-radius:10px;background:#eeeaff;color:var(--purple);font-size:8px;font-weight:900}.evidence-result p{margin:0;color:var(--muted);font-size:7.5px;line-height:1.5}.evidence-result.success{border-color:#cdeade;background:#f2faf7}.creation-workbench{margin-top:12px}.tool-tabs{display:flex;gap:6px;margin-bottom:8px}.tool-tabs span{padding:5px 8px;border-radius:7px;background:#f0edfb;color:var(--purple);font-size:7px;font-weight:900}.creation-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:10px}.creator-input,.creator-preview{min-height:255px;padding:14px;border:1px solid var(--line);border-radius:16px;background:#faf9fc}.creator-input>span,.creator-preview>span{color:var(--purple);font-size:7px;font-weight:900}.creator-input h3,.creator-preview h3{margin:5px 0 9px;font-size:12px}.structure-list{display:grid;gap:6px}.structure-list button{display:grid;grid-template-columns:24px 1fr;column-gap:7px;align-items:center;min-height:42px;padding:6px;border:1px solid var(--line);border-radius:10px;background:white;text-align:left}.structure-list button b{grid-row:1/3;width:24px;height:24px;display:grid;place-items:center;border-radius:7px;background:#efecfa;color:var(--purple);font-size:7px}.structure-list button span{font-size:8px;font-weight:900}.structure-list button small{color:var(--muted);font-size:6.5px}.creator-note{width:100%;min-height:65px;margin-top:7px;padding:8px;border:1px solid var(--line);border-radius:10px;resize:none;font-size:8px}.ai-draft{display:grid;gap:6px}.draft-block{padding:8px;border-radius:10px;background:white}.draft-block small{display:block;color:var(--purple);font-size:6.5px;font-weight:900}.draft-block p{margin:3px 0 0;font-size:7.5px;line-height:1.45}.draft-placeholder{display:grid;place-items:center;min-height:190px;border:1px dashed #d8d3e7;border-radius:12px;color:#9d99aa;font-size:8px;text-align:center}.ai-loading{display:flex;align-items:center;justify-content:center;gap:5px;min-height:190px}.ai-loading i{width:7px;height:7px;border-radius:50%;background:var(--purple);animation:dots .7s infinite alternate}.ai-loading i:nth-child(2){animation-delay:.15s}.ai-loading i:nth-child(3){animation-delay:.3s}.review-head{display:flex;align-items:center;justify-content:space-between;padding:14px;border-radius:16px;background:linear-gradient(120deg,#f0edff,#f8f7fc)}.review-head>div>span{color:var(--purple);font-size:7px;font-weight:900}.review-head h2{margin:4px 0 3px;font-size:18px}.review-head p{margin:0;color:var(--muted);font-size:7.5px}.overall-score{width:76px;height:76px;display:grid;place-items:center;border-radius:50%;background:white;box-shadow:0 8px 22px rgba(66,50,130,.1)}.overall-score b{grid-row:1;align-self:end;font-size:23px}.overall-score small{grid-row:2;align-self:start;color:var(--muted);font-size:6px}.rubric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:10px 0}.rubric-item{padding:9px;border:1px solid var(--line);border-radius:12px}.rubric-item div{display:flex;justify-content:space-between;font-size:7px;font-weight:900}.rubric-item div b{color:var(--purple)}.rubric-bar{height:5px;margin-top:7px;overflow:hidden;border-radius:99px;background:#eeecf2}.rubric-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--purple),var(--mint))}.feedback-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.feedback-card{padding:11px;border-radius:13px}.feedback-card span{font-size:7px;font-weight:900}.feedback-card p{margin:5px 0 0;font-size:8px;line-height:1.55}.feedback-card.strength{background:#f0faf6;color:#287d68}.feedback-card.improve{background:#fff7e7;color:#8a651b}.review-actions{display:flex;justify-content:space-between;margin-top:auto;padding-top:10px}.review-actions .primary-action{margin:0}

/* AI panel */
.ai-panel{display:flex;flex-direction:column;border-left:1px solid var(--line);background:#fbfafe}.ai-head{height:65px;display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}.ai-avatar.small{width:39px;height:39px;border-radius:12px;color:white}.ai-avatar.small span{font-size:10px}.ai-head b,.ai-head small{display:block}.ai-head b{font-size:9px}.ai-head small{margin-top:2px;color:var(--muted);font-size:6.5px}.ai-head small i{display:inline-block;width:6px;height:6px;margin-right:4px;border-radius:50%;background:var(--mint)}.ai-head>button{margin-left:auto;width:30px;height:30px;border:0;border-radius:9px;background:#f0edf6;color:var(--muted)}.chat{flex:1;overflow:auto;display:flex;flex-direction:column;gap:9px;padding:12px}.chat-message{display:flex;align-items:flex-start;gap:6px}.chat-message>span{width:24px;height:24px;display:grid;place-items:center;flex:0 0 auto;border-radius:8px;background:#ece9fb;color:var(--purple);font-size:6px;font-weight:900}.chat-message p{max-width:205px;margin:0;padding:8px 9px;border-radius:5px 11px 11px 11px;background:white;color:#605d72;font-size:7.5px;line-height:1.55;box-shadow:0 4px 14px rgba(53,45,97,.06)}.chat-message.user{flex-direction:row-reverse}.chat-message.user>span{background:#e4f5ef;color:#26856d}.chat-message.user p{border-radius:11px 5px 11px 11px;background:#ece9fb;color:#4f46a3}.typing p:after{content:"···";animation:blink .9s infinite}.quick-prompts{display:flex;gap:5px;overflow:auto;padding:0 10px 8px}.quick-prompts button{flex:0 0 auto;height:27px;padding:0 8px;border:1px solid var(--line);border-radius:9px;background:white;color:#6d687c;font-size:6.5px}.chat-input{display:grid;grid-template-columns:1fr 34px;gap:6px;padding:9px 10px;border-top:1px solid var(--line)}.chat-input input{min-width:0;height:35px;padding:0 9px;border:1px solid var(--line);border-radius:10px;background:white;font-size:7.5px}.chat-input button{border:0;border-radius:10px;background:var(--purple);color:white;font-weight:900}.ai-principle{padding:0 10px 9px;color:#9692a5;font-size:6px;line-height:1.45}.ai-principle span{display:inline-block;width:6px;height:6px;margin-right:4px;border-radius:50%;background:var(--mint)}.toast{position:fixed;z-index:220;left:50%;bottom:22px;transform:translate(-50%,25px);padding:10px 14px;border-radius:11px;background:#282442;color:white;font-size:8px;font-weight:900;opacity:0;pointer-events:none;transition:.25s;box-shadow:0 12px 30px rgba(31,27,65,.24)}.toast.show{opacity:1;transform:translate(-50%,0)}.celebration{position:fixed;z-index:210;inset:0;pointer-events:none;overflow:hidden}.celebration i{position:absolute;top:-15px;width:8px;height:12px;border-radius:2px;animation:confetti 1.5s linear forwards}
@keyframes screenIn{from{opacity:0;transform:translateY(8px)}}@keyframes orbit{to{transform:rotate(348deg)}}@keyframes signal{to{height:15px}}@keyframes dots{to{transform:translateY(-7px);opacity:.35}}@keyframes blink{50%{opacity:.25}}@keyframes confetti{to{top:110%;transform:rotate(620deg)}}
@media(max-width:1100px){.app-shell{padding:0 16px 18px}.welcome-card{grid-template-columns:1.1fr .9fr;padding:22px}.lab-grid{grid-template-columns:1fr 1fr;height:auto}.home-screen{overflow:auto}.section-title{height:80px}.lab-card{min-height:230px}.studio-layout{grid-template-columns:165px minmax(0,1fr) 240px}.workspace{padding:16px}.project-card{grid-template-columns:1fr 34%}.library-head{grid-template-columns:140px 1fr 220px}}
@media(max-width:760px){body{overflow:auto}.app-shell{height:auto;min-height:100vh;padding:0 10px 15px}.topbar{height:64px;grid-template-columns:1fr auto}.top-center,.streak{display:none}.screen-stage{height:auto}.screen{min-height:calc(100vh - 78px)}.welcome-card{height:auto;display:block;min-height:0;padding:25px 20px}.ai-guide-card{margin-top:18px}.home-metrics span{min-width:0;flex:1}.section-title{height:auto;padding:25px 3px 12px}.section-title p{display:none}.lab-grid{grid-template-columns:1fr}.lab-card{min-height:215px}.library-head{height:auto;min-height:220px;display:flex;flex-direction:column;justify-content:center;gap:15px;padding:20px}.library-head .back-button{align-self:flex-start}.library-ai{align-self:stretch}.case-grid{height:auto;grid-template-columns:1fr}.project-card{min-height:310px}.learning-loop{height:auto;overflow:auto;justify-content:flex-start}.learning-loop>div{flex:0 0 140px}.studio-top{height:auto;min-height:105px;grid-template-columns:1fr auto;grid-template-rows:auto auto;padding:12px}.studio-top .back-button{grid-column:1}.project-name{grid-column:1/3;grid-row:2;margin-top:8px}.project-status{grid-column:2;grid-row:1}.studio-layout{height:auto;display:block}.course-rail{border-right:0;border-bottom:1px solid var(--line)}.course-steps{grid-template-columns:repeat(4,1fr)}.course-steps button{display:block;text-align:center}.course-steps button i{margin:0 auto}.course-steps button span small{display:none}.source-card{display:none}.workspace{min-height:680px}.workspace-head{grid-template-columns:110px 1fr}.time-label{display:none}.diagnostic-options,.evidence-grid{grid-template-columns:1fr}.evidence-card{min-height:115px}.creation-grid{grid-template-columns:1fr}.ai-panel{min-height:500px;border-left:0;border-top:1px solid var(--line)}.rubric-grid{grid-template-columns:1fr 1fr}.feedback-grid{grid-template-columns:1fr}.intro-mark{top:19%;width:88px;height:88px}.intro-mark i{width:130px}.intro-scene{top:57%}.intro-scene p{font-size:12px}.intro-tags{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}

/* Rich case experience */
body[data-lab="story"]{--lab-live:#6654e8;--lab-soft:#f0edff}body[data-lab="draw"]{--lab-live:#24a88b;--lab-soft:#e8faf5}body[data-lab="learn"]{--lab-live:#ca8910;--lab-soft:#fff7df}body[data-lab="teacher"]{--lab-live:#dc6253;--lab-soft:#fff0ed}.studio-screen{--lab-live:#6654e8;--lab-soft:#f0edff}.studio-screen .project-status span,.studio-screen .stage-label,.studio-screen .question-context>span{color:var(--lab-live)}.studio-screen .progress-line i{background:linear-gradient(90deg,var(--lab-live),#8c7bf2);box-shadow:0 0 14px color-mix(in srgb,var(--lab-live) 40%,transparent)}.course-steps button.active i,.course-steps button.done i{background:var(--lab-live);box-shadow:0 8px 20px color-mix(in srgb,var(--lab-live) 28%,transparent)}
.learning-lens{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:18px;padding-top:14px;border-top:1px dashed #dedbea}.learning-lens>span{font-size:7px;font-weight:900;color:#8e8aa1;letter-spacing:.06em;margin-right:2px}.learning-lens b{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border-radius:999px;background:#fff;color:#393451;font-size:7.5px;box-shadow:0 4px 12px rgba(32,25,65,.06)}.learning-lens b i{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--lab-soft);color:var(--lab-live);font-size:7px;font-style:normal}.learning-lens em{margin-left:auto;padding:6px 9px;border-radius:8px;background:var(--lab-soft);color:var(--lab-live);font-size:7px;font-style:normal;font-weight:900}
.diagnostic-insight{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;position:relative;overflow:hidden;margin:0 0 12px;padding:12px 14px 15px;border:1px solid #e6e2f1;border-radius:14px;background:linear-gradient(135deg,#fff 0%,#faf9ff 100%);box-shadow:0 8px 22px rgba(38,31,74,.055);transition:.25s ease}.diagnostic-insight>span{grid-row:1/3;align-self:start;padding:6px 9px;border-radius:8px;background:#eeeaf8;color:#746d89;font-size:7px;font-weight:900;letter-spacing:.04em}.diagnostic-insight b{display:block;color:#302b44;font-size:8px}.diagnostic-insight p{margin:3px 0 0;color:#777287;font-size:7px;line-height:1.5}.diagnostic-insight>i{position:absolute;right:0;bottom:0;left:0;height:4px;background:#eeeaf5}.diagnostic-insight>i em{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--lab-live),#61c4e8);transition:width .3s ease}.diagnostic-insight.active{border-color:color-mix(in srgb,var(--lab-live) 28%,#fff);background:linear-gradient(135deg,#fff,var(--lab-soft))}.diagnostic-insight.active>span{background:var(--lab-live);color:#fff}
.diagnostic-options button{position:relative;overflow:hidden;transition:.22s ease}.diagnostic-options button::after{content:'AI 将分析这条推理';position:absolute;right:11px;bottom:8px;opacity:0;color:var(--lab-live);font-size:6px;font-weight:900;transform:translateY(4px);transition:.22s ease}.diagnostic-options button.selected::after{opacity:.78;transform:none}.diagnostic-options button.selected{border-color:var(--lab-live);background:linear-gradient(135deg,#fff,var(--lab-soft));box-shadow:0 10px 24px color-mix(in srgb,var(--lab-live) 13%,transparent);transform:translateY(-2px)}
.evidence-card{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.evidence-card:hover{transform:translateY(-3px);box-shadow:0 13px 28px rgba(39,31,74,.1)}.evidence-card>span{display:inline-block;padding:4px 6px;border-radius:6px;background:white;color:#78738d;font-size:6.5px;font-weight:900}.evidence-card>i{display:block;position:absolute;right:10px;top:10px;width:auto;height:auto;padding:4px 6px;border-radius:7px;background:#eeebf7;color:#777187;font-size:6px;font-style:normal}.evidence-card.selected{border-color:var(--lab-live);background:linear-gradient(145deg,#fff,var(--lab-soft));box-shadow:0 12px 28px color-mix(in srgb,var(--lab-live) 15%,transparent)}.evidence-card.selected>i{display:block;background:var(--lab-live);color:#fff}.evidence-result.active{border-color:color-mix(in srgb,var(--lab-live) 30%,#e7e3ef);background:var(--lab-soft)}
.project-copy>span{color:var(--module-color);font-size:8px;font-weight:900}.outcomes i{padding:6px 8px;border-radius:8px;background:#f6f5f9;color:#68657a;font-size:7.5px;font-style:normal}.project-meta{align-items:center}.project-meta b{padding:5px 7px;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-size:7.5px}.project-enter{margin-left:auto;padding:9px 12px;border-radius:10px;background:var(--module-color);color:#fff;font-size:8px;font-style:normal;font-weight:900}.project-visual{flex-direction:column}.project-visual>small{position:relative;z-index:3;bottom:auto;left:auto;right:auto;margin-top:8px}.project-visual>i{position:absolute;right:14px;top:13px;color:rgba(255,255,255,.55);font-size:9px;font-style:normal;font-weight:900}
.tool-tabs button{padding:6px 9px;border:0;border-radius:8px;background:#f1eef7;color:#706b7f;font-size:7px;font-weight:900}.tool-tabs button.active{background:var(--lab-live);color:#fff;box-shadow:0 6px 15px color-mix(in srgb,var(--lab-live) 22%,transparent)}.creator-input,.creator-preview{background:radial-gradient(circle at 88% 8%,var(--lab-soft),#faf9fc 44%)}.creator-input>label{display:block;margin-top:8px}.creator-input>label>span{display:block;margin-bottom:5px;color:#807a91;font-size:7px;font-weight:900}.creator-input textarea{width:100%;min-height:62px;padding:8px;border:1px solid var(--line);border-radius:10px;resize:none;background:#fff;font-size:7.5px;line-height:1.5}.structure-list button{grid-template-columns:24px 1fr auto}.structure-list button>i{width:24px;height:24px;display:grid;place-items:center;border-radius:7px;background:#efecfa;color:var(--lab-live);font-size:7px;font-style:normal;font-weight:900}.structure-list button>span b,.structure-list button>span small{display:block}.structure-list button>span b{font-size:8px}.structure-list button>span small{margin-top:2px;color:var(--muted);font-size:6.5px}.structure-list button>em{color:var(--lab-live);font-size:6px;font-style:normal;font-weight:900}.structure-list button:not(.selected){opacity:.5}.ai-loading{display:flex;min-height:190px;flex-direction:column}.ai-loading i{width:28px;height:28px;border:4px solid #e6e2ef;border-top-color:var(--lab-live);border-radius:50%;background:none;animation:spin .8s linear infinite}.ai-loading b{font-size:9px}.ai-loading p{margin:0;color:var(--muted);font-size:7px}.ai-draft{margin-top:8px}.draft-block{position:relative;padding:9px;border-left:3px solid var(--lab-live);animation:draft-in .38s both}.draft-block:nth-child(2){animation-delay:.08s}.draft-block:nth-child(3){animation-delay:.16s}.draft-block:nth-child(4){animation-delay:.24s}.draft-block b{display:block;color:var(--lab-live);font-size:7px}.draft-block p{margin:4px 0 0;font-size:7.5px;line-height:1.5}
.rubric-item>span{display:flex;justify-content:space-between;font-size:7px;font-weight:900}.rubric-item>span i{color:var(--lab-live);font-style:normal}.rubric-bar i{background:linear-gradient(90deg,var(--lab-live),#70c7db);animation:score-grow .85s cubic-bezier(.22,.8,.3,1) both;transform-origin:left}.overall-score{box-shadow:0 12px 30px color-mix(in srgb,var(--lab-live) 16%,transparent)}
@keyframes draft-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes score-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:760px){.learning-lens em{margin-left:0}.diagnostic-insight{grid-template-columns:1fr}.diagnostic-insight>span{grid-row:auto;width:max-content}.diagnostic-options button::after{display:none}}

/* Child-friendly interaction layer */
.project-status .energy-chip{display:inline-flex;align-items:center;gap:5px;margin-top:5px;padding:4px 7px;border-radius:999px;background:#fff5cb;color:#8a6711;font-size:6.5px;font-weight:900}.project-status .energy-chip i{min-width:16px;height:16px;display:grid;place-items:center;border-radius:50%;background:#f0c94e;color:#57420b;font-style:normal}
.mission-strip{display:flex;align-items:center;gap:9px;margin:-3px 0 14px;padding:9px 11px;border:1px solid color-mix(in srgb,var(--lab-live) 18%,#e9e5f1);border-radius:12px;background:linear-gradient(90deg,var(--lab-soft),#fff)}.mission-strip>span{padding:5px 7px;border-radius:7px;background:var(--lab-live);color:#fff;font-size:7px;font-weight:900}.mission-strip>b{font-size:8px}.mission-strip>i{margin-left:auto;color:#817b91;font-size:7px;font-style:normal;font-weight:800;transition:.25s}.mission-strip>i.earned{padding:5px 8px;border-radius:999px;background:#fff0a8;color:#75550a;transform:scale(1.08)}
.question-tools{display:flex;align-items:center;gap:6px}.question-tools>span{margin-right:auto;color:var(--lab-live);font-size:7px;font-weight:900;letter-spacing:1px}.question-tools button{height:28px;padding:0 9px;border:1px solid #ded9eb;border-radius:8px;background:#fff;color:#6d6781;font-size:7px;font-weight:900}.question-tools button:hover{border-color:var(--lab-live);color:var(--lab-live)}
.sentence-starters{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:-3px 0 10px;padding:10px;border:1px dashed color-mix(in srgb,var(--lab-live) 35%,#e0dce9);border-radius:12px;background:var(--lab-soft);animation:screenIn .22s}.sentence-starters[hidden]{display:none}.sentence-starters>span{color:var(--lab-live);font-size:7px;font-weight:900}.sentence-starters button{min-height:31px;padding:6px 9px;border:1px solid #fff;border-radius:9px;background:#fff;color:#5f5970;font-size:7px;box-shadow:0 4px 12px rgba(43,34,81,.06)}.sentence-starters button:hover{border-color:var(--lab-live);transform:translateY(-1px)}
.evidence-backpack{display:grid;grid-template-columns:1fr 150px 150px;gap:8px;align-items:center;margin:12px 0 8px;padding:10px;border:1px dashed color-mix(in srgb,var(--lab-live) 40%,#dcd7e8);border-radius:14px;background:linear-gradient(100deg,var(--lab-soft),#fff);transition:.2s}.evidence-backpack.drop-ready{border-style:solid;border-color:var(--lab-live);box-shadow:0 0 0 4px color-mix(in srgb,var(--lab-live) 10%,transparent);transform:scale(1.01)}.evidence-backpack>div span,.evidence-backpack>div b{display:block}.evidence-backpack>div span{color:var(--lab-live);font-size:8px;font-weight:900}.evidence-backpack>div b{margin-top:3px;color:#817b91;font-size:6.5px}.backpack-slot{display:grid;grid-template-columns:25px 1fr;align-items:center;gap:7px;min-height:43px;padding:6px;border:1px dashed #d9d4e4;border-radius:10px;background:rgba(255,255,255,.8);text-align:left}.backpack-slot i{width:25px;height:25px;display:grid;place-items:center;border-radius:8px;background:#eeebf3;color:#8d8798;font-size:7px;font-style:normal;font-weight:900}.backpack-slot span{overflow:hidden;color:#928d9e;font-size:7px;text-overflow:ellipsis;white-space:nowrap}.backpack-slot.filled{border-style:solid;border-color:var(--lab-live);background:#fff}.backpack-slot.filled i{background:var(--lab-live);color:#fff}.backpack-slot.filled span{color:#3d374e;font-weight:900}.evidence-card.dragging{opacity:.45;transform:scale(.97)}
.creation-choice{display:flex;align-items:center;gap:6px;margin:10px 0 4px}.creation-choice>span{margin-right:3px;color:#777184;font-size:7px;font-weight:900}.creation-choice button{height:30px;padding:0 10px;border:1px solid #dfdbe8;border-radius:999px;background:#fff;color:#777184;font-size:7px;font-weight:900}.creation-choice button.active{border-color:var(--lab-live);background:var(--lab-live);color:#fff;box-shadow:0 6px 14px color-mix(in srgb,var(--lab-live) 20%,transparent)}.draft-goal{display:flex;align-items:center;justify-content:space-between;margin:8px 0;padding:7px 9px;border-radius:9px;background:var(--lab-soft);color:#787184;font-size:7px}.draft-goal b{color:var(--lab-live)}
@media(max-width:760px){.mission-strip{position:sticky;z-index:4;top:0;flex-wrap:wrap}.mission-strip>i{margin-left:0}.question-tools{flex-wrap:wrap}.question-tools>span{width:100%}.question-tools button{min-height:40px;font-size:8px}.sentence-starters{display:grid}.sentence-starters button{min-height:44px;text-align:left;font-size:8px}.diagnostic-options button{min-height:92px;font-size:10px}.thinking-input{grid-template-columns:1fr}.thinking-input>span{grid-row:auto}.thinking-input textarea{min-height:90px;font-size:10px}.evidence-backpack{grid-template-columns:1fr 1fr}.evidence-backpack>div{grid-column:1/3}.backpack-slot{min-height:52px}.evidence-card{min-height:128px}.creation-choice{align-items:stretch;display:grid;grid-template-columns:repeat(3,1fr)}.creation-choice>span{grid-column:1/4}.creation-choice button{height:40px;padding:0 5px}.primary-action{min-height:48px;font-size:10px}}
