/* ==========================================================================
   Redesign v2 (14 Nov 2026), from the React Bits audit (docs/redesign-audit).
   Homepage sections, React Bits style cards, full-width library and design
   pages. Content is unchanged; only presentation lives here.
   ========================================================================== */

/* ---------- shared shells ---------- */
.hb-shell, .hs__shell { width:100%; max-width:1560px; margin-inline:auto; padding-inline:clamp(16px, 3vw, 44px); }
.hb-sec { padding:clamp(64px, 7vw, 112px) 0 0; }
.hb-sec--end { padding-bottom:clamp(48px, 6vw, 96px); }
.hb-h2 { font-family:var(--font-heading); font-weight:var(--w-bold); font-size:clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); line-height:1.12; letter-spacing:-.03em; margin:0 0 1.6rem; }
.hb-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem 2rem; flex-wrap:wrap; margin-bottom:1.6rem; }
.hb-head .hb-h2 { margin:0; }
.hb-sub { margin:.7rem 0 0; max-width:44rem; color:var(--color-muted); font-size:var(--size-body); line-height:1.6; }
.hb-more { display:inline-flex; align-items:center; gap:.45rem; min-height:44px; color:var(--color-secondary); font-weight:var(--w-semibold); text-decoration:none; }
.hb-more svg { transition:transform var(--dur-base) var(--ease-out); }
.hb-more:hover { color:var(--color-foreground); }
.hb-more:hover svg { transform:translateX(3px); }

/* ---------- buttons ---------- */
.hs-btn { gap:.55rem; min-height:48px; padding:0 1.35rem; border-radius:12px; font-weight:var(--w-semibold); }
.hs-btn svg { transition:transform var(--dur-base) var(--ease-out); }
.hs-btn:hover svg { transform:translateX(3px); }
.hs-btn--light { background:var(--color-foreground); color:var(--color-background); }
.hs-btn--light:hover { box-shadow:0 10px 28px -12px var(--color-foreground); }
.hs-btn--dark { background:var(--color-surface-alt); color:var(--color-foreground); box-shadow:inset 0 0 0 1px var(--color-glass-border); }
.hs-btn--dark:hover { background:var(--color-surface-hover); }

/* ---------- 1. hero ---------- */
.hs { position:relative; padding:calc(var(--head-clear) - .4rem) 0 0; }
.hs__badge { display:inline-flex; align-items:center; gap:.6rem; min-height:36px; padding:4px 12px 4px 4px; border-radius:10px; text-decoration:none;
	color:var(--color-foreground); font-size:.95rem; font-weight:var(--w-semibold); background:var(--color-glass); box-shadow:inset 0 0 0 1px var(--color-glass-border); }
.hs__badge span { padding:3px 9px; border-radius:7px; background:var(--color-foreground); color:var(--color-background); font-size:.85rem; }
.hs__badge i { font-style:normal; color:var(--color-muted); transition:transform var(--dur-base) var(--ease-out); }
.hs__badge:hover i { transform:translateX(3px); }
.hs__top { display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem 3rem; flex-wrap:wrap; margin:1.4rem 0 1.8rem; }
.hs__title { font-family:var(--font-heading); font-weight:var(--w-bold); font-size:clamp(2.3rem, 1.4rem + 2.9vw, 4rem); line-height:1.05; letter-spacing:-.04em; margin:0 0 1.6rem; max-width:15ch; }
.hs__title span { color:var(--color-accent); }
.hs__cta { display:flex; flex-wrap:wrap; gap:.7rem; }
.hs__lede { max-width:30rem; margin:0; color:var(--color-secondary); font-size:var(--size-body-lg); line-height:1.55; }

