*,*:before,*:after{box-sizing:border-box}:root{color-scheme:dark;--md-sys-color-primary: #ffb1c8;--md-sys-color-on-primary: #5e1133;--md-sys-color-primary-container: #7d2949;--md-sys-color-on-primary-container: #ffd9e2;--md-sys-color-secondary-container: #5b3f47;--md-sys-color-on-secondary-container: #ffd9e2;--md-sys-color-surface: #1a1114;--md-sys-color-surface-container-high: #31282b;--md-sys-color-surface-container-highest: #3c3235;--md-sys-color-on-surface: #eedfe2;--md-sys-color-on-surface-variant: #d6c2c7;--md-sys-color-outline: #a08d92;--md-sys-color-error: #ffb4ab;--md-elevation-1: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px 1px rgba(0, 0, 0, .15);--md-elevation-2: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 6px 2px rgba(0, 0, 0, .15);--md-shape-xl: 28px;--md-shape-full: 9999px;--md-motion-standard: .2s cubic-bezier(.2, 0, 0, 1);--md-motion-emphasized: .5s cubic-bezier(.2, 0, 0, 1);--arena-max-w: min(100%, 720px);--arena-max-h: min(72dvh, 800px)}html,body{margin:0;min-height:100%}body{font-family:Roboto,system-ui,sans-serif;background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);-webkit-font-smoothing:antialiased}#app{min-height:100dvh;display:flex;flex-direction:column;max-width:48rem;margin:0 auto;padding:1rem 1rem 1.5rem}header{margin-bottom:1rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.75rem}header .location{margin:0;font-size:1rem;font-weight:500;line-height:1.35rem;color:var(--md-sys-color-on-surface)}.chip-picker{display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem;padding:.25rem;background:var(--md-sys-color-surface-container-highest);border-radius:var(--md-shape-full)}.chip-picker:has(input:disabled){opacity:.55;pointer-events:none}.chip{position:relative;cursor:pointer}.chip input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.chip span{display:inline-block;padding:.5rem .9rem;font-size:.8125rem;font-weight:500;line-height:1rem;color:var(--md-sys-color-on-surface-variant);border-radius:var(--md-shape-full);transition:background var(--md-motion-standard),color var(--md-motion-standard)}.chip input:checked+span{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}.chip input:focus-visible+span{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.viewer{flex:1;display:flex;flex-direction:column;align-items:center;gap:1rem}.arena{width:100%;display:flex;justify-content:center}.frame{position:relative;flex-shrink:0;max-width:var(--arena-max-w);max-height:var(--arena-max-h);background:var(--md-sys-color-surface-container-high);border-radius:var(--md-shape-xl);overflow:hidden;box-shadow:var(--md-elevation-2);isolation:isolate;line-height:0}.frame.is-loading{width:12rem;height:12rem;display:flex;align-items:center;justify-content:center}.frame img{display:block;width:100%;height:100%;object-fit:contain;border-radius:var(--md-shape-xl);opacity:0;transition:opacity var(--md-motion-emphasized)}.frame img.loaded{opacity:1}.frame .placeholder{padding:2rem 1.5rem;min-width:12rem;text-align:center;font-size:.875rem;line-height:1.25rem;color:var(--md-sys-color-on-surface-variant)}.frame .placeholder.error{color:var(--md-sys-color-error)}.spinner{width:3rem;height:3rem;border-radius:50%;border:4px solid var(--md-sys-color-surface-container-highest);border-top-color:var(--md-sys-color-primary);animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.meta{width:100%;display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:0 .25rem;font-size:.875rem;line-height:1.25rem;text-align:center;color:var(--md-sys-color-on-surface-variant)}.meta .tags{max-width:100%;font-size:.75rem;opacity:.9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.meta a{color:var(--md-sys-color-primary);text-decoration:none;font-weight:500}.meta a:hover{text-decoration:underline}.actions{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;padding-top:.25rem}button{font-family:inherit;font-size:.875rem;font-weight:500;line-height:1.25rem;min-height:2.5rem;padding:.625rem 1.5rem;border:none;cursor:pointer;transition:background var(--md-motion-standard),box-shadow var(--md-motion-standard),opacity var(--md-motion-standard)}button:disabled{opacity:.38;cursor:not-allowed}button.primary{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);border-radius:var(--md-shape-full);box-shadow:var(--md-elevation-1)}button.primary:not(:disabled):hover{box-shadow:var(--md-elevation-2);filter:brightness(1.05)}button.secondary{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);border-radius:var(--md-shape-full)}footer{margin-top:auto;padding-top:1.5rem;text-align:center;font-size:.75rem;color:var(--md-sys-color-outline)}footer a{color:var(--md-sys-color-primary);text-decoration:none}footer a:hover{text-decoration:underline}.footer-sep{margin:0 .35rem;color:var(--md-sys-color-outline)}.rating-wrap{position:relative;display:flex;justify-content:center;width:100%}.rating-chip{display:inline-flex;align-items:center;justify-content:center;width:auto;padding:.3rem .7rem;border:none;border-radius:var(--md-shape-full);font-family:inherit;font-size:.75rem;font-weight:400;line-height:1rem;background:var(--md-sys-color-surface-container-highest);color:var(--md-sys-color-on-surface-variant);cursor:pointer;transition:opacity var(--md-motion-standard)}.rating-chip:not(:disabled):hover{opacity:.9}.rating-chip:disabled{cursor:default;opacity:.55}.rating-popover{position:absolute;bottom:calc(100% + .3rem);left:50%;z-index:20;width:max-content;transform:translate(-50%);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease,visibility .12s ease}.rating-popover.is-open{opacity:1;visibility:visible;pointer-events:auto}.rating-popover__panel{display:flex;flex-direction:column;gap:0;padding:.2rem;border-radius:8px;background:var(--md-sys-color-surface-container-highest);box-shadow:0 4px 12px #00000059}.rating-option{width:100%;padding:.22rem .5rem;border:none;border-radius:6px;background:transparent;color:var(--md-sys-color-on-surface-variant);font-family:inherit;font-size:.75rem;font-weight:400;line-height:1rem;text-align:left;white-space:nowrap;cursor:pointer;transition:background var(--md-motion-standard)}.rating-option:hover{background:color-mix(in srgb,var(--md-sys-color-on-surface) 8%,transparent)}.rating-option.is-active{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}