/* Afterglow, Project: 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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jetbrains-mono-normal-9e2dd53e.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: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/manrope-normal-27326e85.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: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/manrope-normal-27326e85.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: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/manrope-normal-27326e85.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: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/manrope-normal-27326e85.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: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/manrope-normal-27326e85.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; margin:0; font-weight:inherit; }
p { text-wrap:pretty; margin:0; }
ul, ol { margin:0; padding:0; list-style:none; }
figure { margin:0; }
dl, dd { margin:0; }
button { font:inherit; color:inherit; cursor:pointer; }
fieldset { border:0; margin:0; padding:0; min-width:0; }
[hidden] { display:none !important; }
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* Headers placed over a photo sit within .page, not the window, so anything a host adds above
   the page (the Shift & Shine sample bar) pushes them down instead of hiding under them. */
.page { position:relative; overflow-x:clip; }
.skip { position:absolute; left:12px; top:12px; z-index:100; padding:10px 14px; background:#fff; color:#111; }
.skip:not(:focus) { width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.js-reveal [data-reveal]:not(.in) { opacity:0; transform:translateY(28px); }
[data-reveal] { transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1), filter .9s ease; }
.demo-form { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
.demo-form .field { display:grid; gap:6px; min-width:0; }
.demo-form .wide { grid-column:1 / -1; }
.demo-form input, .demo-form select, .demo-form textarea { font:inherit; width:100%; min-width:0; }
@media (max-width:640px) { .demo-form { grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }

:root { --bg:#0B0B0C; --panel:#151517; --ink:#F3F1EC; --muted:#A8A39B; --ember:#FF7A3D; --line:rgba(255,255,255,.11); }
body { background:var(--bg); color:var(--ink); font:400 17px/1.6 "Manrope", system-ui, sans-serif; -webkit-font-smoothing:antialiased; }
.mono { font-family:"JetBrains Mono", ui-monospace, monospace; font-size:12.5px; letter-spacing:.02em; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:2px solid var(--ember); outline-offset:3px; }
.glow { position:fixed; top:calc(var(--ssd-bar, 0px) + 0px); left:0; width:100%; height:100vh; pointer-events:none; z-index:0; background:radial-gradient(520px circle at var(--gx, 70%) var(--gy, 30%), rgba(255,122,61,.13), transparent 70%); transition:background .2s; }
main, .hd, .ft { position:relative; z-index:1; }
.hd { position:absolute; top:0; left:0; right:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px clamp(16px, 4vw, 48px); }
.logo { font-weight:700; font-size:21px; letter-spacing:-.02em; text-decoration:none; display:flex; align-items:center; gap:6px; }
.ldot { width:8px; height:8px; border-radius:50%; background:var(--ember); box-shadow:0 0 14px var(--ember); }
.pills { display:flex; gap:4px; padding:5px; border:1px solid var(--line); border-radius:999px; background:rgba(21,21,23,.7); backdrop-filter:blur(12px); }
.pills a { display:block; padding:8px 16px; border-radius:999px; text-decoration:none; font-size:14.5px; color:var(--muted); transition:color .2s, background .2s; }
.pills a:hover { color:var(--ink); background:rgba(255,255,255,.07); }
.talk { padding:11px 20px; border-radius:999px; background:var(--ink); color:var(--bg); text-decoration:none; font-weight:600; font-size:14.5px; white-space:nowrap; }
.talk:hover { background:var(--ember); }
.eyebrow { color:var(--muted); text-transform:uppercase; letter-spacing:.12em; display:flex; align-items:center; gap:10px; }
.pulse { width:8px; height:8px; border-radius:50%; background:var(--ember); flex:none; animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow:0 0 0 6px rgba(255,122,61,.18); } }
.hero { position:relative; min-height:min(100svh, 980px); display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(24px, 4vw, 64px); align-items:center; padding:120px clamp(16px, 4vw, 48px) clamp(120px, 14vw, 220px); overflow:hidden; }
.hero h1 { font-size:clamp(46px, 6.6vw, 104px); line-height:.98; letter-spacing:-.045em; font-weight:600; margin:22px 0 26px; }
.hero h1 span { color:var(--muted); font-weight:300; }
.lede { color:var(--muted); font-size:clamp(17px, 1.4vw, 19.5px); max-width:36em; }
.cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.btn { display:inline-flex; align-items:center; gap:10px; padding:15px 24px; border-radius:999px; background:var(--ember); color:#0B0B0C; font-weight:600; text-decoration:none; transition:transform .2s, background .2s; }
.btn:hover { transform:translateY(-2px); }
.btn.ghost { background:transparent; color:var(--ink); border:1px solid rgba(255,255,255,.28); }
.btn.ghost:hover { border-color:var(--ink); }
.arr { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; }
.hero-art { position:relative; z-index:2; border-radius:28px; overflow:hidden; aspect-ratio:4/5; max-height:72vh; justify-self:end; width:100%; max-width:560px; box-shadow:0 40px 120px rgba(255,122,61,.18); }
.hero-art img { width:100%; height:100%; object-fit:cover; }
.hero-art figcaption { position:absolute; left:18px; bottom:16px; color:rgba(255,255,255,.85); }
.chip { position:absolute; top:16px; right:16px; display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; background:rgba(11,11,12,.72); backdrop-filter:blur(10px); color:var(--ink); }
.giant { position:absolute; left:0; right:0; bottom:-.2em; z-index:1; text-align:center; font-weight:700; font-size:clamp(90px, 21vw, 340px); letter-spacing:-.06em; line-height:1; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.14); background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0) 70%); -webkit-background-clip:text; background-clip:text; user-select:none; pointer-events:none; }
.strip { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; padding:18px clamp(16px, 4vw, 48px); border-block:1px solid var(--line); color:var(--muted); }
.strip b { color:var(--ink); font-weight:400; }
.strip a { text-decoration:none; color:var(--ink); }
section { padding:clamp(80px, 10vw, 140px) clamp(16px, 4vw, 48px); }
.sec-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:24px; margin-bottom:36px; }
.sec-head h2 { font-size:clamp(34px, 4.4vw, 64px); letter-spacing:-.035em; line-height:1.02; font-weight:500; margin-top:14px; }
.side { color:var(--muted); max-width:30em; }
.filters { display:flex; flex-wrap:wrap; gap:6px; }
.filters button { border:1px solid var(--line); background:transparent; padding:10px 16px; border-radius:999px; font-size:14px; color:var(--muted); transition:all .2s; }
.filters button:hover { color:var(--ink); border-color:rgba(255,255,255,.3); }
.filters button[aria-pressed="true"] { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.count { color:var(--muted); margin-bottom:18px; }
.grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(16px, 2vw, 28px); grid-auto-flow:dense; }
.card { display:grid; gap:12px; align-content:start; }
.card.wide { grid-column:span 2; }
.card.full { grid-column:1 / -1; }
.card.full figure { aspect-ratio:21/8; }
.card.tall figure { aspect-ratio:3/4; }
.card figure { position:relative; border-radius:22px; overflow:hidden; aspect-ratio:4/3; background:var(--panel); }
.card.wide figure { aspect-ratio:16/9; }
.card img { width:100%; height:100%; object-fit:cover; transition:transform 1.1s cubic-bezier(.2,.7,.2,1); }
.card:hover img { transform:scale(1.05); }
.js-reveal .card[data-reveal]:not(.in) { filter:blur(10px); opacity:0; transform:translateY(60px) scale(.97); }
.meta { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-top:4px; }
.meta h3 { font-size:22px; font-weight:600; letter-spacing:-.02em; }
.meta p, .client { color:var(--muted); }
.txt { color:#D6D2CB; font-size:15.5px; max-width:34em; }
.case-link { color:var(--ember); font-weight:600; text-decoration:none; width:max-content; }
.case-link:hover { text-decoration:underline; }
.acc { border-top:1px solid var(--line); }
.acc > li { border-bottom:1px solid var(--line); }
.acc button { width:100%; display:grid; grid-template-columns:70px 1fr 40px; align-items:center; gap:16px; padding:28px 0; background:none; border:0; text-align:left; }
.acc .t { font-size:clamp(26px, 3.4vw, 48px); letter-spacing:-.03em; font-weight:500; transition:color .2s; }
.acc button:hover .t, .acc button[aria-expanded="true"] .t { color:var(--ember); }
.acc .n { color:var(--muted); }
.pm { position:relative; width:22px; height:22px; justify-self:end; }
.pm::before, .pm::after { content:""; position:absolute; left:0; top:10px; width:22px; height:2px; background:currentColor; transition:transform .3s; }
.pm::after { transform:rotate(90deg); }
[aria-expanded="true"] .pm::after { transform:rotate(0); }
.panel { display:grid; grid-template-columns:70px minmax(0, 36em) 1fr; gap:16px; padding:0 0 32px; color:var(--muted); }
.panel p { grid-column:2; font-size:18px; }
.tags { grid-column:3; display:flex; flex-wrap:wrap; gap:8px; align-content:start; justify-content:flex-end; }
.tags li { padding:7px 13px; border:1px solid var(--line); border-radius:999px; font-size:13.5px; color:var(--ink); }
.steps { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; }
.steps li { padding:28px 24px; border:1px solid var(--line); border-radius:22px; background:linear-gradient(180deg, rgba(255,255,255,.035), transparent); display:grid; gap:12px; align-content:start; }
.steps .n { color:var(--ember); }
.steps h3 { font-size:24px; font-weight:600; letter-spacing:-.02em; }
.steps p { color:var(--muted); font-size:15.5px; }
.steps .dur { color:var(--ink); }
.studio { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px, 5vw, 80px); align-items:center; }
.studio figure { border-radius:28px; overflow:hidden; aspect-ratio:4/5; }
.studio figure img { width:100%; height:100%; object-fit:cover; }
.studio h2 { font-size:clamp(34px, 4.4vw, 64px); letter-spacing:-.035em; font-weight:500; margin:14px 0 20px; }
.facts { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1px; margin-top:36px; background:var(--line); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.facts div { background:var(--bg); padding:20px; display:grid; gap:6px; }
.facts dt { color:var(--muted); text-transform:uppercase; letter-spacing:.1em; }
.facts dd { font-size:19px; }
.contact { position:relative; overflow:hidden; border-top:1px solid var(--line); }
.contact .bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; }
.contact-in { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(28px, 5vw, 80px); }
.contact h2 { font-size:clamp(40px, 5.6vw, 84px); letter-spacing:-.045em; line-height:1; font-weight:600; margin:16px 0 20px; }
.direct { display:grid; gap:6px; margin-top:28px; font-size:clamp(20px, 2vw, 26px); }
.direct a { text-decoration:none; width:max-content; max-width:100%; overflow-wrap:anywhere; border-bottom:1px solid rgba(255,255,255,.3); }
.direct a:hover { color:var(--ember); border-color:var(--ember); }
.demo-form { padding:clamp(20px, 3vw, 36px); border:1px solid var(--line); border-radius:24px; background:rgba(11,11,12,.78); backdrop-filter:blur(16px); }
.demo-form label { font-size:13.5px; color:var(--muted); }
.demo-form input, .demo-form select, .demo-form textarea { padding:13px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.16); background:#111113; color:var(--ink); }
.demo-form button { justify-self:start; padding:15px 26px; border:0; border-radius:999px; background:var(--ember); color:#0B0B0C; font-weight:600; }
.form-out { color:var(--ember); min-height:1.4em; font-size:15px; }
.ft { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding:28px clamp(16px, 4vw, 48px); border-top:1px solid var(--line); color:var(--muted); }
.ft a { color:var(--ink); text-decoration:none; }
@media (max-width:1060px) { .pills { display:none; } .steps { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:860px) {
  .hero { grid-template-columns:1fr; padding-top:100px; }
  .hero-art { justify-self:stretch; max-width:none; aspect-ratio:4/3; max-height:none; }
  .grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .studio, .contact-in { grid-template-columns:1fr; }
  .panel { grid-template-columns:1fr; } .panel p, .tags { grid-column:1; } .tags { justify-content:flex-start; }
}
@media (max-width:560px) {
  .grid { grid-template-columns:1fr; } .card.wide, .card.full { grid-column:auto; }
  .card.full figure { aspect-ratio:4/3; }
  .card.wide figure { aspect-ratio:4/3; }
  .steps { grid-template-columns:1fr; }
  .acc button { grid-template-columns:44px 1fr 28px; }
  .facts { grid-template-columns:1fr; }
  .meta { flex-direction:column; gap:2px; }
}
@media (prefers-reduced-motion: reduce) { .glow { display:none; } }

.back { display:inline-block; color:var(--muted); text-decoration:none; margin-bottom:28px; }
.back:hover { color:var(--ember); }
.cs-hero { padding-top:clamp(120px, 12vw, 170px); padding-bottom:40px; }
.cs-hero h1 { font-size:clamp(80px, 15vw, 240px); line-height:.86; letter-spacing:-.06em; font-weight:600; margin:18px 0 0; padding-bottom:.2em; }
.cs-hero .lede { max-width:34em; }
.cs-meta { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px; margin-top:44px; background:var(--line); border-block:1px solid var(--line); }
.cs-meta div { background:var(--bg); padding:18px 0; display:grid; gap:6px; }
.cs-meta dt { color:var(--muted); text-transform:uppercase; letter-spacing:.1em; }
.cs-cover { margin:0 clamp(16px, 4vw, 48px); border-radius:28px; overflow:hidden; aspect-ratio:21/9; }
.cs-cover img { width:100%; height:100%; object-fit:cover; }
.cs-brief { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(24px, 5vw, 80px); }
.cs-brief > div { display:grid; gap:16px; align-content:start; }
.cs-brief .big { font-size:clamp(22px, 2.2vw, 30px); line-height:1.35; letter-spacing:-.01em; }
.cs-brief p:not(.eyebrow):not(.big) { color:var(--muted); font-size:18px; }
.mark-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(20px, 3vw, 40px); align-items:start; }
.stage { border-radius:24px; aspect-ratio:1; display:grid; place-items:center; border:1px solid var(--line); transition:background .4s; }
.stage svg { width:62%; height:auto; }
.ring-line { fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-width:4; transition:stroke .4s; }
.ring text { font:600 15px "Manrope", sans-serif; letter-spacing:.2em; }
.bg-ink { background:#0B0B0C; } .bg-ink .ring-line { stroke:#FF7A3D; } .bg-ink text { fill:#F3F1EC; }
.bg-ember { background:#FF7A3D; } .bg-ember .ring-line { stroke:#0B0B0C; } .bg-ember text { fill:#0B0B0C; }
.bg-cream { background:#F3F1EC; } .bg-cream .ring-line { stroke:#0B0B0C; } .bg-cream text { fill:#0B0B0C; }
.ctl { display:grid; gap:22px; }
.weight { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; font-size:15px; }
.weight output { font-family:"JetBrains Mono", monospace; color:var(--ember); }
.weight input { grid-column:1 / -1; width:100%; accent-color:var(--ember); }
.swatches { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.swatch { width:100%; display:grid; grid-template-columns:40px 1fr; grid-template-rows:auto auto; gap:2px 12px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:16px; background:transparent; text-align:left; }
.swatch:hover { border-color:rgba(255,255,255,.3); }
.swatch .swc { grid-row:span 2; width:40px; height:40px; border-radius:10px; border:1px solid var(--line); }
.swatch b { font-weight:600; } .swatch .mono { color:var(--muted); }
.swc-0 { background:#FF7A3D; } .swc-1 { background:#0B0B0C; } .swc-2 { background:#F3F1EC; } .swc-3 { background:#C9A24B; }
.copied { color:var(--ember); min-height:1.4em; }
.gal { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(16px, 2vw, 28px); }
.gal figure { border-radius:22px; overflow:hidden; aspect-ratio:4/3; }
.gal figure.wide { grid-column:1 / -1; aspect-ratio:21/8; }
.gal img { width:100%; height:100%; object-fit:cover; }
.res { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.res li { display:grid; gap:10px; padding:28px 24px; border:1px solid var(--line); border-radius:22px; }
.res b { font-size:clamp(34px, 3.6vw, 52px); font-weight:500; letter-spacing:-.03em; color:var(--ember); }
.res span { color:var(--muted); }
.next { padding:0 clamp(16px, 4vw, 48px) clamp(60px, 8vw, 110px); }
.next a { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 24px; padding-top:28px; border-top:1px solid var(--line); text-decoration:none; }
.next span { font-family:"JetBrains Mono", monospace; font-size:12.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); }
.next b { font-size:clamp(44px, 7vw, 110px); font-weight:600; letter-spacing:-.05em; line-height:1; }
.next .arr { width:clamp(28px, 4vw, 54px); height:clamp(28px, 4vw, 54px); align-self:center; }
.next a:hover b, .next a:hover .arr { color:var(--ember); }
.contact-in.one { grid-template-columns:minmax(0,1fr) auto; align-items:end; }
@media (max-width:860px) { .cs-meta { grid-template-columns:repeat(2, minmax(0,1fr)); } .cs-brief, .mark-grid { grid-template-columns:1fr; } .res { grid-template-columns:1fr; } .contact-in.one { grid-template-columns:1fr; } .cs-cover { aspect-ratio:4/3; } .gal figure.wide { aspect-ratio:4/3; } }
@media (max-width:560px) { .gal { grid-template-columns:1fr; } .swatches { grid-template-columns:1fr; } }


/* ---------- 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; } }