/* Save Code, Teach Pip and Find Pip (lumibot.si). Big tap targets, read-aloud friendly, reduced-motion safe. */
.t3-modal { position:fixed; inset:0; z-index:2147483000; display:flex; align-items:center; justify-content:center; padding:14px; background:rgba(6,6,18,.72); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.t3-box { position:relative; width:min(560px, 100%); max-height:calc(100vh - 28px); max-height:calc(100dvh - 28px); overflow:auto; overscroll-behavior:contain; box-sizing:border-box; padding:26px 22px 22px; border-radius:28px; color:#fff; font:600 19px/1.45 Nunito, system-ui, sans-serif;
  background:linear-gradient(170deg, rgba(48,34,104,.97), rgba(20,14,44,.98)); border:2px solid rgba(255,244,200,.45); box-shadow:0 20px 60px rgba(0,0,0,.55), 0 0 40px rgba(255,211,107,.18); }
.t3-box h2 { margin:0 0 10px; font:800 28px/1.15 Nunito, system-ui, sans-serif; color:#fff4c8; padding-right:56px; }
.t3-box p { margin:0 0 12px; }
.t3-box .t3-small { font-size:16px; color:#d8d4f0; }
.t3-x { position:absolute; top:12px; right:12px; width:56px; height:56px; border-radius:50%; border:2px solid rgba(255,255,255,.35); background:rgba(255,255,255,.1); color:#fff; font:800 24px/1 Nunito, sans-serif; cursor:pointer; }
.t3-x:focus-visible, .t3-btn:focus-visible, .t3-in:focus-visible, .t3-ans:focus-visible { outline:3px solid #fff4c8; outline-offset:3px; }
.t3-btns { display:flex; flex-wrap:wrap; gap:12px; margin:14px 0 4px; }
.t3-btns > * { flex:1 1 200px; }
.t3-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:64px; padding:10px 20px; box-sizing:border-box; border-radius:20px; border:0; cursor:pointer; text-decoration:none; text-align:center;
  font:800 20px/1.15 Nunito, system-ui, sans-serif; color:#14142a; background:linear-gradient(100deg,#fff,#dfe8ff); box-shadow:0 5px 0 rgba(0,0,0,.28); }
.t3-btn:active { transform:translateY(3px); box-shadow:0 2px 0 rgba(0,0,0,.28); }
.t3-btn.gold { background:linear-gradient(100deg,#fff4c8,#ffd36b); }
.t3-btn.ghost { color:#fff; background:rgba(255,255,255,.1); border:2px solid rgba(255,255,255,.35); box-shadow:none; }
.t3-btn.big { min-height:76px; font-size:23px; }
.t3-btn[disabled] { opacity:.55; cursor:default; }
.t3-code { margin:12px 0; padding:16px 12px; border-radius:20px; background:rgba(255,244,200,.1); border:2px dashed rgba(255,244,200,.6); text-align:center; font:800 26px/1.5 Nunito, system-ui, sans-serif; letter-spacing:.04em; color:#fff4c8; word-break:break-word; }
.t3-code span { display:inline-block; margin:2px 4px; padding:2px 10px; border-radius:12px; background:rgba(255,255,255,.12); }
.t3-in { display:block; width:100%; box-sizing:border-box; min-height:64px; margin:6px 0 4px; padding:12px 16px; border-radius:18px; border:2px solid rgba(255,244,200,.6); background:rgba(0,0,0,.35); color:#fff; font:800 21px/1.4 Nunito, system-ui, sans-serif; text-transform:uppercase; resize:vertical; }
.t3-in::placeholder { color:#a9a3c9; text-transform:none; font-weight:600; }
.t3-lbl { display:block; font-weight:800; font-size:19px; }
.t3-msg { min-height:1.4em; font-weight:800; color:#ffe3a3; }
.t3-msg.ok { color:#8dffc0; }
.t3-sep { border:0; border-top:1px solid rgba(255,255,255,.18); margin:18px 0 14px; }
.t3-details summary { cursor:pointer; min-height:56px; display:flex; align-items:center; font-weight:800; color:#fff4c8; }
.t3-ta { min-height:110px; font-size:14px; text-transform:none; font-weight:600; word-break:break-all; }
.t3-pipline { display:flex; gap:12px; align-items:flex-start; }
.t3-pipline .t3-pip { flex:none; width:58px; height:58px; }
.t3-pip svg { width:100%; height:100%; display:block; filter:drop-shadow(0 0 10px rgba(255,226,122,.7)); }

/* ---------- My Star additions ---------- */
.t3-me { margin:16px 0 4px; display:grid; gap:12px; }
.t3-me-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:10px; }
.t3-me-row .t3-btn { width:100%; }
.t3-me-box { padding:14px 16px; border-radius:20px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); }
.t3-me-box h3 { margin:0 0 6px; font:800 20px/1.2 Nunito, system-ui, sans-serif; color:#fff4c8; }
.t3-taught { list-style:none; margin:6px 0 0; padding:0; max-height:220px; overflow:auto; display:grid; gap:6px; }
.t3-taught li { padding:8px 12px; border-radius:14px; background:rgba(255,255,255,.08); font-size:17px; line-height:1.35; }
.t3-taught li small { display:block; color:#ffd36b; font-weight:800; font-size:14px; }
.t3-empty { color:#d8d4f0; font-size:17px; }

/* ---------- Teach Pip panel (not modal: play keeps going behind it) ---------- */
.t3-teach { position:fixed; left:50%; bottom:12px; z-index:2147482000; transform:translateX(-50%); width:min(560px, calc(100vw - 20px)); max-height:calc(100vh - 90px); max-height:calc(100dvh - 90px); overflow:auto; overscroll-behavior:contain; box-sizing:border-box; padding:18px 18px 16px; border-radius:26px; color:#fff;
  font:700 20px/1.4 Nunito, system-ui, sans-serif; background:linear-gradient(170deg, rgba(56,40,118,.97), rgba(22,16,50,.98)); border:2px solid rgba(255,226,122,.65); box-shadow:0 16px 50px rgba(0,0,0,.55), 0 0 30px rgba(255,226,122,.22); }
.t3-teach.in { animation:t3-up .35s ease-out; }
@keyframes t3-up { from { transform:translate(-50%, 30px); opacity:0; } to { transform:translate(-50%, 0); opacity:1; } }
.t3-teach .t3-q { margin:0 0 4px; font-weight:800; font-size:21px; }
.t3-teach .t3-k { margin:0; font-size:15px; font-weight:800; color:#ffd36b; letter-spacing:.04em; text-transform:uppercase; }
.t3-teach .t3-pip { width:64px; height:64px; }
.t3-teach.happy .t3-pip svg { animation:t3-hop .6s ease-in-out 2; }
@keyframes t3-hop { 50% { transform:translateY(-10px) rotate(-8deg); } }
.t3-ans-list { display:grid; gap:10px; margin:12px 0 6px; }
.t3-ans { display:flex; align-items:center; gap:12px; width:100%; min-height:64px; padding:8px 16px; box-sizing:border-box; border-radius:18px; border:2px solid rgba(255,255,255,.3); background:rgba(255,255,255,.1); color:#fff; font:800 20px/1.25 Nunito, system-ui, sans-serif; text-align:left; cursor:pointer; }
.t3-ans img { width:46px; height:46px; border-radius:10px; object-fit:cover; flex:none; }
.t3-ans .t3-dot { flex:none; width:22px; height:22px; border-radius:50%; background:var(--c, #fff4c8); box-shadow:0 0 10px var(--c, #fff4c8); }
.t3-ans:hover { background:rgba(255,255,255,.18); }
.t3-ans.right { background:rgba(93,255,160,.22); border-color:#8dffc0; }
.t3-ans.picked { border-color:#ffd36b; }
.t3-ans[disabled] { cursor:default; }
.t3-why { margin:8px 0 4px; padding:12px 14px; border-radius:16px; background:rgba(255,255,255,.08); font-weight:700; font-size:18px; }
.t3-teach .t3-btns { margin-top:10px; }
.t3-teach .t3-btns > * { flex:1 1 160px; }
.t3-cardpic { display:block; width:96px; height:96px; margin:6px auto 2px; border-radius:16px; object-fit:cover; border:2px solid rgba(255,255,255,.4); }

/* ---------- Find Pip ---------- */
.t3-fp { position:absolute; z-index:5; width:56px; height:56px; margin:0; padding:0; border:0; border-radius:50%; background:transparent; cursor:pointer; touch-action:manipulation; }
.t3-fp svg { width:26px; height:26px; display:block; margin:15px auto; opacity:var(--o, .38); filter:drop-shadow(0 0 var(--g, 2px) rgba(255,226,122,.95)); transition:opacity .4s, filter .4s; }
.t3-fp:not(.found) svg { animation:t3-peek 3.2s ease-in-out infinite; }
@keyframes t3-peek { 0%,100% { transform:rotate(-6deg); } 50% { transform:rotate(6deg) translateY(-2px); } }
.t3-fp.found svg { opacity:1; width:40px; height:40px; margin:8px auto; filter:drop-shadow(0 0 14px #ffe27a); }
.t3-fp:focus-visible { outline:3px solid #fff4c8; outline-offset:2px; }
.t3-fp-bar { position:fixed; left:50%; bottom:12px; z-index:2147481000; transform:translateX(-50%); width:min(520px, calc(100vw - 20px)); box-sizing:border-box; padding:12px 14px; border-radius:24px; color:#fff;
  font:800 19px/1.35 Nunito, system-ui, sans-serif; background:linear-gradient(170deg, rgba(56,40,118,.96), rgba(22,16,50,.97)); border:2px solid rgba(255,226,122,.6); box-shadow:0 12px 40px rgba(0,0,0,.5); }
.t3-fp-bar p { margin:0 0 8px; }
.t3-fp-heat { display:flex; align-items:center; gap:10px; }
.t3-fp-heat i { flex:1; height:14px; border-radius:8px; background:rgba(255,255,255,.15); overflow:hidden; position:relative; }
.t3-fp-heat i b { position:absolute; inset:0 auto 0 0; width:var(--h, 10%); border-radius:8px; background:linear-gradient(90deg, #8fc8ff, #ffd36b, #ff8a5c); transition:width .3s; }
.t3-fp-bar .t3-btns { margin:8px 0 0; gap:8px; }
.t3-fp-bar .t3-btns > * { flex:1 1 120px; min-height:60px; font-size:18px; }
.t3-fp-found { position:fixed; z-index:2147482500; pointer-events:none; padding:8px 14px; border-radius:16px; background:#fff4c8; color:#14142a; font:800 20px/1.2 Nunito, sans-serif; transform:translate(-50%, -120%); box-shadow:0 6px 20px rgba(0,0,0,.4); white-space:nowrap; }

@media (max-width:520px) {
  .t3-box { padding:22px 16px 18px; font-size:18px; border-radius:24px; }
  .t3-box h2 { font-size:25px; }
  .t3-code { font-size:22px; }
  .t3-teach { padding:14px 14px 12px; font-size:18px; bottom:8px; }
  .t3-teach .t3-q { font-size:19px; }
  .t3-ans { font-size:18px; min-height:60px; }
}
@media (prefers-reduced-motion: reduce) {
  .t3-teach.in, .t3-teach.happy .t3-pip svg, .t3-fp:not(.found) svg { animation:none; }
  .t3-fp svg { transition:none; }
}