/* Blueprint: a sample design from Brad's mockup library, rewritten by
   scripts/import-designs.py. Do not edit; re-run that instead. */

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-normal-01c04f4d.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-normal-5778b1a2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-normal-9d44a929.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-normal-9d44a929.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-normal-9d44a929.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; }
h1, h2, h3 { text-wrap:balance; }
p { text-wrap:pretty; }
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.short { display:none; }
@media (max-width:520px) { .full { display:none; } .short { display:inline; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

:root { --blue:#10325A; --blue-2:#0B2747; --grid:rgba(234,242,255,.08); --ink:#EAF2FF; --soft:rgba(234,242,255,.86); --muted:rgba(234,242,255,.72); --red:#FF5A3C; --red-btn:#C9361A; --red-text:#FF8F7A; --pale:#F3F6FA; --pale-ink:#10233A; --pale-muted:#475A70;
  --head:"IBM Plex Sans",Arial,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace; --pad:clamp(18px,4vw,56px); }
body { background:var(--blue); color:var(--ink); font:400 17px/1.6 var(--head); background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size:32px 32px; }
:focus-visible { outline:3px solid var(--red); outline-offset:3px; }
.wrap { max-width:1240px; margin:0 auto; padding:0 var(--pad); }
header .wrap { display:flex; align-items:center; gap:28px; padding-block:20px; border-bottom:1px solid rgba(234,242,255,.18); }
.logo { font:500 18px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; text-decoration:none; margin-right:auto; white-space:nowrap; }
@media (max-width:520px) { .logo { font-size:14px; letter-spacing:.04em; } }
nav { display:flex; gap:24px; color:var(--soft); font-size:16px; } nav a { text-decoration:none; } nav a:hover { color:#fff; }
.btn { display:inline-flex; align-items:center; min-height:48px; padding:12px 18px; border-radius:3px; text-decoration:none; font:500 16px/1 var(--head); background:var(--red-btn); color:#fff; border:0; cursor:pointer; }
.btn.ghost { background:transparent; box-shadow:inset 0 0 0 1px rgba(234,242,255,.6); }
.mono { font:500 13px/1.2 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--red-text); margin:0 0 14px; }
.hero .wrap { display:grid; grid-template-columns:.85fr 1.15fr; gap:40px; padding-block:40px 64px; align-items:start; }
h1 { font:600 clamp(44px,5vw,68px)/1.04 var(--head); letter-spacing:-.02em; margin:0; }
.lead { color:var(--soft); font-size:19px; margin:16px 0 0; max-width:28em; }
.room-out { margin-top:24px; border:1px solid rgba(234,242,255,.24); border-radius:8px; background:var(--blue-2); overflow:hidden; }
.room-out h2 { font:500 14px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--red-text); margin:0; padding:14px 16px; border-bottom:1px solid rgba(234,242,255,.18); }
.room-out ol { list-style:none; margin:0; padding:0; counter-reset:j; }
.room-out li { counter-increment:j; display:flex; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid rgba(234,242,255,.12); }
.room-out li::after { content:"0" counter(j); font:400 13px/1.6 var(--mono); color:var(--muted); }
.room-out .btn { margin:14px 16px 16px; }
.house { width:100%; height:auto; }
.house .wall { fill:none; stroke:rgba(234,242,255,.75); stroke-width:2; }
.house .room { fill:rgba(234,242,255,.04); stroke:rgba(234,242,255,.75); stroke-width:2; cursor:pointer; transition:fill .2s; }
.house .room:hover { fill:rgba(234,242,255,.1); }
.house .room[aria-pressed="true"] { fill:rgba(255,90,60,.3); stroke:var(--red); stroke-width:3; }
.house .room:focus-visible { outline:none; stroke:#fff; stroke-width:4; }
.house text { fill:var(--soft); font:500 13px var(--mono); letter-spacing:.06em; pointer-events:none; }
/* The drawing scales down on a phone, so its labels scale up to stay readable (about 12 px). */
@media (max-width:520px) { .house text { font-size:22px; letter-spacing:.02em; } }
.house .lines { fill:none; stroke:#7FC8FF; stroke-width:3; stroke-dasharray:7 7; }
.hint { font:400 13px var(--mono); color:var(--muted); margin-top:10px; }
.paper { background:var(--pale); color:var(--pale-ink); }
.paper :focus-visible { outline-color:var(--pale-ink); }
section.pad { padding-block:clamp(64px,8vw,104px); }
h2.sec { font:600 clamp(32px,3.8vw,48px)/1.1 var(--head); letter-spacing:-.015em; margin:0 0 12px; }
.paper .mono { color:#B2341A; }
.sub { color:var(--pale-muted); margin:0 0 36px; max-width:42em; }
.spec { width:100%; border-collapse:collapse; font-size:16px; }
.spec th, .spec td { text-align:left; padding:14px 12px 14px 0; border-bottom:1px solid #C7D2DE; vertical-align:top; }
.spec th { font:500 13px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--pale-muted); }
.spec td:first-child { font-weight:600; width:28%; }
.table { overflow-x:auto; }
.line { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:0; counter-reset:p; }
.line li { counter-increment:p; position:relative; padding:44px 18px 0 0; border-top:2px solid rgba(234,242,255,.4); }
.line li::before { content:counter(p, decimal-leading-zero); position:absolute; top:-15px; left:0; background:var(--blue); padding-right:10px; font:500 15px/28px var(--mono); color:var(--red-text); }
.line h3 { font:600 20px/1.2 var(--head); margin:0 0 6px; }
.line p { margin:0; color:var(--soft); font-size:15px; }
.projects { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.projects figure { margin:0; border:1px solid #C7D2DE; border-radius:8px; overflow:hidden; background:#fff; }
.projects img { aspect-ratio:4/3; object-fit:cover; width:100%; }
.projects figcaption { padding:14px 16px 16px; }
.projects b { display:block; font-weight:600; } .projects span { font:400 13px var(--mono); color:var(--pale-muted); }
.est .wrap { display:grid; grid-template-columns:.8fr 1.2fr; gap:48px; padding-block:clamp(64px,8vw,104px); }
.demo-form { display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; background:var(--pale); color:var(--pale-ink); padding:24px; border-radius:8px; }
.field { display:grid; gap:6px; } .field.wide { grid-column:1/-1; } .field label { font-weight:500; font-size:15px; }
.field input, .field select, .field textarea { font:inherit; font-size:16px; padding:11px 12px; border:1px solid #7D8EA2; border-radius:3px; background:#fff; color:var(--pale-ink); }
.field button { justify-self:start; font:500 16px/1 var(--head); min-height:48px; padding:12px 22px; border:0; border-radius:3px; background:var(--blue); color:#fff; cursor:pointer; }
.form-out { margin:0; color:#25663A; font-size:15px; min-height:1.4em; }
footer .wrap { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; padding-block:24px 30px; border-top:1px solid rgba(234,242,255,.18); color:var(--muted); font:400 14px var(--mono); }
@media (max-width:900px) {
  nav { display:none; }
  .hero .wrap, .est .wrap { grid-template-columns:1fr; }
  .house-wrap { order:-1; }
  .line { grid-template-columns:1fr; gap:28px; }
  .line li { padding-top:36px; }
  .projects { grid-template-columns:1fr; }
}
@media (max-width:520px) { .demo-form { grid-template-columns:1fr; } }

/* What were style attributes on the page. */
.ssd-s1 { margin-bottom:44px !important; }
.ssd-s2 { color:var(--soft) !important; }
.ssd-s3 { color:var(--muted) !important; font:400 14px var(--mono) !important; }

/* ---------- Shift & Shine sample bar (scripts/import-designs.py) ---------- */
@font-face { font-family: "SSD Geist"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/assets/fonts/geist-latin.woff2") format("woff2"); }
:root { --ssd-bar: 53px; scroll-padding-top: var(--ssd-bar); }
.ssd-bar { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: 8px 14px; margin: 0; padding: 8px clamp(14px, 3vw, 28px); background: #0F1B1B; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.86); font: 400 13.5px/20px "SSD Geist", "Helvetica Neue", Arial, sans-serif; letter-spacing: 0; text-align: left; text-transform: none; }
.ssd-bar .ssd-bar-text { flex: 1; margin: 0; padding: 0; color: inherit; font: inherit; letter-spacing: 0; max-width: none; }
.ssd-bar a { color: #FFFFFF; text-decoration: none; }
.ssd-bar .ssd-bar-home { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0 -8px 0 -10px; border-radius: 6px; }
.ssd-bar .ssd-bar-home svg { display: block; width: 15px; height: 16px; }
.ssd-bar .ssd-bar-back { display: inline-flex; flex: none; align-items: center; min-height: 36px; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 6px; font: 500 13.5px/1 "SSD Geist", "Helvetica Neue", Arial, sans-serif; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; }
.ssd-bar .ssd-bar-back:hover { background: #FFFFFF; color: #0F1B1B; }
.ssd-bar a:focus-visible { outline: 3px solid #5AD7D7; outline-offset: 2px; }
/* Fingers get the full 44px. */
@media (pointer: coarse) { .ssd-bar .ssd-bar-back { min-height: 44px; } .ssd-bar .ssd-bar-home { width: 44px; height: 44px; margin: 0 -12px 0 -14px; } }
/* Line heights in whole pixels, so the bar is too, and the sample under it
   doesn't land on half pixels. */
@media (max-width: 520px) { :root { --ssd-bar: 71px; } .ssd-bar { font-size: 12.5px; line-height: 18px; } }