.quietbar-case {
  --qb-paper: #f1f0ea;
  --qb-paper-deep: #e7e5dc;
  --qb-ink: #11110f;
  --qb-muted: #66645c;
  --qb-rule: rgba(17, 17, 15, .2);
  --qb-orange: #a62f20;
  --qb-display: 'Instrument Sans', 'Noto Sans SC', sans-serif;
  --qb-mono: 'JetBrains Mono', 'SF Mono', monospace;
  background: var(--qb-paper);
  color: var(--qb-ink);
  font-family: var(--qb-display);
}

.quietbar-case main { overflow: clip; }
.quietbar-case [data-lang="zh"] { display: none; }
[data-case-lang="zh"] .quietbar-case [data-lang="en"] { display: none; }
[data-case-lang="zh"] .quietbar-case [data-lang="zh"] { display: inline; }
[data-case-lang="zh"] .quietbar-case h1,
[data-case-lang="zh"] .quietbar-case h2,
[data-case-lang="zh"] .quietbar-case h3,
[data-case-lang="zh"] .quietbar-case p { text-wrap: pretty; }

.quietbar-case nav {
  min-height: 64px;
  padding: 0 clamp(24px, 3.5vw, 56px);
  border-bottom: 1px solid rgba(17, 17, 15, .12);
  background: rgba(241, 240, 234, .92);
  color: var(--qb-ink);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

.quietbar-case nav .logo,
.quietbar-case nav .nav-links a { color: var(--qb-ink); }
.quietbar-case nav .logo .logo-dot { background: var(--qb-orange); }
.quietbar-case nav .nav-links a::after { background: var(--qb-orange); }

.qb-language {
  min-width: 52px;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid rgba(17, 17, 15, .26);
  border-radius: 100px;
  background: transparent;
  color: var(--qb-ink);
  font: 13px var(--qb-mono);
  letter-spacing: .08em;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.qb-language:hover { background: var(--qb-ink); color: var(--qb-paper); }

.qb-progress { position: fixed; inset: 0 0 auto; z-index: 220; height: 3px; pointer-events: none; }
.qb-progress span { display: block; width: 100%; height: 100%; background: var(--qb-orange); transform: scaleX(0); transform-origin: left; }

.qb-rail {
  position: fixed;
  z-index: 80;
  top: 50%;
  left: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, .55);
  font: 13px var(--qb-mono);
  mix-blend-mode: difference;
  pointer-events: none;
}
.qb-rail-line { width: 1px; height: 80px; background: currentColor; opacity: .5; }
.qb-rail-current { color: var(--qb-orange); }

.qb-shell { width: min(1520px, 100%); margin-inline: auto; padding-inline: clamp(32px, 6vw, 96px); }
.qb-eyebrow { color: var(--qb-orange); font: 13px var(--qb-mono); letter-spacing: .11em; text-transform: uppercase; }
.qb-body { color: var(--qb-muted); font-size: clamp(15px, 1.15vw, 18px); font-weight: 400; line-height: 1.8; }

.qb-hero { padding: 64px 0 clamp(112px, 12vw, 192px); background: var(--qb-ink); color: var(--qb-paper); }
.qb-hero-meta {
  display: grid;
  grid-template-columns: 4fr 4fr 4fr;
  padding-top: 40px;
  color: rgba(241, 240, 234, .52);
  font: 13px var(--qb-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.qb-hero-meta span:nth-child(2) { text-align: center; }
.qb-hero-meta span:last-child { text-align: right; }

.qb-hero-title { display: grid; grid-template-columns: repeat(12, 1fr); padding-top: clamp(96px, 12vw, 184px); padding-bottom: clamp(72px, 8vw, 128px); }
.qb-hero-title .qb-eyebrow { grid-column: 1 / 5; margin-bottom: 40px; }
.qb-hero h1 {
  grid-column: 1 / 13;
  margin: 0;
  color: var(--qb-paper);
  font: 650 clamp(84px, 13vw, 184px)/.8 var(--qb-display);
  letter-spacing: -.085em;
  text-transform: uppercase;
}
.qb-hero h1 span { color: var(--qb-orange); }
.qb-hero-intro { grid-column: 8 / 13; max-width: 34ch; margin-top: 64px; color: rgba(241, 240, 234, .66); font-size: clamp(16px, 1.45vw, 22px); line-height: 1.55; }

.qb-boundary {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 30px;
  margin: 0 clamp(32px, 6vw, 96px) -15px;
  padding: 0 14px;
  border: 1px solid rgba(241, 240, 234, .24);
  background: rgba(17, 17, 15, .9);
  color: rgba(241, 240, 234, .78);
  font: 13px var(--qb-mono);
}
.qb-boundary > div { display: flex; align-items: center; gap: 12px; }
.qb-boundary > div:last-child { justify-content: flex-end; }
.qb-boundary-control span { width: 1px; height: 18px; background: var(--qb-orange); }
.qb-boundary-control img { width: 18px; height: 18px; border-radius: 5px; }

.qb-hero-media { margin: 0; }
.qb-hero-media img { width: 100%; height: auto; border: 0; background: #d8d6ce; }
.qb-hero-media figcaption,
.qb-demo figcaption {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-top: 16px;
  color: rgba(241, 240, 234, .5);
  font: 13px var(--qb-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.qb-project-strip { display: grid; grid-template-columns: 4fr 4fr 4fr; margin-top: clamp(80px, 9vw, 144px); }
.qb-project-strip dl { padding: 20px 32px 0 0; border-top: 1px solid rgba(241, 240, 234, .25); }
.qb-project-strip dl + dl { padding-left: 32px; border-left: 1px solid rgba(241, 240, 234, .14); }
.qb-project-strip dt { margin-bottom: 12px; color: rgba(241, 240, 234, .4); font: 13px var(--qb-mono); letter-spacing: .1em; text-transform: uppercase; }
.qb-project-strip dd { color: rgba(241, 240, 234, .78); font-size: 13px; line-height: 1.6; }

.qb-section { padding: clamp(112px, 12vw, 184px) 0; }
.qb-section-label { display: grid; grid-template-columns: 1fr 11fr; padding-bottom: 16px; border-bottom: 1px solid var(--qb-rule); font: 13px var(--qb-mono); letter-spacing: .12em; text-transform: uppercase; }
.qb-section-label > span:first-child { color: var(--qb-orange); }

.qb-observation { background: var(--qb-paper); }
.qb-observation-grid { display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; padding-top: clamp(88px, 10vw, 160px); }
.qb-observation-copy { grid-column: 1 / 9; }
.qb-observation-copy h2 { max-width: 12ch; margin-top: 32px; font: 620 clamp(48px, 6vw, 88px)/.96 var(--qb-display); letter-spacing: -.06em; }
.qb-observation-copy .qb-body { max-width: 60ch; margin-top: 56px; }
.qb-observation-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: clamp(112px, 13vw, 200px); }
.qb-observation-notes article { min-height: 224px; padding: 24px 32px 0 0; border-top: 1px solid var(--qb-ink); }
.qb-observation-notes article + article { padding-left: 32px; border-left: 1px solid var(--qb-rule); }
.qb-observation-notes article > span { color: var(--qb-orange); font: 13px var(--qb-mono); }
.qb-observation-notes h3 { margin-top: 72px; font-size: clamp(23px, 2.3vw, 34px); font-weight: 600; line-height: 1.1; letter-spacing: -.04em; }
.qb-observation-notes p { max-width: 34ch; margin-top: 14px; color: var(--qb-muted); font-size: 13px; line-height: 1.7; }

.qb-method { background: var(--qb-paper-deep); }
.qb-method-head { display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; padding-top: clamp(88px, 10vw, 160px); padding-bottom: clamp(88px, 10vw, 160px); }
.qb-method-head h2 { grid-column: 4 / 12; font: 620 clamp(48px, 6vw, 88px)/.96 var(--qb-display); letter-spacing: -.06em; }
.qb-method-list { border-top: 1px solid var(--qb-ink); }
.qb-method-list article { display: grid; grid-template-columns: 1fr 7fr 4fr; gap: 32px; padding: 40px 0; border-bottom: 1px solid var(--qb-rule); }
.qb-method-list article > span { color: var(--qb-orange); font: 13px var(--qb-mono); }
.qb-method-list h3 { max-width: 28ch; font-size: clamp(24px, 2.4vw, 36px); font-weight: 600; line-height: 1.12; letter-spacing: -.04em; }
.qb-method-list p { color: var(--qb-muted); font-size: 13px; line-height: 1.7; }

.qb-intervention { background: var(--qb-paper); }
.qb-intervention-head,
.qb-shipping-head { display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; padding-top: clamp(88px, 10vw, 160px); }
.qb-intervention-head h2,
.qb-shipping-head h2 { grid-column: 1 / 9; font: 620 clamp(48px, 6vw, 88px)/.96 var(--qb-display); letter-spacing: -.06em; }
.qb-intervention-head .qb-body,
.qb-shipping-head .qb-body { grid-column: 10 / 13; max-width: 34ch; }

.qb-demo { margin-top: clamp(128px, 15vw, 232px); }
.qb-demo-copy { display: grid; grid-template-columns: 2fr 6fr 4fr; align-items: start; padding-bottom: 48px; }
.qb-demo-copy > span { color: var(--qb-orange); font: 13px var(--qb-mono); letter-spacing: .1em; }
.qb-demo-copy h3 { max-width: 21ch; font-size: clamp(30px, 3vw, 46px); font-weight: 600; line-height: 1.08; letter-spacing: -.045em; }
.qb-demo-copy p { max-width: 36ch; color: var(--qb-muted); font-size: 13px; line-height: 1.7; }
.qb-demo figure { margin: 0; }
.qb-demo figure img { display: block; width: 100%; height: auto; background: var(--qb-paper-deep); }
.qb-demo figcaption { color: var(--qb-muted); border-bottom: 1px solid var(--qb-rule); padding-bottom: 16px; }

.qb-choices { background: var(--qb-ink); color: var(--qb-paper); }
.qb-choices .qb-section-label { border-color: rgba(241, 240, 234, .22); }
.qb-choices-head { display: grid; grid-template-columns: repeat(12, 1fr); padding-top: clamp(96px, 11vw, 176px); padding-bottom: clamp(96px, 11vw, 176px); }
.qb-choices-head h2 { grid-column: 4 / 12; font: 620 clamp(48px, 6vw, 88px)/.96 var(--qb-display); letter-spacing: -.06em; }
.qb-choice-list { border-top: 1px solid rgba(241, 240, 234, .3); }
.qb-choice-list article { display: grid; grid-template-columns: 1fr 7fr 4fr; gap: 32px; padding: 42px 0; border-bottom: 1px solid rgba(241, 240, 234, .2); }
.qb-choice-list article > span { color: var(--qb-orange); font: 13px var(--qb-mono); }
.qb-choice-list h3 { font-size: clamp(24px, 2.4vw, 36px); font-weight: 540; line-height: 1.12; letter-spacing: -.04em; }
.qb-choice-list p { color: rgba(241, 240, 234, .58); font-size: 13px; line-height: 1.7; }

.qb-shipping { background: var(--qb-paper); }
.qb-film { margin-top: clamp(88px, 10vw, 160px); }
.qb-film video { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: contain; background: #000; }
.qb-film > div { display: flex; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--qb-rule); color: var(--qb-muted); font: 13px var(--qb-mono); letter-spacing: .08em; }
.qb-checks { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(96px, 11vw, 176px); }
.qb-checks article { padding: 24px 32px 56px 0; border-top: 1px solid var(--qb-ink); }
.qb-checks article + article { padding-left: 32px; border-left: 1px solid var(--qb-rule); }
.qb-checks strong { display: block; color: var(--qb-orange); font: 650 clamp(72px, 8vw, 120px)/.82 var(--qb-display); letter-spacing: -.08em; }
.qb-checks span { display: block; margin-top: 40px; font-size: 16px; font-weight: 600; }
.qb-release-note { display: grid; grid-template-columns: 2fr 10fr; gap: 32px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--qb-rule); }
.qb-release-note > span { color: var(--qb-orange); font: 13px var(--qb-mono); letter-spacing: .1em; }
.qb-release-note p { max-width: 54ch; color: var(--qb-muted); font-size: 14px; line-height: 1.75; }

.qb-reflection { padding-bottom: 80px; background: var(--qb-paper-deep); }
.qb-reflection-grid { display: grid; grid-template-columns: repeat(12, 1fr); align-items: start; padding-top: clamp(112px, 13vw, 200px); padding-bottom: clamp(112px, 13vw, 200px); }
.qb-reflection-icon { grid-column: 1 / 4; }
.qb-reflection-icon img { width: clamp(128px, 14vw, 200px); height: auto; filter: drop-shadow(0 20px 40px rgba(17, 17, 15, .16)); }
.qb-reflection-copy { grid-column: 5 / 13; }
.qb-reflection-copy h2 { max-width: 14ch; font: 620 clamp(48px, 6vw, 88px)/.96 var(--qb-display); letter-spacing: -.06em; }
.qb-reflection-copy .qb-body { max-width: 60ch; margin-top: 56px; }
.qb-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 48px; }
.qb-actions a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border: 1px solid var(--qb-ink); font: 13px var(--qb-mono); letter-spacing: .1em; text-transform: uppercase; transition: background .25s ease, color .25s ease; }
.qb-actions a:hover { background: var(--qb-ink); color: var(--qb-paper); }
.qb-credit { display: grid; grid-template-columns: 4fr 4fr 4fr; gap: 24px; padding-top: 24px; border-top: 1px solid var(--qb-rule); color: var(--qb-muted); font: 13px var(--qb-mono); letter-spacing: .06em; text-transform: uppercase; }
.qb-credit span:nth-child(2) { text-align: center; }
.qb-credit span:last-child { text-align: right; }

.quietbar-case > footer { border-top: 0; background: var(--qb-ink); color: rgba(241, 240, 234, .54); }
.quietbar-case > footer .ft-content { max-width: 1520px; }

.qb-reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1); }
.qb-reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1000px) {
  .qb-rail { display: none; }
  .qb-observation-copy { grid-column: 1 / 9; }
  .qb-intervention-head h2,
  .qb-shipping-head h2 { grid-column: 1 / 9; }
  .qb-reflection-icon { grid-column: 1 / 4; }
  .qb-reflection-copy { grid-column: 4 / 13; }
}

