* { box-sizing: border-box; }
body { margin: 0; height: 100dvh; display: flex; flex-direction: column; background: #e8e8e8; color: #171717; font-family: system-ui, sans-serif; }
button, a { font: inherit; }
button { cursor: pointer; border: 0; border-radius: 6px; padding: 10px 12px; background: transparent; font-size: 12px; color: #555; }
button:focus-visible, a:focus-visible { outline: 3px solid #6d62c7; outline-offset: 3px; }
button[aria-pressed=true] { color: white; background: #202020; }
button:hover:not([aria-pressed=true]) { background: #f0f0f0; }
.stage { flex: 1; min-height: 0; display: flex; justify-content: center; overflow: hidden; }
.frame { height: 100%; width: 100%; border: 0; background: white; transition: width .3s; }
.frame[hidden] { display: none; }
.stage.phone .frame { width: 390px; max-width: 100%; box-shadow: 0 0 30px #0001; }
.bar { flex: none; align-self: center; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; align-items: center; margin: 14px 12px; padding: 10px 14px; background: #fff; box-shadow: 0 4px 24px #0002; border: 1px solid #dedede; border-radius: 12px; max-width: calc(100% - 24px); }
.identity { font-size: 11px; line-height: 1.6; color: #666; padding-right: 12px; border-right: 1px solid #ddd; }
.identity strong { display: block; color: #161616; letter-spacing: .12em; font-size: 10px; }
.variants, .sizes, .pages { display: flex; align-items: center; gap: 4px; }
.variants button, .pages { white-space: nowrap; }
.arrow { padding: 8px; font-size: 19px; }
.sizes { border-left: 1px solid #ddd; padding-left: 12px; }
.page-control { background: #f4f4f4; }
.open { padding: 10px 4px; font-size: 11px; color: #555; text-decoration: none; }
.open:hover { text-decoration: underline; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 1200px) { .identity { display: none; } .bar { gap: 8px; } }
@media (max-width: 640px) {
  .bar { margin: 8px; max-width: calc(100% - 16px); padding: 8px; gap: 6px; }
  .variants { width: 100%; justify-content: center; flex-wrap: wrap; }
  .variants button { padding: 10px 8px; font-size: 11px; }
  .variants .arrow, .sizes { display: none; }
  .pages { flex-wrap: wrap; justify-content: center; }
  .page-control { padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) { .frame { transition: none; } }