:root{--blue:#00498F;--blue-light:#009ADA;--indigo:#00013A;--orange:#F26322;--green:#65BD60;--purple:#5F277E;--pink:#EE3D96;--bg:#eef0f2;--card:#ffffff;--border:#e5e7eb;--text:#111827;--muted:#6b7280;--muted-2:#9ca3af;--tint:#F0F0F3}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background-color:var(--bg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Inter,Arial,sans-serif;color:var(--text)}a{color:inherit}.topbar{position:sticky;top:0;z-index:50;background:var(--card);border-bottom:1px solid var(--border)}.topbar-inner{max-width:1240px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.brand{display:flex;align-items:center;gap:10px}.brand-badge{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:var(--blue);color:#fff;font-weight:700;font-size:13px}.brand-name{font-weight:700;font-size:15.5px;color:var(--indigo)}.brand-sub{font-size:11.5px;color:var(--muted);margin-top:1px}.view-switch{display:flex;background:var(--tint);border-radius:10px;padding:3px;gap:2px}.view-switch button{border:none;background:transparent;cursor:pointer;padding:8px 16px;font-size:13.5px;font-weight:600;color:var(--muted);border-radius:8px;transition:background .15s,color .15s}.view-switch button.active{background:#fff;color:var(--indigo);box-shadow:0 1px 2px #00000014}.page{max-width:1240px;margin:0 auto;padding:32px 24px 64px}[hidden]{display:none!important}@media (max-width:640px){.topbar-inner{padding:12px 16px;gap:10px}.brand-sub{display:none}.view-switch button{padding:7px 12px;font-size:12.5px}.page{padding:20px 16px 48px}}.intro{margin-bottom:32px}.eyebrow{font-size:12px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.08em;margin:0 0 8px}h1.page-title{font-size:28px;font-weight:700;color:var(--indigo);margin:0 0 10px}.lede{font-size:14.5px;color:var(--muted);max-width:720px;line-height:1.7;margin:0}@media (max-width:640px){h1.page-title{font-size:22px}.lede{font-size:13.5px}}.colour-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:24px;margin-bottom:40px}.colour-card h2{font-size:16px;margin:0 0 4px;color:var(--indigo)}.colour-card p.hint{font-size:12.5px;color:var(--muted);margin:0 0 16px}.swatch-row{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:10px}@media (max-width:900px){.swatch-row{grid-template-columns:repeat(4,1fr)}}@media (max-width:520px){.swatch-row{grid-template-columns:repeat(3,1fr)}.colour-card{padding:16px}}.swatch{cursor:pointer;border-radius:10px;padding:14px 8px;text-align:center;color:#fff;font-size:11px;font-weight:700;border:none}.swatch small{display:block;font-weight:500;font-family:SF Mono,Consolas,monospace;margin-top:6px;font-size:10.5px}.tint-col{display:flex;flex-direction:column;gap:6px}.tint{border-radius:6px;padding:8px 4px;text-align:center;cursor:pointer;border:none}.tint span{font-family:SF Mono,Consolas,monospace;font-size:9.5px;color:#111827}#colour-status{margin:10px 0 0;font-size:12px;color:var(--blue);font-weight:600;height:14px}.section-heading{margin:0 0 16px;display:flex;align-items:baseline;gap:10px}.section-heading h2{font-size:20px;margin:0;color:var(--indigo)}.section-heading span{font-size:12.5px;color:var(--muted-2);font-weight:600}.component-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:20px;margin-bottom:48px}@media (max-width:640px){.component-grid{gap:14px}.cc-head{padding:14px 14px 10px;flex-wrap:wrap}.cc-tabs{padding:0 14px}.cc-code pre{padding:14px}}.component-card{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}.cc-head{padding:16px 18px 12px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.cc-title{font-size:14.5px;font-weight:700;color:var(--indigo)}.cc-cat{display:inline-block;margin-top:5px;font-size:10.5px;font-weight:600;color:var(--muted);background:var(--tint);padding:2px 9px;border-radius:999px}.cc-add{white-space:nowrap;cursor:pointer;border:1px solid var(--blue);background:#fff;color:var(--blue);font-size:12px;font-weight:700;padding:6px 12px;border-radius:7px}.cc-add:hover{background:var(--blue);color:#fff}.cc-tabs{display:flex;gap:2px;padding:0 18px;border-bottom:1px solid var(--border)}.cc-tab{cursor:pointer;border:none;background:transparent;padding:9px 4px;margin-right:18px;font-size:12.5px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent}.cc-tab.active{color:var(--blue);border-bottom-color:var(--blue)}.cc-body{position:relative}.cc-preview iframe{width:100%;min-height:80px;border:none;display:block;background:var(--bg);transition:height .12s ease}.cc-code{position:relative}.cc-code pre{margin:0;padding:16px 18px;font-size:11.5px;line-height:1.6;color:#1f2937;background:#fafbfc;height:220px;overflow:auto;font-family:SF Mono,Consolas,Courier New,monospace;white-space:pre}.cc-copy{position:absolute;top:10px;right:10px;cursor:pointer;background:var(--indigo);color:#fff;border:none;border-radius:6px;padding:6px 12px;font-size:11.5px;font-weight:600}.cc-copy.copied{background:var(--green)}.builder-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px 18px;margin-bottom:24px}.builder-toolbar input[type=text]{flex:1;min-width:200px;border:1px solid var(--border);border-radius:8px;padding:9px 12px;font-size:13.5px;font-family:inherit}.toolbar-note{margin:-16px 0 24px 2px;font-size:12px;color:var(--muted-2)}.btn{cursor:pointer;border:none;border-radius:8px;padding:9px 16px;font-size:13px;font-weight:700}.btn-primary{background:var(--blue);color:#fff}.btn-primary.copied{background:var(--green)}.btn-ghost{background:var(--tint);color:var(--indigo)}.btn-danger{background:#fff;color:#c0392b;border:1px solid #f3d6d3}.btn:disabled{opacity:.45;cursor:not-allowed}.inline-insert-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:-12px 0 24px 2px}.inline-insert-label{font-size:12px;color:var(--muted);margin-right:2px}.chip{cursor:pointer;border:none;border-radius:999px;padding:4px 12px;font-size:11.5px;font-weight:700;color:#fff}.chip-blue{background:#009ada}.chip-green{background:#65bd60}.chip-orange{background:#f26322}.chip-pink{background:#ee3d96}.chip-indigo{background:#00013a}.chip-outline{background:#fff;color:var(--blue);border:1px solid var(--blue)}#inline-insert-status{font-size:11.5px;color:#c0392b;margin-left:4px}.builder-layout{display:grid;grid-template-columns:260px 1fr 320px;gap:20px;align-items:start}@media (max-width:1000px){.builder-layout{grid-template-columns:1fr}.canvas-wrap{order:-1}.palette,.blocklist{position:static;max-height:none}}@media (max-width:640px){.builder-toolbar{flex-direction:column;align-items:stretch}.builder-toolbar input[type=text]{min-width:0}.toolbar-note{margin-top:-8px}}.palette{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;position:sticky;top:78px}.palette h3{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-2);margin:14px 0 8px}.palette h3:first-child{margin-top:0}.palette-item{width:100%;text-align:left;cursor:pointer;border:1px solid var(--border);background:#fff;border-radius:8px;padding:9px 11px;font-size:12.5px;font-weight:600;color:var(--text);margin-bottom:6px;display:flex;align-items:center;justify-content:space-between}.palette-item:hover{border-color:var(--blue);color:var(--blue)}.palette-item .plus{color:var(--blue);font-weight:800}.canvas-wrap{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px;min-height:400px}.canvas-frame-shell{background:var(--bg);border-radius:10px;padding:16px;display:flex;justify-content:center}.canvas-frame-shell iframe{width:100%;max-width:600px;height:70vh;min-height:520px;border:1px solid var(--border);border-radius:8px;background:#fff}.canvas-empty{text-align:center;color:var(--muted);font-size:13.5px;padding:60px 20px}@media (max-width:640px){.canvas-wrap{padding:12px}.canvas-frame-shell{padding:8px}.canvas-frame-shell iframe{height:60vh;min-height:380px}}.blocklist{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;position:sticky;top:78px}.blocklist h3{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-2);margin:0 0 10px}.block-row{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:8px;padding:8px 10px;margin-bottom:6px;background:#fff}.block-row .drag-handle{cursor:grab;color:var(--muted-2);font-size:12px;line-height:1}.block-row .name{flex:1;font-size:12.5px;font-weight:600}.block-row button{border:none;background:var(--tint);cursor:pointer;border-radius:6px;width:24px;height:24px;font-size:12px;color:var(--indigo);line-height:1}.block-row button.remove{background:#fdecea;color:#c0392b}.block-row.dragging{opacity:.4}.block-row.drop-before{box-shadow:inset 0 2px 0 0 var(--blue)}.block-row.drop-after{box-shadow:inset 0 -2px 0 0 var(--blue)}.blocklist-empty{font-size:12.5px;color:var(--muted);padding:8px 2px}@media (max-width:640px){.palette,.blocklist{padding:12px}.block-row button{width:28px;height:28px}}footer.app-footer{max-width:1240px;margin:0 auto;padding:28px 24px 40px;text-align:center;border-top:1px solid var(--border)}footer.app-footer p{margin:0;font-size:12.5px;color:var(--muted-2)}footer.app-footer a{color:var(--blue);font-weight:600;text-decoration:none}footer.app-footer a:hover{text-decoration:underline}