:root{color-scheme:dark;font-family:Arial,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;color:#f3efea;background:#060913;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden;min-height:100svh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;font-size:14px;color:inherit;cursor:pointer;border:1px solid #ffffff20;background:#101523b8;transition:background .2s,border-color .2s}button:hover{background:#293040;border-color:#eac88a80}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid #ecc583;outline-offset:4px}#sky{position:fixed;inset:0;width:100%;height:100%;touch-action:none}#water{position:fixed;left:0;bottom:0;width:100%;height:23%;pointer-events:none;opacity:.46;mask-image:linear-gradient(#000,transparent)}.horizon{position:fixed;left:0;right:0;top:77%;height:1px;background:linear-gradient(90deg,transparent,#b4c7e02b,transparent);pointer-events:none}header{position:fixed;top:0;left:0;right:0;padding:32px 42px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}header>*{pointer-events:auto}.brand{display:flex;gap:13px;align-items:center;color:#f7eee0;text-decoration:none;font-size:24px;font-weight:700;letter-spacing:3px}.brand-mark{color:#e6b974;font-size:40px;font-weight:400}.brand small{display:block;font-size:10px;font-weight:400;letter-spacing:2.5px;margin-top:6px;color:#b0a898}.top-actions{display:flex;gap:8px}.top-actions button{border-radius:30px;padding:11px 17px;color:#cacbd1}main{pointer-events:none}.intro{position:fixed;top:22%;left:6%;animation:intro-in 1.5s ease both}.eyebrow{font-size:11px;letter-spacing:3px;color:#d5b581}h1{font-size:clamp(28px,3.3vw,52px);line-height:1.5;font-weight:400;letter-spacing:-1.5px;margin:22px 0 14px;text-shadow:0 2px 20px #060913}p{font-size:16px;color:#9497a4}.live{position:fixed;top:calc(77% - 36px);right:42px;font-size:13px;color:#b0b4c0;display:flex;gap:12px;align-items:center}.line{width:24px;height:1px;background:#ffffff30}#count{font-family:monospace;font-size:18px;color:#edc98e}.count-label{font-size:12px}.controls{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(580px,100%);padding:22px 24px calc(20px + env(safe-area-inset-bottom));background:linear-gradient(transparent,#060913e8 25%)}.control-heading{display:flex;justify-content:space-between;color:#a6a7b0;font-size:14px;margin-bottom:12px}.key-hint{font-size:11px;letter-spacing:.8px;color:#676c7b}.types{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.type{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;border-radius:12px;padding:12px 4px;color:#a6a9b6;font-size:13px}.type span{font-size:24px;height:27px;line-height:27px}.type.active{color:#f5d59e;border-color:#d8ae6866;background:#d6af651a}.actions{display:flex;gap:8px;margin-top:12px}.actions button{border-radius:10px;height:46px}.show{flex:1;background:#e8c48d;color:#201b14;border-color:#e8c48d;font-weight:700;display:flex;gap:10px;align-items:center;justify-content:center}.show:hover{background:#f6dba9}.show[aria-pressed=true]{background:#c1a578}.finale{flex:1;color:#ebce9e}.pause{width:46px;color:#bec1cf}.footer-note{display:flex;justify-content:space-between;font-size:11px;color:#676b78;margin-top:16px}.intro.dim{opacity:.32;transition:opacity 1.5s}#toast{position:fixed;top:110px;left:50%;transform:translateX(-50%);padding:12px 20px;border:1px solid #d5b58150;border-radius:30px;background:#0d1223de;color:#eed1a2;font-size:14px;opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap}#toast.visible{opacity:1}@keyframes intro-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@media(max-width:600px){header{padding:20px}.brand{font-size:20px}.brand-mark{font-size:32px}.top-actions button{font-size:12px;padding:9px 12px}.intro{top:19%;left:26px}.eyebrow{font-size:9px;letter-spacing:2px}h1{font-size:29px;margin:16px 0 10px}p{font-size:14px}.controls{padding:18px 16px calc(14px + env(safe-area-inset-bottom))}.live{top:auto;bottom:calc(246px + env(safe-area-inset-bottom));right:20px;font-size:12px}.key-hint{display:none}.footer-note{font-size:10px}.footer-note span:last-child{display:none}.type{padding:10px 2px;font-size:12px}.control-heading{font-size:13px}#toast{top:87px}#water{height:30%}.horizon{top:70%}}@media(max-height:520px){.intro{top:25%;left:24px}h1{font-size:24px}.intro p,.eyebrow,.footer-note,.control-heading{display:none}.controls{left:auto;right:16px;bottom:10px;transform:none;width:360px;padding:12px}.live{top:auto;bottom:160px;right:24px}.types .type{padding:7px}header{padding:14px 24px}}@media(prefers-reduced-motion:reduce){.intro{animation:none}*{transition:none!important}}

/* Keep the sky open while the richer palette stays within reach. */
.types{grid-template-columns:repeat(9,1fr)}.controls{width:min(720px,100%)}.intro.dim{opacity:.13}.type{padding:10px 2px}.type span{font-size:25px}.finale:disabled{opacity:.7;cursor:default}.show{box-shadow:0 0 24px #e8c48d12}
@media(max-width:600px){.types{grid-template-columns:repeat(9,minmax(0,1fr));gap:3px}.type{font-size:10px;border-radius:9px;padding:10px 1px}.type span{font-size:22px}.controls{padding-left:10px;padding-right:10px}.intro.dim{opacity:.1}.intro{top:17%}}
@media(max-height:520px){.controls{width:410px}.type{font-size:10px}.type span{font-size:20px}}

@media(max-width:600px) and (min-height:521px){.types{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.type{font-size:12px;padding:6px 1px;gap:3px}.type span{font-size:22px;height:24px;line-height:24px}.live{bottom:calc(296px + env(safe-area-inset-bottom))}.footer-note{font-size:12px}}

.effects-panel{position:fixed;z-index:5;right:42px;top:100px;width:min(320px,calc(100% - 32px));padding:18px 20px;background:#0d1424f5;border:1px solid #d8ae6840;border-radius:16px;box-shadow:0 14px 40px #0006;max-height:calc(100svh - 110px);overflow:auto}.effects-panel[hidden]{display:none}.effects-heading{display:flex;align-items:center;justify-content:space-between;font-size:16px}.effects-heading button{width:36px;height:36px;border-radius:50%;font-size:24px}.effects-panel p{font-size:14px;line-height:1.5;margin:8px 0 18px;color:#a8adbb}.effect-row{display:grid;grid-template-columns:1fr auto;gap:10px;font-size:14px;margin-top:18px}.effect-row output{color:#e8c48d}.effect-row input{grid-column:1/-1;width:100%;height:28px;margin:0;accent-color:#cda765;cursor:pointer}.effect-row input:focus-visible{outline:2px solid #ecc583;outline-offset:3px}@media(max-width:600px){header{padding:18px 16px}.top-actions{gap:5px}.top-actions button{padding:9px 9px}.brand{gap:7px;letter-spacing:1px}.effects-panel{right:16px;top:82px;max-height:calc(100svh - 100px)}}
.types{grid-template-columns:none;grid-template-rows:repeat(2,auto);grid-auto-flow:column;grid-auto-columns:68px;overflow-x:auto;overscroll-behavior-x:contain;padding:3px 3px 9px;scrollbar-width:thin;scrollbar-color:#b4935855 transparent;scroll-snap-type:x proximity}.types .type{scroll-snap-align:start;min-width:0;font-size:14px}.types .type:focus-visible{outline-offset:-2px}.key-hint{display:inline;font-size:12px}@media(max-width:600px){.types{grid-auto-columns:64px}.live{bottom:calc(282px + env(safe-area-inset-bottom))}.key-hint{display:inline;font-size:12px}}@media(max-height:520px){.types{grid-template-rows:auto;grid-auto-columns:62px}.key-hint{display:none}}
.types{grid-auto-columns:80px}.types .type{min-height:70px;overflow-wrap:anywhere;line-height:1.3}.types .type span{flex-shrink:0}.types:focus-within{scrollbar-color:#b49358 transparent}@media(max-width:700px) and (min-height:521px){.intro{top:clamp(180px,25svh,230px)}.types{grid-auto-columns:76px}.live{bottom:calc(300px + env(safe-area-inset-bottom))}}@media(max-height:520px){.types .type{min-height:54px;font-size:12px}.types{grid-auto-columns:72px}}
#sky{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.types .type{touch-action:pan-x}.control-heading>span:first-child{min-width:0}.key-hint{flex-shrink:0}@media(max-width:400px){.control-heading{gap:8px;font-size:12px}.key-hint{font-size:11px}}

/* Filters share the heading row, preserving the sky's vertical space. */
#shapeGroup{max-width:55%;font:inherit;color:#d6be94;background:#111827;border:1px solid #d8ae6840;border-radius:8px;padding:7px 28px 7px 10px;min-height:36px;cursor:pointer}#shapeGroup:focus-visible{outline:2px solid #ecc583;outline-offset:2px}.control-heading{align-items:center;gap:8px;margin-bottom:8px}.type[hidden]{display:none}@media(max-height:520px){.control-heading{display:flex;margin-bottom:4px}#shapeGroup{min-height:28px;padding-top:3px;padding-bottom:3px;font-size:12px}.controls{padding-top:8px}}

.show-settings{margin-top:22px;padding-top:16px;border-top:1px solid #d8ae6830}.show-settings h2{font-size:15px;font-weight:600;margin:0 0 14px;color:#e8c48d}.show-setting{display:grid;gap:8px;margin:14px 0;font-size:14px}.show-setting select{width:100%;min-height:40px;border:1px solid #d8ae6840;border-radius:8px;padding:8px 10px;background:#111827;color:#e0d5c3;font:inherit}.show-setting select:focus-visible{outline:2px solid #ecc583;outline-offset:2px}.show-settings p{margin:12px 0 0;font-size:12px}
.mood-presets{margin-top:20px;padding-top:16px;border-top:1px solid #d8ae6830}.mood-presets h2{margin:0 0 10px;font-size:15px;font-weight:600;color:#e8c48d}.preset-buttons{display:flex;gap:6px;flex-wrap:wrap}.preset-buttons button{flex:1;min-height:44px;border-radius:9px;padding:8px 5px;font-size:13px}.show-settings{margin-top:16px}
.effects-panel{max-height:calc(100svh - 116px);overscroll-behavior:contain}@media(max-width:700px){.effects-panel{max-height:calc(100svh - 176px)}#shapeGroup,.show-setting select{font-size:16px}}
.shape-picker{display:flex;gap:6px;flex:1;min-width:0;align-items:center}.shape-picker #shapeGroup{flex:1;max-width:100%;min-width:0}#favoriteToggle{flex:0 0 44px;width:44px;min-height:44px;padding:0;border-radius:8px;font-size:22px;color:#c7b28c}#favoriteToggle[aria-pressed=true]{color:#efc77f;background:#d6af651a}#favoriteToggle:disabled{opacity:.4;cursor:default}.types .type{position:relative}.type[data-favorite=true]::after{content:'★';position:absolute;right:5px;top:3px;font-size:10px;color:#edc98e}@media(max-width:400px){.key-hint{max-width:38%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}