/* Generated by tools/phonics-pages/extract-world-map.mjs from frontend/pages/phonics-world.html. Do not edit by hand. */
@property --sky1 { syntax: "<color>"; inherits: true; initial-value: #E9F5D6; }
@property --sky2 { syntax: "<color>"; inherits: true; initial-value: #BFE3B0; }
@property --sky3 { syntax: "<color>"; inherits: true; initial-value: #8FC99A; }
@property --sunc { syntax: "<color>"; inherits: true; initial-value: #FFF4B0; }
@property --mtnc { syntax: "<color>"; inherits: true; initial-value: #9CC7A8; }
@property --f1 { syntax: "<color>"; inherits: true; initial-value: #6BAF7A; }
@property --f2 { syntax: "<color>"; inherits: true; initial-value: #3F8A55; }
@property --f3 { syntax: "<color>"; inherits: true; initial-value: #1F5E36; }
@property --grd { syntax: "<color>"; inherits: true; initial-value: #2E6B3C; }
.pwx{--ink:#241F3D;--page-line:#E4DCFA;--page:#FBF6E9;--vh:766px;--ss-muted:#6B6588;--ss-navy:#1E1B4B;--gold:#D97706;--m-round:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160' preserveAspectRatio='none'%3E%3Cpath d='M0 160V100a24 24 0 0 1 40-12a28 28 0 0 1 48-8a22 22 0 0 1 40 4a30 30 0 0 1 52-10a26 26 0 0 1 44 6a16 16 0 0 1 16 10V160z'/%3E%3C/svg%3E");--m-pine2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120V70l18-50 18 50 8-20 20-44 20 44 10-16 18-40 18 40 8-18 22-46 22 46 8-12 14-28V120z'/%3E%3C/svg%3E");--m-bush:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V30q10-22 22-8 8-20 22-10 12-18 26-6 10-16 24-4 12-20 28-6 12-14 24-2 14-18 30-4 10-8 24 4V60z'/%3E%3C/svg%3E");--sky1:rgb(233, 245, 214);--sky2:rgb(191, 227, 176);--sky3:rgb(143, 201, 154);--sunc:rgb(255, 244, 176);--mtnc:rgb(156, 199, 168);--m-mtn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 200' preserveAspectRatio='none'%3E%3Cpath d='M0 200V120l40-50 30 30 40-70 40 60 30-30 40 50 40-60 40 50 20-10V200z'/%3E%3C/svg%3E");--f1:rgb(107, 175, 122);--f2:rgb(63, 138, 85);--f3:rgb(31, 94, 54);--grd:rgb(46, 107, 60);--m-palm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160' preserveAspectRatio='none'%3E%3Cpath d='M0 160V70q20-40 50-20-10-30 30-26 10 30-6 40 30-6 40 22-24-10-40 4V160h40V80q20-44 56-30-8-30 34-22 6 32-14 40 28 2 30 28-26-14-44 0V160z'/%3E%3C/svg%3E");--m-pine:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160' preserveAspectRatio='none'%3E%3Cpath d='M0 160V96l14-36 14 36 6-14 16-46 16 46 8-12 14-40 14 40 10-18 16-44 16 44 8-10 14-34 14 34 10-14 16-42 16 42 8-12 10-22V160z'/%3E%3C/svg%3E")}
.pwx *{box-sizing: border-box; -webkit-tap-highlight-color: transparent;}
.pwx h1,.pwx h2,.pwx h3{font-family: "Baloo 2", sans-serif; margin: 0px; color: var(--ink);}
.pwx button{font-family: inherit; cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; touch-action: manipulation; user-select: none;}
.pwx textarea{width: 100%; font-size: 14.5px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--page-line); background: rgb(255, 255, 255); font-family: inherit; color: var(--ink);}
.pwx textarea{min-height: 80px; resize: vertical;}
.pwx button,.pwx input,.pwx textarea,.pwx select{font: inherit;}
.pwx button:focus-visible,.pwx input:focus-visible,.pwx textarea:focus-visible,.pwx select:focus-visible{outline: rgb(45, 174, 224) solid 3px; outline-offset: 3px;}
.pwx button{touch-action: manipulation;}
@media (prefers-reduced-motion: reduce){.pwx *{animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.001ms !important;}}
.pwx .ss-app{background: var(--page); flex: 1 1 0%; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: 1fr; min-height: 0px; height: 100%;}
.pwx .ss-main{display: flex; flex-direction: column; min-height: 0px; grid-row: 1 / 3;}
.pwx .ss-body{flex: 1 1 0%; overflow-y: auto; overscroll-behavior: contain; padding: 16px 16px 28px;}
@media (min-width: 900px){.pwx .ss-app{grid-template-columns: 230px 1fr; grid-template-rows: 1fr;}}
@media (min-width: 900px){.pwx .ss-main{grid-area: 1 / 2;}}
@media (min-width: 900px){.pwx .ss-body{padding: 22px 28px 40px;}}
@media (min-width: 900px){.pwx .ss-body.is-home{padding: 0px;}}
.pwx .ss-body.is-home{position: relative; padding: 0px; scroll-snap-type: y; background: radial-gradient(160% 22% at 50% 104%, rgb(62, 155, 47) 0%, rgb(88, 177, 63) 45%, transparent 70%) local, linear-gradient(rgb(27, 20, 64) 0%, rgb(42, 47, 143) 22%, rgb(38, 103, 201) 48%, rgb(63, 163, 232) 74%, rgb(154, 220, 250) 100%);}
.pwx .ss-sky{position: sticky; top: 0px; height: 0px; z-index: 0; pointer-events: none;}
.pwx .ss-sky i{position: absolute; display: block; border-radius: 50%; background: rgba(255, 255, 255, 0.16); filter: blur(1px); animation: 24s ease-in-out 0s infinite alternate none running pwx-ssDrift;}
.pwx .ss-sky i::before,.pwx .ss-sky i::after{content: ""; position: absolute; background: inherit; border-radius: 50%;}
.pwx .ss-sky .c1{width: 120px; height: 34px; top: 90px; left: 6%;}
.pwx .ss-sky .c1::before{width: 56px; height: 46px; left: 18px; top: -22px;}
.pwx .ss-sky .c2{width: 90px; height: 26px; top: 260px; right: 8%; animation-duration: 30s; animation-direction: alternate-reverse;}
.pwx .ss-sky .c2::before{width: 42px; height: 34px; left: 16px; top: -16px;}
.pwx .ss-sky .c3{width: 70px; height: 20px; top: 470px; left: 30%; animation-duration: 20s; opacity: 0.7;}
.pwx .ss-sky .c3::before{width: 32px; height: 28px; left: 12px; top: -14px;}
.pwx .ss-sec{position: relative; z-index: 1; min-height: var(--vh,100%); scroll-snap-align: start; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 22px 14px 26px; transition: opacity 0.45s, transform 0.45s;}
.pwx .ss-sec > *{width: 100%; max-width: 560px;}
.pwx .ss-isle{background: rgb(255, 255, 255); border-radius: 32px; overflow: hidden; box-shadow: rgba(10, 8, 40, 0.38) 0px 22px 60px, rgba(255, 255, 255, 0.9) 0px 2px 0px inset; border: 3px solid rgba(255, 255, 255, 0.95);}
.pwx .ss-isle-n{font-size: 12px; font-weight: 800; color: var(--ss-muted);}
.pwx .ss-isle-name{font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 23px; line-height: 1.1; color: var(--ss-navy);}
.pwx .ss-trail{position: relative; margin: 4px 8px 6px;}
.pwx .ss-trail svg{position: absolute; inset: 0px; width: 100%; height: 100%; pointer-events: none; overflow: visible;}
.pwx .ss-orb{position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; background: none; padding: 0px; z-index: 1; transition: transform 0.12s;}
.pwx .ss-orb:active{transform: translate(-50%, -50%) scale(0.9);}
.pwx .ss-orb-ball{width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 25px; position: relative; background: linear-gradient(160deg, rgb(255, 255, 255), rgb(242, 238, 249)); border: 3.5px solid rgb(255, 255, 255); box-shadow: rgb(220, 213, 234) 0px 0px 0px 2px, rgb(207, 199, 224) 0px 5px 0px, rgba(27, 20, 64, 0.14) 0px 8px 14px;}
.pwx .ss-orb.big .ss-orb-ball{width: 62px; height: 62px; font-size: 28px;}
.pwx .ss-orb.next .ss-orb-ball{width: 62px; height: 62px; background: linear-gradient(160deg, rgb(255, 253, 246), rgb(255, 231, 168)); box-shadow: 0 0 0 3px var(--gold),0 5px 0 #AC6B0A,0 0 0 10px rgba(224,148,15,.22); animation: 1.8s ease-in-out 0s infinite normal none running pwx-ssGlow;}
.pwx .ss-orb-n{margin-top: 8px; font-size: 11px; font-weight: 800; color: var(--ss-muted); background: rgb(255, 255, 255); padding: 1px 8px; border-radius: 99px; box-shadow: rgba(27, 20, 64, 0.12) 0px 1px 3px; letter-spacing: -1px; line-height: 1.5; min-width: 24px; text-align: center;}
.pwx .ss-orb.next .ss-orb-n{background: var(--gold); color: rgb(255, 255, 255); letter-spacing: 0px;}
.pwx .ss-orb-pin{position: absolute; top: -40px; left: 50%; transform: translateX(-50%); width: 34px; height: 34px; border-radius: 50%; background: rgb(255, 255, 255); border: 2.5px solid var(--gold); overflow: hidden; animation: 1.6s ease-in-out 0s infinite normal none running pwx-ssBob; z-index: 2; box-shadow: rgba(27, 20, 64, 0.2) 0px 4px 8px;}
.pwx .ss-orb-pin svg{width: 100%; height: 100%;}
@media (min-width: 900px){.pwx .ss-sec{padding: 30px 28px;}}
.pwx .ss-main{position: relative;}
.pwx .ss-body.is-home{position: relative; z-index: 1; background: transparent !important;}
.pwx .ss-forest{display: none; position: absolute; inset: 0px; z-index: 0; overflow: hidden; pointer-events: none; --sunop: .9; --mtnop: .75; --mist: .35; --starop: 0; --t1: var(--m-round); --t2: var(--m-pine2); --t3: var(--m-bush); transition: --sky1 1.2s, --sky2 1.2s, --sky3 1.2s, --sunc 1.2s, --mtnc 1.2s, --f1 1.2s, --f2 1.2s, --f3 1.2s, --grd 1.2s;}
.pwx .ss-main.home-on .ss-forest{display: block;}
.pwx .ss-forest > *{position: absolute; left: 0px; right: 0px;}
.pwx .ss-forest .sky{inset: 0px; background: linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 52%,var(--sky3) 100%);}
.pwx .ss-forest .sun{left: auto; right: 12%; top: 9%; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle,var(--sunc) 0 34%,color-mix(in srgb,var(--sunc) 40%,transparent) 46%,transparent 70%); opacity: var(--sunop); transition: opacity 1.2s; animation: 10s ease-in-out 0s infinite alternate none running pwx-scSun;}
.pwx .ss-forest .stars{inset: 0px 0px 45%; opacity: var(--starop); transition: opacity 1.2s; background: radial-gradient(1.5px 1.5px at 12% 22%, rgb(255, 255, 255), transparent) 0% 0% / 300px 300px, radial-gradient(1.5px 1.5px at 32% 12%, rgb(255, 255, 255), transparent), radial-gradient(2px 2px at 58% 26%, rgb(255, 255, 255), transparent), radial-gradient(1.5px 1.5px at 78% 14%, rgb(255, 255, 255), transparent), radial-gradient(1.5px 1.5px at 88% 34%, rgb(255, 255, 255), transparent), radial-gradient(2px 2px at 44% 40%, rgb(255, 255, 255), transparent), radial-gradient(1.5px 1.5px at 22% 48%, rgb(255, 255, 255), transparent), radial-gradient(1.5px 1.5px at 68% 52%, rgb(255, 255, 255), transparent); animation: 4s ease-in-out 0s infinite alternate none running pwx-scTw;}
.pwx .ss-forest .mtn{bottom: 30%; height: 34%; background: var(--mtnc); opacity: var(--mtnop); mask: var(--m-mtn) repeat-x bottom/560px 100%;}
.pwx .ss-forest .mist{height: 16%; background: linear-gradient(180deg,transparent,rgba(255,255,255,var(--mist)),transparent); animation: 18s ease-in-out 0s infinite alternate none running pwx-scMist;}
.pwx .ss-forest .m1{bottom: 40%;}
.pwx .ss-forest .m2{bottom: 14%; height: 12%; animation-duration: 24s;}
.pwx .ss-forest .trees{mask-repeat: repeat-x; mask-position: center bottom;}
.pwx .ss-forest .t1{bottom: 18%; height: 36%; background: var(--f1); mask-image: var(--t1); mask-size: 400px 100%;}
.pwx .ss-forest .t2{bottom: 7%; height: 32%; background: var(--f2); mask-image: var(--t2); mask-size: 320px 100%; mask-position: 140px bottom;}
.pwx .ss-forest .t3{bottom: 0px; height: 20%; background: var(--f3); mask-image: var(--t3); mask-size: 280px 100%;}
.pwx .ss-forest .ground{bottom: 0px; height: 8%; background: var(--grd);}
.pwx .ss-forest .photo{inset: 0px; background-size: cover; background-position: center bottom; opacity: 0; transition: opacity 1.2s;}
.pwx .ss-forest .photo.on{opacity: 1;}
.pwx .ss-forest .fx{inset: 0px;}
.pwx .ss-forest .tod{inset: 0px; transition: background 1.2s;}
.pwx .ss-forest[data-tod="dawn"] .tod{background: linear-gradient(rgba(255, 190, 140, 0.22), transparent 60%);}
.pwx .ss-forest[data-tod="dusk"] .tod{background: linear-gradient(rgba(255, 140, 70, 0.28), rgba(120, 40, 80, 0.12));}
.pwx .ss-forest[data-tod="night"] .tod{background: linear-gradient(rgba(8, 12, 45, 0.62), rgba(8, 12, 45, 0.4));}
.pwx .ss-forest[data-tod="night"]{--starop: 1; --sunop: .55;}
.pwx .ss-forest[data-biome="woods"]{--sky1: #E9F5D6; --sky2: #BFE3B0; --sky3: #8FC99A; --sunc: #FFF4B0; --mtnc: #9CC7A8; --f1: #6BAF7A; --f2: #3F8A55; --f3: #1F5E36; --grd: #244F2F; --mist: .45; --t1: var(--m-round); --t2: var(--m-pine2); --t3: var(--m-round);}
.pwx .ss-forest[data-biome="meadow"]{--sky1: #FFF7DA; --sky2: #E3F5C4; --sky3: #BFE69E; --sunc: #FFE27A; --mtnc: #C2E3A6; --f1: #9BD073; --f2: #6DB552; --f3: #4C9A3C; --grd: #5AA844; --mist: .2; --t1: var(--m-round); --t2: var(--m-round); --t3: var(--m-bush);}
.pwx .ss-forest[data-biome="meadow"] .ground{height: 12%; background: radial-gradient(circle,#FFD84D 0 3px,transparent 4px) 0 0/34px 26px,radial-gradient(circle,#FF8FB8 0 3px,transparent 4px) 17px 13px/34px 26px,var(--grd);}
.pwx .ss-forest[data-biome="river"]{--sky1: #E2F5FF; --sky2: #BFE7F4; --sky3: #9FD8DA; --sunc: #FFF7C2; --mtnc: #8FC6CC; --f1: #6BB39A; --f2: #3F8F7A; --f3: #2A6E5E; --grd: #3FA7D6; --mist: .4; --t1: var(--m-round); --t2: var(--m-pine2); --t3: var(--m-bush);}
.pwx .ss-forest[data-biome="river"] .ground{height: 13%; background: repeating-linear-gradient(170deg, rgba(255, 255, 255, 0.25) 0px, rgba(255, 255, 255, 0.25) 3px, transparent 3px, transparent 22px), linear-gradient(rgb(92, 192, 230), rgb(46, 143, 191)); animation: 6s linear 0s infinite normal none running pwx-scWave;}
.pwx .ss-forest[data-biome="jungle"]{--sky1: #DDF2C8; --sky2: #A6D883; --sky3: #62B157; --sunc: #F9F3A0; --mtnc: #71B06C; --f1: #3E9150; --f2: #26733B; --f3: #134E26; --grd: #123F20; --mist: .4; --t1: var(--m-palm); --t2: var(--m-round); --t3: var(--m-palm);}
.pwx .ss-forest[data-biome="canopy"]{--sky1: #EAF6FF; --sky2: #CFEBD8; --sky3: #9ED3AE; --sunc: #FFF6C8; --mtnc: #B5DCC4; --mtnop: .4; --f1: #7CC08E; --f2: #4F9C66; --f3: #2F7747; --grd: #2A5E3A; --mist: .55; --t1: var(--m-round); --t2: var(--m-round); --t3: var(--m-round);}
.pwx .ss-forest[data-biome="autumn"]{--sky1: #FFF1D8; --sky2: #FFD9A8; --sky3: #F3B77E; --sunc: #FFD27A; --mtnc: #D9A77A; --f1: #E7A04E; --f2: #C9642E; --f3: #8E3F1F; --grd: #7A4220; --mist: .3; --t1: var(--m-round); --t2: var(--m-round); --t3: var(--m-bush);}
.pwx .ss-forest[data-biome="snow"]{--sky1: #EEF6FF; --sky2: #D5E6F7; --sky3: #BCD4EE; --sunc: #FFFFFF; --mtnc: #F4F8FD; --mtnop: .95; --f1: #9DB9CF; --f2: #6A8BA5; --f3: #3F5C74; --grd: #F4F9FF; --mist: .6; --t1: var(--m-pine); --t2: var(--m-pine2); --t3: var(--m-pine);}
.pwx .ss-forest[data-biome="snow"] .ground{height: 11%; background: radial-gradient(60% 100% at 30% 100%, rgb(255, 255, 255) 60%, transparent 61%), radial-gradient(50% 90% at 80% 100%, rgb(255, 255, 255) 60%, transparent 61%), rgb(238, 245, 255);}
.pwx .ss-forest[data-biome="night"]{--sky1: #141A3D; --sky2: #222B5E; --sky3: #2F3B72; --sunc: #FFF3C4; --sunop: 1; --starop: 1; --mtnc: #2B3566; --f1: #27325F; --f2: #1C2549; --f3: #111834; --grd: #0C1128; --mist: .12; --t1: var(--m-round); --t2: var(--m-pine2); --t3: var(--m-bush);}
.pwx .ss-forest[data-biome="night"] .sun{background: radial-gradient(circle at 40% 40%, rgb(255, 248, 220) 0px, rgb(255, 248, 220) 30%, rgb(241, 228, 176) 34%, rgba(255, 240, 180, 0.25) 46%, transparent 70%);}
.pwx .ss-forest[data-biome="blossom"]{--sky1: #FFF1F6; --sky2: #FFDDEA; --sky3: #F7C6DA; --sunc: #FFF1B8; --mtnc: #E9BDD0; --f1: #F4AECA; --f2: #DD80A6; --f3: #6FA256; --grd: #7DBB61; --mist: .35; --t1: var(--m-round); --t2: var(--m-round); --t3: var(--m-bush);}
.pwx .ss-forest[data-biome="rain"]{--sky1: #D3DEE4; --sky2: #AFC3CD; --sky3: #8EA8B3; --sunc: #E8EEF2; --sunop: .25; --mtnc: #7C98A3; --f1: #5E8472; --f2: #3D6653; --f3: #244A39; --grd: #20402F; --mist: .65; --t1: var(--m-pine); --t2: var(--m-pine2); --t3: var(--m-pine);}
.pwx .ss-forest[data-biome="summit"]{--sky1: #FFD9A8; --sky2: #F6A99F; --sky3: #B98BCB; --sunc: #FFB35C; --sunop: 1; --mtnc: #8C6C9E; --mtnop: .95; --f1: #735884; --f2: #4F3C66; --f3: #2E2342; --grd: #281D3A; --mist: .3; --t1: var(--m-pine); --t2: var(--m-pine2); --t3: var(--m-bush);}
.pwx .ss-forest[data-biome="summit"] .mtn{height: 48%; bottom: 22%;}
.pwx .ss-forest[data-biome="summit"] .sun{top: 26%; right: 40%; width: 170px; height: 170px;}
.pwx .ss-fx,.pwx .ss-forest .fx{position: absolute; inset: 0px; pointer-events: none; overflow: hidden;}
.pwx .ss-fx i,.pwx .ss-forest .fx i{position: absolute; font-style: normal; line-height: 1; will-change: transform; animation-iteration-count: infinite; animation-timing-function: linear;}
.pwx .fx-fall{top: -6%; animation-name: pwx-pFall;}
.pwx .fx-rise{bottom: -4%; animation-name: pwx-pRise; top: auto !important;}
.pwx .fx-fly{animation-name: pwx-pFly; animation-timing-function: ease-in-out !important;}
.pwx .fx-flutter{animation-name: pwx-pFlut; animation-direction: alternate; animation-timing-function: ease-in-out !important;}
.pwx .fx-twinkle{animation-name: pwx-pTw; animation-timing-function: ease-in-out !important;}
.pwx .fx-glow{animation-name: pwx-pGlow; animation-direction: alternate; animation-timing-function: ease-in-out !important;}
.pwx .fx-rain{top: -8%; animation-name: pwx-pRain;}
.pwx .p-flake{width: 8px; height: 8px; border-radius: 50%; background: rgb(255, 255, 255); box-shadow: rgba(255, 255, 255, 0.9) 0px 0px 6px;}
.pwx .p-bub{width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.18);}
.pwx .p-drop{width: 2px; height: 18px; border-radius: 2px; background: linear-gradient(transparent, rgba(210, 230, 240, 0.95));}
.pwx .ss-island{position: relative; animation: 7s ease-in-out 0s infinite normal none running pwx-ssIsle;}
.pwx .ss-isle{background: transparent; border-radius: 40px 40px 34px 34px; overflow: hidden; position: relative; z-index: 2; box-shadow: rgba(10, 20, 15, 0.38) 0px 26px 50px, rgba(255, 255, 255, 0.9) 0px 2px 0px inset; border: 3px solid rgba(255, 255, 255, 0.95); --card1: #F5FAEE; --card2: #E3F1D8; --cardpat: none; --path: #E8DAB2; --pathd: #B89A5A; --bodyink: var(--ss-navy);}
.pwx .ss-bn{position: relative; height: 150px; overflow: hidden; background: var(--acc);}
.pwx .ss-bn-shade{position: absolute; inset: 0px; background: linear-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.62) 100%);}
.pwx .ss-bn-text{position: absolute; left: 18px; right: 18px; bottom: 12px; color: rgb(255, 255, 255); text-shadow: rgba(0, 0, 0, 0.45) 0px 2px 6px;}
.pwx .ss-bn .ss-isle-n{color: rgba(255, 255, 255, 0.88); font-size: 12px; font-weight: 800;}
.pwx .ss-bn .ss-isle-name{color: rgb(255, 255, 255); font-size: 27px; line-height: 1.05;}
.pwx .ss-bn .ss-isle-tag{color: rgba(255, 255, 255, 0.92); font-size: 12.5px; font-weight: 700; margin-top: 2px;}
.pwx .ss-isle-body{position: relative; background: var(--cardpat),linear-gradient(180deg,var(--card1),var(--card2));}
.pwx .ss-isle-body > :not(.ss-fx){position: relative; z-index: 1;}
.pwx .ss-rock{position: relative; z-index: 1; margin: -26px auto 0px; width: 78%; height: 70px; background: linear-gradient(rgb(139, 94, 52) 0%, rgb(110, 69, 36) 55%, rgb(78, 47, 23) 100%); clip-path: polygon(0px 0px, 100% 0px, 94% 30%, 86% 44%, 80% 70%, 70% 62%, 62% 88%, 54% 72%, 48% 100%, 41% 74%, 34% 86%, 27% 60%, 19% 72%, 12% 42%, 5% 30%); filter: drop-shadow(rgba(0, 0, 0, 0.25) 0px 10px 10px);}
.pwx .ss-rock i{position: absolute; width: 3px; background: rgb(92, 58, 30); border-radius: 2px; top: 40px;}
.pwx .ss-rock i:nth-child(1){left: 30%; height: 34px; transform: rotate(8deg);}
.pwx .ss-rock i:nth-child(2){left: 58%; height: 44px; transform: rotate(-6deg);}
.pwx .ss-rock i:nth-child(3){left: 72%; height: 26px; transform: rotate(12deg);}
.pwx .ss-isle[data-biome="woods"]{--card1: #F3FAEC; --card2: #DDEFD2; --cardpat: radial-gradient(circle at 20% 30%,rgba(63,138,85,.08) 0 18px,transparent 19px) 0 0/90px 90px; --path: #E6D6A8; --pathd: #A88A4E;}
.pwx .ss-isle[data-biome="meadow"]{--card1: #FFFDF0; --card2: #EAF8D4; --cardpat: radial-gradient(circle,#FFD84D 0 3px,transparent 4px) 0 0/46px 46px,radial-gradient(circle,#FF9DC2 0 3px,transparent 4px) 23px 23px/46px 46px; --path: #F0DFAE; --pathd: #C4A25A;}
.pwx .ss-isle[data-biome="river"]{--card1: #EEF9FF; --card2: #D6EFF7; --cardpat: repeating-linear-gradient(170deg,rgba(30,154,200,.07) 0 4px,transparent 4px 26px); --path: #C9D3D8; --pathd: #8FA3AE; --pathw: 14px; --pathdash: 4 26;}
.pwx .ss-isle[data-biome="jungle"]{--card1: #EEF8E6; --card2: #CFE8BE; --cardpat: radial-gradient(ellipse 14px 6px at 50% 50%,rgba(30,140,69,.12) 98%,transparent) 0 0/60px 40px; --path: #DCC894; --pathd: #9C8148;}
.pwx .ss-isle[data-biome="canopy"]{--card1: #F3FAF4; --card2: #DCF0E0; --path: #C99B63; --pathd: #7C5530; --pathw: 16px; --pathdash: 4 10;}
.pwx .ss-isle[data-biome="autumn"]{--card1: #FFF7EC; --card2: #FBE2C6; --cardpat: radial-gradient(circle at 30% 40%,rgba(210,105,30,.09) 0 14px,transparent 15px) 0 0/80px 80px; --path: #EBCB9C; --pathd: #B07A3A;}
.pwx .ss-isle[data-biome="snow"]{--card1: #F8FBFF; --card2: #E4EEF9; --path: #FFFFFF; --pathd: #AFC6DE;}
.pwx .ss-isle[data-biome="snow"] .ss-isle-body::after{content: ""; position: absolute; left: 0px; right: 0px; bottom: 0px; height: 70px; background: radial-gradient(40% 60px at 20% 100%, rgb(255, 255, 255) 70%, transparent 71%), radial-gradient(45% 70px at 75% 100%, rgb(255, 255, 255) 70%, transparent 71%); pointer-events: none;}
.pwx .ss-isle[data-biome="night"]{--card1: #232A5A; --card2: #161C3F; --cardpat: radial-gradient(1.5px 1.5px at 20% 30%,rgba(255,255,255,.8),transparent) 0 0/70px 70px,radial-gradient(1px 1px at 60% 70%,rgba(255,255,255,.6),transparent) 0 0/50px 50px; --path: #3C4785; --pathd: #FFE38A; --bodyink: #E5E9FF;}
.pwx .ss-isle[data-biome="blossom"]{--card1: #FFF7FA; --card2: #FDE3EE; --cardpat: radial-gradient(circle,rgba(214,69,127,.1) 0 5px,transparent 6px) 0 0/54px 54px; --path: #F2D5C4; --pathd: #C98F74;}
.pwx .ss-isle[data-biome="rain"]{--card1: #EEF3F5; --card2: #D8E3E7; --path: #C5CFC6; --pathd: #7E948A; --pathw: 14px; --pathdash: 4 24;}
.pwx .ss-isle[data-biome="summit"]{--card1: #FFF3EA; --card2: #F1DDEE; --cardpat: linear-gradient(160deg,transparent 60%,rgba(140,108,158,.08) 60%); --path: #E4CAA6; --pathd: #A57E55;}
.pwx .ss-orb-tag{position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); background: rgb(255, 255, 255); color: var(--ss-navy); border: 2.5px solid var(--acc); font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 21px; line-height: 1; padding: 4px 11px 2px; border-radius: 99px; white-space: nowrap; box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px; z-index: 2;}
.pwx .ss-orb.next .ss-orb-tag{font-size: 24px; background: var(--gold); color: rgb(255, 255, 255); border-color: rgb(255, 255, 255);}
.pwx .ss-orb-n{margin-top: 24px;}
.pwx .ss-orb-ball{width: 62px; height: 62px;}
.pwx .ss-orb.big .ss-orb-ball,.pwx .ss-orb.next .ss-orb-ball{width: 70px; height: 70px;}
.pwx .ss-orb-img{width: 74%; height: 74%; object-fit: contain; pointer-events: none;}
.pwx .ss-orb-emo{font-size: 30px; line-height: 1;}
.pwx .ss-orb.next .ss-orb-emo,.pwx .ss-orb.big .ss-orb-emo{font-size: 34px;}
@media (max-width: 420px){.pwx .ss-orb-tag{font-size: 18px; padding: 3px 9px 2px;}}
@media (max-width: 420px){.pwx .ss-orb.next .ss-orb-tag{font-size: 21px;}}
.pwx .ss-isle{background-color: var(--acc);}
.pwx .ss-bn{height: auto; aspect-ratio: 2.75 / 1; min-height: 128px; background: transparent;}
.pwx .ss-bn-shade{background: linear-gradient(rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.55) 100%);}
.pwx .ss-isle-body{background: var(--cardpat),linear-gradient(180deg,color-mix(in srgb,var(--card1) 48%,transparent) 0,color-mix(in srgb,var(--card1) 74%,transparent) 90px,color-mix(in srgb,var(--card2) 84%,transparent) 100%); backdrop-filter: blur(9px) saturate(1.25);}
.pwx .ss-isle[data-biome="night"] .ss-isle-body{background: var(--cardpat),linear-gradient(180deg,color-mix(in srgb,var(--card1) 60%,transparent),color-mix(in srgb,var(--card2) 88%,transparent));}
.pwx .ss-forest .photo.soft{filter: blur(16px) saturate(1.3); transform: scale(1.15); opacity: 0.5; background-size: cover; background-position: center center;}
.pwx .ss-orb-ball{width: 78px; height: 78px;}
.pwx .ss-orb.big .ss-orb-ball,.pwx .ss-orb.next .ss-orb-ball{width: 88px; height: 88px;}
.pwx .ss-orb-img{width: 90%; height: 90%; object-fit: contain; filter: drop-shadow(rgba(0, 0, 0, 0.18) 0px 2px 3px);}
.pwx .ss-orb-emo{font-size: 40px;}
.pwx .ss-orb.next .ss-orb-emo,.pwx .ss-orb.big .ss-orb-emo{font-size: 46px;}
.pwx .ss-orb-tag{top: calc(100% - 8px); bottom: auto; font-size: 20px; padding: 3px 11px 1px;}
.pwx .ss-orb.next .ss-orb-tag{font-size: 22px;}
.pwx .ss-orb-n{margin-top: 30px;}
@media (max-width: 480px){.pwx .ss-orb-ball{width: 62px; height: 62px;}}
@media (max-width: 480px){.pwx .ss-orb.big .ss-orb-ball,.pwx .ss-orb.next .ss-orb-ball{width: 70px; height: 70px;}}
@media (max-width: 480px){.pwx .ss-orb-emo{font-size: 32px;}}
@media (max-width: 480px){.pwx .ss-orb.next .ss-orb-emo,.pwx .ss-orb.big .ss-orb-emo{font-size: 36px;}}
@media (max-width: 480px){.pwx .ss-orb-tag{font-size: 17px; padding: 2px 8px 1px;}}
@media (max-width: 480px){.pwx .ss-orb.next .ss-orb-tag{font-size: 19px;}}
@media (max-width: 480px){.pwx .ss-orb-n{margin-top: 26px;}}
.pwx .ss-app{grid-template-columns: minmax(0px, 1fr);}
@media (min-width: 900px){.pwx .ss-app{grid-template-columns: 230px minmax(0px, 1fr);}}
.pwx .ss-main,.pwx .ss-body,.pwx .ss-sec,.pwx .ss-sec > *{min-width: 0px;}
.pwx .ss-body{overflow-x: hidden;}
.pwx .ss-sec{padding-left: 12px; padding-right: 12px;}
.pwx .ss-bn{min-height: 0px; width: 100%;}
.pwx .ss-trail .ss-orb-ball{width: var(--orb,70px); height: var(--orb,70px);}
.pwx .ss-trail .ss-orb.big .ss-orb-ball,.pwx .ss-trail .ss-orb.next .ss-orb-ball{width: var(--orbBig,80px); height: var(--orbBig,80px);}
.pwx .ss-trail .ss-orb-emo{font-size: var(--emo,36px);}
.pwx .ss-trail .ss-orb.next .ss-orb-emo,.pwx .ss-trail .ss-orb.big .ss-orb-emo{font-size: calc(var(--emo,36px) * 1.12);}
.pwx .ss-trail .ss-orb-tag{font-size: var(--tag,18px); padding: 2px 9px 1px;}
.pwx .ss-trail .ss-orb.next .ss-orb-tag{font-size: calc(var(--tag,18px) + 2px);}
.pwx .ss-trail .ss-orb-n{margin-top: calc(var(--tag,18px) + 10px);}
.pwx .ss-trail .ss-orb-pin{top: -38px;}
@keyframes pwx-ssDrift { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(40px); }
}
@keyframes pwx-ssGlow { 
  0%, 100% { box-shadow: 0 0 0 3px var(--gold),0 5px 0 #AC6B0A,0 0 0 9px rgba(224,148,15,.25); }
  50% { box-shadow: 0 0 0 3px var(--gold),0 5px 0 #AC6B0A,0 0 0 15px rgba(224,148,15,.08); }
}
@keyframes pwx-ssBob { 
  0%, 100% { transform: translate(-50%, 0px); }
  50% { transform: translate(-50%, -5px); }
}
@keyframes pwx-scSun { 
  100% { transform: scale(1.08); }
}
@keyframes pwx-scTw { 
  100% { filter: brightness(1.6); }
}
@keyframes pwx-scMist { 
  0% { transform: translateX(-4%); }
  100% { transform: translateX(4%); }
}
@keyframes pwx-scWave { 
  100% { background-position: 120px 0px, 0px 0px; }
}
@keyframes pwx-pFall { 
  0% { transform: translate(0px, -40px) rotate(0deg); }
  25% { transform: translate(22px, 260px) rotate(90deg); }
  50% { transform: translate(-14px, 540px) rotate(180deg); }
  75% { transform: translate(18px, 820px) rotate(270deg); }
  100% { transform: translate(-6px, 1120px) rotate(360deg); }
}
@keyframes pwx-pRise { 
  0% { transform: translate(0px, 0px); }
  50% { transform: translate(12px, -520px); }
  100% { transform: translate(-8px, -1100px); }
}
@keyframes pwx-pFly { 
  0% { transform: translate(-60vw, 0px); }
  25% { transform: translate(-30vw, -16px); }
  50% { transform: translate(0px, 8px); }
  75% { transform: translate(30vw, -14px); }
  100% { transform: translate(60vw, 0px); }
}
@keyframes pwx-pFlut { 
  0% { transform: translate(0px, 0px) scaleX(1); }
  25% { transform: translate(40px, -30px) scaleX(0.6); }
  50% { transform: translate(80px, 10px) scaleX(1); }
  75% { transform: translate(40px, 40px) scaleX(0.6); }
  100% { transform: translate(0px, 0px) scaleX(1); }
}
@keyframes pwx-pTw { 
  0%, 100% { transform: scale(0.4); opacity: 0.2; }
  50% { transform: scale(1.1); opacity: 1; }
}
@keyframes pwx-pGlow { 
  0% { transform: translate(0px, 0px); opacity: 0.2; }
  50% { opacity: 1; }
  100% { transform: translate(60px, -50px); opacity: 0.3; }
}
@keyframes pwx-pRain { 
  0% { transform: translate(0px, -40px) rotate(12deg); }
  100% { transform: translate(-180px, 1120px) rotate(12deg); }
}
@keyframes pwx-ssIsle { 
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}