@media (max-width: 760px) {
  .qb-shell { padding-inline: 24px; }
  .qb-hero-meta { grid-template-columns: 1fr 1fr; }
  .qb-hero-meta span:nth-child(2) { text-align: right; }
  .qb-hero-meta span:last-child { display: none; }
  .qb-hero-title { display: block; }
  .qb-hero h1 { font-size: clamp(76px, 22vw, 150px); }
  .qb-hero-intro { max-width: 31ch; margin: 56px 0 0 auto; }
  .qb-boundary { margin-inline: 24px; }
  .qb-project-strip { grid-template-columns: 1fr; }
  .qb-project-strip dl { padding: 20px 0 24px; }
  .qb-project-strip dl + dl { padding-left: 0; border-left: 0; }
  .qb-section-label { grid-template-columns: 1fr 7fr; }
  .qb-observation-grid { display: block; }
  .qb-observation-copy h2 { max-width: 11ch; }
  .qb-observation-notes { grid-template-columns: 1fr; }
  .qb-observation-notes article { min-height: auto; padding: 24px 0 56px; }
  .qb-observation-notes article + article { padding-left: 0; border-left: 0; }
  .qb-observation-notes h3 { margin-top: 48px; }
  .qb-method-head { display: block; }
  .qb-method-head h2 { margin-top: 48px; }
  .qb-method-list article,
  .qb-choice-list article { grid-template-columns: 48px 1fr; gap: 20px; }
  .qb-method-list p,
  .qb-choice-list p { grid-column: 2; margin-top: 8px; }
  .qb-intervention-head,
  .qb-shipping-head { display: block; }
  .qb-intervention-head .qb-body,
  .qb-shipping-head .qb-body { max-width: 38ch; margin: 56px 0 0 auto; }
  .qb-demo-copy { grid-template-columns: 1fr 5fr; gap: 24px; }
  .qb-demo-copy p { grid-column: 2; margin-top: 20px; }
  .qb-choices-head { display: block; }
  .qb-choices-head h2 { margin-top: 48px; }
  .qb-checks { grid-template-columns: 1fr; }
  .qb-checks article { padding: 24px 0 56px; }
  .qb-checks article + article { padding-left: 0; border-left: 0; }
  .qb-release-note { grid-template-columns: 1fr; }
  .qb-reflection-grid { display: block; }
  .qb-reflection-icon { margin-bottom: 80px; }
  .qb-reflection-copy h2 { max-width: 13ch; }
  .qb-credit { grid-template-columns: 1fr; }
  .qb-credit span:nth-child(2),
  .qb-credit span:last-child { text-align: left; }
}

