:root{--app-bg:#f2f5f8;--app-ink:#192c3d;--app-muted:#596e80;--app-line:#dbe4eb;--app-card:#fff;--app-accent:#127b77;--app-nav:#101d2d;--app-good:#087766;--app-bad:#b34b38;--app-amber:#a26719}
.demo-page{background:var(--app-bg);color:var(--app-ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;font-size:14px;line-height:1.5;min-height:100vh}
.demo-page .container{width:min(1270px,calc(100% - 48px))}.demo-nav{background:#0c1b29;color:#d9e7ec;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:62px;padding:12px max(24px,calc((100vw - 1270px)/2));border-bottom:1px solid #2a4650}
.demo-nav .brand{color:#fff;letter-spacing:.11em;font-size:17px}.demo-nav nav{display:flex;gap:22px;align-items:center;flex-wrap:wrap}.demo-nav a{text-decoration:none;color:#d9e5ef;font-weight:650;font-size:13px}.demo-nav a:hover{color:#86e5ce}.demo-nav .nav-cta{background:#c8f1e6;color:#12332c;border-radius:7px;padding:9px 13px}
.d-label{font-size:11px;color:#35747c;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.d-overline{letter-spacing:.12em;font-weight:850;font-size:11px;color:#487c7d;text-transform:uppercase}.d-hero{padding:45px 0 28px}.d-hero h1{font-size:clamp(31px,3.6vw,48px);line-height:1.12;letter-spacing:-.048em;margin:10px 0 12px}.d-hero p{max-width:810px;color:#526779;font-size:16px;margin:0}.d-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:19px}.d-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;background:#fff;border:1px solid #bbcbd5;color:#234052;border-radius:9px;font-weight:750;padding:10px 15px;font:inherit;cursor:pointer;min-height:41px;text-decoration:none}.d-btn:hover{background:#edf7f5}.d-btn.primary{background:#126f6a;border-color:#126f6a;color:white;font-weight:750}.d-btn.primary:hover{background:#0c5955}.d-btn:disabled{opacity:.5;cursor:not-allowed}.d-btn.small{padding:6px 9px;min-height:33px;font-size:12px}
.d-intro{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin:14px 0 25px;padding:13px 16px;border:1px solid #c9dde4;border-radius:10px;background:#e8f2f5}.d-intro strong{color:#174454}.d-intro span{color:#496779;font-size:12px}.d-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:99px;font-size:11px;font-weight:800;background:#e6f4ec;color:#17644a;border:1px solid #c1e8d0}.d-chip.warn{background:#fff2de;color:#85521d;border-color:#f2d8ad}.d-chip.neutral{background:#eaf0f5;color:#455d73;border-color:#dbe3ed}
.d-layout{display:grid;grid-template-columns:minmax(0,1fr) 315px;gap:18px;align-items:start}.d-layout.equal{grid-template-columns:1fr 1fr}.d-panel{background:var(--app-card);border:1px solid var(--app-line);border-radius:13px;box-shadow:0 3px 16px #17304a08;overflow:hidden}.d-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #e8edf2;padding:17px 19px}.d-panel-head h2,.d-panel-head h3{font-size:16px;letter-spacing:-.025em;line-height:1.2;margin:0;color:#1b3040}.d-panel-body{padding:19px}.d-panel+.d-panel{margin-top:16px}.d-cardgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:17px}.d-metric{padding:19px;background:white;border-radius:12px;border:1px solid var(--app-line)}.d-metric label{margin:0;font-size:12px;color:#5b7385;font-weight:700}.d-metric b{display:block;font-size:28px;letter-spacing:-.04em;margin:5px 0 2px;font-variant-numeric:tabular-nums}.d-metric small{font-size:11px;color:#668191}.d-muted{color:#62798b}.d-small{font-size:12px}.d-numeric{font-variant-numeric:tabular-nums}.d-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.d-row.between{justify-content:space-between}.d-stack{display:grid;gap:12px}.d-table-wrap{overflow:auto;max-width:100%}.d-table{border-collapse:collapse;width:100%;text-align:left;min-width:490px;font-size:12px}.d-table th{background:#f4f7f9;color:#526b7e;font-size:11px;text-transform:uppercase;letter-spacing:.035em}.d-table th,.d-table td{padding:11px 12px;border-bottom:1px solid #e7edf2;white-space:nowrap}.d-table tr:last-child td{border:0}.d-pill{display:inline-block;padding:3px 8px;border-radius:99px;font-size:11px;font-weight:800;background:#e8f3f2;color:#0e7168}.d-pill.alert{background:#fff1e8;color:#9b4c27}.d-pill.neutral{background:#ecf1f6;color:#526a80}.d-field label{font-size:12px;font-weight:750;color:#4c6578;margin:0 0 5px;display:block}.d-field input,.d-field textarea,.d-field select{font:inherit;background:white;border:1px solid #cbd8e1;border-radius:8px;color:#203b4e;min-height:42px;padding:10px 11px;width:100%}.d-field textarea{min-height:95px;resize:vertical}.d-field small{color:#657d8b}.d-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.d-note{border-left:3px solid #2c9388;background:#f1f8f6;padding:11px 14px;color:#385868;border-radius:0 8px 8px 0;font-size:12px}.d-warning{border-left-color:#bd8541;background:#fff8ee}.d-buttonrow{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.d-feed{display:grid;gap:9px;max-height:350px;overflow:auto}.d-entry{background:#f6f9fb;padding:11px;border:1px solid #e2eaf0;border-radius:9px;font-size:12px}.d-entry strong{display:block;margin-bottom:3px}.d-entry small{color:#688094}.d-progress{height:12px;background:#e9eff1;border-radius:30px;overflow:hidden}.d-progress span{height:100%;display:block;background:linear-gradient(90deg,#2f8f8d,#70cbb1)}.d-bars{display:grid;gap:13px;margin-top:12px}.d-bar{display:grid;grid-template-columns:90px 1fr 88px;gap:11px;align-items:center;font-size:12px}.d-bar strong{text-align:right;font-variant-numeric:tabular-nums}.d-bar .d-progress{height:13px}.d-app-footer{padding:45px 0 38px;color:#6b7d8d}.d-app-footer a{color:#147a72}.d-result{border-radius:10px;padding:14px;background:#f4f8fa;border:1px solid #e0e9ef}.d-result h3{margin:0 0 7px;font-size:16px}.d-result ul{margin:7px 0;padding-left:17px}.d-result li{margin:6px 0}.d-quote{font-size:13px;border-left:3px solid #a3c9cc;background:#f7fbfc;padding:13px;line-height:1.6;margin:8px 0}.d-actions-stack{display:flex;gap:7px;flex-wrap:wrap}.d-kbd{border-radius:4px;background:#eff3f7;border:1px solid #cbd6df;padding:2px 5px;font-family:monospace}.d-check{display:inline-flex;align-items:center;gap:6px;margin:6px 0;font-size:12px;color:#526c7f}.d-check input{width:15px;height:15px;accent-color:#126f6a}.d-live{color:#107563;font-weight:760}.d-error{color:#ad4634;font-weight:700}.d-empty{color:#627b8c;padding:28px;text-align:center;background:#f7fafb;border:1px dashed #ccdce3;border-radius:10px}.d-display{font-size:31px;letter-spacing:-.03em;font-weight:800}.d-divider{height:1px;background:#e5edf1;margin:16px 0}
/* portfolio */
.portfolio-dark{background:#0a1523;color:#eff8f8}.portfolio-hero{padding:72px 0 60px;background:radial-gradient(ellipse at 70% 25%,#173e46,transparent 50%),#0a1523}.portfolio-hero h1{font-size:clamp(42px,6vw,75px);line-height:1.04;letter-spacing:-.06em;margin:13px 0}.portfolio-hero p{color:#bfd1d9;max-width:720px;font-size:18px}.portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;margin:26px 0 46px}.p-card{background:#fff;border:1px solid #dfe7ed;border-radius:16px;padding:26px;display:flex;flex-direction:column;gap:14px;color:#1f3646;min-height:264px;box-shadow:0 5px 20px #102a390a}.p-card .number{font:700 12px ui-monospace,monospace;color:#297d78}.p-card h2{font-size:25px;line-height:1.16;letter-spacing:-.04em;margin:0}.p-card p{color:#607686;margin:0}.p-card .d-buttonrow{margin-top:auto}.p-card a{color:#0a6d63;font-weight:760;text-decoration:none}.p-card a:hover{text-decoration:underline}.trust-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.trust-list>div{padding:22px;border-radius:14px;border:1px solid #dfe6ed;background:#fff}.trust-list h3{margin:4px 0 8px}.trust-list p{margin:0;color:#617586;font-size:13px}.d-summary{font-size:13px;line-height:1.7;color:#4d6476}.d-sticky{position:sticky;top:15px}.d-selected{border-color:#33a097!important;background:#f3faf8!important}.d-data-block{font:12px/1.6 ui-monospace,monospace;background:#172a37;color:#d7f3ed;border-radius:10px;padding:15px;white-space:pre-wrap;overflow-wrap:anywhere}.d-footnote{font-size:12px;color:#6f8493;margin:10px 0 0}
@media(max-width:1000px){.d-layout{grid-template-columns:1fr}.d-sticky{position:static}.d-cardgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.demo-nav{padding:14px;flex-direction:column;align-items:flex-start}.demo-nav nav{gap:12px}.demo-page .container{width:calc(100% - 28px)}.d-hero{padding:30px 0 18px}.d-hero h1{font-size:33px}.d-layout.equal,.d-fields,.portfolio-grid,.trust-list{grid-template-columns:1fr}.d-cardgrid{grid-template-columns:1fr 1fr}.d-metric{padding:13px}.d-metric b{font-size:23px}.d-bar{grid-template-columns:67px 1fr 72px;gap:5px;font-size:11px}.d-panel-body{padding:14px}.portfolio-hero{padding:49px 0}.portfolio-hero h1{font-size:44px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* R6 visual QA corrections */
.demo-page .container{margin-inline:auto}
.portfolio-hero h1{color:#f0f7fa}
.d-panel .d-panel-body>.d-field{min-width:0}
.d-field textarea{display:block}
.d-field textarea:focus-visible,.d-field input:focus-visible,.d-field select:focus-visible{outline:3px solid #9ce4d3;outline-offset:1px}