body { margin:0; } .gallery { min-height:100vh; padding:0 32px; } main { max-width:1080px; margin:auto; }
main > nav { min-height:90px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--ng-border); } main > nav strong { display:flex; align-items:center; gap:12px; letter-spacing:1.4px; font-size:13px; } .brand-icon { display:grid; place-items:center; background:var(--ng-primary); color:var(--ng-surface); height:32px; width:32px; font-size:21px; border-radius:4px; }
.row { display:flex; align-items:center; flex-wrap:wrap; gap:16px; } .hero { padding:42px 0 32px; } .eyebrow { color:var(--ng-primary); font-size:11px; letter-spacing:2px; font-weight:700; } h1 { font-size:42px; line-height:1.12; font-weight:600; letter-spacing:-1.3px; margin:18px 0; } .hero>p:last-child { color:var(--ng-muted); max-width:640px; line-height:1.7; }
.panel { border:1px solid var(--ng-border); border-radius:6px; background:var(--ng-surface); padding:24px 28px; margin-bottom:20px; } .panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:24px; } h2 { font-size:18px; font-weight:600; margin:0; } .tag { font-size:10px; letter-spacing:1px; color:var(--ng-muted); background:var(--ng-subtle); padding:5px 8px; border-radius:4px; }
.fields { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:24px; } .preferences { margin:12px 0 24px; gap:32px; } .actions { padding-top:20px; border-top:1px solid var(--ng-border); } .info { font-size:22px; padding:0 8px; color:var(--ng-muted); } .panel>.ng-tabs { margin-top:12px; } .ng-tabs p { margin:0; color:var(--ng-muted); } .page-footer { display:flex; justify-content:space-between; padding:12px 0 28px; font-size:10px; letter-spacing:1.4px; color:var(--ng-muted); } .notice { margin-bottom:20px; } dl { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0; } dt { color:var(--ng-muted); } dd { margin:0; }
@media(max-width:640px) { .gallery { padding:0 16px; } main > nav { flex-wrap:wrap; padding:20px 0; } h1 { font-size:32px; } .fields { grid-template-columns:1fr; } .panel { padding:20px; } .tag { display:none; } }
.workspace-layout { display:grid;grid-template-columns:230px minmax(0,1fr);gap:20px; }.workspace-layout>.panel { padding:20px; }.workspace-layout aside h2 { margin-bottom:18px; }.workspace-main { min-width:0; }.data-hint { color:var(--ng-muted);font-size:12px; }.data-notice { color:var(--ng-primary); }
@media(max-width:900px){.workspace-layout{grid-template-columns:1fr;}}

.demo-code{background:#15243a;color:#e3edf9;padding:20px;border-radius:6px;overflow:auto;font:14px/1.6 ui-monospace,monospace}

.syntax-comment{color:#a4b4c9;font-style:italic}.syntax-string{color:#ace4ae}.syntax-keyword{color:#c4a7ff}.syntax-tag,.syntax-type{color:#7dd3fc}.syntax-attribute,.syntax-function{color:#ffd08a}.syntax-number{color:#ffba8a}.syntax-punctuation{color:#cbd5e1}