/* AI Quest — base styles (vanilla, no framework) — "Sunrise Dojo" theme (P2-C) */ :root{ /* Sunrise Dojo — light-first, one color one job */ --bg:#F7F8FC; --panel:#FFFFFF; --panel2:#EDEBFF; --ink:#2A2440; --muted:#5B5A72; --brand:#7C5CFF; --brand-shade:#5A3FD6; --brand2:#00D4B8; --line:#E3E6F2; --good:#2ECC71; --warn:#FFC800; --error:#FF5D5D; --streak:#FF9F1C; --radius:16px; --shadow:0 4px 14px rgba(42,36,64,.08); --font-display:"Baloo 2",system-ui,sans-serif; --font-body:"Nunito",system-ui,sans-serif; --font-mono:"JetBrains Mono",monospace; --belt: var(--brand); --belt-shade: var(--brand-shade); --belt-tint: var(--panel2); } /* P2-F: "Neon Dojo" night mode — grades 7-12 opt-in toggle (kid-home button), same token names so every component that already uses var(--x) just works. Applied via [data-theme="night"] on (app.js setTheme(), localStorage-persisted). */ [data-theme="night"]{ --bg:#0B0E1A; --panel:#151A2E; --panel2:#1E2540; --ink:#F0F2FF; --muted:#9AA3C7; --brand:#B98CFF; --brand-shade:#8C5CFF; --brand2:#00F5D4; --line:#2A3158; --good:#39D98A; --warn:#FFE347; --error:#FF5D7A; --streak:#FF9F1C; --shadow:0 4px 18px rgba(0,0,0,.45); } [data-theme="night"] .msg.err{background:#3A1622;color:#FF9DB2;border-color:#5A2233} [data-theme="night"] .msg.ok{background:#0F3324;color:#5CE8A6;border-color:#1C5A3E} [data-theme="night"] .msg.info{background:var(--panel2);color:var(--brand2);border-color:var(--line)} [data-theme="night"] .msg.warn{background:#3A2E0A;color:#FFE347;border-color:#5A4712} [data-theme="night"] .opt.right{background:#0F3324;color:#5CE8A6;border-color:var(--good)} [data-theme="night"] .opt.wrong{background:#3A1622;color:#FF9DB2;border-color:var(--error)} [data-theme="night"] .chatmsg.mine{background:#241D42} [data-theme="night"] .beltchip{color:#0B0E1A} [data-theme="night"] .celebrate-overlay{background:rgba(0,0,0,.65)} *{box-sizing:border-box} html,body{margin:0;padding:0} html{background:var(--bg)} body{ font-family:var(--font-body); background:var(--bg); color:var(--ink); min-height:100vh; display:flex; flex-direction:column; } h1,h2,h3,h4,.brand,.btn{font-family:var(--font-display)} a{color:var(--brand-shade);text-decoration:none} .topbar{display:flex;align-items:center;justify-content:space-between; padding:14px 22px;border-bottom:1px solid var(--line);position:sticky;top:0; background:rgba(255,255,255,.88);backdrop-filter:blur(8px);z-index:5} .brand{font-weight:800;font-size:22px;letter-spacing:.3px; color:var(--brand);cursor:pointer;border:0;padding:0;background:none} .nav{display:flex;gap:10px;align-items:center} .nav .who{color:var(--muted);font-size:13px;margin-right:6px} .app{flex:1;max-width:1000px;width:100%;margin:0 auto;padding:26px 20px} .loading{color:var(--muted);text-align:center;padding:60px} .foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap; padding:12px 22px;border-top:1px solid var(--line);color:var(--muted);font-size:12px} .foot-tag{opacity:.8;font-style:italic} /* buttons — Duolingo-style 3D press: solid fill + darker bottom border that collapses on press */ .btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px; border:0;cursor:pointer;font-weight:700;font-size:15px; padding:12px 20px;border-radius:14px;color:#fff;background:var(--brand); box-shadow:0 4px 0 var(--brand-shade);transform:translateY(0); transition:transform .08s,box-shadow .08s} .btn:hover{filter:brightness(1.04)} .btn:active{transform:translateY(4px);box-shadow:none} .btn.alt{background:var(--panel2);color:var(--ink);box-shadow:0 4px 0 var(--line)} .btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink);box-shadow:none} .btn.ghost:active{transform:none} .btn.sm{padding:8px 14px;font-size:13px;border-radius:11px;min-height:44px} .btn:disabled{opacity:.5;cursor:not-allowed;transform:none} /* cards & layout */ .grid{display:grid;gap:16px} .grid.cols{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius); padding:20px;box-shadow:var(--shadow)} button.card{font:inherit;color:inherit;display:block;width:100%;cursor:pointer} button.card:disabled{cursor:not-allowed} .card h3{margin:.1em 0 .4em} :focus-visible{outline:3px solid var(--brand2);outline-offset:2px} .muted{color:var(--muted)} .hero{text-align:center;padding:40px 10px 10px} .hero h1{font-size:clamp(24px,6vw,34px);margin:.2em 0} .hero p{color:var(--muted);max-width:620px;margin:8px auto;font-size:clamp(14px,3.5vw,16px)} /* role picker */ .roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:22px} .role{cursor:pointer;text-align:center;transition:transform .1s,border-color .1s} .role:hover{transform:translateY(-3px);border-color:var(--brand)} .role .emoji{font-size:34px} /* forms */ .form{max-width:420px;margin:0 auto} .form label{display:block;font-size:13px;color:var(--muted);margin:12px 0 4px} .form input,.form select,.form textarea{width:100%;min-height:44px;padding:11px 12px;box-sizing:border-box;border-radius:9px; border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:16px} .form textarea{min-height:auto} .form .row{display:flex;gap:10px}.form .row>*{flex:1;min-width:0} .msg{margin:12px 0;padding:10px 12px;border-radius:9px;font-size:13px} .msg.err{background:#FFEAEA;color:#B23A3A;border:1px solid #FFC9C9} .msg.ok{background:#E7F9EF;color:#1C8A4B;border:1px solid #BEEFD3} .msg.info{background:var(--panel2);color:var(--brand-shade);border:1px solid #D8D3FF} /* belt chips */ .belts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} .beltchip{padding:6px 10px;border-radius:20px;font-size:12px;font-weight:700;color:#222} .beltchip.big{font-size:18px;padding:12px 22px} .msg.warn{background:#FFF6DA;color:#8A6B00;border:1px solid #FFE79E} /* placement quiz */ .qtext{white-space:pre-wrap;font-family:inherit;line-height:1.45} .qbar{height:8px;background:var(--panel2);border-radius:999px;margin:8px 0 14px;overflow:hidden} .qbar-fill{height:100%;background:var(--belt,var(--brand));transition:width .3s;border-radius:999px} .opts{display:flex;flex-direction:column;gap:10px;margin-top:14px} .opt{text-align:left;min-height:44px;padding:13px 16px;box-sizing:border-box;border-radius:14px;font-size:14px;cursor:pointer; background:var(--panel);border:2px solid var(--line);color:var(--ink);white-space:pre-wrap; box-shadow:0 3px 0 var(--line);transition:transform .06s,box-shadow .06s} .opt:hover{border-color:var(--brand)} .opt:active{transform:translateY(3px);box-shadow:none} .opt.selected{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand) inset;font-weight:700} .opt:disabled{cursor:default;opacity:.95} .opt.reveal{border-color:var(--good);box-shadow:0 0 0 1px var(--good) inset} .opt.right{background:#E7F9EF;border-color:var(--good);color:#1C8A4B;font-weight:700} .opt.wrong{background:#FFEAEA;border-color:var(--error);color:#B23A3A} /* kid banner + knowledge map */ .kidbanner{display:flex;gap:16px;align-items:center;background:var(--panel); border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px;box-shadow:var(--shadow)} .kb-emoji{font-size:44px} .kmrow{display:flex;gap:12px;align-items:center;margin-top:10px} .kmbar{flex:1;height:12px;background:var(--panel2);border-radius:6px;overflow:hidden} .kmbar-fill{height:100%;background:var(--belt,var(--brand));transition:width .4s;border-radius:6px} /* character picker chips */ .charlist{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;min-height:10px} .charchip{min-height:44px;display:inline-flex;align-items:center;padding:7px 14px;box-sizing:border-box;border-radius:20px;font-size:13px;cursor:pointer; background:var(--panel2);border:1px solid var(--line)} .charchip:hover{border-color:var(--brand)} .charchip.on{border-color:transparent;background:var(--brand);color:#fff} .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px} .chip{min-height:44px;display:inline-flex;align-items:center;padding:6px 14px;box-sizing:border-box;border-radius:18px;font-size:13px;cursor:pointer; background:var(--panel2);border:1px solid var(--line)} .chip.on{border-color:var(--brand2);background:var(--panel2)} /* tables */ .tbl{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px} .tbl th{text-align:left;color:var(--muted);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line)} .tbl td{padding:8px 10px;border-bottom:1px solid var(--line)} .ok-dot{color:var(--good);font-size:13px} .lockedcard{opacity:.55} .qrow{padding:7px 0;border-bottom:1px solid var(--line);font-size:13px} .qtext-sm{white-space:pre-wrap} .rosterbox{overflow-x:auto} /* group chat */ .chatlog{max-height:380px;overflow-y:auto;display:flex;flex-direction:column;gap:8px; padding:10px;background:var(--bg);border:1px solid var(--line);border-radius:10px} .chatmsg{background:var(--panel2);border:1px solid var(--line);border-radius:10px; padding:8px 12px;font-size:14px;max-width:85%;align-self:flex-start} .chatmsg.mine{align-self:flex-end;background:#EDEBFF;border-color:var(--brand)} .chatmsg b{color:var(--brand-shade);margin-right:6px;font-size:12px} /* ---- lesson engine ---- */ .stepper{display:flex;gap:8px;margin:6px 0 2px;flex-wrap:wrap} .stepdot{font-size:13px;padding:4px 10px;border-radius:999px;background:var(--panel2); color:var(--muted);border:1px solid var(--line)} .stepdot.on{background:var(--belt,var(--brand));color:#fff;border-color:transparent} .stepdot.did{color:var(--good);border-color:var(--good)} .sbstage{margin-top:6px} .sbbeat{text-align:center;padding:18px;background:var(--panel2);border-radius:var(--radius);border:1px solid var(--line)} .sbemoji{font-size:64px;line-height:1} .sbbeat h3{margin:10px 0 4px} .sbsub{color:var(--brand-shade);margin:0 0 10px;font-style:italic} .sbsay{color:var(--ink);max-width:620px;margin:0 auto;line-height:1.5} .sbnav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:16px} .card.read p{line-height:1.65;font-size:16px} .keyterm{background:var(--panel2);border:1px solid var(--line);border-radius:10px; padding:8px 12px;margin-bottom:12px;font-weight:700;color:var(--brand-shade)} .card.donecard{border-color:var(--good)} .card.fb{background:var(--panel2);border:1px dashed var(--line)} .fb-stars{font-size:26px;letter-spacing:4px;cursor:pointer;color:var(--warn)} .fb-stars .star{cursor:pointer} .fb-comp{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0} .chip.on{background:var(--brand);color:#fff;border-color:transparent} .fb-sug{width:100%;background:var(--panel);color:var(--ink);border:1px solid var(--line); border-radius:10px;padding:8px;margin:6px 0;font-family:inherit} /* ---- P2-C quick wins: icon sprite, mobile-safe tap targets, mascot loader ---- */ .icon{width:1.2em;height:1.2em;fill:currentColor;vertical-align:-.15em} .byte-icon{vertical-align:middle} .loading .byte-icon{animation:byte-bounce 1.1s ease-in-out infinite} @keyframes byte-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} .kidbanner h2 .byte-icon{vertical-align:-8px;margin-left:4px} /* ---- P2-C: persistent stat strip (streak / XP / belt) ---- */ .statstrip{display:flex;gap:14px;align-items:center;font-weight:800;font-size:14px} .statchip{display:flex;gap:5px;align-items:center;padding:5px 10px;border-radius:999px;background:var(--panel2)} .statchip.streak{color:var(--streak)} .statchip.xp{color:var(--warn)} .statchip.belt{color:#fff;background:var(--belt,var(--brand))} /* ---- P2-C: belt quest-map path ---- */ .questmap{display:flex;flex-direction:column;align-items:center;gap:0;padding:10px 0;position:relative} .qnode-wrap{display:flex;align-items:center;gap:14px;position:relative;padding:10px 0} .qnode-wrap:nth-child(even){flex-direction:row-reverse} .qnode{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center; font-size:26px;background:var(--panel2);border:3px solid var(--line);cursor:pointer;flex:none; box-shadow:0 3px 0 var(--line);transition:transform .1s} .qnode:hover{transform:translateY(-2px)} .qnode.mastered{background:var(--belt,var(--brand));border-color:var(--belt-shade,var(--brand-shade)); box-shadow:0 3px 0 var(--belt-shade,var(--brand-shade));color:#fff} .qnode.current{border-color:var(--belt,var(--brand));box-shadow:0 0 0 4px var(--belt-tint,var(--panel2))} .qnode.locked{opacity:.45;cursor:not-allowed} .qnode-label{max-width:220px} .qnode-label h4{margin:0;font-size:14px} .qnode-label .meta{font-size:12px;color:var(--muted)} .qtrack{position:absolute;left:50%;top:0;bottom:0;width:4px;background:var(--line); transform:translateX(-32px);z-index:-1} .byte-here{position:absolute;font-size:30px;transform:translate(38px,-6px)} /* ---- P2-C: celebration overlay ---- */ .celebrate-overlay{position:fixed;inset:0;background:rgba(42,36,64,.55);display:flex; align-items:center;justify-content:center;z-index:50} .celebrate-card{background:var(--panel);border-radius:24px;padding:36px 44px;text-align:center; box-shadow:0 20px 60px rgba(42,36,64,.35);max-width:360px} .celebrate-emoji{font-size:64px} .celebrate-xp{font-size:32px;font-weight:800;color:var(--warn)} #confetti-canvas{position:fixed;inset:0;pointer-events:none;z-index:51} /* ================================================================== P2-E: mobile pass — 640px (tablet/small-laptop) and 380px (phone) breakpoints. Type sizing already uses clamp() above; this section is layout: single-column grids, no zigzag quest-map, tighter chrome. ================================================================== */ @media (max-width:640px){ .topbar{padding:10px 14px} .brand{font-size:clamp(18px,5vw,22px)} .app{padding:18px 14px} .hero{padding:26px 6px 6px} .roles{grid-template-columns:1fr} .grid.cols{grid-template-columns:1fr} .form .row{flex-direction:column;gap:0} .card{padding:16px} .kidbanner{flex-wrap:wrap} /* quest-map: drop the alternating left/right zigzag, one straight column reads better narrow */ .qnode-wrap,.qnode-wrap:nth-child(even){flex-direction:row} .qtrack{transform:translateX(calc(-1 * (32px + 0px)))} .celebrate-card{padding:26px 22px;max-width:90vw} .stepper{gap:6px} } @media (max-width:380px){ .celebrate-card{padding:20px 16px} .celebrate-emoji{font-size:52px} .qnode{width:52px;height:52px;font-size:20px} .qnode-label{max-width:150px} .hero p{margin:8px auto;max-width:94vw} .statstrip{gap:8px;font-size:12px} .statchip{padding:4px 8px} } /* ===== Kid home — tiled dashboard (test099_V1 redesign) ===== */ .kh-layout{display:flex;gap:16px;margin-top:16px;align-items:flex-start} .kh-rail{flex:0 0 188px;background:#efeafc;border-radius:14px;padding:12px 8px;position:sticky;top:16px} .kh-rail-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted,#6b7280);padding:2px 10px 8px} .kh-belt{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:9px;border-left:4px solid transparent;font-size:14px;color:var(--ink,#1f2333)} .kh-belt.on{background:#fff;font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.08)} .kh-belt.future{opacity:.45} .kh-belt-dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto;border:1px solid rgba(0,0,0,.15)} .kh-belt-name{flex:1} .kh-belt-tick{color:var(--good,#2e7d32);font-weight:800} .kh-belt-here{color:var(--brand,#6c4cf1);font-size:20px;line-height:1} .kh-main{flex:1;min-width:0} .kh-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:var(--panel,#fff);border-radius:14px;padding:16px 18px;box-shadow:0 1px 4px rgba(0,0,0,.06)} .kh-hi{display:flex;align-items:center;gap:12px} .kh-emoji{font-size:38px} .kh-hi h2{margin:0;font-size:22px} .kh-beltline{margin-top:4px} .kh-actions{display:flex;gap:8px;flex-wrap:wrap} .kh-progress{display:flex;align-items:center;gap:10px;margin:12px 2px} .kh-progress-bar{flex:1;height:10px;background:#e6e2f2;border-radius:6px;overflow:hidden} .kh-progress-fill{height:100%;background:var(--brand,#6c4cf1);border-radius:6px;transition:width .4s} .kh-progress-txt{font-size:12px;color:var(--muted,#6b7280);white-space:nowrap} .kh-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:8px} .kh-tile{display:flex;align-items:center;gap:11px;text-align:left;background:var(--panel,#fff);border:1px solid var(--line,#e7e4f0);border-radius:12px;padding:13px 14px;cursor:pointer;font:inherit;color:inherit;transition:transform .08s,box-shadow .12s} .kh-tile:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.1)} .kh-tile-ico{font-size:22px;width:26px;text-align:center;flex:0 0 auto} .kh-tile-body{display:flex;flex-direction:column;min-width:0} .kh-tile-title{font-weight:700;font-size:14px;line-height:1.25} .kh-tile-sub{font-size:12px;color:var(--muted,#6b7280);margin-top:2px} .kh-tile.done{border-color:#bfe3c6;background:#f3faf4} .kh-tile.done .kh-tile-ico{color:var(--good,#2e7d32)} .kh-tile.partial{border-color:#f0d9a8;background:#fffaf0} .kh-tile.big{grid-column:1/-1} .kh-tile.ready{border-color:var(--brand,#6c4cf1);background:#f4f1fe} .kh-tile.locked{opacity:.5;cursor:not-allowed;background:#f6f6f8} .kh-tile.locked:hover{transform:none;box-shadow:none} @media (max-width:720px){.kh-layout{flex-direction:column}.kh-rail{flex:1 0 auto;width:100%;position:static;display:flex;flex-wrap:wrap;gap:4px}.kh-rail-title{width:100%}.kh-belt{flex:1 1 120px}} /* ===== V9: clickable belt rail (button reset) ===== */ .kh-belt{width:100%;background:transparent;border:none;border-left:4px solid transparent;cursor:pointer;font:inherit;text-align:left} .kh-belt:hover{background:rgba(124,92,255,.10)} .kh-belt.future:hover{opacity:.7} /* ===== V9: lesson tabs ===== */ .ltabs{display:flex;gap:6px;margin:10px 0 4px;flex-wrap:wrap;border-bottom:2px solid var(--line);padding-bottom:2px} .ltab{appearance:none;border:1px solid var(--line);border-bottom:none;background:var(--panel2);color:var(--ink); padding:8px 14px;border-radius:10px 10px 0 0;font:inherit;font-size:13px;font-weight:700;cursor:pointer;min-height:40px} .ltab:hover{background:var(--panel)} .ltab.on{background:var(--belt,var(--brand));color:#fff;border-color:transparent} .ltab-body{margin-top:12px} /* ===== V9: read 3-section layout ===== */ .rsec{margin-top:12px} .rsec-h{margin:.1rem 0 .5rem;font-size:15px;color:var(--brand-shade)} [data-theme="night"] .rsec-h{color:var(--brand2)} .keypoints{margin:.2rem 0 0;padding-left:1.3rem} .keypoints li{margin:.35rem 0;line-height:1.55;font-size:15px} /* ===== V9: Other Videos ===== */ .ovgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px} .ovcard{display:flex;gap:10px;align-items:flex-start;text-decoration:none;color:inherit;background:var(--panel); border:1px solid var(--line);border-radius:12px;padding:12px;transition:transform .08s,box-shadow .12s} .ovcard:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.12)} .ovthumb{font-size:24px;flex:0 0 auto;width:40px;height:40px;display:flex;align-items:center;justify-content:center; background:var(--panel2);border-radius:9px} .ovtitle{font-weight:700;font-size:14px;line-height:1.25} .ovsub{font-size:12px;color:var(--muted);margin:2px 0} .ovwhy{font-size:12.5px;color:var(--ink);opacity:.85;line-height:1.4;margin-top:2px} /* ===== V9: project wizard ===== */ .projland>.card,.projstep>.card{margin-top:12px} .projhead-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .weekmap{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:8px} .weekchip{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:2px;font-size:13px} .weekchip b{color:var(--brand-shade)} [data-theme="night"] .weekchip b{color:var(--brand2)} .projtask{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px} /* ===== V9: belt-view panel + pills ===== */ .bv-list{display:flex;flex-direction:column;gap:8px;margin-top:6px} .bv-item{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--panel2); border:1px solid var(--line);border-radius:10px;padding:10px 12px} .bv-item.tapable{cursor:pointer} .bv-item.tapable:hover{border-color:var(--belt,var(--brand))} .bv-title{font-weight:700;font-size:14px} .bv-sub{font-size:12px;margin-top:2px} .pill{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700; background:var(--panel2);border:1px solid var(--line);color:var(--muted)} .pill.ok{background:#E7F9EF;color:#1C8A4B;border-color:#BEEFD3} [data-theme="night"] .pill.ok{background:#0F3324;color:#5CE8A6;border-color:#1C5A3E} /* ===== project step: instructions + activity engines (Chunk B) ===== */ .instr-list,.tool-list{margin:.4rem 0 0;padding-left:1.2rem} .instr-list li{margin:5px 0;line-height:1.4} .tool-list{list-style:none;padding-left:0} .tool-list li{padding:5px 0;border-bottom:1px solid var(--line)} .engine{margin-top:2px} .engine-lbl{display:block;font-weight:700;font-size:13px;margin:10px 0 4px;color:var(--muted)} .engine .row{display:flex;align-items:center} .e-form input,.e-form textarea,.engine input,.engine textarea{width:100%} /* E3 image picker */ .engine-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:12px} .e3pick{position:relative;border:3px solid transparent;border-radius:12px;overflow:hidden;cursor:pointer;background:var(--panel2)} .e3pick img{display:block;width:100%;aspect-ratio:1;object-fit:cover} .e3pick.chosen{border-color:var(--brand2)} .e3tag{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);color:#fff;font-size:11px;text-align:center;padding:3px} /* E2 chat */ .chatlog{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:10px;min-height:90px;max-height:300px;overflow-y:auto} .cmsg{margin:6px 0;padding:8px 11px;border-radius:12px;max-width:88%;line-height:1.35;font-size:14px} .cmsg.hero{background:var(--panel);border:1px solid var(--line)} .cmsg.me{background:var(--brand);color:#fff;margin-left:auto} /* E1 buttons/colors/review */ .btn-row .b-del{min-width:40px} .theme-swatches .swatch{width:40px;height:40px;border-radius:10px;cursor:pointer;position:relative;padding:0} .theme-swatches .swatch span{position:absolute;left:6px;bottom:6px;width:14px;height:14px;border-radius:50%} .hero-card{border-radius:16px;padding:16px;text-align:center;margin-bottom:10px} .hero-av{width:96px;height:96px;border-radius:50%;object-fit:cover;background:#222;border:3px solid rgba(255,255,255,.4)} .hero-av.ph{display:inline-block} /* E4 teachable machine */ .tm-steps{margin:.2rem 0 12px;padding-left:1.2rem}.tm-steps li{margin:6px 0;line-height:1.4} .tm-cam{margin-top:14px;text-align:center} .tm-cam video{width:100%;max-width:320px;border-radius:14px;background:#000} .tm-cam .bar,.e-tm .bar{height:14px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-top:8px} .tm-cam .bar>i{display:block;height:100%;width:0;background:var(--brand);transition:width .15s} .tm-seen{font-weight:700;margin:8px 0 0}