:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#17243b;background:#f3f6fb;font-synthesis:none;line-height:1.5;color-scheme:light}*{box-sizing:border-box}body{margin:0}main{max-width:1440px;margin:0 auto;padding:48px 28px}.page-header{max-width:720px;margin-bottom:32px}.eyebrow{color:#3455be;font-weight:700;letter-spacing:.1em;text-transform:uppercase}h1{font-size:clamp(2rem,4vw,3rem);line-height:1.15;margin:12px 0;letter-spacing:-.035em}h2{font-size:1.1rem;margin:0}.intro{color:#52617a;font-size:1.05rem}.project-links{display:flex;flex-wrap:wrap;gap:20px}.project-links a{color:#3455be;font-weight:600;text-underline-offset:3px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:24px}.panel{background:#fff;border:1px solid #dce3ef;border-radius:16px;padding:24px;box-shadow:0 8px 32px #17243b05}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px;flex-wrap:wrap}label{display:block;font-size:.9rem;font-weight:600;margin-bottom:8px}button,input,textarea{font:inherit}button{cursor:pointer;border:1px solid #cbd5e1;border-radius:8px;padding:9px 14px;color:#243552;background:#fff;font-size:.9rem}button:hover:not(:disabled){background:#edf2ff;border-color:#7089de}button:disabled{opacity:.45;cursor:not-allowed}button.primary{background:#3455be;color:#fff;border-color:#3455be}button.primary:hover{background:#29449a}button.subtle{border:0;background:#f3f6fb}:focus-visible{outline:3px solid #3455be;outline-offset:3px}textarea{display:block;width:100%;min-height:360px;resize:vertical;padding:16px;border:1px solid #cbd5e1;border-radius:8px;font-family:ui-monospace,monospace;font-size:.85rem;line-height:1.6;tab-size:4;background:#f8fafc;color:#17243b}input[type=number]{width:120px;padding:8px;border:1px solid #cbd5e1;border-radius:8px}input[type=range]{width:100%;accent-color:#3455be}input[type=text]{display:block;width:100%;min-width:0;padding:8px;margin-bottom:16px;border:1px solid #cbd5e1;border-radius:8px;font-family:ui-monospace,monospace;font-size:.85rem}.editor-actions{display:flex;align-items:end;gap:16px;flex-wrap:wrap;margin-top:20px}.hint{color:#52617a;font-size:.85rem}.error{color:#9f1239;background:#fff1f2;border:1px solid #fecdd3;border-radius:8px;padding:12px;overflow-wrap:anywhere;white-space:pre-wrap}output{border-radius:20px;background:#edf2ff;color:#3455be;padding:5px 12px;font-size:.9rem;font-weight:600}.step-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}.diagram-preview{display:grid;place-items:center;min-height:330px;overflow:auto;margin:20px 0;padding:20px;border:1px dashed #dce3ef;border-radius:10px}.diagram-preview>div{width:100%}.diagram-preview svg{display:block;margin:auto}.preview-hint{margin-bottom:0}.style-controls h2{margin-bottom:16px}.usage{margin-top:32px}pre{background:#17243b;color:#e2e8f0;border-radius:12px;padding:24px;overflow-x:auto;font-size:.9rem}code{font-family:ui-monospace,monospace}@media(max-width:850px){main{padding:28px 16px}.workspace{grid-template-columns:minmax(0,1fr)}.panel{padding:20px}}