:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.app-container{display:flex;flex-direction:column;align-items:center;gap:20px;max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.controls{display:flex;gap:10px;align-items:center}.card-preview-container{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}.progress-container{width:80%;margin-top:20px;text-align:left}.progress-container p{margin:0 0 5px;font-size:.9em;color:#555}.progress-bar-background{width:100%;background-color:#e0e0e0;border-radius:5px;height:30px;box-shadow:inset 0 1px 3px #0003}.progress-bar-foreground{height:100%;background:linear-gradient(to right,#4caf50,#81c784);border-radius:5px;text-align:center;line-height:30px;color:#fff;font-weight:700;transition:width .3s ease-in-out;white-space:nowrap;overflow:hidden}.page-header{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:2rem}.page-logo{height:80px}.action-selection{display:flex;flex-direction:column;align-items:center;gap:5px}.radio-group{display:flex;gap:15px}.radio-label{display:flex;align-items:center;gap:5px;cursor:pointer;font-size:14px}.radio-label input[type=radio]{margin:0}.preview-section{margin-top:30px;width:100%}.preview-section h3{margin-bottom:20px;color:#333}.preview-note{margin-top:15px;font-size:14px;color:#666;font-style:italic}.card-preview{border:2px solid #ddd;border-radius:8px;padding:10px;background:#fff;box-shadow:0 2px 4px #0000001a;margin:5px;display:inline-block}.card-grid{display:grid;grid-template-rows:auto repeat(5,1fr);gap:1px;background:#333;border-radius:4px;overflow:hidden}.card-header{display:grid;grid-template-columns:repeat(5,1fr);gap:1px}.card-header-cell{background:#4a90e2;color:#fff;padding:8px;text-align:center;font-weight:700;font-size:16px}.bingo-letter{display:block}.card-row{display:grid;grid-template-columns:repeat(5,1fr);gap:1px}.card-cell{background:#fff;padding:12px 8px;text-align:center;min-height:30px;display:flex;align-items:center;justify-content:center;border:1px solid #eee}.number{font-size:16px;font-weight:700;color:#333}.center-cell{background:#f4b400;color:#fff;border-radius:4px}.free-text{font-size:14px;font-weight:700}.page-link{margin:0}.page-link a{font-weight:600}.page-link-disabled{opacity:.6}.checker-lead{max-width:42em;opacity:.75}.checker-block{width:100%;max-width:48em;border:1px solid rgba(127,127,127,.4);border-radius:8px;padding:1rem 1.25rem;text-align:left}.checker-block h2{font-size:1.05rem;margin:0 0 .75rem}.checker-block form{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.checker-block form input[type=text]{flex:1 1 16em;min-width:0;padding:.4em .6em}.checker-note{opacity:.75;font-size:.9rem;margin:.5rem 0 0}.checker-error{color:#ff8a80;font-size:.9rem;margin:.5rem 0 0}.drawn-list{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.5rem}.drawn-chip{padding:.2em .6em;font-variant-numeric:tabular-nums;border:1px solid rgba(127,127,127,.5);border-radius:999px;background:transparent;color:inherit;cursor:pointer}.drawn-chip:hover{background:#7f7f7f33}.result-row{display:flex;align-items:baseline;gap:.75rem;padding:.5rem .75rem;border-radius:6px;margin-top:.5rem;color:#1b1b1b}.result-bingo{background:#b7e4c2}.result-reach{background:#f7dfae}.result-label{font-weight:700}.result-count{font-size:1.4rem;font-variant-numeric:tabular-nums}.serial-list{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9rem;line-height:1.8;word-break:break-all;margin:.25rem 0 0}.serial-more{margin:.25rem 0 0;font-size:.9rem}@media(prefers-color-scheme:light){.checker-error{color:#b3261e}}body.drawer-page{display:block;place-items:normal;color-scheme:light;color:#222;background-color:#faf7f2;background-image:radial-gradient(#e2e8f0 18%,transparent 20%);background-size:28px 28px}body.drawer-page #root{max-width:none;padding:1rem clamp(1rem,2vw,2rem)}[data-letter=B]{--col: #c42a2b;--ink: #fff}[data-letter=I]{--col: #ffba00;--ink: #222}[data-letter=N]{--col: #1163af;--ink: #fff}[data-letter=G]{--col: #2b8b34;--ink: #fff}[data-letter=O]{--col: #f06e00;--ink: #222}.drawer{--numeral: "Dela Gothic One", system-ui, sans-serif;--pop: "Mochiy Pop One", system-ui, sans-serif;--bubble: #ffd45c;display:flex;flex-direction:column;gap:clamp(.75rem,2vh,1.5rem);min-height:calc(100vh - 2rem)}.drawer button{font-family:var(--pop);font-weight:400;color:#222;background:#fff;border:3px solid #222;border-radius:999px;box-shadow:0 4px #222;transition:transform .08s,box-shadow .08s}.drawer button:hover{border-color:#222}.drawer button:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px #222}.drawer button:disabled{opacity:.45;cursor:default}.drawer a{color:#1d4ed8;text-decoration:underline}.drawer-header{display:flex;align-items:center;gap:1rem}.drawer-header h1{font-family:var(--pop);font-weight:400;font-size:clamp(1.5rem,3vw,2.4rem);margin:0}.drawer-header h1 small{font-size:.5em;opacity:.7}.drawer-title-bubble{background:var(--bubble);border:3px solid #222;border-radius:55% 45% 50% 50%/60% 55% 45% 40%;padding:.15em .9em .25em;transform:rotate(-4deg);box-shadow:0 5px #222}.drawer-header h1.drawer-title-bubble{font-size:clamp(1.6rem,3.6vw,3rem)}.drawer-logo{height:clamp(2.5rem,5vw,4rem)}.drawer-count{margin-left:auto;font-family:var(--numeral);font-size:clamp(1.5rem,3vw,2.6rem);line-height:1}.drawer-count small{font-size:.5em;opacity:.55}.drawer-stage{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(1rem,4vw,4rem)}.drawer-ball{--size: var(--ball-size, clamp(13rem, 36vh, 24rem));position:relative;width:var(--size);height:var(--size);border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.45),transparent 38%),var(--col, #9a9a9a);border:calc(var(--size) * .015) solid #222;box-shadow:inset -.6rem -.9rem 1.6rem #0000004d,0 calc(var(--size) * .035) 0 #222;transition:background-color .2s}.drawer-ball.is-empty,.drawer-ball.is-waiting{--col: #bdbdbd}.drawer-ball-face{width:64%;height:64%;border-radius:50%;background:#fff;color:#222;display:grid;place-items:center;line-height:1;font-family:var(--numeral)}.drawer-ball-number{font-size:calc(var(--size) * .34);letter-spacing:-.02em}.drawer-ball-number[data-digits="3"]{font-size:calc(var(--size) * .23)}.drawer-ball-idle{font-size:calc(var(--size) * .1);opacity:.5}.drawer-ball-mystery{font-size:calc(var(--size) * .34);color:#9a9a9a}.drawer-ball-wave{display:none}.drawer-controls{display:flex;flex-direction:column;align-items:center;gap:.6rem;max-width:32rem}.drawer .drawer-draw{font-size:clamp(1.4rem,2.6vw,2rem);padding:.5em 2.2em;background:var(--bubble);border-width:4px;box-shadow:0 6px #222}.drawer-hint{margin:0;font-size:.85rem;color:#475569}.drawer-sub{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}.drawer-sub button{font-size:.9rem;padding:.4em 1em}.drawer .drawer-sub button.is-confirming{background:#c42a2b;color:#fff}.drawer-notice{margin:0;font-size:.9rem;opacity:.8}.drawer-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.drawer-error{margin:0;color:#b3261e}.drawer-board{display:flex;flex-direction:column;gap:.35rem;overflow-x:auto;padding:.7rem}.drawer-board-row{display:grid;grid-template-columns:clamp(2rem,3.4vw,3.4rem) repeat(20,minmax(2rem,1fr));gap:.3rem;align-items:center}.drawer-board-label{width:100%;aspect-ratio:1;object-fit:contain}.drawer-cell{display:grid;place-items:center;aspect-ratio:1;border-radius:22%;background:#fff;border:2px solid #cbd5e1;color:#4a5568;font-family:var(--numeral);font-size:clamp(.85rem,1.6vw,1.6rem);line-height:1}.drawer-cell.is-drawn{background:var(--col);color:var(--ink);border-color:#222}.drawer-cell.is-latest{outline:.25rem solid #222;outline-offset:.1rem;box-shadow:0 0 0 .45rem var(--bubble),0 0 1rem .5rem #ffd45ccc;position:relative;z-index:1}.drawer-history{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin:0;padding:0;list-style:none;font-size:clamp(1rem,1.4vw,1.5rem)}.drawer-history li{display:grid;place-items:center;width:2.6em;height:2.6em;border-radius:50%;background:radial-gradient(circle,#fff 0 64%,var(--col) 66%);border:2px solid #222;box-sizing:border-box;font-family:var(--numeral);line-height:1}.drawer-history li span{font-size:.8em}.drawer-history li span[data-digits="3"]{font-size:.6em}.drawer-nav{display:flex;gap:1.5rem;margin-top:auto;font-size:.9rem}.drawer-operator{--ball-size: clamp(9rem, 22vh, 16rem);gap:.75rem}.drawer-operator .drawer-history{font-size:clamp(.85rem,1.1vw,1.2rem);max-height:calc(5.2em + .35rem);overflow:hidden}.drawer-operator .drawer-board-row{grid-template-columns:min(3.4vw,6vh) repeat(20,minmax(0,6vh));justify-content:center}.drawer-operator .drawer-cell{font-size:min(1.6vw,2.4vh)}.drawer-display-open{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;padding:.75rem 1rem;background:#fff;border:3px solid #222;border-radius:14px}.drawer .drawer-display-open button{background:#2b8b34;color:#fff}.drawer-display-open p{flex:1 1 20rem;margin:0;font-size:.9rem;color:#475569}.drawer-display{height:calc(100vh - 2rem);min-height:0;overflow:clip}.drawer-display .drawer-stage{flex:1 1 0;min-height:0;flex-wrap:nowrap;container-type:size;overflow:clip}.drawer-machine{flex:none;height:100%;width:min(115cqh,28cqw)}.drawer-ball-wrap{--ball-size: min(88cqh, 30cqw, 30rem);position:relative;flex:none}.drawer-canvas{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:4}.drawer-canvas.is-fx{z-index:5}.drawer-display .drawer-board-row{grid-template-columns:min(3.4vw,8vh) repeat(20,minmax(0,8vh));justify-content:center}.drawer-display .drawer-cell{font-size:min(1.6vw,3.2vh)}.drawer-display .drawer-history{flex:1 1 0;align-self:stretch;align-content:safe center;overflow:hidden;padding:.25em;font-size:clamp(1.1rem,1.8vw,2rem)}.drawer-display .drawer-history li:first-child{font-size:1.6em;background:radial-gradient(circle,#fff 0 62%,var(--col) 64%);border-width:3px;box-shadow:0 0 0 .12em var(--bubble)}.drawer-display .drawer-history li:nth-child(2),.drawer-display .drawer-history li:nth-child(3){font-size:1.25em}.drawer-fullscreen{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:.35rem;font-size:.85rem}.drawer-fullscreen+.drawer-count{margin-left:1.5rem}.drawer-fullscreen p{margin:0;opacity:.7}.drawer .drawer-fullscreen button{padding:.35em 1em;background:#1163af;color:#fff}:fullscreen .drawer-display{cursor:none}@media(prefers-reduced-motion:no-preference){.drawer-ball-mystery{animation:drawer-mystery 1.2s ease-in-out infinite}.drawer-ball:not(.is-waiting) .drawer-ball-face{animation:drawer-pop .55s cubic-bezier(.3,1.5,.5,1)}.drawer-ball-wave{display:block;position:absolute;inset:calc(var(--size) * -.015);border-radius:50%;border:calc(var(--size) * .04) solid var(--col);opacity:0;animation:drawer-wave 1s ease-out .1s;pointer-events:none}.drawer-cell.is-latest{animation:drawer-pulse 1.2s ease-in-out 3}.drawer-display .drawer-history li.is-arriving{animation:drawer-arrive .55s cubic-bezier(.3,0,.4,1) .3s}}@keyframes drawer-mystery{50%{transform:scale(1.12);opacity:.6}}@keyframes drawer-pop{0%{transform:scale(.3);opacity:0}55%{transform:scale(1.18);opacity:1}80%{transform:scale(.95)}to{transform:scale(1)}}@keyframes drawer-wave{0%{transform:scale(1);opacity:.9}to{transform:scale(2.6);opacity:0}}@keyframes drawer-pulse{50%{transform:scale(1.15)}}@keyframes drawer-arrive{0%{transform:none}35%{transform:translateY(-22%) scale(1.12)}65%{transform:translateY(0) scale(1.06,.94)}85%{transform:translateY(-5%)}to{transform:none}}@media(max-width:700px){.drawer-display{height:auto;min-height:calc(100vh - 2rem)}.drawer-display .drawer-stage{flex-wrap:wrap;flex:none;container-type:normal}.drawer-ball-wrap{--ball-size: 12rem}.drawer-machine{display:none}.drawer-display .drawer-history{flex:0 0 100%;align-self:auto;overflow:visible}.drawer-header h1.drawer-title-bubble{font-size:1.3rem}.drawer-board{padding:.5rem .4rem}.drawer-board-row,.drawer-operator .drawer-board-row,.drawer-display .drawer-board-row{grid-template-columns:2rem repeat(10,minmax(0,1fr));gap:.2rem}.drawer-board-label{grid-row:span 2}.drawer-cell,.drawer-operator .drawer-cell,.drawer-display .drawer-cell{font-size:clamp(.7rem,3.4vw,.85rem)}}.drawer-reactions{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;z-index:3}.drawer-reaction{position:absolute;bottom:-3rem;width:clamp(1.6rem,3vw,2.6rem);aspect-ratio:1;opacity:0;animation:drawer-reaction-rise 3.6s ease-out both}@keyframes drawer-reaction-rise{0%{transform:translateY(0) scale(.7);opacity:0}15%{opacity:.7}80%{opacity:.55}to{transform:translateY(-80vh) scale(1);opacity:0}}@media(prefers-reduced-motion:reduce){.drawer-reaction{animation:none}}.drawer-visitor{max-width:30rem;margin:0 auto;width:100%;min-height:100dvh;--ball-size: min(62vw, 15rem)}.drawer-visitor .drawer-header{justify-content:space-between}.drawer-visitor .drawer-header h1.drawer-title-bubble{font-size:1.4rem}.drawer-visitor-latest{display:flex;flex-direction:column;align-items:center;gap:.5rem}.drawer-visitor-label{margin:0;font-family:var(--pop);font-size:1.1rem}.drawer-visitor-count{margin:0;font-family:var(--numeral);font-size:1.6rem;line-height:1}.drawer-visitor-count small{font-size:.5em;opacity:.55}.drawer-visitor-heading{margin:0 0 .4rem;font-family:var(--pop);font-weight:400;font-size:1.1rem}.drawer-visitor .drawer-history{justify-content:flex-start;font-size:1rem}.drawer-visitor .drawer-board{padding:.5rem .2rem;overflow-x:visible}.drawer-visitor .drawer-board-row{grid-template-columns:2rem repeat(10,minmax(0,1fr));gap:.2rem}.drawer-visitor .drawer-board-label{grid-row:span 2}.drawer-visitor .drawer-cell{font-size:clamp(.7rem,3.4vw,.85rem)}.drawer-visitor-empty,.drawer-visitor-note{margin:0;text-align:center;font-size:.85rem;color:#4a5568}.drawer-visitor{padding-bottom:5.5rem}.drawer-visitor-reactions{position:fixed;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;padding:.5rem .75rem calc(.5rem + env(safe-area-inset-bottom));background:#faf7f2f2;border-top:2px solid #222;z-index:10}.drawer-visitor .drawer-visitor-reactions button{display:inline-flex;align-items:center;gap:.35rem;padding:.5rem .9rem;font-size:.9rem;box-shadow:0 3px #222}.drawer-visitor .drawer-visitor-reactions button[data-kind=cheer] svg{color:#f06e00}.drawer-visitor .drawer-visitor-reactions button[data-kind=heart] svg{color:#c42a2b}.drawer-visitor .drawer-visitor-reactions button[data-kind=wow] svg{color:#e0a800}.drawer-visitor-reactions-note{flex:0 0 100%;margin:0;text-align:center;font-size:.75rem;color:#4a5568}
