:root { --ink:#132019; --cream:#f4f0e7; --paper:#fffdf7; --red:#ec5a3f; --teal:#0b6b68; --sun:#f3c84b; --line:#c8c7bb; --muted:#667168; --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; color: var(--ink); background: #d8d8d2; font-family: var(--sans); }
button, a { font: inherit; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.preview-skip { position: fixed; top: .65rem; left: .65rem; z-index: 20; transform: translateY(-200%); padding: .65rem .85rem; color: white; background: var(--ink); font-weight: 850; }
.preview-skip:focus { transform: translateY(0); }
.preview-app { display: grid; grid-template-rows: auto 1fr; height: 100%; }
.preview-bar { position: relative; z-index: 5; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 1rem; align-items: center; min-height: 68px; padding: .65rem 1rem; background: var(--cream); border-bottom: 1px solid var(--ink); box-shadow: 0 7px 24px rgba(19,32,25,.12); }
.preview-brand { display: flex; gap: .7rem; align-items: center; min-width: 0; color: inherit; text-decoration: none; }
.preview-brand-mark { display: grid; flex: none; width: 34px; aspect-ratio: 1; place-items: center; color: var(--cream); background: var(--ink); border-radius: 50%; font-weight: 900; }
.preview-brand-copy { min-width: 0; }
.preview-brand-copy strong, .preview-brand-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-brand-copy strong { font-size: .78rem; text-transform: uppercase; }
.preview-brand-copy span { color: var(--muted); font: 700 .58rem/1.3 var(--mono); text-transform: uppercase; }
.device-switcher { display: flex; padding: 3px; background: #deddd6; border: 1px solid #b6b5ad; border-radius: 999px; }
.device-switcher button { min-width: 78px; min-height: 34px; padding: .45rem .75rem; color: var(--muted); background: transparent; border: 0; border-radius: 999px; font: 800 .62rem/1 var(--mono); letter-spacing: .04em; cursor: pointer; text-transform: uppercase; }
.device-switcher button[aria-pressed="true"] { color: white; background: var(--ink); }
.preview-actions { display: flex; gap: .55rem; justify-content: flex-end; }
.preview-action { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; padding: .65rem .85rem; border: 1px solid var(--ink); border-radius: 999px; font-size: .7rem; font-weight: 850; text-decoration: none; }
.preview-action.primary { color: white; background: var(--ink); }
.preview-stage { position: relative; overflow: auto; display: grid; place-items: stretch; min-height: 0; padding: 0; background: #cacbc5; }
.preview-frame-wrap { position: relative; width: 100%; height: 100%; margin: auto; background: white; transition: width .25s ease, height .25s ease, border-radius .25s ease, box-shadow .25s ease; }
.preview-frame-wrap.phone { width: min(390px, calc(100% - 2rem)); height: calc(100% - 2rem); margin: 1rem auto; overflow: hidden; border: 8px solid var(--ink); border-radius: 30px; box-shadow: 0 26px 70px rgba(19,32,25,.28); }
.preview-frame { display: block; width: 100%; height: 100%; border: 0; background: white; }
.expired { display: none; position: absolute; inset: 0; z-index: 4; place-items: center; padding: 2rem; color: white; background: rgba(19,32,25,.96); text-align: center; }
.expired.is-visible { display: grid; }
.expired-inner { max-width: 540px; }
.expired h2 { margin: 0 0 .8rem; font-size: clamp(2.3rem,6vw,4.2rem); line-height: .95; }
.expired p { color: #c9d4cc; }
.expired a { display: inline-flex; margin-top: .8rem; padding: .8rem 1rem; color: var(--ink); background: var(--sun); border-radius: 999px; font-weight: 850; text-decoration: none; }

@media (max-width: 760px) {
  .preview-bar { grid-template-columns: 1fr auto; min-height: 62px; }
  .device-switcher { display: none; }
  .preview-brand-copy span { max-width: 42vw; }
  .preview-actions .secondary { display: none; }
  .preview-stage, .preview-frame-wrap, .preview-frame-wrap.phone { width: 100%; height: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) { .preview-frame-wrap { transition: none; } }