/* Integrated design-language demonstration — /brand/
 * Shared palette and typography variables live in /styles.css. */

.brand-page {
  --radius-control: var(--radius-button);
}

.brand-main { overflow: hidden; }
.brand-page .site-header { position: relative; z-index: 10; }
.brand-page .nav-cta { border-radius: var(--radius-control); }
.brand-page a:focus-visible { outline: 3px solid var(--clay); outline-offset: 4px; }

.brand-hero {
  width: min(100% - 3rem, 88rem);
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 8rem) 0 clamp(5rem, 9vw, 9rem);
  display: grid;
  grid-template-columns: minmax(21rem, 0.72fr) minmax(34rem, 1.28fr);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}

.brand-hero h1 {
  max-width: 10ch;
  font-size: clamp(4rem, 7vw, 7rem);
}

.brand-hero h1 em { color: var(--fern); }
.brand-lede { max-width: 36rem; margin: 2rem 0 0; color: #4d4a40; font-size: clamp(1.05rem, 1.4vw, 1.22rem); }
.brand-principle { max-width: 34rem; margin: 1.5rem 0 0; padding-left: 1rem; border-left: 2px solid var(--clay); color: var(--muted-ink); }
.brand-principle strong { color: var(--moss); }
.brand-toc { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; margin-top: 2rem; }
.brand-toc a { min-height: 2.75rem; display: inline-flex; align-items: center; color: var(--moss); font-size: 0.82rem; font-weight: 700; text-decoration: none; }
.brand-toc a:hover { color: var(--fern); text-decoration: underline; text-underline-offset: 0.25rem; }

.hero-demonstration { min-width: 0; margin: 0; }
.hero-demonstration figcaption { margin-top: 0.9rem; color: var(--muted-ink); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-align: right; text-transform: uppercase; }

.plan-stage {
  position: relative;
  overflow: hidden;
  background-color: #fbfaf5;
  background-image: linear-gradient(rgba(45,74,42,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(45,74,42,.055) 1px, transparent 1px);
  background-size: 24px 24px;
  border: 1px solid var(--line);
  box-shadow: 0 2rem 5rem rgba(39, 51, 29, 0.14);
}

.plan-stage-large { aspect-ratio: 1.23 / 1; border-radius: var(--radius-card); }
.plan-drawing { display: block; width: 100%; height: 100%; }
.plan-drawing path, .plan-drawing circle { vector-effect: non-scaling-stroke; }
.plan-boundary { fill: rgba(245,240,232,.25); stroke: #6d695f; stroke-width: 1.5; }
.plan-path { fill: none; stroke: #c6bca9; stroke-width: 36; stroke-linecap: round; }
.plan-bed { fill: rgba(139,175,124,.2); stroke: var(--fern); stroke-width: 2; }
.plan-bed-selected { fill: rgba(45,74,42,.25); stroke: var(--moss); stroke-width: 3; }
.plan-planting circle { fill: var(--marker-detected); stroke: var(--marker-outline); stroke-width: 2; }
.plan-measurements { fill: none; stroke: #69655c; stroke-width: 1; }
.plan-measurements text { fill: #565248; stroke: none; font: 700 12px ui-monospace, monospace; letter-spacing: .08em; text-anchor: middle; }
.plan-label { position: absolute; padding: 0.25rem 0.4rem; color: var(--moss); background: rgba(250,247,242,.9); border: 1px solid rgba(45,74,42,.18); border-radius: var(--radius-chip); font: 700 0.64rem/1.2 ui-monospace, monospace; letter-spacing: .07em; }
.plan-label span { color: var(--muted-ink); }
.label-north { top: 8%; right: 11%; }

.plan-annotation { position: absolute; display: grid; grid-template-columns: 1.75rem 2rem minmax(8rem, 1fr); align-items: center; max-width: 17rem; }
.annotation-review { top: 29%; left: 22%; }
.annotation-task { right: 4%; bottom: 13%; }
.annotation-marker, .state-marker {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  border: 2px solid var(--marker-outline);
  border-radius: 50%;
  color: var(--soil);
  font: 800 0.8rem/1 ui-monospace, monospace;
}
.annotation-review .annotation-marker, .state-review .state-marker, .motion-leader .state-marker, .marker-from { background: var(--marker-review); }
.annotation-task .annotation-marker, .state-task .state-marker, .image-action .state-marker { background: var(--marker-task); }
.state-detected .state-marker { background: var(--marker-detected); }
.state-confirmed .state-marker, .marker-to { color: var(--chalk); background: var(--marker-confirmed); }
.state-user .state-marker { background: var(--marker-user); box-shadow: 0 0 0 3px #fbfaf5, 0 0 0 4px var(--marker-user); }
.annotation-leader { width: 100%; border-top: 1px dashed rgba(19,53,26,.72); }
.plan-annotation > div { padding: 0.65rem 0.75rem; background: rgba(250,247,242,.96); border: 1px solid rgba(45,74,42,.18); border-radius: var(--radius-chip); box-shadow: 0 7px 22px rgba(28,26,20,.1); }
.plan-annotation strong, .plan-annotation em, .plan-annotation small { display: block; }
.plan-annotation strong { color: var(--soil); font-size: 0.74rem; }
.plan-annotation em { color: var(--moss); font-family: var(--serif); font-size: 0.76rem; }
.plan-annotation small { margin-top: 0.15rem; color: var(--muted-ink); font-size: 0.61rem; }

.brand-section {
  padding: clamp(5rem, 9vw, 9rem) max(1.5rem, calc((100vw - 88rem) / 2));
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0 2.5rem;
  border-top: 1px solid var(--line);
}
.brand-section:nth-of-type(even) { background: var(--cream); }
.brand-section .section-number { grid-row: span 2; margin-top: 0.35rem; }
.brand-section-head { max-width: 58rem; margin-bottom: 3rem; }
.brand-section-head h2 { color: var(--moss); font-size: clamp(2.8rem, 5vw, 5.2rem); }
.brand-section-head > p:last-child { max-width: 44rem; margin: 1.25rem 0 0; color: #514e44; font-size: 1.03rem; }
.brand-section > :not(.section-number) { grid-column: 2; }

.principle-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.principle-example { padding: 1rem; background: var(--parchment); border: 1px solid var(--line); border-radius: var(--radius-card); }
.principle-example > div:last-child { display: grid; grid-template-columns: 4rem 1fr; gap: 1rem; padding: 1rem 0.25rem 0.25rem; }
.principle-example strong { color: var(--moss); }
.principle-bad strong { color: var(--terracotta); }
.principle-example p { margin: 0; color: var(--muted-ink); font-size: 0.9rem; }
.mini-plan { position: relative; height: 16rem; overflow: hidden; background: #fbfaf5; background-image: linear-gradient(rgba(45,74,42,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(45,74,42,.05) 1px, transparent 1px); background-size: 20px 20px; border: 1px solid var(--line); }
.mini-bed { position: absolute; border: 2px solid var(--fern); background: rgba(139,175,124,.18); border-radius: 46% 54% 38% 62%; }
.mini-bed-a { inset: 2.5rem 45% 5rem 2rem; transform: rotate(-8deg); }
.mini-bed-b { inset: 5rem 2rem 2rem 50%; transform: rotate(9deg); }
.mini-marker { position: absolute; z-index: 2; top: 3.8rem; left: 36%; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border: 2px solid var(--marker-outline); border-radius: 50%; background: var(--marker-review); font-weight: 800; }
.mini-leader { position: absolute; z-index: 2; top: 4.65rem; left: calc(36% + 1.7rem); width: 4.5rem; border-top: 1px dashed var(--moss); }
.mini-label { position: absolute; z-index: 2; top: 3.7rem; left: calc(36% + 6rem); padding: .35rem .55rem; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-chip); color: var(--moss); font-size: .7rem; font-weight: 700; }
.blocking-card { position: absolute; z-index: 2; top: 2rem; left: 2rem; width: 70%; height: 7rem; display: grid; place-items: center; color: #777; background: #fff; border: 1px solid #bbb; border-radius: 1.5rem; box-shadow: 0 1rem 2rem rgba(0,0,0,.13); }
.blocking-card.second { top: 8rem; right: 1.5rem; left: auto; width: 57%; }

.mark-showcase { display: grid; grid-template-columns: minmax(18rem, .75fr) 1.25fr; gap: 1rem; }
.mark-primary-card, .mark-card { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; background: var(--parchment); border: 1px solid var(--line); border-radius: var(--radius-card); }
.mark-primary-card { min-height: 31rem; }
.mark-primary-card img { width: min(60%, 14rem); }
.mark-supporting { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.mark-card { min-height: 15rem; padding: 1.5rem; }
.mark-card img { width: auto; height: auto; max-height: 6rem; }
.mark-on-dark { background: var(--dark); border-color: rgba(255,255,255,.13); }
.mark-on-moss { background: var(--moss); }
.mark-primary-card figcaption, .mark-card figcaption { color: var(--muted-ink); font-size: .73rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.mark-on-dark figcaption, .mark-on-moss figcaption { color: var(--sage); }
.lockup-strip { margin-top: 1rem; padding: 1.4rem; display: grid; grid-template-columns: 1fr 1fr .65fr; gap: 2rem; align-items: center; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-card); }
.lockup-strip p { color: var(--muted-ink); font-size: .85rem; }

.annotation-section { color: var(--chalk); background: var(--moss) !important; }
.annotation-section .section-number, .annotation-section .brand-section-head > p:last-child { color: #d2dfcd; }
.annotation-section .eyebrow { color: var(--straw); }
.annotation-section .brand-section-head h2 { color: var(--chalk); }
.annotation-grid { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2); }
.annotation-card { min-width: 0; padding: 1.5rem; display: flex; gap: .9rem; border-right: 1px solid rgba(255,255,255,.18); }
.annotation-card:last-child { border-right: 0; }
.annotation-card h3 { margin: 0 0 .55rem; font-family: var(--serif); font-size: 1.35rem; font-weight: 400; }
.annotation-card p { margin: 0; color: #d2dfcd; font-size: .78rem; line-height: 1.5; }
.annotation-card .state-marker { margin-top: .05rem; }
.leader-comparison { margin-top: 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.leader-comparison > div { padding: 1.25rem; display: grid; grid-template-columns: 5rem 1fr; gap: .25rem 1rem; align-items: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-control); }
.leader-comparison p { grid-column: 2; margin: 0; color: #d2dfcd; font-size: .8rem; }
.source-line { border-top: 2px solid #fff; }
.gfp-line { border-top: 1px dashed var(--straw); }

.color-system { display: grid; grid-template-columns: 1.4fr .6fr; gap: 2rem; }
.token-group h3 { margin: 0 0 1rem; color: var(--moss); font-family: var(--serif); font-size: 1.5rem; font-weight: 400; }
.swatch-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.compact-swatch { min-height: 6rem; padding: .7rem; display: flex; flex-direction: column; justify-content: end; border: 1px solid rgba(28,26,20,.12); border-radius: var(--radius-control); color: var(--soil); }
.compact-swatch span { font-size: .78rem; font-weight: 750; }
.compact-swatch code { font-size: .65rem; }
.swatch-soil, .swatch-moss, .swatch-fern { color: var(--chalk); }
.swatch-soil { background: var(--soil); }.swatch-moss { background: var(--moss); }.swatch-fern { background: var(--fern); }.swatch-sage { background: var(--sage); }.swatch-mist { background: var(--mist); }.swatch-parchment { background: var(--parchment); }.swatch-cream { background: var(--cream); }.swatch-clay { background: var(--clay); }.swatch-sky { background: var(--sky); }
.semantic-pairs { display: flex; flex-direction: column; gap: .7rem; }
.semantic-pairs article { padding: .8rem; display: grid; gap: .7rem; background: var(--parchment); border: 1px solid var(--line); border-radius: var(--radius-control); }
.semantic-pairs article > div { display: flex; justify-content: space-between; gap: 1rem; font-size: .7rem; }
.semantic-sample { min-height: 3rem; display: grid; place-items: center; border-radius: var(--radius-chip); font-size: .78rem; font-weight: 700; }
.action-sample { color: var(--chalk); background: var(--moss); }.surface-sample { color: var(--muted-ink); background: var(--cream); border: 1px solid var(--line); }.warning-sample { color: var(--soil); background: var(--clay); }
.typography-demo { margin-top: 3rem; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.typography-demo > div { min-height: 10rem; padding: 1.3rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.typography-demo span { color: var(--muted-ink); font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.typography-demo p { margin: 1.4rem 0 0; color: var(--moss); }
.type-editorial p { font-family: var(--serif); font-size: clamp(1.8rem,3vw,3rem); line-height: 1; }
.type-interface p { font-size: 1.1rem; font-weight: 650; }.type-botanical p { font-family: var(--serif); font-size: 1.55rem; }.type-data p { font-family: ui-monospace, monospace; font-size: .9rem; font-weight: 700; letter-spacing: .04em; }

.shape-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.shape-comparison article { min-height: 25rem; padding: 1.5rem; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-card); }
.demo-label { margin: 0 0 2rem; color: var(--terracotta); font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.demo-toolbar { padding: .4rem; display: flex; gap: .3rem; background: var(--parchment); border: 1px solid var(--line); border-radius: var(--radius-control); }
.demo-button { min-height: 2.5rem; padding: .55rem .8rem; display: inline-grid; place-items: center; color: var(--moss); background: transparent; border: 1px solid transparent; border-radius: var(--radius-control); font: 700 .78rem var(--sans); }
.demo-toolbar .demo-button:nth-child(2) { color: var(--chalk); background: var(--moss); }
.demo-panel { max-width: 21rem; margin: 2rem auto; padding: 1rem; display: grid; gap: .3rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: 0 5px 18px rgba(28,26,20,.08); }
.demo-panel strong { color: var(--moss); }.demo-panel > span:not(.demo-button) { color: var(--muted-ink); font: .72rem ui-monospace, monospace; }.demo-panel .demo-button { margin-top: .8rem; border-color: var(--line); }
.shape-comparison article > p:last-child { margin: 2rem 0 0; color: var(--muted-ink); font-size: .85rem; }
.organic-demo svg { width: 100%; min-height: 14rem; }
.organic-demo path { fill: rgba(139,175,124,.25); stroke: var(--fern); stroke-width: 2; }.organic-demo circle { fill: var(--marker-detected); stroke: var(--marker-outline); stroke-width: 2; }

.imagery-sequence { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: .65rem; align-items: center; }
.image-mode { min-width: 0; margin: 0; overflow: hidden; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-card); }
.image-mode > img, .image-plan-art, .action-card { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.image-detail > img { object-position: 69% 72%; transform: scale(1.65); }
.image-mode figcaption { position: relative; padding: 1rem; background: var(--cream); }
.image-mode figcaption strong { color: var(--moss); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
.image-mode figcaption p { margin: .5rem 0 0; color: var(--muted-ink); font-size: .75rem; line-height: 1.45; }
.sequence-arrow { color: var(--clay); font-size: 1.5rem; }
.image-plan-art { position: relative; overflow: hidden; background-color: #fbfaf5; background-image: linear-gradient(rgba(45,74,42,.06) 1px, transparent 1px),linear-gradient(90deg,rgba(45,74,42,.06) 1px,transparent 1px); background-size: 18px 18px; }
.image-plan-art i { position: absolute; border: 2px solid var(--fern); background: rgba(139,175,124,.2); border-radius: 45% 55% 39% 61%; }.image-plan-art i:first-child { inset: 18% 45% 30% 8%; }.image-plan-art i:nth-child(2) { inset: 38% 8% 10% 48%; transform: rotate(9deg); }.image-plan-art span { position: absolute; top: 25%; left: 42%; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border: 2px solid var(--marker-outline); border-radius: 50%; background: var(--marker-user); font: 800 .68rem ui-monospace,monospace; }
.action-card { padding: 1rem; display: flex; align-items: center; justify-content: center; gap: .65rem; background: var(--mist); }
.action-card strong, .action-card em, .action-card small { display: block; }.action-card strong { color: var(--soil); font-size: .8rem; }.action-card em { color: var(--moss); font-family: var(--serif); font-size: .78rem; }.action-card small { color: var(--muted-ink); font-size: .65rem; }

.motion-section { background: var(--parchment) !important; }
.motion-demos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.motion-demo { min-height: 13rem; padding: 1.3rem; display: flex; align-items: center; justify-content: center; gap: .65rem; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-card); }
.motion-demo strong { font-size: .78rem; }.animated-leader { width: 4rem; border-top: 1px dashed var(--moss); transform-origin: left; animation: draw-leader 2.8s ease-in-out infinite; }
.motion-boundary { flex-direction: column; }.motion-boundary svg { width: 80%; }.motion-boundary path { fill: rgba(139,175,124,.15); stroke: var(--moss); stroke-width: 2; stroke-dasharray: 520; animation: trace-bed 3.2s ease-in-out infinite; }
.motion-resolve .marker-from { animation: resolve-out 3.2s ease-in-out infinite; }.motion-resolve .marker-to { animation: resolve-in 3.2s ease-in-out infinite; }.motion-arrow { color: var(--muted-ink); }
@keyframes draw-leader { 0%,15%{transform:scaleX(0)} 50%,85%{transform:scaleX(1)} 100%{transform:scaleX(0)} }
@keyframes trace-bed { 0%,10%{stroke-dashoffset:520} 55%,90%{stroke-dashoffset:0} 100%{stroke-dashoffset:520} }
@keyframes resolve-out { 0%,35%{opacity:1} 55%,100%{opacity:.25} } @keyframes resolve-in { 0%,35%{opacity:.25} 55%,100%{opacity:1} }

.asset-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.asset-links a { min-height: 7rem; padding: 1rem; display: flex; flex-direction: column; justify-content: end; color: var(--moss); background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-control); text-decoration: none; }
.asset-links a:hover { border-color: var(--moss); transform: translateY(-2px); }.asset-links span { color: var(--muted-ink); font-size: .73rem; }
.brand-rules { margin: 2rem 0 0; padding: 1.5rem 1.5rem 1.5rem 2.7rem; display: grid; gap: .65rem; color: #d6e3d1; background: var(--moss); border-radius: var(--radius-card); }
.brand-rules code { font-family: ui-monospace,monospace; }

.brand-page footer .copyright a { color: inherit; font-weight: 650; }

@media (max-width: 1100px) {
  .brand-hero { grid-template-columns: 1fr; }
  .brand-hero-copy { max-width: 49rem; }
  .hero-demonstration { width: min(100%, 52rem); margin-inline: auto; }
  .annotation-grid { grid-template-columns: repeat(3,1fr); }
  .annotation-card { border-bottom: 1px solid rgba(255,255,255,.18); }
  .color-system { grid-template-columns: 1fr; }
  .imagery-sequence { grid-template-columns: 1fr 1fr; }
  .sequence-arrow { display: none; }
}

@media (max-width: 760px) {
  .brand-hero { width: min(100% - 2rem, 88rem); padding-top: 3.5rem; gap: 3rem; }
  .brand-hero h1 { font-size: clamp(3.3rem, 16vw, 5rem); }
  .plan-stage-large { aspect-ratio: 1 / 1.08; }
  .plan-drawing { transform: scale(1.15); }
  .annotation-review { top: 23%; left: 7%; }.annotation-task { right: 2%; bottom: 5%; }
  .plan-annotation { grid-template-columns: 1.55rem 1rem minmax(7rem,1fr); max-width: 12rem; }.annotation-marker { width: 1.55rem; height: 1.55rem; }.plan-annotation > div { padding: .5rem; }.plan-annotation strong { font-size: .65rem; }.plan-annotation em { font-size: .68rem; }.plan-annotation small { display: none; }
  .brand-section { grid-template-columns: 1fr; gap: .6rem; padding-top: 5rem; padding-bottom: 5rem; }
  .brand-section .section-number { grid-row: auto; }.brand-section > :not(.section-number) { grid-column: 1; }
  .brand-section-head { margin-bottom: 2rem; }.brand-section-head h2 { font-size: clamp(2.7rem,12vw,4.2rem); }
  .principle-comparison, .mark-showcase, .shape-comparison, .motion-demos { grid-template-columns: 1fr; }
  .mark-primary-card { min-height: 20rem; }.mark-supporting { grid-template-columns: 1fr 1fr; }.mark-card { min-height: 11rem; }.lockup-strip { grid-template-columns: 1fr; gap: 1rem; }.lockup-strip img { max-width: 18rem; }
  .annotation-grid { grid-template-columns: 1fr; }.annotation-card { border-right: 0; }.leader-comparison { grid-template-columns: 1fr; }.leader-comparison > div { grid-template-columns: 3.5rem 1fr; }
  .swatch-row { grid-template-columns: 1fr 1fr; }.typography-demo { grid-template-columns: 1fr; }
  .imagery-sequence { grid-template-columns: 1fr; }.image-mode > img, .image-plan-art, .action-card { aspect-ratio: 16/10; }
  .asset-links { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 430px) {
  .plan-stage-large { aspect-ratio: .84 / 1; }.annotation-review { top: 18%; }.annotation-task { bottom: 4%; }.label-north { display: none; }
  .principle-example > div:last-child { grid-template-columns: 1fr; gap: .35rem; }
  .mark-supporting, .swatch-row, .asset-links { grid-template-columns: 1fr; }
  .compact-swatch { min-height: 5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .animated-leader, .motion-boundary path, .motion-resolve .marker-from, .motion-resolve .marker-to { animation: none; }
  .animated-leader { transform: scaleX(1); }
  .motion-boundary path { stroke-dashoffset: 0; }
  .motion-resolve .marker-from { opacity: .25; }.motion-resolve .marker-to { opacity: 1; }
  .asset-links a:hover { transform: none; }
}

/* ADR-072: material showcase, mirrored from canonical tokens. */
.material-light {
  --glass-surface: rgba(250,247,242,0.55);
  --glass-surface-strong: rgba(250,247,242,0.88);
  --glass-border: rgba(255,255,255,0.56);
  --glass-inner-highlight: rgba(255,255,255,0.42);
  --glass-shadow: 0 12px 36px rgba(28,26,20,0.14);
  --glass-blur: 8px;
  --glass-blur-chrome: 4px;
  --glass-page-background: radial-gradient(ellipse at 12% 12%, rgba(139,175,124,0.32), transparent 55%), radial-gradient(ellipse at 90% 70%, rgba(212,180,131,0.28), transparent 60%), #f5f0e8;
}
.material-dark {
  --glass-surface: rgba(18,16,12,0.65);
  --glass-surface-strong: rgba(28,26,20,0.88);
  --glass-border: rgba(255,255,255,0.10);
  --glass-inner-highlight: rgba(255,255,255,0.07);
  --glass-shadow: 0 16px 40px rgba(0,0,0,0.34);
  --glass-blur: 8px;
  --glass-blur-chrome: 4px;
  --glass-page-background: radial-gradient(ellipse at 12% 12%, rgba(74,124,69,0.24), transparent 55%), radial-gradient(ellipse at 90% 70%, rgba(196,133,90,0.13), transparent 60%), #12100c;
}
.material-demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.material-demo { padding: 48px 24px; border-radius: 24px; background: repeating-linear-gradient(45deg, #8baf7c 0 24px, #d4e6c8 24px 48px); }
.material-sample { padding: 24px; border-radius: 24px; background: #faf7f2; color: #1c1a14; border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow), inset 0 1px var(--glass-inner-highlight); }
.material-dark .material-sample { background: #1c1a14; color: #e8e3d9; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .material-sample { background: var(--glass-surface-strong); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
  .material-sample { background: #faf7f2; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .material-dark .material-sample { background: #1c1a14; }
}