.hs__stage { position:relative; isolation:isolate; overflow:hidden; height:clamp(460px, 46vw, 680px); border-radius:20px;
	background:#0b1220; box-shadow:inset 0 0 0 1px var(--color-glass-border); }
:root[data-theme="light"] .hs__stage { background:#e9eef6; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .hs__stage { background:#e9eef6; } }
.hs__field { position:absolute; inset:-20%; z-index:-1; pointer-events:none; }
.hs__field i { position:absolute; border-radius:50%; will-change:transform; animation:hs-drift 18s ease-in-out infinite alternate; }
.hs__field i:nth-child(1) { width:62%; height:72%; left:4%; top:22%; background:radial-gradient(closest-side, rgba(143,180,227,.55), rgba(143,180,227,0)); }
.hs__field i:nth-child(2) { width:58%; height:66%; left:42%; top:-4%; background:radial-gradient(closest-side, rgba(255,122,128,.42), rgba(255,122,128,0)); animation-duration:22s; animation-delay:-6s; }
.hs__field i:nth-child(3) { width:52%; height:60%; left:30%; top:48%; background:radial-gradient(closest-side, rgba(167,139,250,.45), rgba(167,139,250,0)); animation-duration:26s; animation-delay:-11s; }
@keyframes hs-drift { 0% { transform:translate3d(0,0,0) scale(1); } 50% { transform:translate3d(6%, -5%, 0) scale(1.08); } 100% { transform:translate3d(-5%, 6%, 0) scale(.96); } }
.hs__stage.is-off .hs__field i { animation-play-state:paused; }
.hs__dots { position:absolute; inset:0; z-index:-1; opacity:.5; pointer-events:none;
	background-image:radial-gradient(rgba(255,255,255,.22) 1px, transparent 1.2px); background-size:22px 22px;
	-webkit-mask-image:radial-gradient(ellipse 70% 60% at 70% 30%, #000, transparent 70%); mask-image:radial-gradient(ellipse 70% 60% at 70% 30%, #000, transparent 70%); }
:root[data-theme="light"] .hs__dots { background-image:radial-gradient(rgba(15,27,45,.18) 1px, transparent 1.2px); }

/* Frosted windows (shared with the "copy the prompt" split). */
.hs-win { position:absolute; display:flex; flex-direction:column; overflow:hidden; border-radius:14px;
	background:rgba(13,21,36,.72); box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px rgba(255,255,255,.09), 0 30px 60px -24px rgba(0,0,0,.65);
	-webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3); color:#EEF3F9; }
:root[data-theme="light"] .hs-win { background:rgba(255,255,255,.78); color:#0F1B2D; box-shadow:inset 0 0 0 1px rgba(15,27,45,.10), 0 30px 60px -28px rgba(15,27,45,.35); }
.hs-win__t { flex:none; padding:.55rem .9rem; text-align:center; font-size:.85rem; color:rgba(238,243,249,.62); border-bottom:1px solid rgba(255,255,255,.07); }
:root[data-theme="light"] .hs-win__t { color:#5A6478; border-color:rgba(15,27,45,.08); }
.hs-win .sw__bar { border-color:rgba(255,255,255,.08); }
.hs-win--site { left:6%; top:7%; width:58%; }
.hs-win--site .sw__stage { aspect-ratio:16/10; }
.hs-win--prompt { right:5%; top:9%; width:32%; }
.hs-win__body { display:flex; gap:.7rem; padding:.9rem 1rem 1rem; min-height:7.2rem; }
.hs-win__k { flex:none; font-family:var(--font-heading); font-weight:var(--w-bold); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--color-accent); padding-top:.2rem; }
.hs-win .sw__text { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.9rem; line-height:1.6; color:inherit; }
.hs-win--steps { right:9%; bottom:9%; width:30%; }
.hs-steps { list-style:none; margin:0; padding:.45rem; display:grid; gap:4px; }
.hs-steps li { display:flex; align-items:center; gap:.65rem; padding:.55rem .7rem; border-radius:9px; font-weight:var(--w-semibold); font-size:.95rem; transition:background .35s var(--ease-out); }
.hs-steps li i { width:10px; height:10px; border-radius:50%; background:rgba(143,180,227,.35); box-shadow:0 0 0 3px rgba(143,180,227,.12); transition:background .35s, box-shadow .35s; }
.hs-steps li span { margin-left:auto; font-family:ui-monospace, Menlo, Consolas, monospace; font-weight:400; font-size:.8rem; color:rgba(238,243,249,.55); }
:root[data-theme="light"] .hs-steps li span { color:#5A6478; }
.hs-steps li.is-done { background:rgba(255,255,255,.06); }
:root[data-theme="light"] .hs-steps li.is-done { background:rgba(15,27,45,.05); }
.hs-steps li.is-done i { background:#2dd4bf; box-shadow:0 0 0 3px rgba(45,212,191,.18); }
@media (max-width:980px) {
	.hs__stage { height:auto; padding:16px; }
	.hs-win { position:relative; left:auto; right:auto; top:auto; bottom:auto; width:auto; }
	.hs-win--prompt, .hs-win--steps { display:none; }
}

/* ---------- 2. what's inside bento ---------- */
.hb-bento { display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:16px; }
.hb-3 { grid-column:span 3; } .hb-4 { grid-column:span 4; } .hb-5 { grid-column:span 5; }
@media (max-width:1000px) { .hb-bento { grid-template-columns:repeat(2, minmax(0,1fr)); } .hb-3, .hb-4, .hb-5 { grid-column:span 1; } }
@media (max-width:640px) { .hb-bento { grid-template-columns:minmax(0,1fr); } }

.hb-card { display:flex; flex-direction:column; gap:.3rem; padding:6px 6px 1rem; border-radius:var(--r-xl); text-decoration:none; color:var(--color-foreground);
	background:var(--color-surface); box-shadow:var(--edge-highlight), inset 0 0 0 1px var(--color-hairline);
	transition:transform var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.hb-card:hover { transform:translateY(-2px); background:var(--color-surface-hover); }
.hb-card > b { padding:.55rem .65rem 0; font-family:var(--font-heading); font-weight:var(--w-bold); font-size:1.05rem; }
.hb-card > span:not(.hb-well) { padding:0 .65rem; color:var(--color-muted); font-size:var(--size-micro); line-height:1.5; }
.hb-well { position:relative; display:block; height:176px; overflow:hidden; border-radius:12px; background:var(--color-surface-alt); box-shadow:inset 0 0 0 1px var(--color-hairline); }
.hb-well img { width:100%; height:100%; object-fit:cover; display:block; }

/* marquee of section names */
.hb-well--marquee { display:flex; flex-direction:column; justify-content:center; gap:12px;
	-webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.hb-mq { overflow:hidden; }
.hb-mq > span { display:flex; gap:10px; width:max-content; animation:hb-mq 38s linear infinite; }
.hb-mq--rev > span { animation-direction:reverse; animation-duration:44s; }
.hb-mq em { font-style:normal; white-space:nowrap; padding:.45rem .8rem; border-radius:9px; font-size:.95rem; color:var(--color-secondary);
	background:var(--color-surface); box-shadow:inset 0 0 0 1px var(--color-glass-border); }
@keyframes hb-mq { to { transform:translateX(-50%); } }
.hb-card:hover .hb-mq > span { animation-play-state:paused; }
/* component icons */
.hb-well--icons { display:flex; align-items:center; justify-content:center; gap:14px; }
.hb-well--icons i { display:block; width:38px; height:38px; border-radius:11px; background:var(--color-surface); box-shadow:inset 0 0 0 1px var(--color-glass-border);
	transition:transform .4s var(--ease-out); }
.hb-well--icons .i2 { width:54px; border-radius:99px; background:linear-gradient(90deg, var(--color-primary) 50%, var(--color-surface) 50%); }
.hb-well--icons .i3 { border-radius:50%; background:radial-gradient(circle at 35% 35%, #FF7A80, #a78bfa); }
.hb-well--icons .i5 { width:28px; height:28px; border-radius:50%; }
.hb-card:hover .hb-well--icons i:nth-child(odd) { transform:translateY(-6px); }
.hb-card:hover .hb-well--icons i:nth-child(even) { transform:translateY(6px); }
/* mini sites */
.hb-well--sites { display:flex; align-items:flex-end; justify-content:center; gap:10px; padding:22px 16px 0; }
.hb-well--sites i { flex:1; height:80%; border-radius:9px 9px 0 0; background:linear-gradient(var(--color-surface) 0 18%, color-mix(in srgb, var(--color-primary) 30%, var(--color-surface)) 18% 55%, var(--color-surface) 55%);
	box-shadow:inset 0 0 0 1px var(--color-glass-border); transition:transform .4s var(--ease-out); }
.hb-well--sites i:nth-child(2) { height:100%; background:linear-gradient(var(--color-surface) 0 15%, color-mix(in srgb, #FF7A80 32%, var(--color-surface)) 15% 50%, var(--color-surface) 50%); }
.hb-card:hover .hb-well--sites i { transform:translateY(-6px); }
/* devices */
.hb-well--devices { display:flex; align-items:center; justify-content:center; gap:16px; }
.hb-well--devices i { display:block; border-radius:8px; background:var(--color-surface); box-shadow:inset 0 0 0 2px var(--color-input-border); transition:box-shadow .3s, transform .4s var(--ease-out); }
.hb-well--devices .d1 { width:120px; height:78px; } .hb-well--devices .d2 { width:62px; height:84px; } .hb-well--devices .d3 { width:36px; height:66px; border-radius:9px; }
.hb-card:hover .hb-well--devices i { box-shadow:inset 0 0 0 2px var(--color-primary); }
.hb-card:hover .hb-well--devices .d2 { transform:translateY(-6px); }
/* prompt */
.hb-well--prompt { display:flex; align-items:center; gap:18px; padding:0 22px; }
.hb-pl { flex:1; display:grid; gap:9px; }
.hb-pl em { display:block; height:9px; border-radius:5px; background:var(--color-input-border); opacity:.55; }
.hb-pl em:nth-child(2) { width:86%; } .hb-pl em:nth-child(3) { width:70%; } .hb-pl em:nth-child(4) { width:52%; }
.hb-pc { flex:none; padding:.6rem .9rem; border-radius:10px; font-weight:var(--w-semibold); font-size:.95rem; background:var(--color-accent); color:var(--color-on-accent); transition:transform .3s var(--ease-out); }
.hb-card:hover .hb-pc { transform:scale(1.05); }
/* stacked showcase thumbnails */
.hb-well--stack img { position:absolute; width:68%; height:auto; aspect-ratio:16/10; border-radius:9px; box-shadow:0 14px 28px -12px rgba(0,0,0,.6); transition:transform .45s var(--ease-out); }
.hb-well--stack img:nth-child(1) { left:8%; top:16%; transform:rotate(-5deg); }
.hb-well--stack img:nth-child(2) { left:20%; top:24%; transform:rotate(2deg); }
.hb-well--stack img:nth-child(3) { left:30%; top:32%; transform:rotate(6deg); }
.hb-card:hover .hb-well--stack img:nth-child(1) { transform:translate(-10px,-4px) rotate(-8deg); }
.hb-card:hover .hb-well--stack img:nth-child(3) { transform:translate(10px,4px) rotate(9deg); }

/* ---------- 3. see them in action ---------- */
.hb-live { display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:16px; }
.hb-live__cell { min-width:0; }
.hb-live__cell--0 { grid-column:span 7; } .hb-live__cell--1 { grid-column:span 5; }
.hb-live__cell--2 { grid-column:span 4; } .hb-live__cell--3 { grid-column:span 5; } .hb-live__cell--4 { grid-column:span 3; }
.hb-live__cell .entry { height:100%; }
.hb-live__cell--0 .pv--card .pv__stage, .hb-live__cell--1 .pv--card .pv__stage { height:clamp(240px, 22vw, 340px); }
@media (max-width:1000px) { .hb-live { grid-template-columns:repeat(2, minmax(0,1fr)); } .hb-live__cell { grid-column:span 1 !important; } .hb-live__cell--0 { grid-column:span 2 !important; } }
@media (max-width:640px) { .hb-live { grid-template-columns:minmax(0,1fr); } .hb-live__cell, .hb-live__cell--0 { grid-column:auto !important; } }

/* ---------- 4. copy the prompt ---------- */
.hb-split { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem, 5vw, 5rem); align-items:center; }
.hb-split__copy p { color:var(--color-muted); font-size:var(--size-body); margin:-.6rem 0 1.2rem; }
.hb-steps { list-style:none; counter-reset:st; margin:0 0 1.6rem; padding:0; display:grid; gap:.9rem; }
.hb-steps li { counter-increment:st; position:relative; padding-left:2.6rem; color:var(--color-muted); line-height:1.55; }
.hb-steps li::before { content:counter(st); position:absolute; left:0; top:0; width:28px; height:28px; display:grid; place-items:center; border-radius:8px;
	font-weight:var(--w-bold); font-size:.9rem; color:var(--color-foreground); background:var(--color-surface-alt); box-shadow:inset 0 0 0 1px var(--color-glass-border); }
.hb-steps b { display:block; color:var(--color-foreground); }
.hb-split__art { position:relative; min-height:440px; }
.hb-split__art .hs-win { position:absolute; }
.hb-win--term { right:0; top:0; width:66%; }
.hb-term { padding:.9rem 1rem 1rem; font-family:ui-monospace, Menlo, Consolas, monospace; font-size:.9rem; line-height:1.75; }
.hb-term p { margin:0; } .hb-term span { color:var(--color-accent); } .hb-term .ok { color:#2dd4bf; }
:root[data-theme="light"] .hb-term .ok { color:#0F766E; }
.hb-win--code { left:0; bottom:0; width:82%; }
.hb-code { margin:0; padding:.7rem 0 .9rem; list-style:none; counter-reset:ln; font-family:ui-monospace, Menlo, Consolas, monospace; font-size:.88rem; line-height:1.75; }
.hb-code li { counter-increment:ln; padding:0 1rem 0 3rem; position:relative; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hb-code li::before { content:counter(ln); position:absolute; left:0; width:2.2rem; text-align:right; color:rgba(238,243,249,.38); }
:root[data-theme="light"] .hb-code li::before { color:#5A6478; }
@media (max-width:900px) { .hb-split { grid-template-columns:minmax(0,1fr); } .hb-split__art { min-height:400px; } }

/* ---------- 6. section types ---------- */
.hb-types { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:16px; }
.hb-type { grid-column:span 2; }
.hb-type--big { grid-column:span 3; }
.hb-type .hb-well { height:170px; }
.hb-type--big .hb-well { height:240px; }
.hb-type .hb-well img { object-position:top center; transition:transform .5s var(--ease-out); }
.hb-type:hover .hb-well img { transform:scale(1.04); }
.hb-type > b { display:flex; justify-content:space-between; align-items:center; padding:.6rem .65rem 0; }
.hb-type > b i { font-style:normal; color:var(--color-muted); transition:transform var(--dur-base) var(--ease-out), color var(--dur-fast); }
.hb-type:hover > b i { transform:translate(2px,-2px); color:var(--color-foreground); }
@media (max-width:1000px) { .hb-types { grid-template-columns:repeat(2, minmax(0,1fr)); } .hb-type, .hb-type--big { grid-column:span 1; } .hb-type--big .hb-well { height:170px; } }
@media (max-width:560px) { .hb-types { grid-template-columns:minmax(0,1fr); } }

/* ---------- 7. questions ---------- */
.hb-faq { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem, 5vw, 5rem); align-items:start; }
.hb-faq__copy p { color:var(--color-muted); font-size:var(--size-body); line-height:1.6; margin:-.6rem 0 1.4rem; }
.hb-faq__list { display:grid; gap:10px; }
.hb-faq__list details { border-radius:var(--r-lg); background:var(--color-surface); box-shadow:var(--edge-highlight), inset 0 0 0 1px var(--color-hairline); }
.hb-faq__list summary { display:flex; justify-content:space-between; align-items:center; gap:1rem; min-height:56px; padding:.6rem 1.1rem; cursor:pointer; list-style:none;
	font-weight:var(--w-semibold); color:var(--color-foreground); }
.hb-faq__list summary::-webkit-details-marker { display:none; }
.hb-faq__list summary::after { content:"+"; font-size:1.3rem; color:var(--color-muted); transition:transform var(--dur-base) var(--ease-out); }
.hb-faq__list details[open] summary::after { transform:rotate(45deg); }
.hb-faq__list details p { margin:0; padding:0 1.1rem 1rem; color:var(--color-muted); line-height:1.6; }
.hb-faq__list summary:focus-visible { outline:2px solid var(--color-ring); outline-offset:2px; border-radius:var(--r-lg); }
@media (max-width:900px) { .hb-faq { grid-template-columns:minmax(0,1fr); } }

/* ---------- 8. journal ---------- */
.hb-journal { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.hb-jcard .hb-well { height:auto; aspect-ratio:16/10; }
.hb-jcard .hb-well img { transition:transform .5s var(--ease-out); }
.hb-jcard:hover .hb-well img { transform:scale(1.03); }
.hb-jcard__tag { padding:.6rem .65rem 0 !important; }
.hb-jcard > b { padding-top:.2rem; line-height:1.3; }
@media (max-width:900px) { .hb-journal { grid-template-columns:minmax(0,1fr); } }

/* ---------- 9. closing card ---------- */
.hb-end { position:relative; isolation:isolate; overflow:hidden; text-align:center; padding:clamp(56px, 7vw, 96px) 24px clamp(120px, 14vw, 200px); border-radius:24px;
	background:var(--color-surface); box-shadow:var(--edge-highlight), inset 0 0 0 1px var(--color-hairline); }
.hb-end__title { font-family:var(--font-heading); font-weight:var(--w-bold); font-size:clamp(1.8rem, 1.2rem + 2vw, 3rem); letter-spacing:-.035em; line-height:1.1; margin:0 auto .9rem; max-width:20ch; }
.hb-end p { max-width:36rem; margin:0 auto 1.6rem; color:var(--color-muted); line-height:1.6; }
.hb-end .hs__cta { justify-content:center; }
.hb-end__glow { position:absolute; inset:auto -10% -45% -10%; height:90%; z-index:-1; pointer-events:none; }
.hb-end__glow i { position:absolute; inset:0; border-radius:50%; background:radial-gradient(closest-side, rgba(255,122,128,.45), transparent); animation:hs-drift 16s ease-in-out infinite alternate; }
.hb-end__glow i:nth-child(2) { left:30%; background:radial-gradient(closest-side, rgba(143,180,227,.45), transparent); animation-duration:21s; }

@media (prefers-reduced-motion:reduce) {
	.hs__field i, .hb-mq > span, .hb-end__glow i { animation:none; }
	.hb-card, .hb-well img, .hb-well i, .hb-pc { transition:none; }
}

/* ==========================================================================
   Cards, React Bits style: an outer tile around a rounded media well; the
   Live label and device buttons float over the preview.
   ========================================================================== */
.entry { padding:6px; border:0; border-radius:var(--r-xl); background:var(--color-surface); box-shadow:var(--edge-highlight), inset 0 0 0 1px var(--color-hairline); }
.entry:hover { transform:translateY(-2px); background:var(--color-surface-hover); box-shadow:var(--edge-highlight), inset 0 0 0 1px var(--color-glass-border); }
.entry .pv--card { position:relative; border-radius:12px; overflow:hidden; border:0; background:var(--color-surface-alt); }
.entry .pv--card .pv__bar { position:absolute; left:0; right:0; top:0; z-index:4; border:0; padding:8px; background:linear-gradient(rgba(5,10,18,.55), transparent); pointer-events:none; }
.entry .pv--card .pv__bar > * { pointer-events:auto; }
.entry .pv--card .pv__live { color:#fff; padding:3px 8px; border-radius:7px; background:rgba(5,10,18,.45); }
.entry .pv--card .pv__devices { background:rgba(5,10,18,.45); border-color:rgba(255,255,255,.14); }
.entry .pv--card .pv__devices button { color:#dfe7f2; }
.entry .pv--card .pv__devices button[aria-pressed="true"] { background:#fff; color:#0b1220; }
@media (hover:hover) and (pointer:fine) {
	.entry .pv--card .pv__bar { opacity:0; transition:opacity var(--dur-fast) var(--ease-out); }
	.entry:hover .pv--card .pv__bar, .entry:focus-within .pv--card .pv__bar { opacity:1; }
}
.entry .pv--card .pv__stage { border-radius:12px; }
.entry__body { padding:.75rem .5rem .35rem; }
.entry__type { order:2; }
.entry__title { font-size:1rem; margin:.15rem 0 .55rem; }

/* ==========================================================================
   Library and design pages use the full width (React Bits): the sidebar sits
   at the left edge, the content fills the middle, a rail sits on the right.
   ========================================================================== */
@media (min-width:1100px) {
	.lib-layout { max-width:none; padding-inline:16px clamp(16px, 2vw, 32px); grid-template-columns:256px minmax(0,1fr); gap:0 clamp(24px, 2.6vw, 44px); }
	.lib-main .ih-grid { grid-template-columns:repeat(auto-fill, minmax(272px, 1fr)); }
	.lib-main .shell { max-width:none; padding-inline:0; }
	.lib-side { top:84px; max-height:calc(100vh - 100px); }
}
.lib-rail { display:none; position:sticky; top:84px; gap:16px; align-content:start; margin-top:.2rem; }
@media (min-width:1500px) {
	.lib-layout--rail { grid-template-columns:256px minmax(0,1fr) 300px; }
	.lib-rail { display:grid; }
}
.lib-rail__card { padding:6px 6px 1rem; border-radius:var(--r-xl); background:var(--color-surface); box-shadow:var(--edge-highlight), inset 0 0 0 1px var(--color-hairline); }
.lib-rail__card .hb-well { height:150px; }
.lib-rail__card b { display:block; padding:.7rem .65rem .25rem; font-family:var(--font-heading); font-size:1.05rem; }
.lib-rail__card p { margin:0 .65rem .9rem; color:var(--color-muted); font-size:var(--size-micro); line-height:1.5; }
.lib-rail__card .btn { margin:0 .65rem; width:calc(100% - 1.3rem); justify-content:center; }
.lib-layout--single .ie-head { margin-top:0; }
/* The related grid under a design page runs the same full width as the layout above it. */
@media (min-width:1100px) {
	.single-ie_entry .ih-sec > .shell { max-width:none; padding-inline:16px clamp(16px, 2vw, 32px); }
	.single-ie_entry .ih-sec .ih-grid { grid-template-columns:repeat(3, minmax(0,1fr)); }
}

/* System light (14 Nov 2026): with no saved choice the light tokens come from the
   media query and there is no data-theme attribute, so repeat the light rules here. */
@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) .hs__stage { background:#e9eef6; }
	:root:not([data-theme="dark"]) .hs__dots { background-image:radial-gradient(rgba(15,27,45,.18) 1px, transparent 1.2px); }
	:root:not([data-theme="dark"]) .hs-win { background:rgba(255,255,255,.78); color:#0F1B2D; box-shadow:inset 0 0 0 1px rgba(15,27,45,.10), 0 30px 60px -28px rgba(15,27,45,.35); }
	:root:not([data-theme="dark"]) .hs-win__t { color:#5A6478; border-color:rgba(15,27,45,.08); }
	:root:not([data-theme="dark"]) .hs-steps li span { color:#5A6478; }
	:root:not([data-theme="dark"]) .hs-steps li.is-done { background:rgba(15,27,45,.05); }
	:root:not([data-theme="dark"]) .hb-code li::before { color:#5A6478; }
	:root:not([data-theme="dark"]) .hb-term .ok { color:#0F766E; }
}