/* Shared by the three concept demo sites: reset + the "concept project" banner. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.skip-link { position: fixed; top: .5rem; left: .5rem; z-index: 2000; padding: .6rem .9rem; background: #fff; color: #000; font-weight: 600; transform: translateY(-200%); }
.skip-link:focus { transform: none; }

.concept-banner {
  position: relative; z-index: 1000;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem 1.5rem;
  padding: .55rem clamp(1rem, 4vw, 2.5rem);
  background: #0d0d0c; color: #f1ebe4;
  font: 500 .75rem/1.4 ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  letter-spacing: .04em;
}
.concept-banner b { padding: .12rem .45rem; margin-right: .6rem; background: #c47a57; color: #0d0d0c; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.concept-banner a { color: #c47a57; border-bottom: 1px solid rgba(196,122,87,.55); }
.concept-banner a:hover { border-bottom-color: #c47a57; }
.concept-banner a:focus-visible { outline: 2px solid #c47a57; outline-offset: 3px; }

/* Preview mode (shown scaled inside the Azalai site): calm, non-interactive. */
.is-embed { scroll-behavior: auto !important; }
.is-embed *, .is-embed *::before, .is-embed *::after { animation: none !important; transition: none !important; }
.is-embed .mobile-bar { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}