:root{--ink:#3a2531;--plum:#6d4057;--berry:#bd4f68;--coral:#f48679;--peach:#ffb9a1;--cream:#fff8e9;--paper:#fffdf7;--blue:#5d8fc9;--line:3px solid var(--ink);--font-display:"Arial Rounded MT Bold", "Avenir Next", system-ui, sans-serif;--font-body:"Avenir Next", Avenir, system-ui, sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{color:var(--ink);background:var(--paper);font-family:var(--font-body), sans-serif;margin:0;font-weight:650}a{color:inherit;text-decoration:none}button{color:inherit;font:inherit}.shell{width:min(1180px,100% - 44px);margin-inline:auto}.nav{justify-content:space-between;align-items:center;gap:28px;height:92px;display:flex}.brand{font:600 25px/1 var(--font-display), sans-serif;align-items:center;gap:11px;display:inline-flex}.brand img{border-radius:13px}.navLinks{gap:34px;margin-left:auto;font-size:15px;display:flex}.navLinks a,footer>a:last-child{border-bottom:2px solid #0000}.navLinks a:hover,footer>a:last-child:hover{border-color:var(--berry)}.button{border:var(--line);background:var(--berry);color:#fff;min-height:54px;font:600 17px/1 var(--font-display), sans-serif;border-radius:17px;justify-content:center;align-items:center;gap:10px;padding:0 24px;transition:transform .16s,background .16s;display:inline-flex}.button:hover{background:var(--coral);transform:rotate(-1deg)translateY(-2px)}.button svg{fill:currentColor;width:20px}.buttonSmall{border-width:2px;min-height:45px;padding:0 18px;font-size:15px}.hero{grid-template-columns:1.02fr .98fr;align-items:center;gap:50px;min-height:690px;padding-block:48px 82px;display:grid}.eyebrow,.kicker{color:var(--berry);text-transform:uppercase;letter-spacing:.13em;font-size:13px;font-weight:900}.eyebrow{border:2px solid var(--peach);border-radius:99px;align-items:center;gap:9px;padding:8px 13px;display:inline-flex}.statusDot{border:2px solid var(--ink);background:#84c98a;border-radius:50%;width:9px;height:9px}h1,h2,h3{font-family:var(--font-display), sans-serif;letter-spacing:-.035em;margin:0;line-height:.95}h1{margin:24px 0;font-size:clamp(62px,7vw,104px);font-weight:600}h1 span,.download h2 span{color:var(--berry);position:relative}h1 span:after{content:"";background:var(--peach);z-index:-1;border-radius:100%;height:8px;position:absolute;bottom:1px;left:2px;right:0;transform:rotate(-2deg)}.heroCopy>p{color:#684d59;max-width:550px;margin:0 0 30px;font-size:20px;line-height:1.55}.heroActions{align-items:center;gap:26px;display:flex}.textLink{font-family:var(--font-display);border-bottom:3px solid var(--peach);padding:8px 0 4px;font-weight:600}.textLink span{color:var(--berry);margin-left:5px}.tinyNote{color:#896e78;margin-top:19px;font-size:12px}.tinyNote span{color:#84c98a;margin-right:5px}.heroArt{place-items:center;min-height:540px;display:grid;position:relative}.heroArt:before{content:"";border:var(--line);background:var(--peach);border-radius:48% 52% 45% 55%/54% 39% 61% 46%;position:absolute;inset:7% 1% 5%;transform:rotate(3deg)}.logoFrame{aspect-ratio:1;width:min(90%,460px);position:relative;transform:rotate(-5deg)}.logoFrame img{object-fit:contain}.soundWord{z-index:3;border:2px solid var(--ink);background:var(--cream);font:700 15px/1 var(--font-display);padding:7px 12px;position:absolute;transform:rotate(-8deg)}.wordOne{top:12%;left:2%}.wordTwo{background:var(--coral);bottom:17%;right:-1%;transform:rotate(9deg)}.miniKey{z-index:2;border:var(--line);background:var(--cream);width:52px;height:52px;font:600 20px var(--font-display);border-radius:13px;place-items:center;display:grid;position:absolute}.keyA{bottom:13%;left:4%;transform:rotate(13deg)}.keyB{background:#8badcf;top:9%;right:5%;transform:rotate(-10deg)}.keyC{background:var(--coral);bottom:2%;right:6%;transform:rotate(8deg)}.soundArc{z-index:2;gap:7px;display:flex;position:absolute}.soundArc i{border-left:4px solid var(--ink);border-radius:50%;width:8px;height:26px;display:block}.arcLeft{top:29%;left:2%;transform:rotate(12deg)}.arcRight{top:34%;right:-2%;transform:scaleX(-1)rotate(12deg)}.marquee{border-block:var(--line);background:var(--coral);width:101%;margin-left:-.5%;padding:18px 0;overflow:hidden;transform:rotate(-1deg)}.marquee div{width:max-content;animation:20s linear infinite scroll;display:flex}.marquee span{font:600 24px var(--font-display);text-transform:uppercase;margin-right:42px}.marquee b{margin-left:40px}@keyframes scroll{to{transform:translate(-50%)}}.playground{padding-block:130px}.sectionHeading{justify-content:space-between;align-items:end;gap:40px;margin-bottom:54px;display:flex}.sectionHeading h2{font-size:clamp(48px,6vw,76px)}.sectionHeading .kicker{margin:0 0 14px}.sectionHeading>p{color:#755c66;max-width:430px;margin:0;font-size:17px;line-height:1.55}.keyboardPanel{flex-direction:column;gap:24px;display:flex}.packPicker{grid-template-columns:repeat(4,1fr);gap:14px;display:grid}.packPicker button{background:var(--cream);text-align:left;cursor:pointer;border:2px solid #d9c8c1;border-radius:18px;grid-template-columns:42px 1fr 18px;align-items:center;gap:11px;padding:15px 16px;transition:border-color .15s,background .15s,transform .15s;display:grid}.packPicker button:hover{border-color:var(--berry);transform:translateY(-2px)}.packPicker button.selected{border-color:var(--ink);background:var(--peach)}.packPicker strong,.packPicker small{display:block}.packPicker strong{font-family:var(--font-display);font-size:16px}.packPicker small{color:#917681;margin-top:2px;font-size:11px}.packPicker b{color:var(--berry)}.switch{border:2px solid var(--ink);border-radius:9px;place-items:center;width:36px;height:36px;display:grid}.switch i{border:2px solid var(--ink);background:#fff;border-radius:3px;width:15px;height:15px}.creamSwitch{background:#f1dfb7}.brownSwitch{background:#9d6854}.blueSwitch{background:#69a1d2}.signatureSwitch{background:#ef8d81}.keyboardWrap{min-width:0}.nowPlaying{align-items:center;gap:7px;margin:0 4px 13px;font-size:12px;display:flex}.nowPlaying>span{background:var(--berry);border-radius:50%;width:8px;height:8px}.nowPlaying em{color:#886d78;white-space:nowrap;font-style:normal}.soundToggle{border:2px solid var(--ink);background:var(--peach);font:700 11px var(--font-display);cursor:pointer;white-space:nowrap;border-radius:10px;margin-left:auto;padding:7px 12px}.soundToggle[aria-pressed=true]{background:var(--cream)}.soundToggle:disabled{cursor:wait;opacity:.65}.macKeyboard{border:var(--line);background:#d8cdc8;border-radius:26px;padding:14px;overflow-x:auto}.keyboardDeck{border:2px solid var(--ink);background:var(--plum);border-radius:17px;min-width:820px;padding:14px}.macKeyRow{gap:7px;margin-bottom:7px;display:flex}.macKeyRow:last-child{margin-bottom:0}.macKeyRow button{flex:var(--key-width) 1 0;border:2px solid var(--ink);background:var(--cream);cursor:pointer;min-width:0;height:53px;font:600 13px var(--font-display);border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:2px;transition:transform 90ms,background 90ms;display:flex}.macKeyRow button span{white-space:nowrap}.macKeyRow button small{color:#917681;font:700 8px var(--font-body)}.macKeyRow button:hover{background:var(--peach)}.macKeyRow button:active,.macKeyRow button.pressed{background:var(--coral);transform:translateY(3px)}.macKeyRow .logoKey{background:var(--peach);padding:4px}.macKeyRow .logoKey img{border-radius:8px;width:34px;height:34px}.keyboardExtras{border-top:2px solid #896c7d;margin-top:13px;padding-top:13px}.keyboardExtras .macKeyRow button{flex:0 0 48px;font-size:10px}.keyboardExtras .macKeyRow:first-child button{flex-basis:72px}.keyboardExtras .macKeyRow button:last-child{flex-basis:68px}.keyboardHint{text-align:center;color:#8e6e79;font:500 13px var(--font-display);margin:15px 0 0}.how{background:var(--ink);color:var(--cream);padding-block:120px 130px}.lightHeading .kicker{color:var(--peach)}.featureGrid{grid-template-columns:repeat(3,1fr);gap:22px;display:grid}.featureCard{border:3px solid var(--cream);min-height:390px;color:var(--ink);border-radius:28px;padding:26px;position:relative;overflow:hidden}.featureCard.coral{background:var(--coral)}.featureCard.cream{background:var(--cream)}.featureCard.peach{background:var(--peach)}.featureNumber{font:600 14px var(--font-display);border:2px solid var(--ink);border-radius:99px;place-items:center;width:38px;height:30px;display:grid}.featureIcon{fill:none;width:112px;height:112px;stroke:var(--ink);stroke-width:4px;stroke-linecap:round;stroke-linejoin:round;margin:44px auto 36px;display:block}.featureCard h3{margin-bottom:12px;font-size:29px}.featureCard p{margin:0;font-size:15px;line-height:1.5}.download{border:var(--line);background:var(--peach);border-radius:34px;grid-template-columns:auto 1fr auto;align-items:center;gap:40px;min-height:330px;margin-block:120px;padding:46px 55px;display:grid;position:relative;overflow:hidden}.download:after{content:"";border:var(--line);background:var(--coral);border-radius:50%;width:170px;height:170px;position:absolute;top:-88px;right:-80px}.download img{border:var(--line);border-radius:30px;transform:rotate(-5deg)}.download .kicker{color:var(--plum);margin:0 0 12px}.download h2{font-size:clamp(45px,5vw,68px)}.download>div p:last-child{margin:14px 0 0}.darkButton{background:var(--ink);white-space:nowrap;z-index:2;position:relative}.download .downloadCaution{max-width:410px;color:var(--plum);margin-top:10px;font-size:12px;line-height:1.4}.downloadDoodle{color:var(--berry);opacity:.45;font-size:130px;position:absolute;bottom:-58px;left:25%;transform:rotate(-15deg)}footer{color:#755d67;border-top:2px solid #eeddd6;justify-content:space-between;align-items:center;gap:20px;min-height:100px;font-size:13px;display:flex}footer .brand{color:var(--ink);font-size:20px}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.marquee div{animation:none}*,:before,:after{transition-duration:.01ms!important}}@media (max-width:900px){.packPicker{grid-template-columns:repeat(2,1fr)}.hero{text-align:center;grid-template-columns:1fr;padding-top:60px}.heroCopy>p{margin-inline:auto}.heroActions{justify-content:center}.heroArt{min-height:500px}.packPicker button{grid-template-columns:36px 1fr 16px;padding:12px}.switch{width:32px;height:32px}.featureGrid{grid-template-columns:1fr}.featureCard{min-height:290px}.featureIcon{margin:20px 0}.download{grid-template-columns:auto 1fr}.download .button{grid-column:1/-1}}@media (max-width:640px){.shell{width:min(100% - 28px,1180px)}.nav{height:76px}.navLinks{display:none}.buttonSmall{padding:0 13px}.hero{gap:25px;min-height:auto;padding-block:64px 70px}.heroArt{min-height:390px}.heroActions{flex-direction:column;gap:12px}.heroActions .button{width:100%}h1{font-size:clamp(55px,17vw,76px)}.heroCopy>p{font-size:17px}.playground,.how{padding-block:85px}.sectionHeading{display:block}.sectionHeading>p{margin-top:24px}.nowPlaying{flex-wrap:wrap}.nowPlaying em{text-align:right;order:3;width:100%}.packPicker{padding-bottom:4px;display:flex;overflow-x:auto}.packPicker button{min-width:190px}.macKeyboard{border-radius:20px;padding:9px}.keyboardDeck{min-width:760px;padding:10px}.macKeyRow{gap:5px;margin-bottom:5px}.macKeyRow button{border-radius:6px;height:47px;font-size:11px}.download{text-align:center;grid-template-columns:1fr;margin-block:80px;padding:35px 24px}.download img{margin:auto}.download .button{grid-column:auto}footer{flex-wrap:wrap;padding-block:26px}footer p{text-align:center;order:3;width:100%}}