/* Breatho's miniature worlds: light, depth and real product previews. */
.app-introduction{max-width:980px;margin:46px auto 34px}.app-introduction p{font-size:clamp(18px,1.65vw,22px);line-height:1.7;color:#244f61}.app-introduction strong{display:block;font-size:clamp(24px,2.7vw,35px);line-height:1.2;font-weight:900;color:#153e51;margin-bottom:18px;letter-spacing:-.02em}
.app-portals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;padding:18px 0 24px;perspective:1200px}
.app-portal{position:relative;border:0;background:none;color:#173e52;padding:0 4px 16px;min-width:0;cursor:pointer;font-family:inherit;text-align:center;touch-action:manipulation;isolation:isolate}
.portal-orbit{display:block;position:relative;width:100%;aspect-ratio:1;border-radius:50%;padding:9px;background:conic-gradient(from 18deg,#e0c7f8,#fff4c9 18%,#e9c682 29%,#a9e6ec 52%,#f4c8e0 73%,#fff1b3 88%,#d6c1f6);box-shadow:inset 0 1px 2px #fff,0 15px 30px -12px #153e5155,0 0 0 1px #c5ab7688;transform:rotateX(var(--portal-rx,0deg)) rotateY(var(--portal-ry,0deg));transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;will-change:transform}
.portal-orbit:before{content:'';position:absolute;inset:4px;border:1px solid #fff9;border-radius:50%;pointer-events:none;z-index:3}.portal-orbit:after{content:'';position:absolute;inset:-8px;border:1px solid #bca87855;border-radius:50%;pointer-events:none}
.portal-glass{position:relative;display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;background:#1b2254;box-shadow:inset 0 0 0 2px #f8e7ae}
.portal-glass>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.portal-colouring .portal-glass>img{object-position:50% 58%}.portal-play .portal-glass>img{object-position:50% 50%}.portal-adventure .portal-glass>img{object-position:50% 53%}.portal-create .portal-glass>img{object-position:30% 53%}
.portal-shimmer{position:absolute;inset:0;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse at 28% 14%,#fff9,transparent 30%),linear-gradient(130deg,transparent 40%,#fff4 49%,transparent 59%);opacity:.5;mix-blend-mode:screen}
.portal-spark{position:absolute;right:8%;top:5%;color:#ffefb2;font-size:25px;text-shadow:0 0 10px #ffe3a0;z-index:4}
.portal-name{display:block;font-size:clamp(19px,1.9vw,25px);font-weight:900;line-height:1.2;margin-top:24px}.portal-invite{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:800;color:#537482;margin-top:9px}
.app-portal:hover .portal-orbit,.app-portal:focus-visible .portal-orbit{box-shadow:inset 0 1px 2px #fff,0 24px 38px -14px #153e5166,0 0 0 3px #af8e58}.app-portal:hover .portal-glass>img{transform:scale(1.1)}.app-portal:focus-visible{outline:3px solid #17819a;outline-offset:8px;border-radius:22px}
.portal-viewer{width:min(940px,calc(100vw - 28px));height:min(850px,calc(100dvh - 32px));max-width:none;max-height:none;margin:auto;padding:24px;border:1px solid #c7a66a;border-radius:28px;background:#fffaf0;color:#173e52;box-shadow:0 30px 90px #09133199;overflow:hidden}.portal-viewer::backdrop{background:#08122dd9;backdrop-filter:blur(10px)}.portal-viewer[open]{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(200px,.75fr);gap:24px;align-items:center}.portal-viewer img{width:100%;height:100%;min-height:0;object-fit:contain;border-radius:18px}.portal-viewer .portal-copy{padding:12px}.portal-viewer h2{font-size:clamp(25px,3vw,38px);line-height:1.15;margin:0 0 20px}.portal-viewer p{font-size:18px;line-height:1.6;margin:16px 0}.portal-viewer .portal-purchase{font-weight:800;font-size:16px}.portal-viewer .portal-close{position:absolute;right:12px;top:12px;width:44px;min-height:44px;border:1px solid #becdd0;border-radius:50%;background:#fff;font-size:25px;color:#173e52;z-index:3;cursor:pointer}.portal-viewer a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;border:1px solid #d6aa50;border-radius:16px;background:#f4d374;color:#153e51;padding:10px 20px;font-size:17px;font-weight:900;text-decoration:none;margin-top:12px}
.intro-art .cfp-wonderbolt-stamp{width:80%;max-width:440px;bottom:0}.intro-art .wc-loopi{bottom:135px}
/* Same shape, target size and vertical rhythm for all three header buttons. */
.main-nav{display:flex;gap:12px;align-items:center}.main-nav a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;box-sizing:border-box;padding:12px 20px;line-height:1.2;border-radius:16px;font-size:16px;font-weight:900;border:1px solid #bacbd0}.main-nav .cards-nav{border-color:#d9b14d;box-shadow:0 4px 0 #b58c36}.main-nav .workbook-nav{border-color:#bacbd0;background:#fff;box-shadow:0 4px 0 #bacbd0;color:#173e52}.main-nav .app-nav{border-color:#153e51;box-shadow:0 4px 0 #0b293b}
@media(max-width:900px){.app-portals{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 28px;max-width:660px;margin:auto}.portal-orbit{max-width:280px;margin:auto}.intro-art .cfp-wonderbolt-stamp{max-width:440px}.intro-art .wc-loopi{bottom:140px}}
@media(max-width:650px){.app-introduction{margin:30px 0 22px}.app-introduction p{font-size:17px;line-height:1.65}.app-portals{gap:24px 20px;padding-top:12px}.portal-orbit{padding:6px}.portal-name{font-size:18px;margin-top:20px}.portal-invite{font-size:13px}.portal-spark{font-size:21px}.header-inner{flex-wrap:wrap;justify-content:center;gap:10px;padding:10px 0 14px}.site-header{height:auto;min-height:80px}.main-nav{gap:8px;justify-content:center;width:100%}.main-nav a{min-height:44px;padding:10px 12px;font-size:13px;border-radius:13px;flex:1;white-space:nowrap}.main-nav .workbook-nav{flex:1.3}.brand strong{font-size:17px}.brand small{font-size:9px}.intro-art .cfp-wonderbolt-stamp{width:85%;max-width:440px}.intro-art .wc-loopi{bottom:calc((100vw - 36px) * .27)}.portal-viewer[open]{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:10px;padding:18px}.portal-viewer .portal-copy{padding:0 4px}.portal-viewer h2{font-size:24px;margin:0 0 8px}.portal-viewer p{font-size:15px;line-height:1.4;margin:7px 0}.portal-viewer .portal-purchase{font-size:13px}.portal-viewer a{font-size:15px;min-height:44px;margin-top:6px}}
@media(prefers-reduced-motion:reduce){.portal-orbit,.portal-glass>img{transition:none;transform:none!important}.portal-orbit{will-change:auto}}

.friend-profile[data-friend="Breatho"] .friend-art{position:relative;width:240px;height:240px;max-width:100%;display:grid;place-items:center;overflow:visible}
.friend-profile[data-friend="Breatho"] .friend-character{position:static!important;width:100%!important;height:100%!important;max-width:100%;object-fit:contain;transform:none!important}