/* Full-bleed comic composition, shared by login and chat. */
body{padding:0;background:repeating-conic-gradient(from 6deg at 50% 12%,#13cbd0 0deg 12deg,#06adb7 12deg 23deg,#13cbd0 23deg 34deg,#fff 34deg 35deg);background-attachment:fixed}
.app-shell{max-width:none;min-height:100dvh;margin:0;border:0;border-radius:0;box-shadow:none;overflow:clip;background:transparent;display:flex;flex-direction:column}
.masthead{height:210px;flex-shrink:0;border:0;background:transparent;overflow:visible}
.brand{width:630px;height:210px;display:flex;align-items:center;justify-content:center;background:url("assets/comic-header.06645f75d9b6.png") center/contain no-repeat;transform:none;filter:none}
.brand:before{display:none}.brand span{background:none;clip-path:none;font-size:64px;padding:0;transform:rotate(-5deg);letter-spacing:1px;text-shadow:4px 5px #101820;-webkit-text-stroke:2px #101820}
.masthead>.mascot,.masthead>.lightning{display:none}.header-sticker{right:5%;bottom:40px;font:23px/1 var(--comic);border:0;box-shadow:none;background:url("assets/burst-yellow.0cc3b077df2e.svg") center/100% 100% no-repeat;padding:26px 35px;transform:rotate(6deg)}
.age-sticker{left:5%;bottom:35px;border:0;border-radius:0;background:url("assets/burst-yellow.0cc3b077df2e.svg") center/100% 100% no-repeat;padding:16px 25px;transform:rotate(-8deg)}
.page-dots{background-size:18px 18px;background-image:radial-gradient(#101820 2.5px,transparent 3px);opacity:.7;mask-image:linear-gradient(110deg,#000,transparent 35%,transparent 65%,#000)}
.login-view{flex:1;background:none;width:100%;max-width:1240px;margin:auto;padding:25px 55px 55px;gap:80px;align-items:center}
.login-story{padding:0}.login-story h1{font-size:86px}.login-story>p{background:#13cbd0d9;border-radius:6px;padding:6px 0}.login-card{box-shadow:6px 7px #101820;max-width:470px}
.story-art{height:215px}.hero-face{display:block;background:url("assets/comic-cool.7efde974539d.png") center/contain no-repeat;width:180px;height:180px;font-size:0!important;filter:none;left:100px;top:20px}.little-face{display:none}.art-bolt{font-size:0;width:84px;height:90px;background:url("assets/lightning.b407542cbbb6.svg") center/contain no-repeat;top:117px;left:17px;-webkit-text-stroke:0}
.hello-cloud,.poa-cloud{border-radius:40%;box-shadow:3px 4px #101820}.mini-face{background:url("assets/comic-cool.7efde974539d.png") center/contain no-repeat;font-size:0;width:51px;height:51px;flex-shrink:0}
.home-view{flex:1;display:flex;flex-direction:column}.nav-bar{margin:0 22px;border:3px solid #101820;border-radius:35px;box-shadow:0 4px #101820;padding:5px 13px;gap:22px}.nav-item{font-family:var(--comic);font-size:24px;letter-spacing:.5px}.profile-button{font-family:var(--comic);font-size:22px}
.chat-layout{background:none;padding:22px;gap:20px;grid-template-columns:255px minmax(0,1fr);flex:1}
.preferences{background:radial-gradient(#101820 1.4px,transparent 2px) 0 0/11px 11px,#fff;border:0;border-radius:0;padding:0 12px;overflow:hidden}.burst-title{background:url("assets/burst-yellow.0cc3b077df2e.svg") center/100% 100% no-repeat;clip-path:none;filter:none;font-size:34px;padding:24px 4px;transform:rotate(-4deg);margin:0 -9px 0}.preference-list{margin:9px 0}.preference-list label{background:white}.location-title{background:url("assets/burst-action.2a8141dec3b4.svg") center/100% 100% no-repeat;border:0;box-shadow:none;font-size:28px;padding:24px 28px;margin:0 -10px;color:#101820;-webkit-text-stroke:0;transform:rotate(-5deg)}.preference-note{background:white;padding:8px;margin-top:14px}.side-art{min-height:165px}.side-art span{font-size:0;display:block;width:145px;height:145px;background:url("assets/comic-cool.7efde974539d.png") center/contain no-repeat;filter:none}.side-art b{font-size:0;width:70px;height:80px;background:url("assets/lightning.b407542cbbb6.svg") center/contain no-repeat}.side-cloud{border:0;border-radius:0;box-shadow:none;background:url("assets/clouds.7013ba3031d6.svg") bottom center/auto 100% no-repeat;width:110%;height:85px;left:-5%;bottom:-5px;z-index:2}
.chat-panel{border-radius:14px;box-shadow:3px 4px #101820}.chat-avatar,.message-face{display:block;background:url("assets/comic-cool.7efde974539d.png") center/contain no-repeat;flex-shrink:0;font-size:0!important;filter:none}.chat-avatar{width:58px;height:58px}.message-face{width:43px;height:43px}.outgoing .message-face{transform:rotate(12deg)}.chat-header{padding:13px 20px}.chat-header h2{font-size:24px}.header-zap{width:53px;height:48px;background:url("assets/lightning.b407542cbbb6.svg") center/contain no-repeat;font-size:0;transform:rotate(-20deg)}
.messages{height:auto;min-height:290px;flex:1;gap:22px;padding:24px 28px}.bubble{position:relative;border-radius:26px;box-shadow:none;padding:10px 20px;min-width:190px}.outgoing .bubble{border-radius:26px}.bubble:before{content:'';position:absolute;left:-9px;bottom:5px;width:15px;height:13px;background:var(--paper);border-left:3px solid #101820;border-bottom:3px solid #101820;transform:skewX(-35deg) rotate(-8deg)}.outgoing .bubble:before{left:auto;right:-9px;transform:skewX(35deg) rotate(8deg);border-left:0;border-right:3px solid #101820;background:var(--yellow)}.bubble p{position:relative;font-size:17px}.bubble time{position:relative}.chat-actions{padding:7px 22px;min-height:112px}.next-person{width:340px;height:110px;background:url("assets/burst-action.2a8141dec3b4.svg") center/100% 100% no-repeat;clip-path:none;transform:rotate(-3deg);font-size:39px;padding:15px 25px}.next-person:before{display:none}.next-person b{display:none}.call-options button{font-size:17px;padding:10px 25px}.composer{border-top:1px solid #101820}.site-footer{background:transparent;color:#101820;margin-top:auto;position:relative;z-index:3;font-size:10px}.site-footer span:first-child{color:#101820;background:white;padding:4px 9px}.bottom-cloud{border:0;border-radius:0;background:url("assets/clouds.7013ba3031d6.svg") bottom center/contain no-repeat;box-shadow:none;width:370px;height:120px;bottom:0;z-index:0;opacity:.95}.cloud-left{left:-110px;transform:rotate(12deg)}.cloud-right{right:-110px;transform:rotate(-12deg)}
@media(min-width:1400px){.masthead{height:220px}.brand{height:220px;width:660px}.messages{min-height:320px}.chat-layout{grid-template-columns:280px minmax(0,1fr)}}
@media(max-width:1100px){.header-sticker{font-size:17px;right:15px;padding:22px}.login-view{gap:35px;padding:25px 35px 45px}.login-story h1{font-size:68px}.chat-layout{grid-template-columns:220px minmax(0,1fr)}.nav-bar{gap:5px}.next-person{width:275px;font-size:31px}.call-options button{padding:10px 14px}.nav-item{font-size:21px}.brand{width:570px}.burst-title{font-size:29px}}
@media(max-width:800px){.masthead{height:180px}.brand{width:530px;height:180px}.brand span{font-size:55px}.header-sticker{display:none}.age-sticker{left:12px;bottom:10px;font-size:20px;padding:10px 18px}.login-view{grid-template-columns:1fr;padding:20px 24px 40px;gap:20px}.login-story h1{font-size:65px}.login-card{justify-self:center}.chat-layout{grid-template-columns:1fr;padding:15px;gap:12px}.nav-bar{margin:0 15px}.messages{height:340px;flex:none}.preferences.is-open{background:white;border:2px solid #101820;border-radius:12px;padding:12px}.preferences.is-open .burst-title{background:none;border:0;padding:8px;margin:0;font-size:26px}.nav-item{font-size:20px}.profile-button{font-size:17px}}
@media(max-width:500px){.masthead{height:155px}.brand{width:100%;max-width:430px;height:145px;margin-top:-10px}.brand span{font-size:clamp(32px,10vw,44px);text-shadow:2px 3px #101820;-webkit-text-stroke:1px;letter-spacing:0}.age-sticker{bottom:1px;left:7px;font-size:17px;padding:9px 15px}.login-view{padding:14px 18px 32px}.login-story h1{font-size:59px}.login-card{padding:26px 17px 0;width:100%;margin:16px 0 0}.login-story>p{font-size:13px}.nav-bar{margin:0 7px;padding:5px;gap:2px;border-width:2px;box-shadow:0 2px #101820}.nav-item{font-size:17px;padding:7px;letter-spacing:0}.nav-item.active{padding:6px 11px}.profile-button{font-size:14px}.chat-layout{padding:10px 7px 7px}.chat-panel{border-radius:9px;box-shadow:none}.chat-header{padding:9px 12px}.chat-avatar{width:46px;height:46px}.chat-header h2{font-size:19px}.header-zap{width:35px;height:35px}.message-face{width:32px;height:32px}.messages{padding:22px 13px;gap:24px;min-height:280px;height:310px}.bubble{min-width:115px;padding:9px 13px;border-radius:23px}.bubble p{font-size:13px}.bubble:before{border-width:2px;width:12px;height:10px;left:-7px}.outgoing .bubble:before{right:-7px;border-width:2px}.chat-actions{padding:9px 12px 3px;gap:0;min-height:0}.call-options button{font-size:14px;padding:8px 14px}.next-person{width:100%;height:91px;font-size:34px;padding:12px 25px}.composer{padding:9px 11px}.site-footer{font-size:8px;padding:10px}.bottom-cloud{width:240px;height:70px}.preferences.is-open .burst-title{margin:0}.preferences.is-open .preference-list{margin:7px 0}.chat-footer{padding-bottom:10px}.login-card .mini-face{width:43px;height:43px}.message-row{max-width:95%}}