:root{--text:#6b6375;--text-h:#08060d;--bg:#192a67;--bg2:#4c63bd;--border:#e5e4e7;--code-bg:#f4f3ec;--accent:#aa3bff;--accent-bg:#aa3bff1a;--accent-border:#ef9300;--social-bg:#f4f3ec80;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--spacing-m:2rem}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--text:#9ca3af;--text-h:#f3f4f6;--bg:#16171d;--border:#2e303a;--code-bg:#1f2028;--accent:#c084fc;--accent-bg:#c084fc26;--accent-border:#ffb700;--social-bg:#2f303a80;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px}}*,:before,:after{box-sizing:border-box}*{margin:0}body{-webkit-font-smoothing:antialiased;min-height:100dvh;line-height:1.6}img,picture,video,canvas,svg{max-width:100%;display:block}input,button,textarea,select{font:inherit}p,h1,h2,h3{overflow-wrap:break-word}h1,h2,h3,h4{text-wrap:balance}body{background-color:var(--bg);background:linear-gradient(52deg,#833ab4 0%,#fd1d1d 50%,#fcb045 100%)}button{width:auto;color:inherit;font:inherit;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;background:0 0;border:none;margin:0;padding:0;line-height:normal;overflow:visible}#app{height:100dvh;padding:var(--spacing-m);justify-content:space-between;gap:var(--spacing-m);flex-direction:column;display:flex;overflow:hidden}#reels{flex:1 1 0;justify-content:space-between;display:flex}#reels>*{border:3px solid var(--text);border-collapse:collapse;flex-grow:1;position:relative;overflow:hidden}#reels>*:before,#reels>*:after{content:"";z-index:2;width:100%;height:20%;position:absolute}#reels>*:before{background:linear-gradient(#6e6e6e 0%,#00000005 90%,#0000 100%);top:0}#reels>*:after{background:linear-gradient(#0000 0%,#00000005 10%,#6e6e6e 100%);bottom:0}#reels>*>*{border-top:2px solid var(--accent-border);text-align:center;background-color:#f1f1f1;justify-content:center;align-items:center;width:100%;transition:bottom 33.3333ms,background-color .5s ease-in-out,color .5s ease-in-out;display:flex;position:absolute}#reels>*>*.selected{color:#16171d;background-color:gold;font-weight:700}#actions{gap:var(--spacing-m);display:flex}#actions>button{padding:calc(var(--spacing-m) / 2);color:#fff;font-variant:small-caps;letter-spacing:.2rem;background:linear-gradient(135deg, var(--bg), var(--bg2));text-shadow:0 1px 1px #0006;cursor:pointer;border:2px solid #ff9500;border-radius:.8rem;justify-content:center;gap:1rem;font-weight:700;transition:transform .15s,box-shadow .15s;display:flex;box-shadow:inset 0 -3px #0003,0 4px 6px #0000004d}#actions>button:last-child{flex-grow:1}#actions>button:hover,#actions>button:focus{transform:translateY(-2px);box-shadow:inset 0 -3px #0003,0 6px 8px #0006}#actions>button:active{transform:translateY(1px);box-shadow:inset 0 -1px #0003,0 2px 3px #0003}#actions>button svg{fill:#fff;filter:drop-shadow(0 1px 2px #0009);width:1.8rem;height:1.2rem}
