:root{--bg:#1a1aff;--ink:#fff;--lime:#d7ff2e;--hot:#ff3d7f;--dim:#3b3bff}
*{box-sizing:border-box;margin:0}html{background:var(--bg)}
body{color:var(--ink);font-family:'Archivo',sans-serif;overflow-x:hidden}
header,main,.fine,footer{max-width:1240px;margin:0 auto;padding:0 32px}
.meta,.legend,footer,.counter small,#example-banner,.grid .n{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em}
.meta{display:flex;justify-content:space-between;padding:24px 0;border-bottom:2px solid var(--ink)}
h1{font-weight:900;line-height:.82;margin:28px 0 0;letter-spacing:-.02em}
h1 span{display:block;font-size:clamp(64px,15.5vw,212px)}
.l1{font-variation-settings:"wdth" 62}.l2{font-variation-settings:"wdth" 125;color:var(--lime);font-size:clamp(40px,9.2vw,128px)!important}
.row{display:flex;justify-content:space-between;align-items:end;gap:32px;margin:32px 0 40px}
.lede{font-size:26px;line-height:1.2;max-width:560px;font-weight:500}
.counter{text-align:right}.counter b{display:block;font-size:120px;font-weight:900;line-height:.8;font-variation-settings:"wdth" 62;font-variant-numeric:tabular-nums}
.counter small{color:var(--lime)}
#example-banner{background:var(--hot);color:#000;padding:8px;white-space:nowrap;font-weight:700;text-align:center;position:sticky;top:0;z-index:9}
.grid{display:grid;grid-template-columns:repeat(10,1fr);gap:6px}
.b{aspect-ratio:1;border:0;position:relative;cursor:pointer;background:var(--dim);color:var(--ink);border-radius:2px;
 opacity:0;transform:scale(.4);animation:in .5s cubic-bezier(.2,1.6,.4,1) forwards;animation-delay:var(--d);
 transition:background .15s,transform .25s cubic-bezier(.2,1.6,.4,1),border-radius .25s}
@keyframes in{to{opacity:1;transform:scale(1)}}
.b .n{position:absolute;left:8px;top:8px;opacity:.7}
.b.open:hover{background:var(--lime);color:#000;transform:scale(1.12) rotate(-4deg);border-radius:50%;z-index:2}
.b.open:hover::after{content:"BOOK →";position:absolute;inset:auto 0 42%;font:700 12px 'JetBrains Mono'}
.b.near{transform:scale(1.04)}
.b.booked{background:var(--ink);color:var(--bg);cursor:default}
.b.done{background:var(--hot);color:#000;cursor:default}
.b.booked::before,.b.done::before{content:"";position:absolute;inset:30%;border-radius:50%;background:currentColor;opacity:.9;animation:pop .6s cubic-bezier(.2,1.6,.4,1) both;animation-delay:calc(var(--d) + .5s)}
.b.done::before{border-radius:0;transform:rotate(45deg)}
@keyframes pop{from{transform:scale(0)}}
.bar{height:6px;background:var(--dim);margin-top:16px}#prog{height:100%;width:0;background:var(--lime);transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.legend{display:flex;gap:28px;margin-top:14px}.legend i{display:inline-block;width:12px;height:12px;margin-right:8px;vertical-align:-1px}
.legend .o{background:var(--dim);outline:1px solid #fff6}.legend .b{opacity:1;transform:none;animation:none;background:var(--ink);aspect-ratio:auto}.legend .d{background:var(--hot)}
#done-count{margin-left:auto;color:var(--lime)}
.fine{margin-top:72px;padding-top:32px;border-top:2px solid var(--ink);font-size:22px;line-height:1.35;max-width:1240px}
.mail{margin-top:14px;font-weight:700}.mail a{color:#000;background:var(--lime);padding:0 6px;text-decoration:none}
.mail a:hover{background:var(--hot)}
footer{display:flex;justify-content:space-between;padding:100px 32px 32px}
@media(max-width:700px){.grid{gap:3px}.b .n{font-size:8px;left:3px;top:3px}.row{flex-direction:column;align-items:start}.legend{flex-wrap:wrap;gap:12px}}
.fine p{max-width:760px}.heads{margin-top:18px;font-size:18px;border:2px solid var(--lime);padding:14px 18px;display:flex;gap:16px;align-items:baseline}.heads b{font:700 12px "JetBrains Mono";letter-spacing:.08em;background:var(--lime);color:#000;padding:3px 8px;white-space:nowrap}
.meta a{color:inherit;text-decoration:none}.meta a:hover{color:var(--lime)}

dialog#modal{margin:auto;border:0;padding:0;background:var(--bg);color:var(--ink);width:min(640px,94vw);max-height:92vh;overflow:auto;outline:3px solid var(--lime);font-family:'Archivo',sans-serif}
dialog#modal::backdrop{background:#000a;backdrop-filter:blur(3px)}
dialog#modal[open]{animation:pop2 .35s cubic-bezier(.2,1.6,.4,1)}@keyframes pop2{from{transform:scale(.9) rotate(-1deg);opacity:0}}
#m-main,#m-done{padding:32px}
.m-x{position:sticky;float:right;top:12px;margin:12px 12px 0 0;background:var(--lime);border:0;width:36px;height:36px;font-weight:900;cursor:pointer}
.m-kicker,.m-note,.m-chosen,.m-day b,.m-slot small,.chk,.m-go,dialog label{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.06em}
.m-kicker{color:var(--lime)}dialog h2{font-size:64px;font-weight:900;line-height:.85;margin:6px 0 12px;font-variation-settings:"wdth" 62}
.m-note{opacity:.8;margin:6px 0 14px}.m-note a{color:var(--lime)}
.m-slots{max-height:230px;overflow:auto;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:10px 0}
.m-day{display:grid;grid-template-columns:110px 1fr;gap:10px;padding:6px 0}.m-day b{padding-top:9px}
.m-day>div{display:flex;flex-wrap:wrap;gap:6px}
.m-slot{background:var(--dim);color:var(--ink);border:0;padding:8px 10px;font:600 14px 'Archivo';cursor:pointer;transition:transform .15s,background .15s;display:flex;flex-direction:column;align-items:flex-start}
.m-slot small{opacity:.7;font-size:10px}.m-slot:hover{transform:translateY(-2px);background:#4d4dff}
.m-slot.on{background:var(--lime);color:#000}
.m-chosen{color:var(--lime);margin:16px 0 4px}
dialog label{display:block;margin-top:14px}
dialog input:not([type=checkbox]),dialog textarea{display:block;width:100%;margin-top:6px;background:transparent;border:0;border-bottom:2px solid var(--ink);color:var(--ink);font:500 18px 'Archivo';padding:6px 0;outline:0;resize:vertical}
dialog input:focus,dialog textarea:focus{border-bottom-color:var(--lime)}
.hp{position:absolute!important;left:-9999px}
.heads.sm{font-size:14px;margin-top:14px}
.chk{display:flex!important;gap:10px;align-items:center;margin-top:16px}.chk input{width:18px;height:18px;accent-color:var(--lime)}
.m-err{color:var(--hot);font-weight:700;min-height:1.2em;margin-top:10px}
.m-go{margin-top:8px;background:var(--hot);color:#000;border:0;padding:16px 26px;font-weight:700;font-size:14px;cursor:pointer;transition:transform .15s}
.m-go:hover:not(:disabled){transform:scale(1.04) rotate(-1deg)}.m-go:disabled{opacity:.4;cursor:not-allowed}
#m-done p{font-size:20px;line-height:1.35}