:root{--table:#1d1a17;--wood:#c99a6a;--wood-dark:#a77a4f;--led:#4f8bff;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}body{background:radial-gradient(circle at 40% 40%, #2b2621, var(--table));color:#f3ece4;grid-template-columns:1fr minmax(280px,360px);min-height:100vh;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;display:grid}@media (width<=800px){body{grid-template-columns:1fr}}.stage{-webkit-user-select:none;user-select:none;flex-direction:column;justify-content:center;align-items:center;gap:18px;padding:40px 20px;display:flex}.box{aspect-ratio:16/10;background:repeating-linear-gradient(95deg, transparent 0 18px, #0000000a 18px 20px), linear-gradient(160deg, var(--wood), var(--wood-dark));border-radius:36px;grid-template-columns:1fr 1fr;place-items:center;gap:4%;width:min(580px,92vw);padding:0 6%;display:grid;position:relative;box-shadow:inset 0 2px #ffffff40,0 30px 60px #00000080}.speaker{background:radial-gradient(circle,#00000073 2.5px,#0000 3px) 0 0/11px 11px;width:110px;height:22px;position:absolute;top:22px;left:50%;translate:-50%}.label{color:#3c230fbf;letter-spacing:.04em;font-weight:700;position:absolute;bottom:18px;left:50%;translate:-50%}.big-button{--glow:0;aspect-ratio:1;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;background:#20232b;border:0;border-radius:50%;width:min(100%,220px);padding:0;transition:transform 60ms,box-shadow 60ms;box-shadow:0 10px #111,0 14px 24px #00000080}.big-button:disabled{cursor:default}.big-button .cap{background:radial-gradient(circle at 35% 30%, #a9c4ff, var(--led) 45%, #1d47b8);width:84%;height:84%;filter:brightness(calc(.45 + var(--glow) * .75));box-shadow:0 0 calc(var(--glow) * 60px) calc(var(--glow) * 10px) rgb(79 139 255/calc(var(--glow) * .8));border-radius:50%;margin:auto;display:block}.big-button.down{transform:translateY(8px);box-shadow:0 2px #111,0 4px 10px #00000080}[data-light=off]{--glow:0}[data-light=on]{--glow:1}[data-light=pulse] .cap,.led[data-light=pulse]{animation:1.6s ease-in-out infinite pulse}[data-light=hurry] .cap,.led[data-light=hurry]{animation:.5s ease-in-out infinite hurry}[data-light=blink] .cap,.led[data-light=blink]{animation:.25s steps(2,end) infinite blink}[data-light=play] .cap,.led[data-light=play]{animation:3s ease-in-out infinite breathe}[data-light=wifi]{--led:#3fcf7a}[data-light=wifi] .cap{background:radial-gradient(circle at 35% 30%, #b8f5d0, var(--led) 45%, #15804a);box-shadow:0 0 calc(var(--glow) * 60px) calc(var(--glow) * 10px) rgb(63 207 122/calc(var(--glow) * .8))}[data-light=wifi] .cap,.led[data-light=wifi]{animation:4s ease-in-out infinite breathe-slow}[data-light=heart] .cap{background:var(--heart,#ffa8d7);filter:none;box-shadow:none;animation:4s ease-in-out infinite heart-breathe;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 21s-8-5.2-8-11.2A4.6 4.6 0 0 1 12 7a4.6 4.6 0 0 1 8 2.8C20 15.8 12 21 12 21z%27/%3E%3C/svg%3E") 50%/80% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 21s-8-5.2-8-11.2A4.6 4.6 0 0 1 12 7a4.6 4.6 0 0 1 8 2.8C20 15.8 12 21 12 21z%27/%3E%3C/svg%3E") 50%/80% no-repeat}.led[data-light=heart-legend]{box-shadow:none;filter:none;color:#ffa8d7;background:0 0;place-items:center;font-size:16px;line-height:1;display:grid}@keyframes heart-breathe{0%,to{opacity:.5}50%{opacity:1}}@property --glow{syntax:"<number>";inherits:true;initial-value:0}@keyframes pulse{0%,to{--glow:.05}50%{--glow:1}}@keyframes blink{0%{--glow:1}to{--glow:0}}@keyframes hurry{0%,to{--glow:1}50%{--glow:.35}}@keyframes breathe-slow{0%,to{--glow:.1}50%{--glow:.8}}@keyframes breathe{0%,to{--glow:.45}50%{--glow:.85}}.status{margin:8px 0 0;font-size:1.4rem;font-weight:650}.recipient{color:#f3c98b;margin:-8px 0 0;font-weight:650}.slot{aspect-ratio:86/55;background:#3c230f2e;border-radius:12px;place-items:center;width:100%;transition:box-shadow .15s,background .15s;display:grid;position:relative;box-shadow:inset 0 3px 6px #00000059,inset 0 -1px #ffffff26}.slot.target{background:#ffd68c4d;box-shadow:inset 0 3px 6px #00000059,0 0 0 3px #f3c98b}.slot-hint{color:#3c230f99;text-align:center;pointer-events:none;font-size:.85rem;font-weight:700}.slot:has(.card) .slot-hint{display:none}.slot .card{width:auto;position:absolute;inset:4px}.tray{background:#ffffff0d;border-radius:18px;width:min(580px,92vw);margin-top:10px;padding:16px 18px 18px}.tray h3{margin:0 0 4px;font-size:1rem}.tray p{color:#b3a89c;margin:0 0 12px;font-size:.9rem}.cards{flex-wrap:wrap;gap:12px;min-height:70px;display:flex}.card{--hue:30;aspect-ratio:86/55;color:#3b3530;width:118px;font:inherit;text-align:left;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;background:#f7f4ef;border:0;border-radius:9px;flex-direction:column;justify-content:space-between;padding:8px 10px;display:flex;position:relative;box-shadow:0 3px 8px #00000059}.card.owned{background:linear-gradient(135deg, hsl(var(--hue) 85% 88%), hsl(var(--hue) 70% 76%))}.card:disabled{cursor:default;opacity:.55}.card.dragging{z-index:10;cursor:grabbing;pointer-events:none;margin:0;position:fixed;rotate:-4deg;box-shadow:0 14px 30px #00000080}.card strong{font-size:.95rem;line-height:1.1}.card small{opacity:.6;font-family:ui-monospace,monospace;font-size:.62rem}.card:after{content:"";opacity:.35;border:2px solid;border-color:currentColor currentColor #0000 #0000;border-radius:50%;width:16px;height:16px;position:absolute;top:8px;right:9px;rotate:45deg}.new-card{color:#c8bdb1;font:inherit;cursor:pointer;background:0 0;border:1px dashed #ffffff4d;border-radius:999px;margin-top:12px;padding:8px 14px;font-size:.9rem}.panel .tip{color:#f3c98b;margin-top:8px}.hint{color:#b3a89c;text-align:center;margin:0}.panel{background:#0000004d;border-left:1px solid #ffffff14;max-height:100vh;padding:28px 24px;overflow:auto}.panel h2{margin:0 0 8px;font-size:1.15rem}.panel h3{margin:22px 0 8px;font-size:1rem}.panel p{color:#c8bdb1;margin:0;line-height:1.45}.legend{grid-template-columns:auto 1fr;align-items:center;gap:8px 12px;margin:18px 0 0;display:grid}.legend dd{color:#c8bdb1;margin:0}.led{--glow:0;background:var(--led);width:18px;height:18px;filter:brightness(calc(.35 + var(--glow) * .8));box-shadow:0 0 calc(var(--glow) * 12px) rgb(79 139 255/calc(var(--glow)));border-radius:50%;display:block}.stats{font-variant-numeric:tabular-nums;background:#ffffff0f;border-radius:10px;padding:10px 12px;font-size:.85rem;margin-top:18px!important}.log{flex-direction:column;gap:6px;margin:0;padding:0;font-size:.9rem;list-style:none;display:flex}.log time{color:#8f8478;font-variant-numeric:tabular-nums;margin-right:6px}.power{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-align:center;background:#0f0d0bd9;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:20px;display:flex;position:fixed;inset:0}.power[hidden]{display:none}.power button{background:var(--led);color:#fff;font:inherit;cursor:pointer;border:0;border-radius:999px;padding:18px 34px;font-size:1.2rem;font-weight:700}.power button.usb{border:2px solid var(--led);background:0 0;margin-top:18px;padding:12px 24px;font-size:1rem}.power button[hidden],.power p[hidden]{display:none}.power button:disabled{opacity:.5}.power p{color:#c8bdb1;max-width:420px;margin:0}body.remote{grid-template-columns:1fr minmax(380px,460px)}body.remote .panel{display:none}.remote-panel{background:#0000004d;border-left:1px solid #ffffff14;flex-direction:column;gap:14px;max-height:100vh;padding:24px 20px;display:flex;overflow:auto}.remote-panel[hidden],.remote-panel section[hidden]{display:none}.remote-panel h2{margin:0;font-size:1.15rem}.remote-panel h3{color:#c8bdb1;margin:18px 0 8px;font-size:.95rem}.remote-panel .muted{color:#a99d91;margin:0 0 12px;font-size:.88rem;line-height:1.4}.tabs{background:#ffffff0f;border-radius:999px;gap:4px;padding:4px;display:flex}.tabs button{color:#b9ada1;font:inherit;cursor:pointer;background:0 0;border:0;border-radius:999px;flex:1;padding:9px 6px;font-size:.92rem;font-weight:600}.tabs button[aria-selected=true]{color:#1d1a17;background:#f3ece4}.cards-grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px;display:grid}.light-card{color:#f3ece4;font:inherit;cursor:pointer;background:#ffffff0d;border:2px solid #0000;border-radius:16px;flex-direction:column;align-items:center;gap:6px;padding:10px 8px 12px;font-size:.85rem;transition:background .15s,transform .1s;display:flex;position:relative}.light-card.missing{opacity:.55;cursor:default}.light-card.missing .now{display:block}.light-card:hover{background:#ffffff1a}.light-card:active,.sound-card:active{transform:scale(.97)}.light-card canvas{width:88px;height:88px}.light-card strong{text-align:center;font-weight:600}.light-card .now{color:#10301c;background:#3fcf7a;border-radius:999px;padding:1px 6px;font-size:.68rem;font-weight:700;display:none;position:absolute;top:6px;right:8px}.light-card.now .now{display:block}.light-card.shown{background:#f3c98b1f;border-color:#f3c98b}.light-card .timer{--left:0;background:linear-gradient(90deg, #f3c98b calc(var(--left) * 100%), #ffffff1a 0);border-radius:2px;height:3px;display:none;position:absolute;bottom:5px;left:12px;right:12px}.light-card.shown .timer{display:block}.normal-btn{color:#c8bdb1;width:100%;font:inherit;cursor:pointer;background:0 0;border:1px dashed #ffffff4d;border-radius:999px;margin-top:12px;padding:11px}.sound-card{color:#f3ece4;font:inherit;text-align:left;cursor:pointer;background:#ffffff0d;border:2px solid #0000;border-radius:16px;grid-template-rows:auto auto;grid-template-columns:auto 1fr;align-items:start;gap:4px 10px;padding:12px;transition:background .15s,transform .1s;display:grid}.sound-card:hover{background:#ffffff1a}.sound-card .icon{font-size:1.6rem;line-height:1}.sound-card .text{flex-direction:column;gap:3px;font-size:.85rem;display:flex}.sound-card .text span{color:#a99d91;font-size:.76rem;line-height:1.3}.sound-card .bars{visibility:hidden;grid-column:1/-1;align-items:end;gap:3px;height:12px;display:flex}.sound-card .bars i{background:#f3c98b;border-radius:2px;width:4px;height:30%}.sound-card.playing{background:#f3c98b1f;border-color:#f3c98b}.sound-card.playing .bars{visibility:visible}.sound-card.playing .bars i{animation:.5s ease-in-out infinite alternate bar}.sound-card.playing .bars i:nth-child(2){animation-delay:.15s}.sound-card.playing .bars i:nth-child(3){animation-delay:.3s}@keyframes bar{to{height:100%}}.silent-list{flex-wrap:wrap;gap:6px;display:flex}.silent-list span{color:#8f8478;background:#ffffff0a;border-radius:999px;padding:5px 10px;font-size:.8rem}#sound-cards .cards-grid{grid-template-columns:repeat(auto-fill,minmax(175px,1fr))}.tone-card{color:#f3ece4;background:#ffffff0d;border:2px solid #0000;border-radius:16px;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin-top:10px;padding:12px 12px 16px;display:grid;position:relative}.tone-card.playing{background:#f3c98b1f;border-color:#f3c98b}.tone-card .icon{align-self:start;font-size:1.6rem;line-height:1}.tone-card .text{flex-direction:column;grid-column:2/-1;gap:3px;font-size:.85rem;display:flex}.tone-card .text span{color:#a99d91;font-size:.76rem;line-height:1.3}.tone-volume{grid-column:1/3;align-items:center;gap:10px;display:flex}.tone-volume input{accent-color:#f3c98b;flex:1}.tone-volume output{font-variant-numeric:tabular-nums;text-align:right;min-width:3.2em;font-size:.85rem}.stop-sound{color:#fff;width:100%;font:inherit;cursor:pointer;background:#e46b6b;border:none;border-radius:14px;margin:0 0 12px;padding:12px 16px;font-size:1rem;font-weight:700;display:block}.stop-sound:active{transform:scale(.98)}.tone-play{color:#1d1a17;font:inherit;cursor:pointer;background:#f3c98b;border:none;border-radius:999px;padding:8px 14px;font-size:.85rem;font-weight:600}.tone-card .timer{--left:0;background:linear-gradient(90deg, #f3c98b calc(var(--left) * 100%), #ffffff1a 0);visibility:hidden;border-radius:2px;height:3px;position:absolute;bottom:6px;left:14px;right:14px}.tone-card.playing .timer{visibility:visible}.coarse{display:none}@media (pointer:coarse){.fine{display:none}.coarse{display:inline}.tray .card{touch-action:pan-y}}.big-button,.card{-webkit-touch-callout:none}@media (width<=800px){body,body.remote{grid-template-columns:1fr;min-height:100dvh}.stage{gap:14px;padding:22px 14px 28px}.box{border-radius:26px}.status{text-align:center;font-size:1.25rem}.hint{font-size:.9rem}.tray{padding:14px}.cards{gap:10px}.tray .card{width:calc(33.3333% - 6.66667px);max-width:130px;padding:7px 8px}.tray .card strong{padding-right:14px;font-size:.82rem}.panel,.remote-panel{border-top:1px solid #ffffff14;border-left:0;max-height:none;overflow:visible}.panel{padding:22px 16px 32px}.remote-panel{padding:18px 14px 32px}.remote-panel .tabs{z-index:5;background:#26221e;position:sticky;top:0;box-shadow:0 6px 16px #00000059}.tabs button{padding:11px 4px}.cards-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}.light-card canvas{width:76px;height:76px}#sound-cards .cards-grid{grid-template-columns:1fr}body.remote .stage{display:contents}body.remote .box{justify-self:center;width:min(440px,92vw);margin-top:18px}body.remote .status,body.remote .recipient,body.remote .hint{text-align:center;-webkit-user-select:none;user-select:none;justify-self:center;padding:0 16px}body.remote .status{margin-top:14px}body.remote .recipient{margin-top:2px}body.remote .hint{margin:8px 0 18px}body.remote .remote-panel{order:2}body.remote .tray{-webkit-user-select:none;user-select:none;order:3;justify-self:center;margin:24px 0 32px}}