.monitor-wrap{width:100%;max-width:640px;margin-inline:auto}.monitor{border:1px solid var(--color-border-strong);box-shadow:var(--shadow-lg), inset 0 1px 0 #ffffff1f;background:linear-gradient(160deg,#2b2f45,#14172a);border-radius:26px 26px 12px 12px;padding:18px 18px 0;position:relative}.screen{color:#e7eaff;background:#0a0d1a;border:2px solid #05060d;border-radius:14px;position:relative;overflow:hidden;box-shadow:inset 0 0 60px #8b6cff2e}.screen:after{content:"";pointer-events:none;mix-blend-mode:screen;background:repeating-linear-gradient(0deg,#ffffff09 0 1px,#0000 1px 3px);position:absolute;inset:0}.monitor .bar{color:#9aa3c7;background:linear-gradient(#1b2038,#121629);border-bottom:1px solid #ffffff14;align-items:center;gap:.8rem;padding:.65rem .9rem;font:600 .8rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;display:flex}.monitor .dots{gap:6px;display:inline-flex}.monitor .dots i{background:#ff6b6b;border-radius:50%;width:10px;height:10px}.monitor .dots i:nth-child(2){background:#ffb938}.monitor .dots i:nth-child(3){background:#3ddc97}.monitor .streak{color:#ffb938;background:#ffb93824;border-radius:999px;margin-left:auto;padding:.25rem .6rem}.monitor .content{min-height:330px;padding:1.4rem 1.5rem 1rem}.monitor .meta{letter-spacing:.1em;text-transform:uppercase;color:#9aa3c7;align-items:center;gap:.7rem;margin:0 0 .9rem;font:600 .8rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;display:flex}.monitor .chip{color:#cfc4ff;letter-spacing:.06em;background:#8b6cff33;border-radius:999px;padding:.3rem .65rem}.monitor .tip-title{font:700 clamp(1.35rem, 3vw, 1.75rem)/1.25 var(--font-display);color:#fff;margin:0 0 .7rem}.monitor .caret{vertical-align:-.12em;background:#3fe0d0;width:.5em;height:1em;margin-left:.15em;animation:1s step-end infinite caret;display:inline-block}@keyframes caret{50%{opacity:0}}.monitor .tip-text{color:#d9defa;margin:0 0 1rem;font-size:1.08rem;line-height:1.6}.monitor .tip-text a{color:#b9a8ff}.monitor .tip-extra{background:#ffffff0d;border-left:3px solid #3fe0d0;border-radius:12px;gap:.55rem;margin-bottom:1rem;padding:.85rem 1rem;display:grid}.monitor .tip-extra p{color:#c4cbf0;margin:0;font-size:.98rem;line-height:1.5}.monitor .tip-extra b{letter-spacing:.12em;text-transform:uppercase;color:#3fe0d0;margin-bottom:.25rem;font:700 .72rem/1 ui-monospace,monospace;display:block}.monitor .quiz{margin-top:.6rem}.monitor .q{color:#fff;margin:0 0 .7rem;font-weight:600}.monitor .q-label{color:#1a1100;letter-spacing:.1em;text-transform:uppercase;background:#ffb938;border-radius:6px;margin-right:.4rem;padding:.2rem .5rem;font:800 .68rem/1 ui-monospace,monospace;display:inline-block}.monitor .opts{gap:.5rem;display:grid}.monitor .opt{text-align:left;color:#e7eaff;font:500 1rem/1.35 var(--font-family-sans);cursor:pointer;background:#ffffff0a;border:1.5px solid #ffffff29;border-radius:10px;padding:.7rem .95rem;transition:border-color .15s,background .15s,transform .15s}.monitor .opt:hover:not(:disabled){background:#8b6cff29;border-color:#b9a8ff;transform:translate(3px)}.monitor .opt:disabled{cursor:default}.monitor .opt.right{background:#3ddc9729;border-color:#3ddc97}.monitor .opt.wrong{background:#ff7a7a24;border-color:#ff7a7a}.monitor .result{color:#c4cbf0;min-height:1.4rem;margin:.8rem 0 0;font-size:.98rem}.monitor .result b{color:#ffb938}.monitor .controls{border-top:1px solid #ffffff12;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.7rem .9rem .9rem;display:flex}.monitor .controls button{color:#dfe3ff;font:600 .88rem/1 var(--font-display);cursor:pointer;background:#ffffff0d;border:1px solid #ffffff29;border-radius:10px;padding:.5rem .85rem;transition:border-color .15s,background .15s}.monitor .controls button:hover{background:#8b6cff2e;border-color:#b9a8ff}.monitor .controls .all{color:#b9a8ff;font:600 .9rem/1 var(--font-display);margin-left:auto;text-decoration:none}.monitor .neck{background:linear-gradient(#14172a,#232842);width:90px;height:22px;margin:0 auto}.monitor .base{background:linear-gradient(#2b2f45,#14172a);border-radius:10px 10px 0 0;width:220px;height:14px;margin:0 auto -1px;position:relative}.monitor .led{background:#3ddc97;border-radius:50%;width:5px;height:5px;animation:2.4s step-end infinite caret;position:absolute;top:5px;right:14px;box-shadow:0 0 8px #3ddc97}.monitor-wrap.compact .content{min-height:0}@media (width<=560px){.monitor{padding:10px 10px 0}.monitor .content{padding:1.1rem 1rem .8rem}.monitor .controls .all{width:100%;margin-left:0}}@media (prefers-reduced-motion:reduce){.monitor .caret,.monitor .led{animation:none}}