@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500;700;800;900&display=swap');
:root{--ink:#172033;--muted:#667085;--purple:#6746e8;--purple2:#5130cb;--line:#e8e2da;--paper:#fffaf0;--green:#13885a;--orange:#ff9d3d;--shadow:0 12px 34px rgba(45,31,75,.1)}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 95% 0,#e8e0ff,transparent 25rem),var(--paper);color:var(--ink);font-family:Nunito,system-ui,sans-serif}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.42;box-shadow:none!important}.hidden{display:none!important}
header{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 max(.8rem,calc((100vw - 760px)/2));background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}header a{text-decoration:none;font-size:2rem;color:var(--purple)}header span{font-size:.68rem;color:var(--green);font-weight:900}main{width:min(760px,100%);margin:auto;padding:1rem .75rem 4rem}
.hero>span,.card-head small,.work-nav small,.viewer-head span{font-size:.68rem;font-weight:900;letter-spacing:.1em;color:var(--purple)}.hero h1,.viewer-head h1{font-size:clamp(2.25rem,9vw,4rem);line-height:.95;letter-spacing:-.055em;margin:.3rem 0}.hero p,.viewer-head p{color:var(--muted);margin:.7rem 0 1.2rem}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}.project{min-height:116px;border:1px solid var(--line);border-radius:20px;background:#fff;padding:.8rem;text-align:left;display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:.65rem;box-shadow:var(--shadow);color:var(--ink)}.project.featured{grid-column:1/-1;background:linear-gradient(135deg,#6947e9,#4d2dc6);color:#fff;border:0}.project i{font-style:normal;font-size:2rem}.project span{display:grid;gap:.12rem}.project small{font-size:.58rem;letter-spacing:.08em;font-weight:900;color:var(--orange)}.project b{font-size:1.08rem}.project em{font-size:.73rem;color:var(--muted);font-style:normal}.project.featured em{color:#e8e0ff}.project strong{font-size:1.6rem}.privacy{font-size:.75rem;color:var(--muted);background:#fff;padding:.8rem;border-radius:14px;border:1px solid var(--line)}
.workspace{display:grid;gap:.75rem}.work-nav{display:grid;grid-template-columns:42px 1fr 42px;align-items:center;gap:.6rem}.work-nav button,.viewer-back{width:42px;height:42px;border:0;border-radius:50%;background:#fff;color:var(--purple);font-size:1.5rem;box-shadow:var(--shadow);display:grid;place-items:center;text-decoration:none}.work-nav div{display:grid}.lesson{background:#1c1830;color:#fff;border-radius:18px;padding:.9rem}.lesson p{font-size:.78rem;color:#d9d2ef;margin:.25rem 0 .7rem}.ai-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:.25rem}.ai-flow span{text-align:center;background:#322b50;border-radius:9px;padding:.48rem .2rem;font-size:.56rem;font-weight:900}.ai-flow i{font-style:normal;color:#a995ff}
.steps{list-style:none;padding:0;margin:.1rem 0;display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem}.steps li{border:1px solid var(--line);border-radius:12px;background:#fff;padding:.45rem;display:flex;align-items:center;gap:.35rem;color:var(--muted);font-size:.68rem;font-weight:800}.steps li b{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;background:#eeeaf5}.steps li.done{color:var(--green);border-color:#a9dfc8}.steps li.done b{background:#dcf8e9}.mode-panel{display:grid;gap:.75rem}.stage{position:relative;background:#1b1728;border-radius:22px;padding:.55rem;overflow:hidden;box-shadow:var(--shadow)}.stage video,.stage>img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:16px;background:#29233a}.stage video{transform:scaleX(-1)}.stage canvas#overlay{position:absolute;inset:.55rem;width:calc(100% - 1.1rem);height:calc(100% - 1.1rem - 48px);pointer-events:none}.empty{position:absolute;inset:.55rem .55rem 48px;display:grid;place-content:center;text-align:center;gap:.35rem;background:linear-gradient(145deg,#352c56,#16131f);border-radius:16px;color:#fff}.empty b{font-size:3rem}.result{min-height:39px;margin-top:.45rem;background:#eee9ff;color:#5a38d5;border-radius:12px;display:grid;place-content:center;text-align:center;padding:.48rem;font-weight:900;font-size:.86rem}.result.live{background:#dcf9e9;color:#087747}.round{position:absolute;right:1rem;top:1rem;border:0;border-radius:50%;width:43px;height:43px;background:#fff;color:var(--purple);font-size:1.4rem}.source-row{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}.source,.secondary,.add,.primary,.published button,.published a{border:0;border-radius:13px;padding:.8rem;font-weight:900}.source,.secondary,.add{background:#fff;color:var(--ink);border:1px solid var(--line)}.primary{background:var(--purple);color:#fff;box-shadow:0 4px 0 var(--purple2)}.wide{width:100%}
.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:.8rem;box-shadow:var(--shadow)}.card-head{display:flex;align-items:center;justify-content:space-between}.card-head h2{margin:.05rem 0;font-size:1.2rem}.card-head>span{font-size:.68rem;color:var(--muted)}.classes{display:grid;gap:.55rem;margin:.7rem 0}.class-row{display:grid;grid-template-columns:38px 1fr auto;gap:.5rem;align-items:center;border:1px solid var(--line);border-radius:14px;padding:.5rem}.class-row i{width:38px;height:38px;border-radius:11px;background:var(--class);display:grid;place-items:center;font-style:normal;font-weight:900}.class-row input{min-width:0;border:0;background:transparent;font-weight:900}.class-row button{border:0;border-radius:10px;background:#eee9ff;color:var(--purple);padding:.6rem;font-weight:900}.class-row button.ready{background:#dcf8e9;color:var(--green)}.tip,.message,.model-note,.audio-game p{font-size:.76rem;color:var(--muted)}.add{width:100%;background:#f4f1f8}.launch-card>label{font-size:.72rem;font-weight:900}.launch-card>input{width:100%;border:2px solid var(--line);border-radius:12px;padding:.72rem;margin:.25rem 0 .6rem}.ready-note{background:#fff4df;color:#9b5c06;border-radius:11px;padding:.6rem;font-size:.75rem;font-weight:900;margin-bottom:.55rem}.ready-note.ready{background:#dcf8e9;color:var(--green)}.test-actions{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.55rem}.published{display:grid;grid-template-columns:1fr auto auto;gap:.35rem}.published input{min-width:0;border:1px solid var(--line);border-radius:10px;padding:.6rem}.published button,.published a{background:#eee9ff;color:var(--purple);text-decoration:none}
.explorer-stage{min-height:300px}.output-list{display:grid;gap:.45rem;margin-top:.6rem}.output-item{display:grid;grid-template-columns:1fr auto;gap:.5rem;background:#f6f3fa;border-radius:11px;padding:.6rem;font-size:.78rem}.output-item b:last-child{color:var(--purple)}.audio-game{background:#fff;border:1px solid var(--line);border-radius:20px;padding:.8rem;box-shadow:var(--shadow)}.rover-board{position:relative;aspect-ratio:1.8;background:linear-gradient(#dff7ff 49%,#bde99b 50%);border-radius:16px;overflow:hidden;background-size:20% 33.33%;border:4px solid #fff;box-shadow:inset 0 0 0 2px #a9cf91}.rover-board:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 19.5%,#ffffff70 20%,transparent 20.5%,transparent 39.5%,#ffffff70 40%,transparent 40.5%,transparent 59.5%,#ffffff70 60%,transparent 60.5%,transparent 79.5%,#ffffff70 80%,transparent 80.5%),linear-gradient(transparent 32.5%,#ffffff70 33%,transparent 33.5%,transparent 65.5%,#ffffff70 66%,transparent 66.5%)}.rover-board i,.rover-board b{position:absolute;font-style:normal;font-size:2rem;transition:left .28s,top .28s}.rover-board i{left:2%;top:66%}.rover-board b{right:3%;top:3%}.command-strip{display:flex;gap:.3rem;overflow:auto;padding:.55rem 0}.command-strip span{white-space:nowrap;background:#eee9ff;color:var(--purple);padding:.35rem .5rem;border-radius:8px;font-size:.6rem;font-weight:900}.viewer{display:grid;gap:.8rem;padding-top:1vh}.viewer-head{text-align:center}.build-yours{display:block;text-align:center;padding:.9rem;border-radius:14px;background:var(--purple);color:#fff;text-decoration:none;font-weight:900}
.enrol-row{display:grid;grid-template-columns:1fr auto;gap:.5rem;margin-top:.7rem}.enrol-row input{min-width:0;border:2px solid var(--line);border-radius:12px;padding:.7rem}.face-roster{margin-top:.55rem;display:flex;gap:.35rem;flex-wrap:wrap;font-size:.7rem;color:var(--muted)}.face-roster span{background:#eee9ff;color:var(--purple);border-radius:999px;padding:.35rem .55rem;font-weight:900}
@media(max-width:520px){main{padding-top:.75rem}.project-grid{grid-template-columns:1fr}.project.featured{grid-column:auto}.project{min-height:88px}.hero h1{font-size:2.55rem}.steps li{display:grid;text-align:center;justify-items:center}.steps li span{font-size:.58rem}.card{padding:.7rem}.test-actions{grid-template-columns:1fr}.published{grid-template-columns:1fr 1fr}.published input{grid-column:1/-1}}