@media (max-width: 560px) {
  .quietbar-case nav { min-height: 58px; padding-inline: 16px; }
  .quietbar-case nav .nav-links > a { display: none; }
  .qb-language { cursor: pointer; }
  .qb-shell { padding-inline: 16px; }
  .qb-section { padding-block: 104px; }
  .qb-hero { padding-top: 58px; }
  .qb-hero-meta { padding-top: 28px; }
  .qb-hero-title { padding-block: 88px 72px; }
  .qb-hero-title .qb-eyebrow { margin-bottom: 32px; }
  .qb-hero h1 { font-size: clamp(68px, 21vw, 108px); }
  .qb-hero-intro { font-size: 16px; }
  .qb-boundary { margin-inline: 16px; padding-inline: 8px; }
  .qb-boundary > div { gap: 7px; }
  .qb-boundary > div:last-child span:first-child { display: none; }
  .qb-hero-media figcaption { display: grid; line-height: 1.6; }
  .qb-observation-grid,
  .qb-method-head,
  .qb-intervention-head,
  .qb-shipping-head { padding-top: 72px; }
  .qb-observation-copy h2,
  .qb-method-head h2,
  .qb-intervention-head h2,
  .qb-choices-head h2,
  .qb-shipping-head h2,
  .qb-reflection-copy h2 { font-size: clamp(48px, 14vw, 70px); }
  .qb-observation-copy .qb-body,
  .qb-reflection-copy .qb-body { margin-top: 40px; }
  .qb-method-head { padding-bottom: 80px; }
  .qb-method-list article,
  .qb-choice-list article { padding: 32px 0; }
  .qb-demo { margin-top: 112px; }
  .qb-demo-copy { display: block; padding-bottom: 40px; }
  .qb-demo-copy h3 { margin-top: 40px; font-size: clamp(34px, 10vw, 48px); }
  .qb-demo-copy p { margin-top: 20px; }
  .qb-demo figcaption { padding-bottom: 14px; }
  .qb-choices-head { padding-block: 72px 96px; }
  .qb-film { margin-top: 72px; }
  .qb-checks { margin-top: 96px; }
  .qb-checks strong { font-size: 96px; }
  .qb-reflection-grid { padding-block: 88px 112px; }
  .qb-reflection-icon img { width: 112px; }
}

@media (prefers-reduced-motion: reduce) {
  .qb-reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

.qb-hero,
.qb-choices,
.quietbar-case > footer {
  --qb-orange: #ff795f;
}

.qb-language,
.qb-rail,
.qb-eyebrow,
.qb-hero-meta,
.qb-boundary,
.qb-hero-media figcaption,
.qb-demo figcaption,
.qb-project-strip dt,
.qb-project-strip dd,
.qb-section-label,
.qb-observation-notes article > span,
.qb-method-list article > span,
.qb-demo-copy > span,
.qb-choice-list article > span,
.qb-film > div,
.qb-release-note > span,
.qb-actions a,
.qb-credit {
  font-size: 13px;
}

.qb-rail {
  padding: 10px 7px;
  border: 1px solid rgba(17, 17, 15, .16);
  border-radius: 999px;
  background: rgba(241, 240, 234, .94);
  color: #5d5a53;
  mix-blend-mode: normal;
}

.qb-hero-meta,
.qb-hero-media figcaption,
.qb-project-strip dt,
.quietbar-case > footer {
  color: rgba(241, 240, 234, .76);
}

.qb-choices .qb-choice-list p {
  color: rgba(241, 240, 234, .74);
}