/* assets/pyquest/pyq.css — Taim Python Quest notebook (S76). Light/cream, bilingual, Jupyter-like. */
.pyq{--p-cream:#FBF8F1;--p-line:#ECE6DA;--p-navy:#1B2A4A;--p-coral:#E8612A;--p-coral-d:#C94E1D;--p-ok:#059669;--p-bad:#B91C1C;--p-warn:#B45309;--p-gold:#F5B841;--p-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  max-width:1280px;margin:1.2rem auto 3rem;padding:0 1rem;color:#1f2937;font-size:15px}
.pyq *{box-sizing:border-box}
.pyq code{font-family:var(--p-mono);font-size:.9em;background:#F4EFE4;border-radius:5px;padding:.05em .35em;direction:ltr;unicode-bidi:isolate}
.pyq pre code{background:none;padding:0}
.pyq a{color:var(--p-coral-d)}
.pyq-top{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;background:linear-gradient(135deg,#FFF9F1,#FCEFE3);border:1px solid #F3DCC8;border-radius:20px;padding:1rem 1.2rem;position:relative;overflow:hidden}
.pyq-top:after{content:"";position:absolute;inset-inline-end:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(232,97,42,.15),transparent 70%);pointer-events:none}
.pyq-top h1{margin:0;font-size:1.35rem;color:var(--p-navy);line-height:1.3}
.pyq-top .sub{color:#475569;font-size:13.5px;margin-top:.15rem}
.pyq-ico{width:54px;height:54px;border-radius:16px;background:#fff;border:1px solid #F3DCC8;display:flex;align-items:center;justify-content:center;font-size:28px;flex:none}
.pyq-chips{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.45rem}
.pyq-chip{display:inline-flex;align-items:center;gap:.25rem;background:#fff;border:1px solid var(--p-line);border-radius:999px;padding:.15rem .6rem;font-size:12px;font-weight:700;color:var(--p-navy)}
.pyq-chip.xp{background:#FFF6DD;border-color:#F5D88A;color:#8a5a00}
.pyq-tools{margin-inline-start:auto;display:flex;gap:.35rem;flex-wrap:wrap;position:relative;z-index:1}
.pyq-btn{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;border:1.5px solid #D9D2C3;background:#fff;color:var(--p-navy);border-radius:10px;padding:.45rem .85rem;font-weight:700;font-size:13px;cursor:pointer;font-family:inherit;line-height:1.2;text-decoration:none;white-space:nowrap}
.pyq-btn:hover{border-color:var(--p-navy);background:#fff;color:var(--p-navy)}
.pyq-btn.p{background:var(--p-coral);border-color:var(--p-coral);color:#fff}.pyq-btn.p:hover{background:var(--p-coral-d);border-color:var(--p-coral-d);color:#fff}
.pyq-btn.n{background:var(--p-navy);border-color:var(--p-navy);color:#fff}.pyq-btn.n:hover{background:#111c33;color:#fff}
.pyq-btn.g{background:var(--p-ok);border-color:var(--p-ok);color:#fff}.pyq-btn.g:hover{background:#047857;color:#fff}
.pyq-btn.s{padding:.25rem .55rem;font-size:12px;border-radius:8px}
.pyq-btn.ghost{border-color:transparent;background:transparent}.pyq-btn.ghost:hover{background:#F4EFE4;border-color:transparent}
.pyq-btn[disabled]{opacity:.45;cursor:not-allowed}
.pyq-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:1rem;margin-top:1rem;align-items:start}
@media (max-width:1020px){.pyq-grid{grid-template-columns:minmax(0,1fr)}.pyq-side{position:static!important}}
.pyq-side{position:sticky;top:84px;display:flex;flex-direction:column;gap:.8rem}
.pyq-card{background:#fff;border:1px solid var(--p-line);border-radius:16px;padding:.9rem 1rem;box-shadow:0 1px 2px rgba(27,42,74,.04)}
.pyq-card h3{margin:0 0 .5rem;font-size:14px;color:var(--p-navy);display:flex;align-items:center;gap:.4rem}
.pyq-story{background:var(--p-cream);border:1px dashed #E5D9C3;border-radius:14px;padding:.85rem 1rem;line-height:1.75;margin-bottom:.9rem}
.pyq-story p{margin:.2rem 0}
.pyq-skills{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:.5rem}
.pyq-skills span{font-family:var(--p-mono);font-size:11.5px;background:#fff;border:1px solid var(--p-line);border-radius:6px;padding:.05rem .4rem;direction:ltr}
/* kernel */
.pyq-kernel{display:flex;align-items:center;gap:.55rem;font-size:13px;font-weight:700;color:var(--p-navy)}
.pyq-dot{width:10px;height:10px;border-radius:50%;background:#CBD5E1;flex:none}
.pyq-kernel.boot .pyq-dot{background:var(--p-gold);animation:pyqPulse 1s infinite}
.pyq-kernel.ready .pyq-dot{background:var(--p-ok)}
.pyq-kernel.busy .pyq-dot{background:var(--p-coral);animation:pyqPulse .7s infinite}
.pyq-kernel.dead .pyq-dot{background:var(--p-bad)}
.pyq-kernel small{display:block;font-weight:500;color:#64748b;font-size:12px}
@keyframes pyqPulse{50%{opacity:.35}}
.pyq-bar{height:6px;background:#F1ECE1;border-radius:99px;overflow:hidden;margin-top:.45rem}
.pyq-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--p-gold),var(--p-coral));width:0;transition:width .4s}
/* cells */
.pyq-md{padding:.2rem .3rem .2rem 3.6rem;line-height:1.7}
[dir=rtl] .pyq-md{padding:.2rem 3.6rem .2rem .3rem}
.pyq-md h3,.pyq-md h4,.pyq-md h5{color:var(--p-navy);margin:.6rem 0 .3rem;font-size:1.05rem}
.pyq-md p{margin:.3rem 0}
.pyq-md ul,.pyq-md ol{margin:.3rem 0;padding-inline-start:1.3rem}
.pyq-mdcode{background:#FBFAF6;border:1px solid var(--p-line);border-radius:10px;padding:.6rem .8rem;overflow:auto;font-family:var(--p-mono);font-size:13px;line-height:1.55;direction:ltr;text-align:left}
.pyq-tip{background:#FFF7E6;border-inline-start:3px solid var(--p-gold);padding:.4rem .7rem;border-radius:8px;margin:.4rem 0}
.pyq-cell{display:grid;grid-template-columns:3.3rem minmax(0,1fr);gap:.3rem;margin:.55rem 0}
.pyq-prompt{font-family:var(--p-mono);font-size:12px;color:#94a3b8;text-align:end;padding-top:.6rem;direction:ltr;white-space:nowrap}
.pyq-cell.task .pyq-prompt{color:var(--p-coral)}
.pyq-box{border:1.5px solid var(--p-line);border-radius:12px;background:#fff;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.pyq-cell.focus .pyq-box{border-color:#8FA7D6;box-shadow:0 0 0 3px rgba(27,42,74,.06)}
.pyq-cell.task .pyq-box{border-color:#F3C9B3}
.pyq-cell.task.focus .pyq-box{border-color:var(--p-coral);box-shadow:0 0 0 3px rgba(232,97,42,.1)}
.pyq-cell.running .pyq-box{border-color:var(--p-gold)}
.pyq-taskhead{background:#FFF6F1;border-bottom:1px solid #F7DCCD;padding:.55rem .8rem;line-height:1.65}
.pyq-taskhead .tag{display:inline-block;background:var(--p-coral);color:#fff;font-size:11px;font-weight:800;border-radius:6px;padding:.05rem .45rem;margin-inline-end:.35rem;letter-spacing:.02em}
.pyq-taskhead p{margin:.25rem 0}.pyq-taskhead ul,.pyq-taskhead ol{margin:.25rem 0;padding-inline-start:1.3rem}
.pyq-ed{direction:ltr;text-align:left}
.pyq-ed .CodeMirror{height:auto;min-height:3.2em;font-family:var(--p-mono);font-size:13.5px;line-height:1.55;background:#FFFEFB}
.pyq-ed .CodeMirror-scroll{min-height:3.2em}
.pyq-ed .CodeMirror-gutters{background:#FBF8F1;border-right:1px solid var(--p-line)}
.pyq-ed .CodeMirror-linenumber{color:#B8AF9C}
.pyq-ed textarea.pyq-plain{width:100%;min-height:8em;border:0;padding:.6rem;font-family:var(--p-mono);font-size:13.5px;resize:vertical;background:#FFFEFB}
.pyq-errline{background:#FDECEC!important}
.pyq-cellbar{display:flex;gap:.25rem;align-items:center;padding:.3rem .45rem;border-top:1px solid #F4EFE4;background:#FDFCF8;flex-wrap:wrap}
.pyq-cellbar .kbd{margin-inline-start:auto;font-size:11px;color:#94a3b8}
.pyq-out{border-top:1px solid #F4EFE4;padding:.5rem .75rem;font-size:13px;direction:ltr;text-align:left;max-height:520px;overflow:auto}
.pyq-out:empty{display:none}
.pyq-out pre{margin:0;font-family:var(--p-mono);font-size:12.8px;white-space:pre-wrap;word-break:break-word;color:#1f2937}
.pyq-out .ret{color:#334155}
.pyq-out img{max-width:100%;height:auto;display:block;margin:.3rem 0;border-radius:8px;border:1px solid var(--p-line)}
.pyq-out table{border-collapse:collapse;font-size:12.5px;margin:.2rem 0;font-family:var(--p-mono)}
.pyq-out th,.pyq-out td{border:1px solid #EDE7DA;padding:.2rem .5rem;text-align:right}
.pyq-out thead th{background:#FBF8F1;color:var(--p-navy)}
.pyq-out tbody tr:nth-child(odd){background:#FFFEFB}
.pyq-out tbody th{background:#FDFBF6;font-weight:600}
.pyq-err{background:#FEF2F2;border:1px solid #FECACA;border-radius:10px;padding:.55rem .7rem;color:#7f1d1d}
.pyq-err b{color:var(--p-bad)}
.pyq-err pre{color:#7f1d1d;margin-top:.3rem}
.pyq-err .acts{margin-top:.45rem;display:flex;gap:.3rem;flex-wrap:wrap;direction:inherit}
.pyq-ms{color:#94a3b8;font-size:11px;margin-top:.25rem}
/* check */
.pyq-check{margin-top:1.1rem;background:#fff;border:2px solid #F3DCC8;border-radius:18px;padding:1rem 1.1rem}
.pyq-check-head{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}
.pyq-ring{--v:0;width:64px;height:64px;border-radius:50%;background:conic-gradient(var(--c,var(--p-coral)) calc(var(--v)*1%),#F1ECE1 0);display:flex;align-items:center;justify-content:center;flex:none}
.pyq-ring b{width:50px;height:50px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--p-navy)}
.pyq-checks{list-style:none;margin:.8rem 0 0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.pyq-checks li{display:flex;gap:.55rem;align-items:flex-start;border:1px solid var(--p-line);border-radius:10px;padding:.45rem .65rem;font-size:13.5px;background:#fff}
.pyq-checks li.ok{border-color:#BBF7D0;background:#F0FDF4}
.pyq-checks li.no{border-color:#FED7AA;background:#FFF7ED}
.pyq-checks .fix{display:block;color:#7c2d12;font-size:12.5px;margin-top:.15rem}
.pyq-checks .fix code{background:#FDE8D7}
.pyq-pass{background:linear-gradient(135deg,#ECFDF5,#F0FDF4);border:1px solid #A7F3D0;border-radius:14px;padding:.8rem 1rem;margin-top:.8rem;color:#065f46}
.pyq-pass h4{margin:0 0 .2rem;font-size:1.05rem}
/* hints + coach */
.pyq-hint{background:#FFFBEB;border:1px solid #FDE68A;border-radius:10px;padding:.5rem .65rem;font-size:13px;margin-top:.4rem;line-height:1.6}
.pyq-hint .n{font-weight:800;color:#92400e;font-size:11.5px}
.pyq-hint p{margin:.15rem 0}
.pyq-chat{display:flex;flex-direction:column;gap:.45rem;max-height:420px;overflow:auto;padding:.1rem}
.pyq-msg{border-radius:12px;padding:.5rem .7rem;font-size:13.3px;line-height:1.6;max-width:96%}
.pyq-msg p{margin:.2rem 0}.pyq-msg ul,.pyq-msg ol{margin:.2rem 0;padding-inline-start:1.2rem}
.pyq-msg.u{background:var(--p-navy);color:#fff;align-self:flex-end}
.pyq-msg.u code{background:rgba(255,255,255,.15);color:#fff}
.pyq-msg.a{background:var(--p-cream);border:1px solid var(--p-line);align-self:flex-start}
.pyq-msg.e{align-self:center;background:none;color:#94a3b8;font-size:11.5px;padding:.1rem}
.pyq-msg.wait{color:#94a3b8;font-style:italic}
.pyq-taima{display:flex;align-items:center;gap:.55rem;margin-bottom:.55rem}
.pyq-av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--p-coral),var(--p-gold));color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center;font-size:17px;flex:none;box-shadow:0 2px 6px rgba(232,97,42,.3)}
.pyq-taima b{display:block;color:var(--p-navy);font-size:14px}.pyq-taima small{color:#64748b;font-size:12px}
.pyq-quick{display:flex;gap:.3rem;flex-wrap:wrap;margin:.5rem 0}
.pyq-quick button{border:1px solid var(--p-line);background:var(--p-cream);border-radius:999px;padding:.2rem .6rem;font-size:12px;font-weight:600;color:var(--p-navy);cursor:pointer;font-family:inherit}
.pyq-quick button:hover{border-color:var(--p-navy)}
.pyq-ask{display:flex;gap:.35rem;margin-top:.5rem}
.pyq-ask textarea{flex:1;border:1.5px solid #D9D2C3;border-radius:10px;padding:.45rem .6rem;font-family:inherit;font-size:13px;resize:none;min-height:2.6em;max-height:8em}
.pyq-vars{font-family:var(--p-mono);font-size:12px;direction:ltr;text-align:left;width:100%;border-collapse:collapse}
.pyq-vars td{border-bottom:1px solid #F4EFE4;padding:.2rem .3rem;vertical-align:top;word-break:break-all}
.pyq-vars td:first-child{color:var(--p-navy);font-weight:700;white-space:nowrap}
.pyq-vars td:nth-child(2){color:#94a3b8}
.pyq-toast{position:fixed;inset-inline-start:50%;bottom:28px;transform:translateX(-50%);background:var(--p-navy);color:#fff;border-radius:14px;padding:.7rem 1.1rem;font-weight:700;z-index:9999;box-shadow:0 8px 30px rgba(0,0,0,.2);opacity:0;transition:opacity .25s,bottom .25s;pointer-events:none;max-width:92vw;text-align:center}
[dir=rtl] .pyq-toast,.rtl .pyq-toast{transform:translateX(50%)}
.pyq-toast.on{opacity:1;bottom:40px}
.pyq-confetti{position:fixed;inset:0;pointer-events:none;z-index:9998}
.pyq-cta{background:var(--p-navy);color:#fff;border-radius:16px;padding:1rem 1.1rem}
.pyq-cta h3{color:#fff!important}
.pyq-cta p{color:#CBD5E1;font-size:13px;margin:.2rem 0 .7rem}
.pyq-cta .pyq-btn.p{display:flex}
.pyq-note{font-size:12px;color:#64748b;line-height:1.5}