/* HC palette: ui/hc-ui/src/styles.css, accepted origin/main. */
:root {
  --surface: #151719;
  --surface-raised: #1c1f21;
  --surface-soft: #24282a;
  --surface-inset: #101214;
  --surface-overlay: rgba(18, 21, 22, 0.98);
  --line: #353a3d;
  --line-strong: #4b5356;
  --text: #f4f5f2;
  --text-muted: #bbc1bf;
  --text-dim: #858e8c;
  --text-field: #cbd0ce;
  --primary: #42b88d;
  --primary-dark: #27866a;
  --primary-soft: rgba(66, 184, 141, 0.1);
  --primary-soft-subtle: rgba(66, 184, 141, 0.065);
  --primary-line: rgba(66, 184, 141, 0.4);
  --accent: #55a8c2;
  --highlight: #d1b85b;
  --shadow-panel: 0 16px 40px rgba(0, 0, 0, 0.4);
  --shadow: rgba(0, 0, 0, 0.55);
  --bg: var(--surface-inset);
  --panel: var(--surface);
  --raised: var(--surface-raised);
  --muted: var(--text-muted);
  --dim: var(--text-dim);
  --font: 'Segoe UI', Arial, sans-serif;
  --display: 'Bahnschrift', 'Segoe UI', Arial, sans-serif;
  --mono: Consolas, monospace;
  --type-body: 1rem;
  --type-menu: .875rem;
  --type-caption: .8125rem;
  --type-label: .75rem;
  --reading-width: 68ch;
  color-scheme: dark;
  font-family: var(--font);
  font-size: 16px;
  background: var(--bg);
  color: var(--text);
}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--highlight);outline-offset:5px}svg.icon{width:21px;height:21px;flex-shrink:0;vertical-align:middle}kbd{font-family:var(--mono);font-size:.82rem;font-weight:500;display:inline-flex;align-items:center;justify-content:center;min-width:27px;padding:4px 7px;line-height:1.1;background:var(--surface-raised);border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:5px;color:var(--text)}code{font: .9em var(--mono);color:var(--accent);padding:3px 6px;background:var(--primary-soft);border-radius:4px}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--display);font-weight:600;text-wrap:balance;overflow-wrap:break-word}h1{font-size:clamp(2rem,3.5vw,3rem);letter-spacing:-.035em;line-height:1.13}h2{font-size:1.5rem;letter-spacing:-.025em}h3{font-size:1.16rem;letter-spacing:-.01em}p{line-height:1.6;color:var(--muted)}.site-header{position:sticky;top:0;z-index:20;height:78px;background:var(--surface-overlay);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}.header-inner{height:100%;max-width:1536px;padding:0 40px;margin:auto;display:flex;align-items:center;gap:26px}.brand{display:flex;align-items:center;gap:12px;white-space:nowrap;font-family:var(--display);font-size:1.12rem;letter-spacing:.02em}.brand img{border-radius:8px}.brand b{font-size:.8rem;font-weight:500;letter-spacing:.1em;color:var(--muted)}.header-divider{height:24px;width:1px;background:var(--line)}.header-active{align-self:stretch;display:flex;align-items:center;font-size:.9rem;font-weight:600;border-bottom:2px solid var(--primary);color:var(--primary);padding:0 5px}.search-wrap{position:relative;max-width:360px;width:100%;margin-left:auto}.search-box{display:flex;gap:10px;align-items:center;background:var(--panel);border:1px solid var(--line);padding:10px 12px;border-radius:7px;color:var(--muted)}.search-box input{min-width:0;width:100%;background:transparent;border:0;outline:none;color:var(--text);font-size:var(--type-menu)}.search-box:focus-within{border-color:var(--highlight)}.search-box input::placeholder{color:var(--muted)}.search-box kbd{font-size:.7rem;min-width:49px;color:var(--dim);padding:3px 5px}.search-box .icon{width:17px;height:17px}.preview-badge{font-size:.75rem;color:var(--muted);border:1px solid var(--line);padding:6px 9px;border-radius:5px;white-space:nowrap}.page-layout{max-width:1536px;margin:auto;padding:35px 40px 0;display:grid;grid-template-columns:235px minmax(0,1fr);gap:44px}.sidebar{position:sticky;top:110px;align-self:start;max-height:calc(100dvh - 128px);overflow-y:auto;scrollbar-width:thin;padding-right:4px}.site-label{display:flex;align-items:center;gap:12px;padding:5px 13px 25px;margin-bottom:14px;border-bottom:1px solid var(--line);font-weight:600}.site-label>.icon{color:var(--primary);width:25px;height:25px}.site-label small{display:block;margin-top:5px;letter-spacing:.12em;font:var(--type-label) var(--mono);color:var(--dim);text-transform:uppercase}.nav-link{display:flex;gap:11px;align-items:center;border:1px solid transparent;font-size:.875rem;padding:11px 12px;color:var(--muted);border-radius:6px;margin:2px 0}.nav-link .icon{width:18px;height:18px;color:var(--dim)}.nav-link:hover{color:var(--text);background:var(--panel)}.nav-link.active{color:var(--primary);background:var(--primary-soft);border-color:var(--primary-line)}.nav-link.active .icon{color:var(--primary)}.nav-group{margin-top:20px}.nav-group>p{font-size:var(--type-label);text-transform:uppercase;letter-spacing:.07em;color:var(--dim);padding:0 12px 8px;font-family:var(--mono)}.sidebar-note{margin:26px 12px 12px;padding-top:24px;border-top:1px solid var(--line)}.tiny-label{font:var(--type-label) var(--mono);letter-spacing:.07em;color:var(--dim);line-height:1.5;text-transform:uppercase}.sidebar-note p{font-size:.83rem;margin:10px 0 15px;line-height:1.6}.sidebar-note a{font-size:.79rem;color:var(--primary);display:flex;align-items:center;justify-content:space-between;gap:8px}.sidebar-note a .icon{width:15px}main{min-width:0}.breadcrumb{display:flex;align-items:center;gap:12px;font-size:.78rem;color:var(--dim);margin:8px 0 30px}.breadcrumb a{color:var(--muted)}.breadcrumb a:hover{color:var(--primary)}.category-label{text-transform:uppercase;display:flex;align-items:center;gap:9px;color:var(--accent);font:var(--type-label) var(--mono);letter-spacing:.07em;margin-bottom:18px}.category-label .icon{width:17px;height:17px}.home-heading{padding:10px 0 30px}.lede{font-size:1.0625rem;line-height:1.6;max-width:var(--reading-width);margin-top:18px;text-wrap:pretty}.start-card{display:flex;align-items:center;gap:21px;border:1px solid var(--primary-line);border-radius:9px;background:var(--primary-soft-subtle);padding:23px 25px;margin:2px 0 38px}.start-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:9px;background:var(--primary-soft);color:var(--primary);flex-shrink:0}.start-icon .icon{width:27px;height:27px}.start-card .tiny-label{color:var(--primary)}.start-card h2{font-size:1.25rem;margin:7px 0 4px}.start-card p{font-size:.88rem}.start-arrow{margin-left:auto;color:var(--primary)}.start-card:hover{border-color:var(--primary);background:var(--primary-soft)}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.section-heading h2{margin-top:7px}.count{font:var(--type-label) var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--dim);border:1px solid var(--line);border-radius:5px;padding:6px 9px}.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.guide-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;padding:22px 22px 18px;background:var(--panel);min-height:222px;transition:background .15s,border-color .15s}.guide-card:hover{background:var(--raised);border-color:var(--line-strong)}.card-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.card-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:7px;background:var(--surface-soft);color:var(--accent)}.card-arrow{width:17px!important;height:17px!important;color:var(--dim)}.guide-card h3{line-height:1.35}.guide-card>p{margin-top:9px;font-size:.9375rem;line-height:1.6;text-wrap:pretty;overflow-wrap:break-word}.card-tags{display:block;padding-top:20px;margin-top:auto;font-size:var(--type-caption);color:var(--dim);line-height:1.6}.quick-card{background:transparent;justify-content:center;border-style:dashed}.quick-card h3{font-size:1.35rem;margin:10px 0 21px}.key-samples{display:flex;gap:20px;margin-bottom:20px}.key-samples>span{display:flex;flex-direction:column;align-items:start;gap:9px;color:var(--muted);font-size:.72rem}.key-samples kbd{font-size:1rem;min-width:34px;height:34px}.inline-link{color:var(--primary);font-size:.9rem;line-height:1.5}.inline-link .icon{width:16px;height:16px;margin-left:5px}.inline-link:hover{text-decoration:underline}.bottom-tip{display:flex;align-items:center;gap:14px;margin:28px 0 10px;padding:21px 0;border-top:1px solid var(--line)}.bottom-tip>.icon{color:var(--dim)}.bottom-tip p{font-size:.84rem;line-height:1.6}.bottom-tip strong{color:var(--text);font-weight:600}.bottom-tip kbd{font-size:.7rem;padding:2px 5px;min-width:20px}.bottom-tip a{margin-left:auto;font-size:.81rem;color:var(--primary);white-space:nowrap}.bottom-tip a .icon{width:15px}footer{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--line);padding:23px 0 28px;margin-top:35px;color:var(--dim);font:var(--type-label) var(--mono);letter-spacing:.04em}footer a{font-family:var(--font);font-size:.8rem;letter-spacing:0}footer a:hover{color:var(--primary)}.footer-dot{padding:0 8px}.article-heading{padding:10px 0 32px;border-bottom:1px solid var(--line)}.quick-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.quick-tags>span{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:6px;background:var(--panel);padding:8px 12px;font-size:.78rem;color:var(--muted)}.quick-tags kbd{font-size:.75rem}.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 183px;gap:40px}.article-body{min-width:0}.article-section{padding:32px 0 8px;scroll-margin-top:104px}.article-section+.article-section{border-top:1px solid var(--line);margin-top:23px}.article-section h2{font-size:1.5rem;line-height:1.4;margin-bottom:19px}.section-anchor{opacity:0;color:var(--dim);font-size:1rem;margin-left:10px}.article-section h2:hover .section-anchor,.section-anchor:focus-visible{opacity:1}.article-section p{font-size:var(--type-body);line-height:1.6;max-width:var(--reading-width);margin-bottom:18px;overflow-wrap:break-word}.article-section strong{color:var(--text);font-weight:600}.steps{list-style:none;counter-reset:steps;margin:0;padding:0}.steps li{counter-increment:steps;position:relative;padding-left:49px;margin:26px 0}.steps li:before{content:counter(steps);position:absolute;left:0;top:0;width:30px;height:30px;background:var(--primary-soft);border:1px solid var(--primary-line);color:var(--primary);display:grid;place-items:center;border-radius:50%;font:.8rem var(--mono)}.steps strong{display:block;line-height:1.7}.steps p{margin:6px 0 0!important}.note{padding:20px 22px;border:1px solid var(--line-strong);border-left:3px solid var(--accent);border-radius:5px;background:var(--surface);margin:24px 0 12px}.note>strong{font-size:.9rem}.note p{font-size:var(--type-body);margin:8px 0 0;line-height:1.6}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:7px}table{width:100%;border-collapse:collapse;text-align:left;font-size:.875rem}th{padding:14px 17px;color:var(--dim);background:var(--panel);font-weight:500;font-size:var(--type-caption)}td{padding:13px 17px;border-top:1px solid var(--line);color:var(--muted);line-height:1.5}td:first-child{color:var(--text)}td kbd{white-space:nowrap}tbody tr:hover{background:var(--panel)}.article-section .caption{font-size:.8rem;margin-top:15px;color:var(--dim)}.toc{position:sticky;top:110px;align-self:start;padding:35px 0 0}.toc nav{margin-top:19px;border-left:1px solid var(--line);display:flex;flex-direction:column}.toc nav a{font-size:.81rem;line-height:1.55;color:var(--muted);padding:9px 0 9px 16px;margin-left:-1px;border-left:2px solid transparent}.toc nav a:hover{color:var(--primary);border-left-color:var(--primary)}.back-overview{display:block;margin-top:28px;padding-left:16px;color:var(--dim);font-size:.81rem}.example{padding:19px 22px;background:var(--panel);border:1px solid var(--line);border-radius:6px;margin:18px 0}.example>span{font:var(--type-label) var(--mono);text-transform:uppercase;color:var(--dim);letter-spacing:.08em}.example p{color:var(--text-field);margin:12px 0 0;font-size:var(--type-body)}.related{border-top:1px solid var(--line);margin-top:35px;padding-top:25px;display:grid;gap:12px}.related>a{display:flex;align-items:center;gap:12px;padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:6px;font-size:.9rem}.related>a:hover{border-color:var(--primary)}.related>a>.icon{color:var(--primary);width:18px}.related>a>.icon:last-child{margin-left:auto}.menu-toggle{display:none}.search-results{position:absolute;top:calc(100% + 9px);right:0;width:min(480px,calc(100vw - 32px));max-height:65vh;overflow:auto;border:1px solid var(--line-strong);background:var(--surface-raised);border-radius:8px;box-shadow:var(--shadow-panel);padding:8px}.search-results a{display:block;padding:13px;border-radius:5px}.search-results a:hover,.search-results a:focus{background:var(--primary-soft)}.search-results strong{display:block;font-size:.9rem}.search-results small{display:block;color:var(--primary);font-size:.73rem;margin-bottom:5px}.search-results p{font-size:.79rem;line-height:1.55;margin-top:6px}.search-results>.empty-search{padding:15px}.search-results>.search-summary{padding:7px 12px;font:.7rem var(--mono);color:var(--dim)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;left:15px;top:-70px;z-index:100;padding:12px;background:var(--primary-soft)}.skip-link:focus{top:12px}.noscript{padding:15px;color:var(--muted);text-align:center}main:focus{outline:none}#main{scroll-margin-top:105px}html{scroll-behavior:smooth}
@media(min-width:1600px){.header-inner{padding-left:48px;padding-right:48px}.page-layout{padding-left:48px;padding-right:48px;gap:54px}.guide-card{min-height:237px}.home-heading{padding-bottom:35px}}
@media(max-width:1250px){.header-inner{padding:0 28px;gap:22px}.page-layout{padding:28px 28px 0;grid-template-columns:218px minmax(0,1fr);gap:30px}.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.article-layout{grid-template-columns:minmax(0,1fr) 155px;gap:25px}.guide-card{min-height:210px;padding:21px}.bottom-tip{flex-wrap:wrap}.bottom-tip a{margin-left:35px}.preview-badge{display:none}}
@media(max-width:1000px){.article-layout{display:flex;flex-direction:column;gap:0}.toc{position:static;order:-1;padding:25px 0 0}.toc nav{flex-direction:row;flex-wrap:wrap;border:0;gap:6px 15px;margin-top:10px}.toc nav a{padding:5px 0;border:0}.toc .back-overview{display:none}.article-section{padding-top:25px}.brand b{display:none}.header-inner{gap:20px}.search-wrap{max-width:330px}}
@media(max-width:760px){.site-header{height:68px}.header-inner{padding:0 18px;gap:15px}.brand img{width:36px;height:36px}.brand>span,.header-divider,.header-active,.search-box kbd{display:none}.search-wrap{max-width:none}.search-box{padding:10px}.menu-toggle{display:flex;align-items:center;justify-content:center;background:var(--panel);border:1px solid var(--line);border-radius:6px;color:var(--text);width:40px;height:40px;flex-shrink:0}.page-layout{display:block;padding:22px 20px 0}.sidebar{display:none;position:fixed;top:68px;left:0;width:min(310px,90vw);z-index:30;background:var(--bg);padding:24px 20px;max-height:calc(100dvh - 68px);height:calc(100dvh - 68px);border-right:1px solid var(--line);box-shadow:15px 0 40px var(--shadow)}.sidebar.open{display:block}.breadcrumb{margin:0 0 25px}.home-heading{padding-top:0}.lede{font-size:1rem}.desktop-break{display:none}.start-card{padding:20px 17px;gap:15px;margin-bottom:30px}.start-card h2{font-size:1.14rem}.start-card p{font-size:.81rem}.start-icon{width:39px;height:39px}.start-arrow{display:none}.section-heading{gap:10px}.section-heading h2{font-size:1.35rem}.card-grid{gap:12px}.guide-card{padding:17px;min-height:235px}.guide-card h3{font-size:1.08rem}.guide-card>p{font-size:.9375rem}.card-tags{font-size:var(--type-caption)}.key-samples{gap:13px;flex-wrap:wrap}.quick-card h3{font-size:1.25rem}.article-heading{padding-top:0}.quick-tags{gap:7px}.quick-tags>span{padding:7px 9px;font-size:.75rem}.article-section h2{font-size:1.4rem}.article-section p{font-size:var(--type-body)}.table-wrap{margin:0 -2px}td,th{padding:12px 10px}.steps li{padding-left:42px}.bottom-tip{align-items:start}.bottom-tip>p{flex:1}.bottom-tip>a{margin-left:35px}footer{font-size:var(--type-label);gap:12px;flex-wrap:wrap}.search-results{right:-55px}}
@media(max-width:430px){.card-grid{grid-template-columns:1fr}.guide-card{min-height:190px;padding:21px}.card-title{margin-bottom:15px}.card-tags{padding-top:17px}.guide-card>p{font-size:.9375rem}.quick-card{min-height:210px}.key-samples{gap:26px}.start-icon{display:none}h1{font-size:2.15rem}.count{font-size:var(--type-label);padding:5px 7px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Reading and demo additions retain the HC palette and existing page layout. */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.sidebar,.search-results{overscroll-behavior:contain}
button,a{touch-action:manipulation}
.not-found{max-width:720px;margin:12vh auto;padding:28px}
.not-found p{margin:22px 0}
.inline-link{text-decoration:underline;text-underline-position:from-font;text-decoration-thickness:from-font;text-underline-offset:.2em;text-decoration-skip-ink:auto}
.nav-link,.toc nav a,.related>a{overflow-wrap:break-word}
.article-section>p:last-child{margin-bottom:0}
.search-summary{text-transform:uppercase}
.phone-showcase{padding:28px 0 8px;scroll-margin-top:100px}
.demo-heading{display:flex;justify-content:space-between;gap:20px;align-items:start;margin-bottom:20px}
.demo-heading h2{font-size:1.5rem;line-height:1.4;margin-bottom:8px}
.demo-heading p{max-width:52ch;font-size:var(--type-body);text-wrap:pretty}
.demo-heading>.inline-link{flex-shrink:0;margin-top:7px}
.phone-demo-frame{display:block;width:100%;height:840px;border:1px solid var(--line);border-radius:9px;background:var(--panel)}
@media(max-width:760px){.search-box input{font-size:16px}.demo-heading{flex-direction:column;gap:8px}.phone-demo-frame{height:800px}.toc nav a{font-size:var(--type-menu);padding:7px 0}.article-section .caption{font-size:var(--type-caption)}}
@media(max-width:430px){.phone-demo-frame{height:760px}.category-label{line-height:1.5}.brand{flex-shrink:0}}

.feature-image { margin: 28px 0 8px; overflow: hidden; border: 1px solid var(--line, #343a3d); border-radius: 10px; background: #151719; }
.feature-image-link { display: block; cursor: zoom-in; }
.feature-image img { display: block; width: 100%; height: auto; }
.feature-image figcaption { display: flex; align-items: flex-start; justify-content: flex-end; gap: 16px; padding: 11px 16px; font-size: 13px; line-height: 1.6; }

.feature-image figcaption a { flex-shrink: 0; color: #65c7a5; text-decoration: underline; text-underline-offset: 3px; }
.feature-image a:focus-visible { outline: 2px solid #65c7a5; outline-offset: -3px; }
@media (max-width: 520px) { .feature-image figcaption { flex-direction: column; gap: 10px; padding: 13px; } }

.website-watermark { position: relative; isolation: isolate; }
.website-watermark::after { content: ''; position: absolute; left: 1%; bottom: 1.5%; width: clamp(24px, 4%, 64px); aspect-ratio: 1; background: url('./hc-logo.png') center / contain no-repeat; opacity: .28; mix-blend-mode: screen; pointer-events: none; z-index: 1; }
.image-viewer { background: #101214; }
.image-viewer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 20px; min-height: 64px; border-bottom: 1px solid var(--line); }
.image-viewer-toolbar a { color: var(--primary); }
.image-viewer-toolbar label { display: flex; align-items: center; gap: 8px; white-space: nowrap; cursor: pointer; font-size: 14px; }
.image-viewer-toolbar input { width: 18px; height: 18px; accent-color: var(--primary); }
.image-viewer .image-viewer-scroll { display: flex; width: 100%; max-width: none; height: calc(100dvh - 64px); min-height: 240px; padding: 0; margin: 0; overflow: auto; }
.image-viewer-frame { width: min(100%, var(--image-width)); max-width: 100%; flex-shrink: 0; margin: auto; }
.image-viewer-frame > img { display: block; width: 100%; height: auto; }
.image-viewer:has(#actual-size:checked) .image-viewer-frame { width: var(--image-width); max-width: none; }