:root{--ink:#183238;--teal:#1f6668;--teal-dark:#174f51;--coral:#d96f5d;--cream:#fbf7ef;--paper:#fff;--sage:#dfeae4;--line:#d7dfdc;--muted:#5d6d6f;--radius:16px}*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--cream)}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--cream);line-height:1.65}a{color:var(--teal-dark)}.skip-link{position:absolute;left:-9999px;top:0}.skip-link:focus{left:1rem;top:1rem;z-index:1000;background:#fff;padding:.75rem 1rem}.container,.nav-wrap{width:min(1050px,90%);margin:auto}.site-header{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}.nav-wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem 0}.brand{font-weight:800;text-decoration:none;color:var(--ink);view-transition-name:site-brand}nav ul{display:flex;flex-wrap:wrap;gap:.35rem;list-style:none;padding:0;margin:0}nav a{display:block;text-decoration:none;padding:.55rem .8rem;border-radius:8px;color:var(--ink)}nav a:hover,nav a:focus-visible,nav a[aria-current=page]{background:var(--sage);color:var(--teal-dark)}.hero{background:var(--teal);color:#fff;padding:4.5rem 0 4rem;border-bottom:8px solid var(--coral)}.eyebrow{font-size:.82rem;text-transform:uppercase;letter-spacing:.14em;font-weight:700;color:#dceceb}h1{font-size:clamp(2.5rem,6vw,4.7rem);line-height:1.02;max-width:850px;margin:.45rem 0 1rem;view-transition-name:page-title}.hero p{max-width:760px;margin:0;font-size:1.12rem;color:#eef8f6}main section{padding:4rem 0}.section-title{font-size:clamp(1.8rem,4vw,2.7rem);line-height:1.15;margin:0 0 1rem;color:var(--teal-dark)}.lead{max-width:780px;font-size:1.06rem;color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2rem}.card{background:var(--paper);border:1px solid var(--line);border-top:5px solid var(--coral);border-radius:var(--radius);padding:1.5rem;box-shadow:0 8px 20px rgba(24,50,56,.06)}.card h3{margin-top:0;color:var(--teal-dark)}.actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}.button{display:inline-block;border:2px solid var(--teal);border-radius:9px;padding:.78rem 1.05rem;font:inherit;font-weight:700;cursor:pointer;text-decoration:none;background:var(--teal);color:#fff}.button:hover,.button:focus-visible{background:var(--teal-dark);border-color:var(--teal-dark)}.button.secondary{background:transparent;color:var(--teal-dark)}.code{overflow-x:auto;background:#20393e;color:#f7fbfa;border-radius:12px;padding:1.1rem;border-left:6px solid var(--coral)}.notice{background:var(--sage);border-left:5px solid var(--coral);padding:1rem 1.2rem;border-radius:0 10px 10px 0}.demo-shell{background:var(--sage);border:1px solid var(--line);border-radius:18px;padding:2rem;margin-top:2rem}.demo-card{max-width:650px;min-height:250px;margin:auto;padding:2rem;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 12px 25px rgba(24,50,56,.08);view-transition-name:demo-card}.demo-card.alt{background:var(--teal-dark);color:#fff;transform:translateY(8px)}.demo-card .status{display:inline-block;border-radius:999px;padding:.25rem .7rem;background:#f7ddd7;color:#8f4033;font-size:.84rem;font-weight:700}.demo-card.alt .status{background:#f0b4a8;color:#54271f}footer{background:var(--ink);color:#e6efed;padding:2rem 0;text-align:center}@view-transition{navigation:auto}::view-transition-old(root){animation:.7s ease both fade-out}::view-transition-new(root){animation:.85s ease both fade-in}::view-transition-old(page-title),::view-transition-new(page-title){animation-duration:.9s}::view-transition-old(demo-card){animation:.7s ease both fade-out}::view-transition-new(demo-card){animation:.85s ease both pop-in}@keyframes fade-out{to{opacity:0;transform:translateY(-8px)}}@keyframes fade-in{from{opacity:0;transform:translateY(10px)}}@keyframes pop-in{from{opacity:0;transform:scale(.96)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media(max-width:760px){.site-header{position:static}.nav-wrap{align-items:flex-start;flex-direction:column}nav ul{flex-direction:column;width:100%}nav a{padding:.7rem .8rem}.grid{grid-template-columns:1fr}.hero{padding:3.5rem 0}}