@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&family=Nunito:wght@400;600;700;800&display=swap');
:root{--paper:#fff8fa;--ink:#4b4146;--pink:#f5b8c8;--pink2:#ffe2ea;--cream:#fff0d9;--green:#b9d8c0;--line:#ead7dd;--shadow:0 14px 40px #7f526016}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:'Nunito','Kosugi Maru',sans-serif;color:var(--ink);background:#eee5e4}
body{display:flex;justify-content:center;padding:22px 12px;background:radial-gradient(circle at 20% 10%,#fff9e9 0 15%,transparent 35%),linear-gradient(135deg,#e8ddd9,#f8e9ed 55%,#e4eee6);overflow-x:hidden}
button,input{font:inherit}.app{width:min(720px,100%);min-height:calc(100vh - 44px);background:var(--paper);border:1px solid #fff;box-shadow:var(--shadow);border-radius:24px;overflow:hidden;position:relative;z-index:2}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");z-index:10}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:17px 20px;border-bottom:1px dashed var(--line);background:#fffafd}.brand{display:flex;gap:10px;align-items:center}.brand b{display:block;font-size:21px;letter-spacing:.03em}.brand small{font-family:'Kosugi Maru';font-size:10px;color:#a68d96}.sparkle{font-size:21px;color:#e6a5b7}.presence{font-size:11px;color:#a28e96;display:flex;gap:6px;align-items:center}.presence i{width:7px;height:7px;border-radius:50%;background:#d9b9c2}.presence.online i{background:#8bc09b}

.music-card{margin:14px;padding:12px;background:linear-gradient(135deg,#fff3f6,#fff8ed);border:1px solid var(--line);border-radius:18px}.music-title{font-size:12px;margin:0 0 8px 4px;color:#927c84}.music-search{display:flex;gap:7px}.music-search input{flex:1;border:1px solid var(--line);background:#fff;border-radius:12px;padding:9px 12px;outline:none;font-size:13px}.music-search button,.send{border:0;background:var(--pink);color:#573e47;border-radius:12px;padding:0 14px;cursor:pointer}.music-results{display:flex;gap:6px;overflow:auto;padding-top:8px}.music-results button{white-space:nowrap;border:1px solid #eedde2;background:#fff;border-radius:999px;padding:6px 10px;font-size:10px;color:#7e6971;cursor:pointer}.player-wrap{margin-top:9px;aspect-ratio:16/5;background:#eadfe1;border-radius:12px;overflow:hidden}.player-wrap iframe{width:100%;height:100%;border:0}

.ride-card{margin:14px;padding:13px 14px;background:linear-gradient(135deg,#f5f0ff,#fff4e5);border:1px solid #e7ddec;border-radius:18px}.ride-head{display:flex;justify-content:space-between;align-items:flex-start}.ride-kicker{font-size:9px;color:#a18eaa;text-transform:uppercase;letter-spacing:.12em}.ride-head h2{font-size:16px;margin:3px 0 9px}.ride-heart{font-size:20px;color:#d89db1}.ride-form{display:grid;grid-template-columns:1fr 1fr;gap:7px}.ride-form input{min-width:0;border:1px solid #e5dce7;background:#fff;border-radius:10px;padding:8px 9px;outline:none;font-size:11px;color:#65565d}.ride-form input:nth-child(3){grid-column:1/-1}.ride-form button{grid-column:1/-1;border:0;background:#cdbde0;color:#55455d;border-radius:10px;padding:8px;cursor:pointer;font-weight:800;font-size:11px}.ride-saved{margin-top:9px;font-size:12px}.ride-note{font-size:8px;color:#a39199;margin-top:5px}

.chat-window{height:430px;display:flex;flex-direction:column;background:linear-gradient(#fffafb,#fff9f2);position:relative}.room-note{text-align:center;font-size:10px;color:#b09aa2;padding:8px;border-bottom:1px dashed #eee0e3}.messages{flex:1;overflow:auto;padding:15px 14px}.msg{max-width:76%;margin:8px 0;display:flex;flex-direction:column}.msg.me{margin-left:auto;align-items:flex-end}.bubble{padding:9px 12px;border-radius:15px 15px 15px 5px;background:#f2e9e8;font-size:13px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere}.me .bubble{background:var(--pink2);border-radius:15px 15px 5px 15px}.time{font-size:8px;color:#b8a6ac;margin-top:3px}.typing{height:17px;padding-left:18px;color:#b19da4;font-size:10px}
.composer{display:flex;gap:7px;padding:10px 14px;border-top:1px dashed var(--line);background:#fff;position:relative}.composer input{flex:1;border:1px solid var(--line);border-radius:13px;padding:10px 12px;outline:none}.send{padding:0 15px}
.cycle-lane{position:absolute;left:0;right:0;bottom:0;height:22px;pointer-events:none;overflow:hidden}.mini-cycle{position:absolute;font-size:15px;filter:saturate(.7);animation:cycleRun 15s linear infinite}.cycle-a{animation-delay:-2s;bottom:0}.cycle-b{animation-delay:-9s;bottom:3px;font-size:12px}@keyframes cycleRun{from{left:-8%}to{left:108%}}

.controls{display:flex;gap:7px;flex-wrap:wrap;padding:12px 14px;background:#fff9fa;border-top:1px solid #f1e4e7}.controls button{cursor:pointer;border:1px solid var(--line);background:#fff;border-radius:12px;padding:8px 11px;color:#715c64}.pichku{flex:1;background:#fff0c9!important;border-color:#f1d99c!important;font-weight:800}.pichku small{display:block;font-size:8px;font-weight:400}.danger{color:#b25d69!important}.control:disabled{opacity:.4}
.call-panel{position:absolute;inset:55px 12px 118px;background:#211c20eF;border-radius:18px;padding:10px;z-index:5}.call-panel.hidden{display:none}.call-label{color:#fff;text-align:center;font-size:11px;padding:4px}.call-panel #remoteVideo{width:100%;height:calc(100% - 32px);object-fit:cover;border-radius:12px;background:#111}.call-panel #localVideo{position:absolute;right:18px;bottom:18px;width:120px;height:90px;object-fit:cover;border-radius:10px;border:2px solid #fff}
footer{display:flex;justify-content:space-between;padding:12px 17px;color:#b49da5;font-size:9px}footer button{border:0;background:none;color:#b49da5;text-decoration:underline;cursor:pointer}
dialog{border:0;border-radius:18px;padding:20px;max-width:350px;color:var(--ink);box-shadow:0 20px 70px #0003}dialog::backdrop{background:#30262a66}.muted{font-size:11px;color:#98858c}code{background:#f5ebee;padding:2px 4px;border-radius:5px;font-size:10px}

/* two sleepy fish continuously roaming behind the room */
.fish{position:fixed;z-index:1;pointer-events:none;width:78px;height:38px;border-radius:55% 48% 50% 55%;background:#f3b6c7;box-shadow:inset -10px -5px #e79daf55;opacity:.65}
.fish .tail{position:absolute;left:-20px;top:3px;width:0;height:0;border-top:16px solid transparent;border-bottom:16px solid transparent;border-right:25px solid #edafc1;transform:rotate(2deg)}
.fish .eye{position:absolute;right:13px;top:10px;width:5px;height:5px;border-radius:50%;background:#5c4a51}.fish-small{width:53px;height:27px;background:#a9cfc5;opacity:.6}.fish-small .tail{left:-14px;top:2px;border-top-width:11px;border-bottom-width:11px;border-right-width:18px;border-right-color:#9bc3b8}.fish-small .eye{right:9px;top:7px;width:4px;height:4px}
.fish-big{animation:swim1 28s linear infinite, bob 3s ease-in-out infinite}.fish-small{animation:swim2 22s linear infinite reverse,bob 4s ease-in-out infinite}
@keyframes swim1{0%{left:-100px;top:16vh;transform:scaleX(1)}48%{left:calc(100vw - 30px);top:31vh;transform:scaleX(1)}50%{transform:scaleX(-1)}98%{left:-100px;top:11vh;transform:scaleX(-1)}100%{transform:scaleX(1)}}@keyframes swim2{0%{left:110vw;top:60vh;transform:scaleX(1)}48%{left:-80px;top:43vh;transform:scaleX(1)}50%{transform:scaleX(-1)}98%{left:110vw;top:68vh;transform:scaleX(-1)}100%{transform:scaleX(1)}}@keyframes bob{0%,100%{margin-top:0}50%{margin-top:9px}}
@media(max-width:520px){body{padding:0;background:var(--paper)}.app{min-height:100vh;border-radius:0}.chat-window{height:calc(100vh - 545px);min-height:300px}.call-panel{inset:58px 8px 108px}.music-card,.ride-card{margin:9px}.topbar{padding:13px 14px}.fish{opacity:.4}}