*{box-sizing:border-box}body{margin:0;background:#151330;color:#ffe8c2;font-family:'Trebuchet MS',system-ui,sans-serif}main{max-width:1600px;margin:auto;overflow:hidden;background:radial-gradient(ellipse at 0 0,#b56b6d66,transparent 36%),radial-gradient(ellipse at 65% 80%,#3c287b,transparent 70%),#171535}header{text-align:center;padding:25px 20px 0;position:relative;z-index:2}h1{font:900 clamp(32px,5vw,78px)/1.05 Georgia,serif;letter-spacing:-1.5px;margin:0 0 25px;text-shadow:0 3px #b5885c66}nav{display:inline-flex;padding:5px;background:linear-gradient(#64516b77,#29243fcc);border:1px solid #a68ab588;border-radius:40px;box-shadow:inset 0 2px 4px #e7bfff44}button{font:inherit;cursor:pointer}nav button{font-weight:700;font-size:clamp(11px,1.55vw,21px);color:#ffe8c2;padding:12px 24px;border:0;border-radius:28px;background:transparent}nav button[aria-pressed=true]{background:linear-gradient(135deg,#fff0d3,#f1ce97);color:#211a41;box-shadow:0 3px 6px #0004}i{display:inline-block;width:14px;height:14px;border-radius:50%;margin-right:9px;vertical-align:middle}.orange{background:#ff9466}.blue{background:#4bc6f8}.stage{height:min(57vw,720px);min-height:450px;position:relative}canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}canvas:active{cursor:grabbing}button:focus-visible,canvas:focus-visible,summary:focus-visible{outline:3px solid #7edbff;outline-offset:4px}.stars{position:absolute;left:10%;top:19%;color:#ffe3a8;text-shadow:0 0 15px #ffe3a8,1000px 35px #ffe3a8,40px 350px #ffe3a8,-70px 230px #ffe3a8;font-size:21px;pointer-events:none}aside{position:absolute;right:4%;top:28%;width:180px;padding:20px 16px;text-align:center;border:1px solid #a58bb56b;border-radius:32px;background:linear-gradient(140deg,#64547477,#272242e8);box-shadow:inset 0 2px 5px #dad3fa44,0 10px 25px #0b062744}.pair{display:flex;gap:14px;justify-content:center}.pair button{width:60px;height:60px;border:1px solid #fff2db;border-radius:50%;font-size:38px;font-weight:900;background:linear-gradient(135deg,#fff1d5,#ebc794);color:#292044;box-shadow:0 4px 6px #0006,inset 0 -3px 3px #aa794733}aside strong{display:block;font-size:19px;margin-top:10px}aside hr{border:0;border-top:1px solid #ae94b344;margin:16px 0}.reset{color:#ffe8c2;background:none;border:0;font-size:30px;font-weight:bold;white-space:nowrap}.reset span{font-size:16px;vertical-align:middle}#tip{position:absolute;pointer-events:none;z-index:5;border:2px solid #ffe0a9;border-radius:12px;padding:10px 15px;background:#29223eee;font-weight:700;white-space:nowrap;box-shadow:0 5px 15px #0004}#loading{position:absolute;left:40%;top:45%;transform:translate(-50%,-50%);background:#29233c;padding:20px;border-radius:12px}footer{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 4% 25px;font-size:14px}footer p{font-size:12px;color:#cdbed8}#night{color:#cdbed8;background:none;border:1px solid #8b729866;border-radius:25px;padding:10px;font-size:12px}#night b{color:#ffd088}#night[aria-pressed=false] b{color:#776987}details{margin:0 4%;border-top:1px solid #a58bb533;padding-top:15px;color:#b7a5c4;font-size:12px}details p{max-width:780px;line-height:1.6}summary{cursor:pointer}#cities button{background:#352b50;border:1px solid #856a97;color:#edd5b7;border-radius:20px;padding:7px 12px;margin:5px}small{display:block;color:#a794b6;padding:20px 4%;font-size:10px}@media(max-width:700px){header{padding:24px 10px 0}h1{margin-bottom:20px}nav button{padding:10px 12px}i{width:10px;height:10px;margin-right:5px}.stage{min-height:510px;height:90vw}canvas{height:calc(100% - 90px)}aside{width:auto;left:15px;right:15px;top:auto;bottom:10px;padding:12px;border-radius:20px;display:flex;align-items:center;justify-content:center;gap:12px}.pair{gap:8px}.pair button{width:38px;height:38px;font-size:25px}aside strong,aside hr{display:none}.reset{font-size:28px;padding:0}.reset span{display:none}footer{flex-wrap:wrap;justify-content:center;font-size:12px;padding:0 10px 20px}footer p{order:3;width:100%;text-align:center;margin:0}#tip{font-size:12px}}

.totals{position:absolute;z-index:3;left:3%;top:29%;width:180px;padding:17px 16px;border:1px solid #a58bb566;border-radius:24px;background:linear-gradient(140deg,#64547477,#272242e8);box-shadow:inset 0 2px 5px #dad3fa44,0 10px 25px #0b062744}.totals-heading{text-transform:uppercase;letter-spacing:1.7px;font-size:10px;color:#cfbed5;margin-bottom:12px}.total-item{padding:9px 0;display:flex;flex-direction:column;gap:3px}.total-item[hidden]{display:none}.total-number{font:700 34px/1 Georgia,serif;color:#ffe8c2}.total-item>span:last-child{font-size:12px;font-weight:700;line-height:1.35;color:#eedde0}.total-item i{width:9px;height:9px;margin-right:5px}.total-note{font-size:10px;line-height:1.4;color:#c8b8cf;margin:11px 0 0}.totals .total-item+.total-item:not([hidden]){border-top:1px solid #ae94b344}.totals-heading+.total-item[hidden]+.total-item{border-top:0}@media(max-width:700px){.totals{left:10px;top:8px;width:auto;max-width:calc(100% - 20px);padding:9px 12px;border-radius:16px;display:flex;align-items:center;gap:12px}.totals-heading{display:none}.total-item{padding:0;gap:1px}.total-number{font-size:20px}.total-item>span:last-child{font-size:9px}.totals .total-item+.total-item:not([hidden]){border-top:0;border-left:1px solid #ae94b344;padding-left:12px}.totals{flex-wrap:wrap;max-width:210px}.total-note{display:block;flex-basis:100%;font-size:9px;margin:0}}

.animation-control{margin-top:12px}.animation-control button{border:1px solid #d4b7b2a0;border-radius:24px;padding:8px 20px;background:#342a4c;color:#ffe7c6;font-weight:700;font-size:14px;box-shadow:0 3px 8px #09062155}.animation-control button[aria-pressed=true]{background:#ffe4bb;color:#292044}.stage.playing .totals,.stage.playing aside{display:none}.stage.playing canvas{cursor:default}.stage.playing #tip{z-index:7}@media(max-width:700px){.animation-control{margin-top:9px}.stage.playing canvas{height:100%}}

.data-credit{position:absolute;right:14px;bottom:8px;color:#cab6ce;font-size:13px;text-decoration:none}main{position:relative}