:root { color-scheme: dark; --accent: #00ff41; --background: #050505; --muted: #afb2bc; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: var(--background); color: #eeeeef; font-family: system-ui, sans-serif; }
a { color: inherit; text-decoration: none; }
button, select { font: inherit; }
button, .viewer-actions a, .primary-action { min-height: 40px; padding: .6rem .8rem; border: 1px solid #373940; border-radius: 6px; background: #12131a; color: #eeeeef; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; font-size: .8rem; white-space: nowrap; }
button:hover, .viewer-actions a:hover { border-color: var(--accent); }
a:focus-visible, button:focus-visible, select:focus-visible, main:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.primary-action { border-color: #00ff41 !important; background: #00ff41 !important; color: #050505 !important; font-weight: 700; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 5; padding: .8rem; background: #00ff41; color: #050505; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.viewer-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: .75rem 1.1rem; border-bottom: 1px solid #30323b; }
.viewer-brand { font-family: ui-monospace, monospace; font-weight: 800; letter-spacing: -.04em; font-size: 1.1rem; white-space: nowrap; }
.viewer-brand span { color: #00ff41; }
.app-select { display: flex; flex-direction: column; gap: .3rem; min-width: 180px; flex: 1; max-width: 330px; }
.app-select label { color: var(--muted); font-family: ui-monospace, monospace; text-transform: uppercase; font-size: .6rem; letter-spacing: .12em; }
select { width: 100%; min-height: 40px; border: 1px solid #41434c; border-radius: 6px; background: #12131a; color: #eeeeef; padding: .5rem 2rem .5rem .7rem; }
.viewer-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-left: auto; }
.viewer-info { display: flex; align-items: center; gap: 1rem; padding: .5rem 1.1rem; border-bottom: 1px solid #23252d; color: var(--muted); font-size: .72rem; }
.viewer-info p { margin: 0; flex: 1; line-height: 1.45; }
.viewer-info a { text-decoration: underline; }
main { position: relative; flex: 1; min-height: 0; overflow: auto; }
.frame-container { width: 100%; height: 100%; background: #fff; }
iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.app-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1rem; padding: 2rem; max-width: 1280px; margin: auto; }
.app-tile { display: block; padding: 1.1rem; border: 1px solid #30323b; border-radius: 8px; background: #101116; }
.app-tile:hover { border-color: var(--accent); }
.app-tile img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: contain; background: #050505; border-radius: 4px; }
.app-tile h2 { font-size: 1rem; margin: 1rem 0 .5rem; }
.app-tile p { font-size: .8rem; color: var(--muted); line-height: 1.5; margin: 0; }
.screenshot-panel { max-width: 1200px; padding: clamp(1rem, 4vw, 3rem); margin: auto; }
.preview-copy { max-width: 760px; padding: 1rem 0 1.5rem; }
.preview-copy h1 { font-family: ui-monospace, monospace; font-size: clamp(1.8rem, 5vw, 3rem); margin: .6rem 0 1rem; }
.preview-copy p { color: var(--muted); line-height: 1.6; }
.eyebrow { color: #00ff41 !important; text-transform: uppercase; font-size: .7rem; letter-spacing: .15em; }
.preview-copy .primary-action { margin-right: .4rem; }
figure { margin: 0; padding: .6rem; border: 1px solid #363840; background: #101116; border-radius: 8px; }
figure img { display: block; width: 100%; height: auto; }
figcaption { color: var(--muted); font-size: .7rem; padding: .7rem .3rem .2rem; }
.loading-message { position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); padding: .7rem 1rem; border-radius: 6px; background: #12131a; color: #eeeeef; box-shadow: 0 2px 12px #0004; pointer-events: none; font-size: .8rem; }
.load-help { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 2rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem; padding: .6rem; background: #12131a; border: 1px solid #41434c; border-radius: 6px; font-size: .8rem; }
.load-help a { text-decoration: underline; }
.load-help button { min-height: 32px; }
@media (max-width: 720px) {
    .viewer-toolbar { padding: .6rem .75rem; gap: .6rem; }
    .viewer-brand { font-size: .95rem; }
    .app-select { min-width: 0; max-width: none; }
    .viewer-actions { width: 100%; margin-left: 0; }
    .viewer-actions > * { flex: 1; padding: .5rem; font-size: .72rem; }
    .viewer-info { padding: .45rem .75rem; }
    .app-list { padding: 1rem; }
}