:root{--primary:#6d5df6;--primary-dark:#5748d8;--accent:#ffb020;--ink:#17142b;--muted:#5b5770;--bg:#f7f6fe;--surface:#ffffff;--border:rgba(23,20,43,0.1);--danger:#d64545;--ok:#1d9d66}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6}h1,h2,h3{font-family:Plus Jakarta Sans,sans-serif}a{color:var(--primary);text-decoration:none}.page{max-width:960px;margin:0 auto;padding:24px 20px 64px}.card{border:1px solid var(--border);border-radius:16px;padding:20px}.btn,.card{background:var(--surface)}.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);color:var(--ink);font:600 .9rem Inter,sans-serif;padding:9px 16px;border-radius:10px;cursor:pointer}.btn-primary,.btn:hover{border-color:var(--primary)}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark)}.btn-danger{color:var(--danger)}.btn-sm{padding:5px 10px;font-size:.8rem;border-radius:8px}.btn:disabled{opacity:.55;cursor:not-allowed}.label{display:block;font-size:.82rem;font-weight:600;margin:14px 0 6px}.input,.select,.textarea{width:100%;border:1px solid var(--border);border-radius:10px;padding:10px 12px;font:400 .95rem Inter,sans-serif;background:#fff;color:var(--ink)}.input:focus,.select:focus,.textarea:focus{outline:2px solid rgba(109,93,246,.35);border-color:var(--primary)}.alert{border-radius:10px;padding:10px 14px;font-size:.9rem;margin:12px 0}.alert-error{background:#fdecec;color:#8f2424;border:1px solid #f5c2c2}.alert-ok{background:#e7f7ee;color:#14663f;border:1px solid #bfe6cf}.alert-warn{background:#fff6e0;color:#7a5200;border:1px solid #f2ddab}.table{width:100%;border-collapse:collapse;font-size:.9rem}.table td,.table th{text-align:left;padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:middle}.table th{font-size:.78rem;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}.badge{display:inline-block;font-size:.72rem;font-weight:700;padding:2px 9px;border-radius:999px;background:rgba(109,93,246,.12);color:var(--primary-dark)}.badge-off{background:rgba(0,0,0,.07);color:var(--muted)}.row-actions{display:flex;gap:6px;flex-wrap:wrap}.muted{color:var(--muted);font-size:.88rem}.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));grid-gap:14px;gap:14px}.tcml{font-size:1rem}.tcml p{margin:0 0 12px}.tcml .material-judul,.tcml .tc-title{font-size:1.9rem;font-weight:800;letter-spacing:-.5px;margin-bottom:14px;color:var(--ink)}.tcml .tc-heading{font-size:1.3rem;font-weight:700;margin:20px 0 8px}.tcml .material-contoh,.tcml .material-tujuan,.tcml .tc-note{border-radius:12px;padding:12px 16px;margin:0 0 14px;background:rgba(109,93,246,.08);border:1px solid rgba(109,93,246,.25)}.tcml .tc-warning{border-radius:12px;padding:12px 16px;margin:0 0 14px;background:#fff6e0;border:1px solid #f2ddab}.tcml .tc-summary{border-radius:12px;padding:12px 16px;margin:0 0 14px;background:#e7f7ee;border:1px solid #bfe6cf}.tcml .tc-example{border-radius:12px;padding:12px 16px;margin:0 0 14px;background:rgba(255,176,32,.1);border:1px solid rgba(255,176,32,.45)}.tcml .tc-formula{font-size:1.1rem;text-align:center;background:var(--bg);border:1px solid var(--border);padding:12px}.tcml .tc-code,.tcml .tc-code pre,.tcml .tc-formula{font-family:JetBrains Mono,monospace;border-radius:10px;margin:0 0 14px}.tcml .tc-code,.tcml .tc-code pre{font-size:.88rem;background:#17142b;color:#e8e6ff;padding:14px 16px;overflow-x:auto;white-space:pre-wrap}.tcml .tc-table{border-collapse:collapse;width:100%;margin:0 0 14px;font-size:.92rem}.tcml .tc-table td,.tcml .tc-table th{border:1px solid var(--border);padding:7px 10px;text-align:left}.tcml .tc-table th{background:var(--bg)}.tcml .tc-steps,.tcml .tc-tasks{margin:0 0 14px 20px}.tcml .tc-steps li,.tcml .tc-tasks li{margin-bottom:6px}.tcml .tc-hint{font-size:.9rem;color:var(--muted);font-style:italic}.tcml img{max-width:100%}.tc-scratch{margin:14px 0;text-align:center}.tc-scratch iframe{max-width:100%;border:1px solid var(--border);border-radius:10px;background:#000}.tc-scratch-caption{font-size:.85rem;color:var(--muted);margin-top:6px}.tc-sprite{background:#FFF7E0;border:1px solid #f2d98c;border-left:5px solid var(--amber);border-radius:10px;padding:10px 14px;margin:12px 0}.tc-sprite-name{font-weight:800}pre.scratchblocks{background:#fff;border:1px dashed var(--border);border-radius:10px;padding:12px;overflow-x:auto;font-family:var(--font-mono);font-size:.9rem;margin:12px 0}