.device-preview-demo-app { display: grid; grid-template-rows: auto 1fr; height: 100cqh; }
.device-preview-demo-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; background: var(--ui-accent); color: var(--ui-accent-fg); font-weight: 600; }
.device-preview-demo-cards { display: grid; grid-template-columns: 1fr; gap: 10px; align-content: start; padding: 14px; overflow: auto; }
.device-preview-demo-cards > div { padding: 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
@container (min-width: 600px) { .device-preview-demo-cards { grid-template-columns: repeat(3, 1fr); } }
.device-preview-demo-count { min-width: 64px; min-height: 44px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 600 16px var(--ui-font); }


.ui-device-preview { container-type: inline-size; box-sizing: border-box; width: 100%; min-width: 0; color: var(--ui-fg); font: 15px/1.45 var(--ui-font); }
.ui-device-preview-layout { display: grid; gap: 12px; }
.ui-device-preview-bar { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; min-width: 0; }
.ui-device-preview-field { display: grid; gap: 2px; flex: 1 1 150px; min-width: 0; color: var(--ui-muted); font-size: 13px; }
.ui-device-preview-field select {
  box-sizing: border-box; width: 100%; min-height: 44px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 16px/1.2 var(--ui-font);
}
.ui-device-preview-field select:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-device-preview-key {
  flex: none; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 500 14px/1 var(--ui-font); cursor: pointer;
}
.ui-device-preview-key[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-device-preview-key:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-device-preview-size { flex: 1 1 100%; margin: 0; color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-device-preview-stage { min-width: 0; overflow: hidden; }
.ui-device-preview-fit { margin: 0 auto; transition: width .24s ease, height .24s ease; }
.ui-device-preview-body {
  box-sizing: border-box; padding: 10px; border-radius: var(--ui-device-preview-outer); background: #16151c; box-shadow: var(--ui-shadow-lg), inset 0 0 0 2px #3b3946;
  transform: scale(var(--ui-device-preview-scale)); transform-origin: 0 0; transition: transform .24s ease, width .24s ease, height .24s ease;
}
.ui-device-preview-screen { position: relative; container-type: size; overflow: hidden; border-radius: var(--ui-device-preview-radius); background: var(--ui-bg); color: var(--ui-fg); }
.ui-device-preview-marks { position: absolute; inset: 0; z-index: 50; overflow: hidden; border-radius: inherit; pointer-events: none; }
.ui-device-preview-band {
  position: absolute; display: grid; place-items: center; overflow: hidden; color: #fff; font: 600 11px/1 var(--ui-mono);
  background: repeating-linear-gradient(45deg, rgba(220, 40, 60, .38) 0 6px, rgba(220, 40, 60, .16) 6px 12px);
}
.ui-device-preview-cut { position: absolute; background: #000; }
.ui-device-preview-cut-island { left: 50%; top: 11px; width: 126px; height: 37px; margin-left: -63px; border-radius: 19px; }
.ui-device-preview-cut-notch { left: 50%; top: 0; width: 160px; height: 30px; margin-left: -80px; border-radius: 0 0 18px 18px; }
.ui-device-preview-cut-punch { left: 50%; top: 12px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; }
.ui-device-preview-turned .ui-device-preview-cut-island { left: 11px; top: 50%; width: 37px; height: 126px; margin: -63px 0 0; }
.ui-device-preview-turned .ui-device-preview-cut-notch { left: 0; top: 50%; width: 30px; height: 160px; margin: -80px 0 0; border-radius: 0 18px 18px 0; }
.ui-device-preview-turned .ui-device-preview-cut-punch { left: 12px; top: 50%; margin: -10px 0 0; }
.ui-device-preview-home { position: absolute; left: 50%; bottom: 7px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: color-mix(in srgb, var(--ui-fg) 70%, transparent); }
@container (min-width: 700px) {
  .ui-device-preview-layout { grid-template-columns: 200px minmax(0, 1fr); align-items: start; }
  .ui-device-preview-bar { flex-direction: column; align-items: stretch; }
  .ui-device-preview-field { flex: none; }
  .ui-device-preview-size { flex: none; }
}
@media (prefers-reduced-motion: reduce) { .ui-device-preview-fit, .ui-device-preview-body { transition: none; } }


.ui-safe-area { box-sizing: border-box; }
.ui-safe-area-debug { position: relative; }
.ui-safe-area-guide { position: absolute; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; color: var(--ui-fg); font: 600 12px/1.3 var(--ui-mono); }
.ui-safe-area-probe { position: absolute; left: 0; top: 0; visibility: hidden; }
.ui-safe-area-probe-a { width: var(--ui-safe-left, env(safe-area-inset-left, 0px)); height: var(--ui-safe-top, env(safe-area-inset-top, 0px)); }
.ui-safe-area-probe-b { width: var(--ui-safe-right, env(safe-area-inset-right, 0px)); height: var(--ui-safe-bottom, env(safe-area-inset-bottom, 0px)); }
.ui-safe-area-band {
  position: absolute; display: grid; place-items: center; overflow: hidden;
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--ui-danger) 34%, transparent) 0 6px, color-mix(in srgb, var(--ui-danger) 14%, transparent) 6px 12px);
}
.ui-safe-area-band-top { inset: 0 0 auto 0; }
.ui-safe-area-band-bottom { inset: auto 0 0 0; }
.ui-safe-area-band-left { inset: 0 auto 0 0; }
.ui-safe-area-band-right { inset: 0 0 0 auto; }
.ui-safe-area-band-off { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--ui-muted) 22%, transparent) 0 6px, transparent 6px 12px); }
.ui-safe-area-legend {
  position: absolute; left: 50%; top: 24%; display: grid; gap: 4px; width: max-content; max-width: min(320px, 86%); padding: 10px 12px; transform: translateX(-50%);
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: color-mix(in srgb, var(--ui-surface) 90%, transparent); box-shadow: var(--ui-shadow);
}
.ui-safe-area-numbers { margin: 0; font-variant-numeric: tabular-nums; }
.ui-safe-area-warn { margin: 0; color: var(--ui-warning); font: 500 13px/1.4 var(--ui-font); }