.atlas{position:relative;isolation:isolate;min-height:800px;height:100svh;overflow:hidden;background:#071a30}
.atlas-heading{position:absolute;top:118px;left:3.5%;z-index:5;pointer-events:none}
.atlas-kicker{font-size:12px;letter-spacing:.17em;text-transform:uppercase;color:#b9d4e6;margin-bottom:18px}
.atlas-heading h1{font-size:clamp(50px,4.7vw,83px);font-weight:300;line-height:1.02;letter-spacing:-.055em;text-shadow:0 2px 26px #021529}
.atlas-instruction{font-size:16px;line-height:1.5;color:#d9e6f1;margin-top:20px;max-width:300px}
.atlas-stage{position:absolute;inset:0;container-type:size;z-index:-1;overflow:hidden}
.atlas-scene{position:absolute;left:50%;top:50%;width:max(100cqw,159.8cqh);aspect-ratio:1585/992;transform:translate(-50%,-50%);isolation:isolate}
.atlas-water{z-index:-3}.atlas-water:after{content:'';position:absolute;inset:0;background:linear-gradient(#00112544,transparent 22%,transparent 65%,#03132688);pointer-events:none}
.island-group{position:absolute;inset:0}
.city{position:absolute;padding:0;border:0;background:none;isolation:isolate;pointer-events:none;transition:transform .55s cubic-bezier(.18,.7,.25,1);transform-origin:50% 65%;outline:none!important}
.city-art{display:block;width:100%;height:auto;overflow:visible;transition:filter .5s;filter:drop-shadow(0 10px 9px #00101b55)}
.city-art image{pointer-events:none}.city-hit{fill:transparent;pointer-events:all;cursor:pointer}
.city-light{pointer-events:none;animation:city-lamp 5.7s ease-in-out infinite alternate}.motion-paused .city-light{animation-play-state:paused!important}@keyframes city-lamp{from{opacity:.15}to{opacity:.85}}
.city-bar-radar{left:0;top:28.73%;width:62.78%;z-index:3}
.city-fiderol{left:27.44%;top:7.56%;width:49.21%;z-index:2}
.city-verkkopalvelu{left:58.04%;top:27.92%;width:41.96%;z-index:4}
.city-caption{position:absolute;bottom:0;left:34%;display:flex;align-items:center;gap:13px;text-align:left;white-space:nowrap;padding:13px 2px;pointer-events:auto;color:white;background:none;border-bottom:1px solid #9bc4df70;text-shadow:0 2px 5px #00101f,0 0 14px #00101f;transition:border-color .3s,transform .4s}
.city-caption strong{display:block;font-size:19px;font-weight:500;line-height:1.2}.city-caption>span>span{display:block;font-size:12px;color:#b5cbd9;margin-top:5px}.city-index{font-size:12px;color:var(--project);align-self:flex-start;padding-top:3px}.city-enter{font-size:22px;color:var(--project);margin-left:8px}
.city-fiderol .city-caption{left:39%;bottom:-44px}.city-verkkopalvelu .city-caption{left:32%;bottom:-39px}
.city[aria-pressed=true],.city:focus-visible,.city:hover{transform:translateY(-8px) scale(1.015);z-index:6}
.city[aria-pressed=true] .city-art,.city:focus-visible .city-art,.city:hover .city-art{filter:brightness(1.2) saturate(1.12) drop-shadow(0 14px 15px #00162988) drop-shadow(0 0 7px color-mix(in srgb,var(--project) 38%,transparent))}
.city[aria-pressed=true] .city-caption,.city:focus-visible .city-caption,.city:hover .city-caption{border-color:var(--project);transform:translateY(4px)}
.city:focus-visible .city-caption{outline:2px solid white;outline-offset:5px}
.atlas-bottom{position:absolute;bottom:18px;left:3.5%;right:3.5%;display:flex;align-items:center;justify-content:space-between;z-index:20;font-size:13px;color:#c3d7e5}.atlas-hint{letter-spacing:.02em;color:#b2cadc}.atlas-bottom .motion-control{background:#04182abb;padding:10px 14px;border-radius:4px;min-height:44px}
.atlas .boat{z-index:1;width:6%;pointer-events:none}
.sky-flight{position:absolute;left:0;top:10%;z-index:-1;width:30px;color:#eaf5ff;animation:sky-crossing 80s linear infinite;animation-delay:-28s;pointer-events:none}
.sky-flight svg{width:17px;height:17px;transform:rotate(66deg);fill:#dbe8ed;stroke-width:.3}.sky-flight:after{content:'';position:absolute;left:7px;top:9px;width:2px;height:2px;background:#ffdd93;box-shadow:0 0 5px #fff1a9;animation:wing-light 2s steps(2,end) infinite}.sky-flight>span{position:absolute;right:24px;top:10px;width:55px;height:1px;background:linear-gradient(90deg,transparent,#daeaff55)}
.motion-paused .sky-flight,.motion-paused .sky-flight:after{animation-play-state:paused!important}
@keyframes sky-crossing{from{left:-8%;transform:translateY(10px)}to{left:110%;transform:translateY(-25px)}}
@keyframes wing-light{50%{opacity:.3}}
@media(min-width:901px) and (max-width:1200px){.atlas{min-height:760px}.atlas-heading{top:105px}.atlas-heading h1{font-size:51px}.atlas-kicker{font-size:11px}.atlas-instruction{font-size:14px;max-width:220px}.city-caption{padding:10px 13px;gap:8px}.city-caption strong{font-size:16px}.city-caption>span>span{font-size:11px}.city-fiderol .city-caption{left:37%}.city-verkkopalvelu .city-caption{left:22%}.atlas-hint{display:none}}
@media(max-width:900px){
 .atlas{height:auto;min-height:100svh;overflow:hidden;padding:108px 0 86px;background:#06192e}
 .atlas-heading{position:relative;top:auto;left:auto;margin:0 24px 12px}.atlas-kicker{font-size:10px;letter-spacing:.13em;margin-bottom:14px}.atlas-heading h1{font-size:47px;line-height:1.01}.atlas-instruction{font-size:14px;margin-top:17px;max-width:300px}
 .atlas-stage{position:relative;inset:auto;overflow:visible;container-type:normal;z-index:1}.atlas-scene{position:relative;left:auto;top:auto;width:100%;aspect-ratio:auto;transform:none;padding:0 0 12px}.atlas-water{inset:-80px -80% -40px;z-index:-3;opacity:.8}.atlas-water:after{background:linear-gradient(#06192e,transparent 30%,transparent 75%,#06192e)}
 .island-group{position:relative;inset:auto;display:flex;flex-direction:column;gap:22px;padding:0 12px}.city{position:relative;inset:auto;width:100%;margin:0;pointer-events:auto}.city-art{width:100%;overflow:hidden}.city-bar-radar{order:1}.city-fiderol{order:2;width:97%;align-self:center;margin-top:12px}.city-verkkopalvelu{order:3;width:88%;align-self:flex-end}
 .city-caption,.city-fiderol .city-caption,.city-verkkopalvelu .city-caption{position:relative;bottom:auto;left:auto;margin:-5px 12px 0;padding:11px 2px;width:fit-content;max-width:calc(100% - 24px);gap:11px;background:none;border-color:#87b9d280}.city-caption strong{font-size:18px}.city-caption>span>span{font-size:12px}.city-fiderol .city-caption{margin-left:auto;margin-right:26px}.city-verkkopalvelu .city-caption{margin-left:0}.city-enter{margin-left:10px}
 .city[aria-pressed=true],.city:focus-visible{transform:translateY(-4px) scale(1.015)}
 .atlas-bottom{bottom:18px;left:24px;right:24px;font-size:12px}.atlas-hint{display:none}.atlas .boat{width:17%;z-index:0}.sky-flight{top:0;animation-duration:55s}
}
@media(min-width:601px) and (max-width:900px){.atlas{padding-top:123px}.atlas-heading{margin-inline:40px}.atlas-heading h1{font-size:62px}.island-group{max-width:650px;margin:auto;gap:12px}.city-bar-radar{width:90%}.city-fiderol{width:80%;align-self:flex-end}.city-verkkopalvelu{width:72%}}
@media(prefers-reduced-motion:reduce){.city,.city-art,.city-caption{transition:none}.city[aria-pressed=true],.city:focus-visible,.city:hover{transform:none}.sky-flight{animation:none;left:76%}.atlas-detail{animation:none}}

/* The selected world rises out of its city into a native, accessible dialog. */
html:has(.atlas-detail[open]){overflow:hidden}
.atlas-detail{
 --card-bg:#071c30;--card-glow:#143d58;
 position:fixed;inset:0;margin:auto;padding:0;
 width:min(1320px,calc(100% - 88px));max-width:none;
 height:min(710px,calc(100svh - 96px));max-height:calc(100svh - 32px);
 overflow:hidden;overscroll-behavior:contain;color:#f5f8fc;
 background:var(--card-bg);border:1px solid color-mix(in srgb,var(--project) 33%,#15344b);
 border-radius:14px;box-shadow:0 35px 140px #000b,0 0 60px color-mix(in srgb,var(--project) 8%,transparent);
 scrollbar-width:thin;scrollbar-color:#476275 var(--card-bg);
}
.atlas-detail[open]{display:block}
.atlas-preview-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);height:100%;max-height:inherit;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#476275 var(--card-bg)}
.atlas-detail::backdrop{background:#020c1acc;animation:atlas-shade-in .4s ease both}
.atlas-detail[data-closing]::backdrop{animation:atlas-shade-out .26s ease both}
.atlas-detail[data-project=bar-radar]{--card-bg:#071a23;--card-glow:#354523}
.atlas-detail[data-project=fiderol]{--card-bg:#1a1c1d;--card-glow:#48391d}
.atlas-detail[data-project=verkkopalvelu]{--card-bg:#061b30;--card-glow:#0d3e64}
.atlas-preview-art{position:relative;isolation:isolate;min-height:100%;overflow:hidden;background:#061a30}
.atlas-preview-art .environment{z-index:-2}
.atlas-preview-art .environment>img{object-position:var(--scene-position,0%) center}
.atlas-preview-art:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#03132944,transparent 22%,transparent 68%,#031323bf)}
.atlas-preview-index{position:absolute;top:28px;left:30px;z-index:1;font-size:16px;letter-spacing:.05em;font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 1px 8px #000}
.atlas-preview-index>span{font-size:11px;color:#c5d1dc;margin-left:6px}
.atlas-preview-signature{position:absolute;bottom:29px;left:30px;right:30px;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:15px;color:#e0eaf1}
.atlas-preview-signature>span:first-child{font-size:11px;letter-spacing:.05em}
.atlas-preview-signature .wordmark{font-size:25px}
.atlas-preview-copy{position:relative;display:flex;flex-direction:column;align-self:stretch;padding:54px 42px 28px;background:radial-gradient(ellipse at 100% 0%,color-mix(in srgb,var(--card-glow) 55%,transparent),transparent 62%)}
.atlas-close{position:absolute;right:14px;top:14px;z-index:5;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid #a9c5d52e;background:#03101e9c;color:#d7e2eb;font-family:Arial,sans-serif;font-size:28px;line-height:1;transition:background .2s,color .2s}
.atlas-close:hover{background:#234053;color:white}.atlas-close:focus-visible{outline-offset:3px}
.atlas-preview-motion{position:absolute;right:66px;top:14px;z-index:5;display:grid;place-items:center;width:44px;height:44px;min-height:44px;border-radius:50%;border:1px solid #a9c5d52e;background:#03101e9c;color:#d7e2eb;font-size:16px;padding:0}
.atlas-preview-motion .motion-label{display:none}.atlas-preview-motion:hover{background:#234053}.atlas-preview-motion:focus-visible{outline-offset:3px}.atlas-preview-motion:disabled{display:none}
.atlas-brand{display:flex;align-items:center;min-height:68px;margin-bottom:27px}
.atlas-brand .logo-bar-radar{width:135px;height:82px;object-fit:contain}
.atlas-brand .logo-fiderol{width:195px;height:auto;object-fit:contain}
.atlas-brand .vp-logo{display:flex;align-items:center;gap:10px;font-size:21px;white-space:nowrap;letter-spacing:-.035em}
.atlas-brand .vp-logo img{width:38px;height:38px}
.atlas-type{font-size:10px;line-height:1.6;letter-spacing:.11em;text-transform:uppercase;color:#b5c9d7;margin-bottom:16px}
.atlas-detail h2{font-size:clamp(36px,3.4vw,51px);font-weight:400;line-height:1.06;letter-spacing:-.055em;margin-bottom:23px;outline:none}
.atlas-detail h2>span{color:var(--project)}
.atlas-description{font-size:16px;line-height:1.65;color:#c3d1dc;margin-bottom:27px}
.atlas-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;list-style:none;margin:0 0 30px;padding:0}
.atlas-facts li{display:flex;flex-direction:column;align-items:flex-start;gap:13px;min-width:0;min-height:91px;padding:15px 12px;background:color-mix(in srgb,var(--project) 4%,transparent);border:1px solid color-mix(in srgb,var(--project) 16%,transparent);border-radius:7px}
.atlas-facts svg{width:25px;height:25px;flex:none;color:var(--project)}
.atlas-facts span{font-size:12px;line-height:1.35;color:#e4ebf0}
.atlas-preview-action{margin-top:auto}
.atlas-enter{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:56px;padding:16px 23px;border-radius:6px;color:#06111c;background:var(--project);font-size:16px;font-weight:600;transition:box-shadow .2s,background .2s}
.atlas-enter>span{font-family:Arial,sans-serif;font-size:25px;line-height:1;transition:transform .2s}
.atlas-enter:hover{background:color-mix(in srgb,var(--project) 85%,white);box-shadow:0 5px 30px color-mix(in srgb,var(--project) 22%,transparent)}
.atlas-enter:hover>span{transform:translateX(4px)}
.atlas-preview-action>p{font-size:11px;color:#94aabd;text-align:center;line-height:1.5;margin-top:15px}
@keyframes atlas-shade-in{from{background:#020c1a00}to{background:#020c1acc}}
@keyframes atlas-shade-out{from{background:#020c1acc}to{background:#020c1a00}}
@media(min-width:901px) and (max-width:1200px){
 .atlas-detail{width:calc(100% - 48px);height:min(660px,calc(100svh - 64px))}
 .atlas-preview-layout{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
 .atlas-preview-copy{padding:48px 28px 25px}.atlas-brand{margin-bottom:22px;min-height:56px}
 .atlas-brand .vp-logo{font-size:18px}.atlas-brand .vp-logo img{width:31px;height:31px}
 .atlas-detail h2{font-size:39px;margin-bottom:19px}.atlas-description{font-size:15px;margin-bottom:22px}
 .atlas-facts{gap:7px;margin-bottom:24px}.atlas-facts li{padding:13px 9px}
 .atlas-preview-signature{left:24px;right:24px}.atlas-preview-signature>span:first-child{max-width:140px;line-height:1.6}
}
@media(max-width:900px){
 .atlas-detail{width:min(530px,calc(100% - 24px));height:fit-content;max-height:calc(100svh - 24px);border-radius:12px}
 .atlas-preview-layout{display:block;height:auto;max-height:calc(100svh - 26px)}
 .atlas-preview-art{height:clamp(160px,26svh,260px);min-height:0}
 .atlas-preview-art:after{background:linear-gradient(#03132922,transparent 45%,var(--card-bg))}
 .atlas-preview-index{top:18px;left:22px;font-size:13px}
 .atlas-preview-signature{display:none}
 .atlas-preview-copy{padding:0 25px 22px}
 .atlas-brand{min-height:42px;margin-bottom:13px;position:relative}
 .atlas-brand .logo-bar-radar{width:100px;height:62px;margin-top:-12px}
 .atlas-brand .logo-fiderol{width:150px;height:49px;margin-top:-6px}
 .atlas-brand .vp-logo{font-size:20px}.atlas-brand .vp-logo img{width:32px;height:32px}
 .atlas-type{font-size:9px;margin-bottom:12px;letter-spacing:.08em}
 .atlas-detail h2{font-size:38px;line-height:1.05;margin-bottom:17px}
 .atlas-description{font-size:14px;line-height:1.6;margin-bottom:20px}
 .atlas-facts{gap:7px;margin-bottom:23px}.atlas-facts li{min-height:78px;padding:12px 9px;gap:10px}.atlas-facts svg{width:22px;height:22px}.atlas-facts span{font-size:11px}
 .atlas-enter{min-height:52px;font-size:15px;padding:13px 18px}
 .atlas-preview-action>p{font-size:10px;margin-top:12px}
 .atlas-close{top:10px;right:10px;background:#03101ecd}
 .atlas-preview-motion{top:10px;right:60px;background:#03101ecd}
}
@media(max-width:370px){
 .atlas-preview-copy{padding:0 20px 19px}.atlas-preview-art{height:165px}
 .atlas-detail h2{font-size:33px}.atlas-brand .vp-logo{font-size:17px;gap:7px}.atlas-brand .vp-logo img{width:28px;height:28px}
 .atlas-description{font-size:13px;line-height:1.6}.atlas-facts{gap:5px}.atlas-facts li{padding:11px 7px}.atlas-facts span{font-size:10px}
}
@media(min-width:901px) and (max-height:760px){
 .atlas-detail{height:calc(100svh - 40px);max-height:calc(100svh - 24px)}
 .atlas-preview-copy{padding-top:34px;padding-bottom:22px}.atlas-brand{margin-bottom:16px;min-height:47px}.atlas-brand .logo-bar-radar{height:60px;width:105px}.atlas-brand .logo-fiderol{width:160px}
 .atlas-detail h2{font-size:39px;margin-bottom:18px}.atlas-description{font-size:14px;line-height:1.6;margin-bottom:20px}.atlas-facts{margin-bottom:20px}.atlas-facts li{min-height:77px;padding:12px;gap:9px}
}