@import url(https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,400..700&family=DM+Mono:wght@400;500&family=Newsreader:opsz,wght@6..72,400;6..72,500&display=swap);.playful-landing{background:radial-gradient(circle at 71% 33%,#fff7ba 0,transparent 19%),radial-gradient(circle at 19% 78%,#d8ff772e 0,transparent 18%),var(--paper)}.playful-landing header{position:relative;z-index:3}.header-wiggle{font:10px var(--mono);color:#ed5c4b;transform:rotate(-3deg);position:absolute;right:26%;top:30px}.header-wiggle b{font-size:16px}.playful-landing .onboard-box{max-width:620px;padding-top:74px}.playful-landing .onboard-box h1{font-size:clamp(61px,6.3vw,91px);line-height:.83}.playful-landing .intro{max-width:465px;font-size:21px}.landing-confetti{position:absolute;color:#ed5c4b;font-size:34px;z-index:2;animation:floaty 3s ease-in-out infinite alternate}.confetti-a{top:154px;left:48%;transform:rotate(15deg)}.confetti-b{top:490px;left:52%;color:#638de5;animation-delay:.6s}.tiny-steps{display:flex;align-items:center;gap:9px;margin:25px 0;flex-wrap:wrap;font:9px var(--mono);text-transform:uppercase;color:#64645d}.tiny-steps span{border:1px solid var(--line);padding:8px 9px;background:#fcfcf980}.tiny-steps b{display:inline-grid;place-items:center;width:16px;height:16px;background:var(--ink);color:var(--paper);border-radius:50%;margin-right:4px}.tiny-steps i{font-style:normal;color:#ed5c4b}.mood-picker{max-width:440px;margin:0 0 26px}.mood-picker>p{font:9px var(--mono);text-transform:uppercase;color:#74746d;margin:0 0 8px}.mood-picker>p span{float:right;color:#b4b3ab}.mood-picker>div{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:7px;gap:7px}.mood-picker button{min-height:80px;border:1px solid var(--line);background:#fbfaf5;text-align:left;padding:9px;transition:transform .2s,background .2s}.mood-picker button.picked,.mood-picker button:hover{background:var(--lime);border-color:var(--ink);transform:translateY(-3px) rotate(-1deg);box-shadow:3px 4px 0 var(--ink)}.mood-picker button i{display:block;font-size:18px;font-style:normal;margin-bottom:5px}.mood-picker button b{display:block;text-transform:uppercase;font:10px var(--mono)}.mood-picker button small{display:block;font:9px var(--serif);margin-top:3px;color:#6a6b64}.playful-landing .switcher{margin-top:2px}.playful-landing .onboard-collage{top:114px;height:560px}.playful-landing .collage-card{border:6px solid #fffdf7;box-shadow:10px 11px 0 #00000013}.playful-landing .collage-card i{position:absolute;right:9px;top:9px;font:9px var(--mono);font-style:normal}.playful-landing .card-one{animation:floaty 3.6s ease-in-out infinite alternate}.playful-landing .card-two{animation:floaty 3.1s ease-in-out .4s infinite alternate}.playful-landing .card-three{animation:floaty 3.9s ease-in-out .2s infinite alternate}.card-four{left:45%;top:95px;background:var(--pink);transform:rotate(13deg);animation:floaty 2.9s ease-in-out .7s infinite alternate}.collage-caption{position:absolute;right:1%;bottom:5px;color:#ed5c4b;font:11px/1.1 var(--mono);transform:rotate(-6deg)}.collage-caption em{font:20px var(--serif)}.mood-bubble{position:absolute;left:52%;bottom:74px;border:1px solid var(--ink);background:var(--white);box-shadow:5px 5px 0 var(--ink);padding:9px 12px;transform:rotate(4deg);display:grid;grid-template-columns:24px 1fr;grid-column-gap:7px;column-gap:7px;align-items:center}.mood-bubble span{font-size:20px;grid-row:span 2}.mood-bubble b{font:10px var(--mono);text-transform:uppercase}.mood-bubble small{font:13px var(--serif);color:#6e6e67}@keyframes floaty{to{translate:0 -11px;rotate:4deg}}.bop-play-button{border:1px solid var(--ink);background:var(--lime);color:var(--ink);padding:11px 16px;font:10px var(--mono);text-transform:uppercase;letter-spacing:.03em}.bop-play-button span{margin-right:7px}.bop-play-button:hover{background:var(--pink)}.share-play{margin-top:20px;position:relative;z-index:2}.archive-play{justify-self:end;background:0 0;padding:8px 10px;border-color:var(--line)}.tile-body small.is-thinking{color:#e85e4c}.tile-body small.is-thinking i{font-size:10px;letter-spacing:1px;animation:blink 1s ease-in-out infinite alternate}@keyframes blink{to{opacity:.25}}@media (max-width:820px){.header-wiggle,.mood-bubble{display:none}.playful-landing .onboard-box{padding-top:63px}.playful-landing .onboard-box h1{font-size:59px}.playful-landing .intro{font-size:18px}.tiny-steps{gap:5px}.tiny-steps i{display:none}.mood-picker{max-width:360px}.playful-landing .onboard-collage{top:165px}.card-four,.landing-confetti{display:none}.playful-landing .card-one{right:0}.playful-landing .card-two{left:-18px}.playful-landing .card-three{right:24px}.collage-caption{display:none}.archive-play{font-size:0;padding:8px}.archive-play span{font-size:12px;margin:0}.share-play{margin-top:14px}}:root{--ink:#191919;--paper:#f4f3ed;--white:#fcfcf9;--muted:#777771;--lime:#d8ff77;--pink:#ffb5ad;--blue:#b5d6ff;--orange:#ffc071;--line:#d7d6cf;--mono:"DM Mono",monospace;--sans:"Bricolage Grotesque",sans-serif;--serif:"Newsreader",serif}*{box-sizing:border-box}body,html{background:var(--paper)}body{margin:0;color:var(--ink);font-family:var(--sans)}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}.boppi-shell,.shared-shell{max-width:1440px;margin:auto;min-height:100vh;padding:0 44px}.masthead,.shared-shell header{height:64px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.logo{border:0;background:0 0;color:var(--ink);font:700 25px/1 var(--sans);letter-spacing:-1.7px;text-decoration:none;display:flex;gap:6px;align-items:center}.logo i{display:inline-block;width:17px;height:17px;border:3px solid var(--ink);border-radius:50%;background:conic-gradient(var(--pink) 0 25%,var(--lime) 0 52%,var(--blue) 0 75%,var(--orange) 0)}.member-chip,.room-stamp{font:10px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:#6c6d66}.room-stamp b{color:#aaa9a1;margin:0 8px}.pulse-dot{width:7px;height:7px;border-radius:50%;display:inline-block;background:#60bc83;margin-right:5px}.member-chip{border:1px solid var(--line);padding:6px 9px 6px 6px;background:var(--white);display:flex;align-items:center;gap:7px}.member-chip span{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:var(--pink);color:var(--ink);font:10px var(--mono)}.room-nav{height:48px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:27px}.room-nav button{background:0 0;border:0;color:#777771;text-transform:uppercase;font:10px var(--mono);letter-spacing:.04em;padding:8px 0}.room-nav .selected{color:var(--ink);border-bottom:2px solid var(--ink)}.room-nav button span{color:#999890;margin-left:4px}.room-nav .invite{margin-left:auto;color:var(--ink);background:var(--lime);padding:8px 11px;border:1px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}.room-nav .invite span{font-size:15px;margin-left:5px}.room-hero{min-height:220px;position:relative;text-align:center;padding:31px 0 20px;overflow:hidden;border-bottom:1px solid var(--line)}.kicker{font:10px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:#777771;margin:0 0 10px}.archive h1,.missing h1,.onboard-box h1,.room-hero h1,.shared-hero h1{font:500 clamp(48px,5.2vw,74px)/.82 var(--sans);letter-spacing:-6px;margin:0}.archive h1 em,.missing em,.onboard-box h1 em,.room-hero h1 em{font:400 1.05em var(--serif);letter-spacing:-4px;color:#ff614e}.room-hero>p:not(.kicker){font:15px/1.24 var(--serif);color:#5b5c56;margin:10px 0}.hero-planet{position:absolute;right:8%;bottom:8px;width:118px;height:118px;border-radius:50%;background:var(--lime);transform:rotate(11deg);box-shadow:inset -16px -13px hsla(0,0%,100%,.23)}.planet-face{position:absolute;left:34px;top:41px;transform:scale(.72) rotate(-11deg)}.planet-face i{display:inline-block;width:7px;height:11px;border-radius:50%;background:var(--ink);margin:0 10px}.planet-face b{display:block;width:18px;height:8px;border-bottom:2px solid var(--ink);border-radius:50%;margin:5px auto}.planet-ring{position:absolute;width:220px;height:75px;top:21px;left:-51px;border:2px solid var(--ink);border-radius:50%;transform:rotate(-22deg)}.planet-label{position:absolute;bottom:6px;left:-24px;white-space:nowrap;transform:scale(.8) rotate(-11deg);font:9px var(--mono);text-transform:uppercase}.floating-photo{position:absolute;background-size:cover;background-position:50%;border:7px solid var(--paper);box-shadow:0 4px 11px #00000012}.photo-a{width:61px;height:82px;left:12%;top:29px;transform:rotate(-7deg);background-image:url(https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?auto=format&fit=crop&w=300&q=75)}.photo-b{width:71px;height:55px;right:19%;top:22px;transform:rotate(7deg);background-image:url(https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=300&q=75)}.hero-scribble{font:11px/1.05 var(--mono);color:#f36150;text-align:left;position:absolute;left:20%;bottom:18px;transform:scale(.82) rotate(-8deg)}.hero-scribble span{font-size:26px;position:absolute;right:-26px;bottom:-19px}.main-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr);grid-gap:34px;gap:34px;padding:18px 8% 35px}.zone-title{justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:9px;margin-bottom:10px}.zone-title,.zone-title>div{display:flex;align-items:baseline}.zone-title>div{gap:12px}.zone-title span{font:10px var(--mono);color:#f36150}.zone-title h2{margin:0;font:500 20px var(--sans);letter-spacing:-1.2px}.zone-title p{margin:0;font:9px var(--mono);text-transform:uppercase;color:#85857e}.moment-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:12px;gap:12px}.moment-tile{min-height:238px;border:1px solid var(--line);background:var(--white);overflow:hidden;transition:transform .25s,box-shadow .25s}.moment-tile:hover{transform:translateY(-4px) rotate(-.5deg);box-shadow:0 9px 20px #0000000c}.tone-pink{border-top:5px solid var(--pink)}.tone-lime{border-top:5px solid var(--lime)}.tone-blue{border-top:5px solid var(--blue)}.tone-orange{border-top:5px solid var(--orange)}.photo-wrap{height:119px;margin:8px 8px 0;position:relative;background:#ebeae3;overflow:hidden}.photo-wrap img{width:100%;height:100%;object-fit:cover}.mine,.tile-number{position:absolute;font:9px var(--mono);padding:4px 5px;color:#fff;background:#171717}.tile-number{left:5px;bottom:5px}.mine{right:5px;top:5px;background:#ff614e}.tile-body{padding:10px 12px}.tile-body>div{display:flex;justify-content:space-between;align-items:baseline}.tile-body strong{font:600 14px var(--sans);letter-spacing:-.5px}.tile-body span{font:9px var(--mono);color:#92918b}.tile-body p{font:400 16px/1.02 var(--serif);margin:6px 0 8px}.tile-body small{font:9px var(--mono);color:#777771;text-transform:uppercase}.tile-body small i{font-style:normal;font-size:14px;color:#f36150;margin-right:4px}.composer-card{min-height:238px;border:1px dashed #aaa9a2;background:#f7f6f1;padding:8px;display:flex;flex-direction:column}.photo-picker{height:118px;display:flex;align-items:center;justify-content:center;background:50%/cover #e5e3da;font:10px var(--mono);text-transform:uppercase;color:#61615b}.photo-picker input{display:none}.photo-picker.has-preview span{color:#fff;background:#171717;padding:5px}.composer-copy{padding:11px 6px 0}.composer-copy p{margin:0 0 5px;color:#82827b;text-transform:uppercase;font:9px var(--mono)}.composer-copy textarea{width:100%;height:44px;border:0;background:0 0;resize:none;outline:0;font:400 17px/1.05 var(--serif);color:var(--ink)}.composer-copy>div{border-top:1px solid var(--line);padding-top:6px;display:flex;justify-content:space-between;align-items:center;font:8px var(--mono);color:#8b8a83}.composer-copy button{border:0;background:0 0;font:9px var(--mono);text-transform:uppercase;color:#ed5c4b}.empty-card{display:none!important;border:1px dashed #d4d2c9;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#aaa9a1;font:10px/1.4 var(--mono);text-transform:uppercase}.empty-card span{font-size:18px;margin-bottom:7px;color:#c6c5bd}.bop-player,.song-zone{position:relative}.bop-player{min-height:266px;background:#1d1d1c;color:var(--paper);padding:12px 16px 14px;overflow:hidden}.bop-player.ready{background:#23312b}.bop-player:after{content:"BOP";position:absolute;right:-19px;bottom:-24px;font:180px var(--sans);letter-spacing:-18px;color:#ffffff05;transform:rotate(-18deg)}.player-top{font:9px var(--mono);display:flex;justify-content:space-between;color:#999b95;position:relative;z-index:1}.player-top span:last-child{color:var(--lime)}.vinyl{width:112px;height:112px;margin:12px auto 9px;background:#3b3d3a;border:9px solid #2a2b29;border-radius:50%;position:relative;box-shadow:0 0 0 1px #535550,inset 0 0 0 1px #555752}.vinyl-rings{inset:9px;border:1px solid #50524f;box-shadow:0 0 0 9px #3b3d3a,0 0 0 10px #525450,0 0 0 22px #3b3d3a,0 0 0 23px #525450}.vinyl-center,.vinyl-rings{position:absolute;border-radius:50%}.vinyl-center{width:35px;height:35px;top:30px;left:30px;background:var(--lime);color:var(--ink);font:8px/6px var(--mono);padding-top:4px;text-align:center;z-index:2}.bop-player h3{font:400 22px/.95 var(--serif);letter-spacing:-1.2px;margin:0}.bop-player h3,.bop-player p{text-align:center;position:relative;z-index:1}.bop-player p{margin:4px 0 0;color:#999b95;font:9px var(--mono);text-transform:uppercase}.soundline{height:30px;display:flex;align-items:center;justify-content:center;gap:3px;position:relative;z-index:1;margin:7px 0}.soundline i{display:block;width:3px;background:var(--lime);opacity:.85;border-radius:3px}.listen-button{display:block;margin:auto;color:var(--paper);border:1px solid #656762;border-radius:22px;background:0 0;padding:8px 15px;text-transform:uppercase;font:10px var(--mono);position:relative;z-index:1}.listen-button:disabled{color:#777873;border-color:#484946}.listen-button span{color:var(--lime);margin-right:9px}.action-button{width:100%;border:0;background:var(--lime);color:var(--ink);min-height:43px;margin-top:8px;text-transform:uppercase;font:10px var(--mono)}.action-button.dark,.action-button:hover{background:var(--pink)}.action-button.dark{color:var(--ink);border:1px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}.action-button span{font-size:15px;margin-left:7px}.quiet-note{text-align:center;color:#898981;font:10px/1.4 var(--mono);margin:7px auto 0}.spinner{display:inline-block;width:11px;height:11px;border:1px solid var(--ink);border-top:1px solid transparent;border-radius:50%;vertical-align:-2px;margin-right:7px;animation:spin .8s linear infinite}.toast{position:fixed;z-index:10;left:50%;bottom:24px;transform:translateX(-50%);border:1px solid var(--ink);background:var(--white);padding:12px 13px 12px 17px;font:10px var(--mono);box-shadow:4px 4px 0 var(--ink)}.toast button{border:0;background:0 0;font-size:17px;margin-left:15px}.boppi-shell footer,.shared-shell footer{border-top:1px solid var(--line);min-height:65px;display:flex;align-items:center;justify-content:space-between;color:#777771;text-transform:uppercase;font:9px var(--mono)}.boppi-shell footer b{color:#ff614e}.onboarding{min-height:100vh;background:var(--paper);position:relative;overflow:hidden;padding:0 7%}.onboarding header{height:78px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.onboarding header>span{font:10px var(--mono);color:#777771;text-transform:uppercase}.onboard-box{position:relative;z-index:1;max-width:560px;padding:88px 0 65px}.onboard-box h1{font-size:72px;letter-spacing:-5px}.onboard-box .intro{font:19px/1.25 var(--serif);color:#63635d;max-width:400px;margin:20px 0 30px}.switcher{display:flex;width:360px;max-width:100%;border-bottom:1px solid var(--line);margin-bottom:21px}.switcher button{border:0;background:0 0;padding:10px 0;color:#777771;flex:1 1;text-transform:uppercase;font:10px var(--mono)}.switcher .selected{color:var(--ink);border-bottom:2px solid var(--ink)}.onboard-form{max-width:360px}.onboard-form label{display:block;font:9px var(--mono);color:#777771;text-transform:uppercase;margin:0 0 16px}.onboard-form input{display:block;width:100%;border:0;border-bottom:1px solid var(--line);background:0 0;padding:8px 0;color:var(--ink);font:500 19px var(--sans);outline:0}.begin-button{display:block;width:100%;border:0;background:var(--ink);color:var(--paper);padding:17px;margin-top:23px;text-transform:uppercase;text-align:left;font:10px var(--mono)}.begin-button span{float:right;font-size:16px}.form-error{font:11px var(--mono);color:#e65240}.fineprint{font:9px/1.4 var(--mono);color:#888780;margin-top:20px}.onboard-collage{position:absolute;right:7%;top:150px;width:38%;height:480px}.collage-card{position:absolute;width:150px;height:150px;display:flex;align-items:center;justify-content:center;font-size:54px;box-shadow:9px 10px 0 #0000000d}.collage-card span{position:absolute;bottom:11px;left:12px;font:9px var(--mono);text-transform:uppercase}.card-one{right:30px;top:0;background:var(--orange);transform:rotate(6deg)}.card-two{left:10px;top:157px;background:var(--blue);transform:rotate(-9deg)}.card-three{right:55px;top:300px;background:var(--lime);transform:rotate(8deg)}.archive{padding:80px 15% 95px;min-height:640px}.back-link{background:0 0;border:0;color:#777771;text-transform:uppercase;font:10px var(--mono);padding:0;margin-bottom:54px}.archive h1{font-size:75px}.archive-copy{font:18px/1.25 var(--serif);color:#6d6d66;margin:17px 0 45px}.archive-list{border-top:1px solid var(--line)}.archive-list article{min-height:104px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:37px 75px 1fr auto;align-items:center;grid-gap:18px;gap:18px}.archive-list article>span{font:10px var(--mono);color:#f36150}.archive-art{width:75px;height:66px;display:grid;place-items:center;font-size:28px;transform:rotate(-5deg)}.art-0{background:var(--pink)}.art-1{background:var(--lime)}.art-2{background:var(--blue)}.art-3{background:var(--orange)}.archive-list small{font:9px var(--mono);text-transform:uppercase;color:#888780}.archive-list h2{font:400 25px var(--serif);letter-spacing:-1px;margin:4px 0}.archive-list article>b{font-size:19px;font-weight:400}.archive-empty{padding:45px 0;font:16px var(--serif);color:#777771}.reveal{position:fixed;inset:0;z-index:20;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:40px}.reveal-close{position:absolute;right:25px;top:20px;background:0 0;border:0;color:var(--paper);font:30px var(--sans)}.reveal-count{position:absolute;top:27px;left:30px;font:10px var(--mono);letter-spacing:.1em;color:var(--lime)}.reveal-photo{width:190px;height:190px;background:#3b3b38;margin-bottom:26px;transform:rotate(4deg)}.reveal-photo img{width:100%;height:100%;object-fit:cover}.reveal-name{font:10px var(--mono);text-transform:uppercase;color:var(--lime);margin:0 0 11px}.reveal h2{max-width:700px;font:400 clamp(37px,5vw,70px)/.93 var(--serif);letter-spacing:-3px;margin:0}.reveal h2 em{font-style:normal;color:var(--lime)}.reveal-code{font:11px/1.5 var(--mono);text-align:left;color:#c9cac2;border-top:1px solid #4c4d49;margin-top:30px;padding-top:14px;min-width:275px}.reveal-code span{color:#7f817a}.reveal-orb{width:180px;height:180px;border-radius:50%;background:var(--lime);display:grid;place-items:center;color:var(--ink);font-size:62px;margin-bottom:25px;animation:orb 1.4s ease-in-out infinite alternate}.reveal>p:not(.reveal-name){font:17px var(--serif);color:#c2c4bb}.reveal>button:not(.reveal-close){border:1px solid var(--lime);background:var(--lime);padding:13px 18px;text-transform:uppercase;font:10px var(--mono);margin-top:14px}.loading-screen{min-height:100vh;display:grid;place-items:center;align-content:center;grid-gap:17px;gap:17px;font:10px var(--mono);text-transform:uppercase;color:#73736c}.loading-orb{width:45px;height:45px;border-radius:50%;background:conic-gradient(var(--lime),var(--blue),var(--pink),var(--lime));animation:spin 1s linear infinite}.shared-shell{background:var(--paper)}.shared-cta{color:var(--ink);font:10px var(--mono);text-transform:uppercase;text-decoration:none}.shared-hero{padding:87px 0 35px;text-align:center;min-height:600px;position:relative;overflow:hidden}.shared-hero h1{font-size:clamp(50px,7.5vw,108px);max-width:1000px;margin:auto}.shared-date{font:16px var(--serif);color:#74746d;margin-top:19px}.shared-collage{height:290px;position:relative;max-width:900px;margin:15px auto 0}.share-photo{position:absolute;background:#e6e5de;margin:0;box-shadow:6px 8px 0 #0000000c;padding:6px}.share-photo img{width:100%;height:100%;object-fit:cover;display:block}.share-photo figcaption{background:var(--white);padding:7px;font:10px var(--mono);text-align:left;text-transform:uppercase}.share-photo figcaption span{color:#f36150}.share-0{width:158px;height:202px;left:7%;top:41px;transform:rotate(-8deg)}.share-1{width:190px;height:231px;left:29%;top:4px;transform:rotate(3deg)}.share-2{width:140px;height:177px;right:28%;top:57px;transform:rotate(-5deg)}.share-3{width:130px;height:170px;right:6%;top:12px;transform:rotate(7deg)}.share-disc{position:absolute;left:50%;top:74px;width:145px;height:145px;margin-left:-72px;border-radius:50%;background:#252624;border:11px solid #3c3e39;color:var(--lime);display:grid;place-items:center;font-size:34px}.share-disc small{position:absolute;bottom:22px;color:var(--paper);font:8px var(--mono);text-transform:uppercase}.shared-layers{padding:86px 16%;border-top:1px solid var(--line)}.shared-layers article{border-bottom:1px solid var(--line);display:grid;grid-template-columns:50px 1fr auto;align-items:center;grid-gap:12px;gap:12px;padding:18px 0}.shared-layers article>span{font:10px var(--mono);color:#f36150}.shared-layers p{font:400 23px/1.05 var(--serif);margin:0}.shared-layers p b{font-family:var(--sans);font-size:17px}.shared-layers p em{color:#777771}.shared-layers i{font-style:normal;color:#f36150}.missing{min-height:100vh;padding:35px 10%;background:var(--paper)}.missing h1{margin-top:140px;font-size:75px}.missing .begin-button{width:280px;text-decoration:none;text-align:center;margin-top:30px}@keyframes spin{to{transform:rotate(1turn)}}@keyframes orb{to{transform:scale(1.07) rotate(10deg)}}@media (max-width:820px){.boppi-shell,.shared-shell{padding:0 18px}.room-stamp{display:none}.member-chip{font-size:0}.member-chip span{margin:0}.room-hero{min-height:420px;padding-top:78px}.onboard-box h1,.room-hero h1{font-size:61px;letter-spacing:-4px}.hero-planet{width:125px;height:125px;right:-14px;bottom:27px}.planet-ring{transform:scale(.72) rotate(-22deg);transform-origin:center}.planet-face{left:39px;top:47px;transform:scale(.8) rotate(-11deg)}.planet-label{display:none}.photo-a{left:-10px;width:68px;height:95px}.photo-b{right:10%;top:50px;width:75px;height:60px}.hero-scribble{left:11%;bottom:39px}.main-grid{grid-template-columns:1fr;padding:33px 0 48px;gap:45px}.moment-grid{gap:8px}.composer-card,.empty-card,.moment-tile{min-height:248px}.photo-picker,.photo-wrap{height:125px}.boppi-shell footer{font-size:8px;gap:9px;flex-wrap:wrap;justify-content:center;padding:19px 0}.onboarding{padding:0 24px}.onboarding header>span{display:none}.onboard-box{padding:70px 0}.onboard-collage{opacity:.25;right:-40px;top:210px;width:240px}.archive{padding:55px 0}.archive h1{font-size:61px}.archive-list article{grid-template-columns:24px 58px 1fr auto;gap:10px}.archive-art{width:58px;height:53px}.archive-list h2{font-size:19px}.reveal{padding:20px}.reveal h2{font-size:43px}.shared-hero{padding-top:72px;min-height:560px}.shared-hero h1{letter-spacing:-4px}.shared-collage{transform:scale(.8);transform-origin:top center;width:125%;margin-left:-12%}.shared-layers{padding:58px 0}.shared-layers p{font-size:19px}.shared-shell footer{gap:14px;flex-wrap:wrap;justify-content:center;padding:20px 0}.share-0{left:2%}.share-1{left:27%}.share-2{right:24%}.share-3{right:0}}.bop-player.playing .vinyl{animation:vinyl-spin 3.2s linear infinite}.bop-player.playing .vinyl-rings{animation:vinyl-glow 1.2s ease-in-out infinite alternate}.bop-player.playing .soundline i{animation:wave-bop .8s ease-in-out infinite alternate}.bop-player.playing .soundline i:nth-child(3n){animation-delay:-.2s}.bop-player.playing .soundline i:nth-child(4n){animation-delay:-.45s}.bop-player.playing .listen-button{border-color:var(--lime);box-shadow:0 0 0 3px #d8ff771c}.bop-play-button:has(span:first-child:not(:empty)){transition:transform .2s ease}.bop-play-button:hover{transform:translateY(-2px)}@keyframes vinyl-spin{to{transform:rotate(1turn)}}@keyframes vinyl-glow{to{opacity:.55;transform:scale(.92)}}@keyframes wave-bop{to{transform:scaleY(.35);opacity:.5}}.public-bop-page,.public-maker,.spot-page{min-height:100vh;background:var(--paper);padding:0 7%;color:var(--ink)}.public-bop-page header,.public-maker header,.spot-page header{height:78px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.maker-card{max-width:620px;margin:0 auto;padding:72px 0 90px}.maker-card h1,.public-bop-hero h1,.spot-hero h1{font:500 clamp(55px,7vw,92px)/.84 var(--sans);letter-spacing:-6px;margin:12px 0}.maker-card h1 em,.public-bop-hero h1 em,.spot-hero h1 em{font:400 1.05em var(--serif);color:#ff614e}.maker-intro{max-width:470px;color:#66665f;font:20px/1.25 var(--serif);margin:22px 0 30px}.maker-photo{height:180px;display:grid;place-items:center;background:#e5e3da 50%/cover;border:1px dashed #aaa9a2;color:#61615b;font:10px var(--mono);text-transform:uppercase;margin-bottom:22px}.maker-photo input{display:none}.maker-photo span{background:var(--white);padding:9px 12px}.maker-form label{display:block;font:9px var(--mono);color:#777771;text-transform:uppercase;margin:0 0 18px}.maker-form input,.maker-form textarea{display:block;width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;padding:8px 0;color:var(--ink);font:500 20px var(--sans);outline:0}.maker-form textarea{height:62px;resize:vertical;font:400 20px/1.1 var(--serif)}.maker-form .begin-button{margin-top:28px}.public-bop-hero{text-align:center;max-width:720px;margin:auto;padding:58px 0 95px}.public-art{width:180px;height:180px;margin:22px auto 25px;background:var(--lime);display:grid;place-items:center;position:relative;overflow:hidden;border-radius:50%;box-shadow:8px 9px 0 #00000010}.public-art img{width:100%;height:100%;object-fit:cover}.public-art span{position:absolute;font-size:65px}.public-bop-hero h1{font-size:clamp(46px,6vw,76px);letter-spacing:-4px}.public-bop-hero>p:not(.kicker){font:24px var(--serif);margin:12px auto;color:#55564f}.public-bop-hero>small{display:block;font:10px var(--mono);color:#777771;text-transform:uppercase}.public-bop-page footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;padding:20px 0;font:10px var(--mono);text-transform:uppercase}.public-bop-page footer a,.spot-page a{color:var(--ink);text-decoration:none}.spot-hero{text-align:center;padding:72px 0 58px;border-bottom:1px solid var(--line)}.spot-hero h1{margin:18px 0;font-size:clamp(54px,7vw,92px)}.spot-hero>p:not(.kicker){font:20px var(--serif);color:#66665f}.spot-grid{max-width:1080px;margin:0 auto;padding:35px 0 90px;display:grid;grid-template-columns:repeat(3,1fr);grid-gap:18px;gap:18px}.spot-card{background:var(--white);border:1px solid var(--line);overflow:hidden}.spot-art,.spot-card>img{width:100%;height:170px;object-fit:cover}.spot-art{display:grid;place-items:center;background:var(--lime);font-size:48px}.spot-card>div{padding:16px}.spot-card small{font:9px var(--mono);color:#777771;text-transform:uppercase}.spot-card h2{font:400 25px var(--serif);margin:8px 0 5px}.spot-card p{font:16px var(--serif);min-height:40px;margin:0 0 15px}.spot-card .bop-play-button{width:100%}.spot-empty{grid-column:1/-1;text-align:center;font:20px var(--serif);padding:50px;color:#777771}@media(max-width:820px){.public-bop-page,.public-maker,.spot-page{padding:0 18px}.maker-card{padding:50px 0 65px}.spot-grid{grid-template-columns:1fr}.public-bop-page footer{gap:14px;flex-wrap:wrap}.public-bop-hero{padding-top:48px}}.room-chooser{min-height:100vh;background:radial-gradient(circle at 72% 28%,#fff7ba 0,transparent 25%),var(--paper);padding:0 7%;color:var(--ink)}.room-chooser header{height:78px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.chooser-card{max-width:620px;margin:0 auto;text-align:center;padding:65px 0 90px}.chooser-orb{width:116px;height:116px;border-radius:50%;display:grid;place-items:center;margin:0 auto 25px;background:var(--lime);font-size:48px;box-shadow:8px 9px 0 #0000000e;animation:chooser-float 3.5s ease-in-out infinite alternate}.chooser-card h1{font:500 clamp(52px,7vw,86px)/.84 var(--sans);letter-spacing:-5px;margin:0}.chooser-card h1 em{font:400 1.05em var(--serif);color:#ff614e}.chooser-card>p:not(.kicker){font:20px/1.25 var(--serif);color:#66665f;margin:24px auto 30px;max-width:410px}.chooser-actions{max-width:360px;margin:auto}.chooser-actions .begin-button{margin-top:0;text-decoration:none}.chooser-link{display:flex;justify-content:space-between;width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);padding:14px 0;text-decoration:none;text-transform:uppercase;font:10px var(--mono);text-align:left}.chooser-link span{font-size:15px}.chooser-link.muted{color:#777771;cursor:pointer}.chooser-link:hover{color:#ed5c4b}@keyframes chooser-float{to{transform:translateY(-8px) rotate(4deg)}}@media(max-width:820px){.room-chooser{padding:0 18px}.chooser-card{padding-top:52px}}