:root{
  --bg:#0b1220;
  --panel:#111a2e;
  --panel2:#16213a;
  --text:#e9eefb;
  --muted:#a7b4d3;
  --border:rgba(255,255,255,.08);
  --shadow:0 10px 30px rgba(0,0,0,.25);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:linear-gradient(180deg,#09101d,#0d1527 30%,#0b1220);color:var(--text);min-height:100svh}
body{overflow:hidden}
a{color:#cfe0ff;text-decoration:none}
a:hover{text-decoration:underline}
.header{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 16px;border-bottom:1px solid var(--border);
  background:rgba(7,12,22,.82);backdrop-filter:blur(10px);position:sticky;top:0;z-index:20
}
.brand{display:flex;gap:12px;align-items:center}
.logo{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  font-weight:800;font-size:22px;background:linear-gradient(135deg,#75a9ff,#8ce6ca);color:#08111f;
  box-shadow:var(--shadow)
}
.header h1{margin:0;font-size:1.08rem}
.header p{margin:2px 0 0;color:var(--muted);font-size:.9rem}
.wrap{width:min(100%,1800px);margin:0 auto;padding:10px 14px}
button{
  border:0;border-radius:12px;padding:10px 14px;font-weight:700;cursor:pointer;
  background:linear-gradient(135deg,#79abff,#86dfc0);color:#07111d
}
button.secondary{background:#1a2743;color:#dce7ff;border:1px solid var(--border)}
button.ghost{background:transparent;color:#dce7ff;border:1px solid var(--border)}
.small{color:var(--muted);font-size:.92rem}
.code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:#0b1323;border:1px solid var(--border);padding:3px 6px;border-radius:8px
}
.home-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:20px}
.panel{
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)
}
.controls{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
input{
  background:#0b1323;border:1px solid var(--border);color:var(--text);
  padding:12px 14px;border-radius:12px;min-width:240px;outline:none
}
ul{margin:10px 0 0;padding-left:18px;color:#d7e2fb}
iframe{width:100%;border:0;background:#0a1220;border-radius:0 0 var(--radius) var(--radius)}
.classroom-shell{
  height:calc(100svh - 72px);
  display:grid;
  grid-template-rows:minmax(0,1fr) 150px;
  gap:10px;
}
.card{
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
  min-height:0;
}
.card-head{
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 12px;border-bottom:1px solid var(--border)
}
.stage-frame{height:calc(100% - 56px);display:block}
.thumb-frame{height:94px;display:block}
.meta-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
@media (max-width: 900px){
  body{overflow:auto}
  .classroom-shell{height:auto;grid-template-rows:auto auto}
  .stage-frame{height:64svh}
  .thumb-frame{height:120px}
  .home-grid{grid-template-columns:1fr}
}