#cssplay-app{--cp-blue:#7fc9ff;--cp-pink:#7fc9ff;--cp-blue-deep:#3f8ecf;--cp-ink:#4a5568;--cp-dim:#8a94a6;--cp-line:rgba(120, 132, 156, 0.25);--cp-card:rgba(255, 255, 255, 0.92);--cp-chip-bg:rgba(127, 201, 255, 0.10);--cp-code-bg:#f7fafd;--cp-code-ink:#3f6fa8;--cp-ok:#35b57c;--cp-bad:#ef6a7a;font-size:14px;line-height:1.7;color:var(--cp-ink)}.cp-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-bottom:12px}.cp-brand{font-size:18px;font-weight:600;color:var(--cp-ink)}.cp-brand span{margin-left:8px;font-size:12px;font-weight:400;letter-spacing:1px;color:var(--cp-dim)}.cp-topnav{margin-left:auto;display:flex;align-items:center;gap:8px}.cp-progress{font-size:12.5px;color:var(--cp-dim)}.cp-lessons{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}.cp-litem{display:inline-flex;align-items:baseline;gap:6px;padding:4px 12px;font-size:12.5px;color:var(--cp-dim);background:0 0;border:1px solid var(--cp-line);border-radius:999px;cursor:pointer}.cp-litem span{color:var(--cp-dim)}.cp-litem:hover{color:var(--cp-blue-deep);border-color:var(--cp-blue)}.cp-litem.cp-lactive{color:var(--cp-blue-deep);border-color:var(--cp-blue);background:var(--cp-chip-bg)}.cp-litem.cp-ldone span{color:var(--cp-ok);font-weight:700}.cp-card{border:1px solid var(--cp-line);border-radius:14px;padding:16px 18px 14px;margin-bottom:12px;background:radial-gradient(120% 70% at 100% 0,rgba(127,201,255,.1),transparent 60%),radial-gradient(120% 70% at 0 100%,rgba(127,201,255,.1),transparent 60%),var(--cp-card);box-shadow:0 10px 30px rgba(90,120,180,.1)}.cp-lesson-title{margin:0 0 2px;font-size:17px;font-weight:600;color:var(--cp-ink)}.cp-tagline{margin:0 0 8px;font-size:12.5px;color:var(--cp-dim)}.cp-concept-body{font-size:13.5px}.cp-concept-body p{margin:8px 0}.cp-concept-body b{color:var(--cp-ink)}#cssplay-app code,.cp-hints code,.cp-task-body code{padding:1px 6px;font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--cp-blue-deep);background:var(--cp-chip-bg);border-radius:4px}#cssplay-app pre.ex{margin:8px 0;padding:10px 12px;font-size:12px;line-height:1.6;overflow-x:auto;color:var(--cp-code-ink);background:var(--cp-code-bg);border:1px solid var(--cp-line);border-radius:8px}.cp-task{border-color:rgba(127,201,255,.45)}.cp-label{font-size:13px;color:var(--cp-ink)}.cp-task-body{margin-top:6px;font-size:13.5px}.cp-hints{margin-top:8px;font-size:13px}.cp-hints ol{margin:4px 0 0;padding-left:20px}.cp-snippets{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}.cp-chip{padding:4px 12px;font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--cp-blue-deep);background:var(--cp-chip-bg);border:1px solid var(--cp-line);border-radius:999px;cursor:pointer}.cp-chip:hover{border-color:var(--cp-blue)}#cssplay-app .cp-btn{padding:5px 13px;font-size:12.5px;color:var(--cp-ink);background:0 0;border:1px solid var(--cp-line);border-radius:8px;cursor:pointer}#cssplay-app .cp-btn:hover{color:var(--cp-blue-deep);border-color:var(--cp-blue)}#cssplay-app .cp-btn.cp-primary{font-weight:600;color:#233246;border:0;background:linear-gradient(135deg,var(--cp-blue),var(--cp-pink))}.cp-grid{display:grid;grid-template-columns:minmax(320px,1fr) minmax(300px,1fr);gap:12px;align-items:start}.cp-editorbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.cp-tabs{display:flex;gap:4px}.cp-tab{padding:5px 14px;font-size:12.5px;color:var(--cp-dim);background:0 0;border:1px solid var(--cp-line);border-radius:8px 8px 0 0;cursor:pointer}.cp-tab.active{color:var(--cp-blue-deep);border-color:var(--cp-blue);border-bottom-color:transparent}.cp-flex1{flex:1}#cssplay-app .cp-editor{width:100%;min-height:380px;padding:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.7;tab-size:2;color:var(--cp-code-ink);background:var(--cp-code-bg);border:1px solid var(--cp-line);border-radius:0 10px 10px 10px;resize:vertical}#cssplay-app .cp-editor:focus{outline:0;border-color:var(--cp-blue)}.cp-pvwrap{display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid var(--cp-line);border-radius:12px;background:var(--cp-card)}.cp-pvwrap+.cp-pvwrap{margin-top:10px}.cp-pvlabel{padding-left:4px;font-size:12px;color:var(--cp-dim)}.cp-pvlabel.cp-pink{color:#d873a8}#cssplay-app .cp-frame{width:100%;min-height:300px;border:0;border-radius:8px;background:#fff}#cssplay-app.cp-wide .cp-pvwrap{overflow-x:auto}#cssplay-app.cp-wide .cp-frame{min-width:520px}.cp-results{margin-top:10px;padding:10px 14px;font-size:13px;border:1px solid var(--cp-line);border-radius:12px;background:var(--cp-card)}.cp-result-title{font-weight:600;color:var(--cp-ink);margin-bottom:4px}.cp-result{padding:2px 0;color:var(--cp-dim)}.cp-result.cp-ok{color:var(--cp-ok)}.cp-result.cp-no{color:var(--cp-bad)}.cp-celebrate{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:700;color:var(--cp-ok);animation:cp-pop .4s ease}@keyframes cp-pop{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}@media (prefers-reduced-motion:reduce){.cp-celebrate{animation:none}}@media (max-width:760px){.cp-grid{grid-template-columns:1fr}.cp-topnav{margin-left:0}}[data-theme=dark] #cssplay-app{--cp-ink:#c6ccd8;--cp-dim:#8f98a8;--cp-card:rgba(38, 44, 58, 0.92);--cp-chip-bg:rgba(127, 201, 255, 0.10);--cp-code-bg:#101828;--cp-code-ink:#a8d4ff;--cp-blue-deep:#7fc9ff;--cp-line:rgba(160, 172, 200, 0.35)}[data-theme=dark] #cssplay-app .cp-frame{border:1px solid rgba(255,255,255,.18)}[data-theme=dark] #cssplay-app .cp-card,[data-theme=dark] #cssplay-app .cp-pvwrap,[data-theme=dark] #cssplay-app .cp-results{background:radial-gradient(120% 70% at 100% 0,rgba(127,201,255,.08),transparent 60%),radial-gradient(120% 70% at 0 100%,rgba(127,201,255,.08),transparent 60%),var(--cp-card);box-shadow:none}[data-theme=dark] #cssplay-app .cp-btn,[data-theme=dark] #cssplay-app .cp-litem,[data-theme=dark] #cssplay-app .cp-tab{color:#c6ccd8}[data-theme=dark] #cssplay-app .cp-brand,[data-theme=dark] #cssplay-app .cp-label,[data-theme=dark] #cssplay-app .cp-lesson-title{color:#d7dce6}[data-theme=dark] #cssplay-app .cp-pvlabel.cp-pink{color:#7fc9ff}[data-theme=dark] #cssplay-app .cp-btn.cp-primary{color:#16202e}