/* Screen layouts (design/03_screens.md). */
.page-head{padding:22px 0 14px;display:flex;flex-direction:column;gap:6px}.page-head.row{flex-direction:row;align-items:flex-end}
.page-head .title{display:flex;align-items:center;gap:14px}
.crumb{padding-top:22px;font-size:14px;color:var(--bp-ink-3);display:flex;align-items:center;flex-wrap:wrap;gap:4px}.crumb a{color:var(--bp-tint);text-decoration:none;display:inline-flex;align-items:center;gap:4px}.crumb .ic{width:14px;height:14px}
main>.page-head:first-child{padding-top:26px}main>.login-wrap{padding-top:40px}
main{min-height:60vh}
@keyframes bp-fade{from{transform:translateY(8px);opacity:0}}
main>*{animation:bp-fade var(--bp-t-enter) var(--bp-ease) both}

/* login */
.login-wrap{display:grid;place-items:start center;position:relative}
.login{width:min(440px,100%)}.login .badge3d{margin:0 auto 6px}.login h1{text-align:center}.login .sub{text-align:center}
.login-art{display:none}
@media(min-width:821px){.login-art{display:block;position:absolute;inset:0;pointer-events:none}.login-art .float{position:absolute}}

/* home */
.home-hero{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:24px;align-items:start;padding:34px 0 8px}
.home-hero h1{font-size:clamp(34px,4.6vw,52px);line-height:1.06;font-weight:700;letter-spacing:-.035em;margin:6px 0 8px}
.home-hero .sub{font-size:18px;color:var(--bp-ink-2);margin-bottom:20px}
.cont{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:18px 20px;border-radius:var(--bp-r-card);max-width:560px}
.cont h3{margin:2px 0 4px}.cont .line{font-size:15px;color:var(--bp-ink-2)}
.cont .btn .ic{transition:transform var(--bp-t-hover) var(--bp-ease)}@media(hover:hover){.cont .btn:hover .ic{transform:translateX(3px)}}
.hero-art{position:relative;width:440px;height:320px;pointer-events:none}
.float{position:absolute;display:grid;place-items:center;animation:bp-float var(--dur,9s) ease-in-out infinite;animation-delay:var(--del,0s);will-change:transform;color:#fff}
@keyframes bp-float{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(0,var(--fy),0) rotate(var(--fr))}}
.hero-art.paused .float,.login-art.paused .float{animation-play-state:paused}
.float.o1{left:40px;top:30px;width:120px;height:120px;border-radius:50%;font:64px var(--math);--fy:-10px;--fr:-4deg;--dur:9s}
.float.o2{left:250px;top:0;width:96px;height:96px;border-radius:28px;font:60px var(--math);--fy:-12px;--fr:5deg;--dur:11s;--del:-3s}
.float.o3{left:260px;top:150px;width:140px;height:120px;--fy:-8px;--fr:-3deg;--dur:10s;--del:-6s}
.float.o4{left:60px;top:205px;width:72px;height:72px;border-radius:50%;font:italic 40px var(--math);--fy:-14px;--fr:6deg;--dur:7s;--del:-2s}
.float.o5{left:165px;top:120px;width:84px;height:84px;border-radius:50%;color:var(--bp-ink);font:26px/1 var(--math);--fy:-9px;--fr:-5deg;--dur:8s;--del:-5s}
.float.badge3d{box-shadow:inset 0 -6px 14px rgba(0,0,0,.2),inset 0 2px 0 rgba(255,255,255,.65),0 18px 36px -12px var(--h2)}
.float .fr2{display:flex;flex-direction:column;align-items:center;line-height:1.05}.float .fr2 i{display:block;width:26px;border-top:2px solid currentColor;margin:2px 0}
.home-body{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;margin-top:16px;align-items:start}
.path{list-style:none;margin:8px 0 0;padding:0}.path li{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--bp-line)}.path li:first-child{border-top:0}
@media(max-width:1023px){.home-hero{grid-template-columns:1fr;position:relative}.hero-art{position:absolute;right:0;top:8px;transform:scale(.7);transform-origin:top right}.hero-art .o3,.hero-art .o5{display:none}.home-hero h1,.home-hero .sub{max-width:calc(100% - 200px)}.home-hero>div{position:relative;z-index:1}.home-body{grid-template-columns:1fr}}
@media(max-width:560px){.hero-art{position:relative;width:auto;height:72px;transform:none;display:flex;gap:12px;justify-content:flex-end;order:-1}.hero-art .float{position:static}.hero-art .o1{width:56px;height:56px;font-size:30px}.hero-art .o2,.hero-art .o4,.hero-art .o3{display:none}.hero-art .o5{display:grid;width:56px;height:56px;font-size:16px}.home-hero h1,.home-hero .sub{max-width:none}.cont{grid-template-columns:auto 1fr}.cont .btn{grid-column:1/-1}}

