:root{
  --bg:#ffffff; --fg:#191c21; --muted:#5c6169; --border:#e5e3df; --box-bg:#faf9f7;
  --link:#1554d1; --accent:#0e9f6e; --card-max:1000px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#14161a; --fg:#f2f1ee; --muted:#a3a8b0; --border:#2a2d33; --box-bg:#1c1f24;
    --link:#7fa8ff; --accent:#3ddc97;
  }
}
:root[data-theme="dark"]{
  --bg:#14161a; --fg:#f2f1ee; --muted:#a3a8b0; --border:#2a2d33; --box-bg:#1c1f24;
  --link:#7fa8ff; --accent:#3ddc97;
}
*{box-sizing:border-box}
body{background:var(--bg); color:var(--fg); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; line-height:1.55}
a{color:var(--link)}
main{max-width:960px; margin:0 auto; padding:1.5rem 1rem 3rem}
h1{font-size:1.9rem; margin:0.4em 0 0.2em; word-break:keep-all}
h2{font-size:1.25rem; margin-top:2em}
.site-header{display:flex; align-items:center; justify-content:space-between; max-width:960px; margin:0 auto; padding:1rem}
.site-logo{font-weight:800; font-size:1.3rem; text-decoration:none; color:var(--fg); letter-spacing:-0.02em}
.site-nav a{margin-left:1.1rem; text-decoration:none; color:var(--muted); font-size:0.95rem}
.site-nav a:hover{color:var(--fg)}
.site-footer{max-width:960px; margin:2rem auto 0; padding:1.5rem 1rem 2.5rem; border-top:1px solid var(--border); color:var(--muted); font-size:0.85rem}
.site-footer a{color:var(--muted)}
.lede{color:var(--muted); font-size:1.05rem}
.swatch-hero{width:100%; height:140px; border-radius:14px; border:1px solid var(--border); margin:1rem 0}
.desc p{margin:0.6em 0}
.value-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:0.75rem; margin:1.2rem 0}
.value-card{border:1px solid var(--border); background:var(--box-bg); border-radius:10px; padding:0.75rem 0.9rem}
.value-card .k{font-size:0.75rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); display:block; margin-bottom:0.2rem}
.value-card .v{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:0.95rem; word-break:break-all}
.chip-row{display:flex; flex-wrap:wrap; gap:0.6rem; margin:0.8rem 0 1.6rem}
.chip{display:flex; flex-direction:column; align-items:center; gap:0.35rem}
.chip .swatch{width:56px; height:56px; border-radius:10px; border:1px solid var(--border)}
.chip .label{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:0.72rem; color:var(--muted)}
.ramp{display:flex; flex-wrap:wrap; gap:0; border-radius:10px; overflow:hidden; border:1px solid var(--border); margin:0.8rem 0 1.6rem}
.ramp .step{flex:1 1 auto; min-width:32px; height:56px; display:flex; align-items:flex-end; justify-content:center; padding-bottom:4px}
.ramp .step .label{font-size:0.62rem; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; writing-mode:vertical-rl}
pre.snippet{background:var(--box-bg); border:1px solid var(--border); border-radius:10px; padding:0.9rem 1rem; overflow-x:auto; font-size:0.85rem}
.prevnext{display:flex; justify-content:space-between; gap:1rem; margin-top:2rem; font-size:0.95rem}
.prevnext a{text-decoration:none}
.color-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:0.9rem; margin:1.5rem 0}
.color-grid a{display:flex; flex-direction:column; border:1px solid var(--border); border-radius:12px; overflow:hidden; text-decoration:none; color:var(--fg)}
.color-grid .sw{height:70px}
.color-grid .cap{padding:0.5rem 0.6rem; font-size:0.85rem}
.color-grid .cap b{display:block}
.color-grid .cap span{color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:0.75rem}
.legal h2{margin-top:1.6em}
.legal ul{padding-left:1.2em}

/* ═══════ House banners — sizes per marketing order 20260907_06 /
   20260906_05 / 20260905_01, ported verbatim from sizerbox/GMR theme.css ═══════ */
.hstrip{display:none}
:root:not([data-strip]) .hstrip-sweep,
:root[data-strip="sweep"] .hstrip-sweep{display:flex}
:root[data-strip="gmr"] .hstrip-gmr{display:flex}
:root[data-strip="sizerbox"] .hstrip-sizerbox{display:flex}
.hstrip{
  align-items:center; justify-content:center; gap:0.5rem;
  height:clamp(52px, 6vw + 20px, 80px); padding:0 0.875rem; box-sizing:border-box;
  background:#eaf7f1; border-bottom:1px solid rgba(0,0,0,0.06);
  font-size:clamp(18px, 1.6vw + 12px, 28px); font-weight:600; line-height:1.2; color:#0e5b42;
  text-decoration:none; white-space:nowrap; overflow:hidden; word-break:keep-all;
}
.hstrip-short{display:none}
@media (max-width: 51.5rem){
  .hstrip-long{display:none}
  .hstrip-short{display:inline}
}

.house-card{
  display:none; align-items:center; gap:20px;
  width:100%; max-width:var(--card-max); height:124px; box-sizing:border-box;
  margin:2em auto 0; padding:17px 20px; overflow:hidden;
  background:var(--box-bg); border:1px solid var(--border); border-radius:12px;
}
:root:not([data-house]) .house-card-gmr,
:root[data-house="sweep"] .house-card-sweep,
:root[data-house="gmr"] .house-card-gmr,
:root[data-house="sizerbox"] .house-card-sizerbox{display:flex}
.house-icon{flex:0 0 auto; width:84px; height:84px; border-radius:20px; display:block}
.house-icon.house-tile{display:flex; align-items:center; justify-content:center; color:#fff; font-size:46px; line-height:1; user-select:none}
.house-body{flex:1 1 auto; min-width:0}
.house-body, .house-body *{word-break:keep-all; overflow-wrap:normal}
.house-body strong, .house-body span, .house-body em{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.house-body strong{font-size:21px; font-weight:700; line-height:1.3; color:var(--fg)}
.house-body span{margin-top:2px; font-size:17px; line-height:1.35; color:var(--muted)}
.house-body em{margin-top:3px; font-size:17px; font-weight:700; font-style:normal; line-height:1.35; color:var(--accent)}
.house-cta{
  flex:0 0 auto; padding:13px 26px; border-radius:11px;
  background:#10b981; color:#fff; font-size:19px; font-weight:700;
  text-decoration:none; white-space:nowrap;
}
.hc-short{display:none !important}

@media (max-width: 40rem){
  .house-card{height:auto; min-height:100px; flex-wrap:wrap; row-gap:10px; gap:12px; padding:12px 14px}
  .house-icon{width:56px; height:56px; border-radius:13px}
  .house-icon.house-tile{font-size:30px}
  .house-body{flex:1 1 0; min-width:0}
  .house-body strong, .house-body em{white-space:normal}
  .house-body strong{font-size:18px; line-height:1.25}
  .house-body span{margin-top:1px; font-size:16px; line-height:1.3; white-space:normal;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
  .house-body em{margin-top:1px; font-size:16px; line-height:1.3}
  .house-cta{flex:1 0 100%; text-align:center; padding:0; height:44px; line-height:44px; border-radius:11px; font-size:17px}
  .hc-long{display:none !important}
  .hc-short{display:block !important}
  .house-cta .hc-short{display:inline !important}
}