@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@800;900&family=DM+Sans:wght@400;500;600;650;700;800&display=swap');
:root{--ink:#20211e;--paper:#f7f7f0;--acid:#b9f3a2;--line:#d8d9ce;--mono:ui-monospace,SFMono-Regular,Consolas,monospace}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #7759ff;outline-offset:4px}button{transition:background .15s,transform .15s}button:active{transform:translateY(2px)}.topbar{height:86px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid var(--ink)}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-size:25px;font-weight:900;letter-spacing:-1.2px}.brand svg{width:36px;height:36px}.brand-dot{font-size:12px;align-self:flex-start;margin-top:3px}.tagline{font:10px var(--mono);letter-spacing:1.4px}.sound-button{font:10px var(--mono);padding:10px 13px;border:1px solid var(--ink);border-radius:30px;background:transparent}.sound-button #sound-icon{font-size:17px;margin-right:6px}.sound-button[aria-pressed=true]{background:var(--acid)}main{display:grid;grid-template-columns:minmax(0,1fr) 350px;min-height:calc(100svh - 135px)}.playground{background:var(--acid);position:relative;min-height:720px;overflow:hidden;border-right:1px solid var(--ink);isolation:isolate}.intro{position:absolute;top:34px;left:40px;pointer-events:none}.eyebrow{font:9px var(--mono);letter-spacing:1px}.intro .eyebrow{display:flex;gap:8px;align-items:center}.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor}.intro h1{font-family:'Barlow Condensed','Impact',sans-serif;font-size:clamp(90px,12.7vw,200px);line-height:.82;letter-spacing:-3px;margin:44px 0 24px;font-weight:900;position:relative}.intro h1>span{color:transparent;-webkit-text-stroke:1.6px var(--ink)}.star{width:64px;height:64px;position:absolute;right:-90px;top:6px;transform:rotate(12deg)}.intro-copy{font-size:13px;line-height:1.6;letter-spacing:-.1px}.round-stamp{position:absolute;right:33px;top:37px;width:89px;height:89px;border:1px solid var(--ink);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font:9px/1.3 var(--mono);transform:rotate(13deg)}.round-stamp strong{font-size:17px;line-height:1.1}canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;touch-action:none;cursor:grab}canvas:active{cursor:grabbing}.stage-note{position:absolute;bottom:117px;left:36px;font:12px/1.5 var(--mono);transform:rotate(-7deg);pointer-events:none;opacity:.65}.stage-note>span{display:block;font-size:30px;margin:0 0 5px 32px}.stage-toolbar{position:absolute;bottom:0;left:0;right:0;min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 25px;z-index:3;pointer-events:none}.toolbar-buttons{display:flex;gap:8px;pointer-events:auto}.circle-button{border:1px solid var(--ink);background:var(--acid);border-radius:50%;width:42px;height:42px;font-size:22px}.circle-button:hover{background:var(--ink);color:var(--acid)}.stage-caption,.coordinates{font:8px var(--mono);letter-spacing:.7px}.coordinates{display:none}.controls{padding:29px 25px 18px;background:var(--paper);display:flex;flex-direction:column}.panel-heading h2{font-size:30px;font-weight:700;letter-spacing:-1.5px;margin:5px 0 7px;display:flex;justify-content:space-between;align-items:center}.panel-heading h2 span{font-weight:400;font-size:32px}.panel-heading p{font-size:12px;color:#77796e;margin:0 0 29px}.control-section{border-top:1px solid var(--line);padding-top:20px;margin-bottom:22px}.section-label{display:flex;align-items:center;justify-content:space-between;font:9px var(--mono);letter-spacing:.4px;margin-bottom:14px}.section-label output{font-size:10px;letter-spacing:0}.quantity output{font-family:'DM Sans',sans-serif;font-size:25px;font-weight:600;line-height:1}.count-control{display:flex;align-items:center;gap:14px}.count-control button{width:28px;height:28px;border:1px solid var(--line);background:transparent;font-size:18px;border-radius:50%;line-height:1}.count-control button:hover{background:var(--acid)}input[type=range]{width:100%;margin:5px 0;appearance:none;-webkit-appearance:none;background:linear-gradient(to right,var(--ink) 12%,#dcded2 12%);height:3px;cursor:pointer;accent-color:var(--ink)}input[type=range]::-webkit-slider-thumb{appearance:none;width:13px;height:13px;border-radius:50%;background:var(--ink);border:3px solid var(--paper);box-shadow:0 0 0 1px var(--ink)}input[type=range]::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--ink);border:2px solid var(--paper)}.scale-labels{display:flex;justify-content:space-between;font:9px var(--mono);color:#888a7e;margin-top:10px}.text-button{border:0;background:none;font:10px var(--mono);text-decoration:underline;text-underline-offset:3px;padding:0}.cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.cat-option{position:relative;display:flex;flex-direction:column;align-items:center;padding:7px 4px 10px;border:1px solid #d4d6c9;border-radius:4px;background:#efefe6;min-width:0}.cat-option.selected{border-color:var(--ink);background:#f1f4df}.cat-option:hover{background:#e7edc6}.cat-option img{width:94px;height:70px;object-fit:contain;mix-blend-mode:multiply;transition:transform .2s}.cat-option:hover img{transform:rotate(-8deg) scale(1.08)}.cat-option>span:not(.check){font-size:11px;font-weight:700;margin-top:3px}.cat-option small{font-size:8px;color:#818376;margin-top:3px}.check{position:absolute;right:6px;top:6px;width:14px;height:14px;border:1px solid #bbbeb1;border-radius:50%;font-size:9px;color:transparent}.selected .check{background:var(--ink);border-color:var(--ink);color:var(--acid)}.gravity-section{margin-bottom:20px}.gravity-section .section-label{margin-bottom:16px}.disco-row{border-top:1px solid var(--line);padding:18px 0;display:flex;justify-content:space-between;align-items:center}.disco-row label{font-size:13px;font-weight:700}.disco-row label span{display:inline-block;margin-left:5px;font-size:18px;vertical-align:middle}.disco-row p{font-size:9px;color:#818376;margin:4px 0 0}.disco-row button{border:1px solid #c7cabe;width:37px;height:21px;border-radius:30px;background:#e3e5d9;padding:3px}.disco-row button>span{display:block;width:13px;height:13px;border-radius:50%;background:#777b6c;transition:transform .2s}.disco-row button[aria-checked=true]{background:var(--acid);border-color:var(--ink)}.disco-row button[aria-checked=true]>span{background:var(--ink);transform:translateX(15px)}.rain-button{background:var(--ink);border:1px solid var(--ink);color:var(--acid);width:100%;display:flex;justify-content:space-between;align-items:center;padding:18px 16px;font:11px var(--mono);letter-spacing:.5px;margin-top:auto}.rain-button>span:last-child{font-size:20px;line-height:10px}.rain-button:hover{background:#454738}.rain-hint{font-size:8px;color:#93958b;text-align:center;margin:10px -5px 20px}.reset{font:10px var(--mono);background:none;border:0;color:#75786b;padding:4px}.reset:hover{color:var(--ink)}footer{min-height:49px;border-top:1px solid var(--ink);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 28px;font:8px var(--mono);letter-spacing:.1px}footer>span{display:flex;align-items:center;gap:6px}footer a{color:inherit;text-underline-offset:3px}.footer-divider{color:#b1b3a6;margin:0 9px}.toast{position:absolute;left:50%;bottom:92px;transform:translate(-50%,15px);z-index:4;background:var(--ink);color:var(--acid);font:11px var(--mono);padding:13px 20px;border-radius:30px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;white-space:nowrap}.toast.visible{opacity:1;transform:translate(-50%,0)}.playground.disco{animation:none}.disco .star{animation:spin 5s linear infinite}@keyframes disco-colors{0%,100%{background:#efff6a}25%{background:#ff9ed0}50%{background:#b6a0ff}75%{background:#8de9cf}}@keyframes spin{to{transform:rotate(372deg)}}@media(min-width:1500px){main{grid-template-columns:minmax(0,1fr) 380px}.controls{padding:36px 30px}.cat-option img{height:90px}.stage-caption{font-size:9px}.coordinates{display:block}.intro{left:55px;top:40px}}@media(max-width:1000px){.tagline{display:none}.intro{left:28px}.intro h1{font-size:125px}.intro .eyebrow{font-size:7px}.round-stamp{right:20px;width:70px;height:70px;font-size:8px}.star{width:48px;right:-56px}.stage-caption{display:none}main{grid-template-columns:minmax(0,1fr) 320px}.controls{padding:26px 20px}.footer-divider{margin:0 3px}footer{font-size:7px;padding:12px 18px}}@media(max-width:720px){.topbar{height:67px;padding:0 19px}.brand{font-size:22px}.brand svg{width:30px;height:30px}.sound-button{font-size:9px}main{display:flex;flex-direction:column}.playground{min-height:610px;height:72svh;border-right:0;border-bottom:1px solid var(--ink)}.intro{top:23px;left:24px}.intro h1{font-size:130px;margin-top:35px}.intro-copy{font-size:12px}.round-stamp{top:55px;right:22px}.star{right:-62px}.stage-note{bottom:100px;font-size:10px}.stage-toolbar{padding:14px 20px}.stage-caption{display:block;font-size:7px}.controls{padding:27px 24px 24px}.panel-heading p{margin-bottom:22px}.cat-grid{grid-template-columns:repeat(4,1fr)}.cat-option img{width:100%;height:72px}.cat-option small{display:none}.cat-option>span:not(.check){font-size:9px}.rain-button{margin-top:3px;padding:21px 17px}.rain-hint{font-size:9px}footer{flex-direction:column;align-items:flex-start;gap:10px;font-size:8px;padding:16px 22px}.control-section{margin-bottom:23px}.quantity .scale-labels{padding:0 42px}}@media(prefers-reduced-motion:reduce){.playground.disco,.disco .star{animation:none}*{transition:none!important}}

@media(min-width:721px) and (max-height:850px){.topbar{height:66px}main{min-height:calc(100svh - 106px)}.playground{min-height:600px}.controls{padding:18px 23px 12px}.panel-heading h2{font-size:26px;margin:3px 0 5px}.panel-heading p{margin-bottom:17px;font-size:11px}.control-section{padding-top:13px;margin-bottom:14px}.section-label{margin-bottom:10px}.cat-option img{height:48px}.cat-option{padding:5px 4px 8px}.cat-option small{font-size:7px}.cat-option>span:not(.check){font-size:10px}.gravity-section .section-label{margin-bottom:11px}.disco-row{padding:12px 0}.rain-button{padding:16px}.rain-hint{margin:8px -5px 12px}.reset{font-size:9px}footer{min-height:40px;padding-top:10px;padding-bottom:10px}.intro h1{margin-top:34px}.intro{top:26px}.stage-note{bottom:96px}}

/* Keep the larger cat collection within reach without stretching the stage. */
.cat-grid{max-height:270px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#8f947a #e9ecdc;padding:3px 7px 3px 3px;margin:-3px -7px -3px -3px;scroll-padding-block:4px}.cat-grid .cat-option{flex-shrink:0}.cat-option:focus-visible{outline-offset:0;outline-width:3px}.cat-selection-note{display:flex;justify-content:space-between;gap:8px;font:8px var(--mono);color:#777b6c;margin:10px 0 0}.cat-grid::-webkit-scrollbar{width:5px}.cat-grid::-webkit-scrollbar-thumb{background:#a3a78d;border-radius:6px}.cat-grid::-webkit-scrollbar-track{background:#e9ecdc;border-radius:6px}@media(min-width:721px) and (max-height:850px){.cat-grid{max-height:200px}}@media(max-width:720px){.cat-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-height:300px}.cat-option img{height:72px}.cat-option>span:not(.check){font-size:10px}.cat-selection-note{font-size:9px}}

.radio{border-top:1px solid var(--line);padding:17px 0;margin-bottom:18px}.radio .section-label{font-size:9px;letter-spacing:0}.radio #track-style{font:8px var(--mono);color:#777b6c}.radio-player{display:flex;border:1px solid var(--ink);border-radius:3px;background:#eff1e4;overflow:hidden;align-items:stretch}.radio-player button{flex-shrink:0;width:34px;background:transparent;border:0;font-size:16px;padding:10px 0}.radio-player button:hover{background:var(--acid)}.radio-player #music-toggle[aria-pressed=true]{background:var(--ink);color:var(--acid)}.radio-player select{min-width:0;flex:1;width:100%;font:10px 'DM Sans',sans-serif;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);background:transparent;padding:8px 5px;color:var(--ink);cursor:pointer}.music-status{font-size:9px;color:#777b6c;margin:9px 0 12px;min-height:12px;line-height:1.4}.audio-mix summary{display:flex;justify-content:space-between;cursor:pointer;font:9px var(--mono);list-style:none}.audio-mix summary::-webkit-details-marker{display:none}.audio-mix[open] summary>span{transform:rotate(45deg)}.audio-mix-body{padding-top:16px}.audio-mix-body .section-label{margin:0 0 6px}.effects-heading{display:flex;align-items:center;justify-content:space-between;font-size:11px;margin:17px 0 12px}.audio-switch{border:1px solid #c7cabe;width:37px;height:21px;border-radius:30px;background:#e3e5d9;padding:3px}.audio-switch>span{display:block;width:13px;height:13px;border-radius:50%;background:#777b6c;transition:transform .2s}.audio-switch[aria-checked=true]{background:var(--acid);border-color:var(--ink)}.audio-switch[aria-checked=true]>span{background:var(--ink);transform:translateX(15px)}.audio-credit-link{display:block;color:#777b6c;font-size:9px;margin-top:16px;text-underline-offset:3px}.radio select:focus-visible,.audio-mix summary:focus-visible{outline:2px solid #7759ff;outline-offset:1px}.credits-page{max-width:720px;margin:50px auto;padding:0 24px;font-size:14px;line-height:1.7}.credits-page h1{font-size:36px;letter-spacing:-1px}.credits-page h2{font-size:20px;margin-top:32px}.credits-page a{color:inherit;text-underline-offset:3px}.credits-page li{margin:14px 0}.credits-back{font:12px var(--mono)}@media(max-width:720px){.radio{padding:20px 0}.radio-player select{font-size:12px}.radio-player button{width:42px;padding:12px 0}.music-status{font-size:11px}.audio-mix summary{font-size:11px}}