/* section */
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sec-meta{display:flex;gap:16px;flex-wrap:wrap;color:var(--bp-ink-2);font-size:14px}.sec-meta span{display:inline-flex;align-items:center;gap:6px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.notes{margin:0;padding-left:20px;line-height:1.7;font-size:17px}
.vlist{display:flex;flex-direction:column}.vitem{display:grid;grid-template-columns:32px 1fr auto 16px;gap:12px;align-items:center;min-height:52px;padding:8px 0;border-top:1px solid var(--bp-line);color:inherit;text-decoration:none}.vitem:first-child{border-top:0}
.ex{border-top:1px solid var(--bp-line);padding:18px 0}.ex:first-of-type{border-top:0}.ex .q{margin:8px 0;font-size:17px}
.lines{background:var(--bp-paper-2);border-radius:var(--bp-r-inner);padding:6px 16px;margin:8px 0}.ln{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:center;padding:6px 0}.ln .n{font-size:14px;font-style:italic;color:var(--bp-tint-ink)}.ln.hid{display:none}
@media(max-width:900px){.split{grid-template-columns:minmax(0,1fr)}}   /* release smoke 22/10: 1fr kept the min-content width (Assign scrolled a phone sideways) */
@media(max-width:760px){.ln{grid-template-columns:1fr;gap:2px}}

/* box page */
.boxgrid{display:grid;grid-template-columns:360px minmax(0,1fr);gap:16px;align-items:start}
.boxgrid .side{position:sticky;top:92px}
@media(max-width:1023px){.boxgrid{grid-template-columns:1fr}.boxgrid .side{position:static}.boxgrid .video,.boxgrid .novideo{max-width:560px}}
@media(max-width:560px){.q-card{padding:16px}.card{padding:16px}}
.kp-toggle{margin:4px 0 8px}

/* test */
.infobar{position:sticky;top:calc(env(safe-area-inset-top,0px) + 80px);z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:4px 8px 4px 20px;border-radius:999px;margin:6px 0 10px}
.score-big{font:700 40px/1 var(--lg-font-display);letter-spacing:-.02em}

/* teacher */
.stat-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.stat-strip div{padding:6px 4px}.stat-strip b{display:block;font:700 26px/1.1 var(--lg-font-display)}
.pe{list-style:none;margin:0;padding:0}.pe li{display:grid;grid-template-columns:minmax(0,1fr) 150px auto;gap:10px;align-items:center;padding:12px 0;border-top:1px solid var(--bp-line)}.pe li:first-child{border-top:0}
.heat{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.heat .cell{position:relative;min-height:56px;border-radius:12px;display:grid;place-items:center;font:700 15px/1.1 var(--lg-font);text-align:center;padding:6px}.heat .cell small{display:block;font:500 12px var(--lg-font)}.heat .cell .ic{position:absolute;right:4px;top:4px;width:14px;height:14px}
.h0{background:var(--bp-neu-soft);color:var(--bp-neu)}.h1{background:var(--bp-neg-soft);color:var(--bp-neg)}.h2{background:var(--bp-warn-soft);color:var(--bp-warn)}.h3{background:var(--bp-pos-soft);color:var(--bp-pos)}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--bp-ink-2)}.legend span{display:inline-flex;align-items:center;gap:6px}
@media(max-width:900px){.stat-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.pe li{grid-template-columns:1fr}.page-head.row{flex-direction:column;align-items:flex-start}}
@media(max-width:560px){.tbl table,.tbl thead,.tbl tbody,.tbl tr,.tbl td{display:block}.tbl thead{display:none}.tbl tr{padding:14px 4px;border-top:1px solid var(--bp-line)}.tbl td{border:0;padding:4px 8px}.tbl td::before{content:attr(data-label);display:block;font-size:13px;color:var(--bp-ink-3)}}
.hide-s{}@media(max-width:700px){.hide-s{display:none}}
@media(min-width:701px){.only-s{display:none}}