@layer theme, base, legacy, components, utilities;
@layer legacy {:root{color-scheme:dark;font:14px/1.5 -apple-system,"PingFang TC",sans-serif;background:#111;color:#eee}
*{box-sizing:border-box}body{margin:0}#display{width:100%;height:100dvh;position:relative;overflow:hidden;display:grid;place-items:center;background:#111}
#frame{width:100%;height:100%;display:grid;place-items:center;min-height:0}#art{display:block;width:100%;height:100%;object-fit:contain;min-height:0;min-width:0}
#display[data-aspect="16:9"] #frame{width:min(100vw,177.7778dvh);height:min(100dvh,56.25vw)}
#display[data-aspect="21:9"] #frame{width:min(100vw,233.3333dvh);height:min(100dvh,42.8571vw)}
#display[data-aspect="4:3"] #frame{width:min(100vw,133.3333dvh);height:min(100dvh,75vw)}
#controls{position:absolute;bottom:max(16px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:calc(100% - 24px);max-width:520px;padding:10px 8px 8px;border:1px solid var(--border);border-radius:24px;background:var(--background);color:var(--foreground);box-shadow:0 12px 48px #0006;transition:opacity .3s}
body.quiet #controls{opacity:0;pointer-events:none}body.quiet{cursor:none}
.display-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:2px 14px 10px}
#caption{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--muted-foreground)}
#display-count{font-size:10px;letter-spacing:.12em;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--muted-foreground)}
.display-toolbar{display:flex;align-items:center;justify-content:space-between;gap:4px}
.display-transport{display:flex;align-items:center;border:1px solid var(--border);border-radius:999px;padding:1px;background:var(--card)}
.display-actions{display:flex;align-items:center}
#display-options{position:absolute;right:0;bottom:calc(100% + 12px);width:280px;max-width:100%;padding:16px;border:1px solid var(--border);border-radius:18px;background:var(--popover);color:var(--popover-foreground);box-shadow:0 12px 40px #0008}
#display-options p{font-size:11px;letter-spacing:.08em;color:var(--muted-foreground);margin:0 0 12px}
#display-options label{display:grid;grid-template-columns:60px minmax(0,1fr);align-items:center;gap:12px;font-size:12px;margin-top:10px}
#display-options select{width:100%;min-height:44px}
#message{position:absolute;top:max(12px,env(safe-area-inset-top));left:16px;right:16px;text-align:center;pointer-events:none;text-shadow:0 1px 5px #000}#message:empty{display:none}
@media(max-height:480px) and (orientation:landscape){#controls{bottom:max(8px,env(safe-area-inset-bottom));padding-top:6px}.display-heading{padding-bottom:4px}}
@media(prefers-reduced-motion:reduce){#controls{transition:none}}
}