.gpn-perslot-app-showcase{--pas-ink:#242e33;--pas-muted:#6c777b;--pas-line:#c9d1d3;position:relative;width:100%;overflow:hidden;background:radial-gradient(ellipse at 47% 64%,#fff 0,transparent 48%),#eff2f2;color:var(--pas-ink);font-family:"DM Sans","Noto Sans KR",Arial,sans-serif}
.gpn-perslot-app-showcase *{box-sizing:border-box}
.gpn-pas__wrap{position:relative;width:min(100% - 112px,1560px);margin:auto;padding:100px 0 52px}
.gpn-pas__head{display:grid;grid-template-columns:1.5fr 1fr;gap:64px;align-items:end;position:relative;z-index:8}
.gpn-pas__intro h2{margin:0;font-family:Roboto,"Noto Sans KR",sans-serif;font-size:clamp(68px,7.2vw,126px);font-weight:600;line-height:.86;letter-spacing:-.06em;color:var(--pas-ink)}
.gpn-pas__title-bottom{display:flex;align-items:flex-end;gap:24px;margin-top:8px}
.gpn-pas__intro h2 em{font-style:normal;color:transparent;-webkit-text-stroke:1.3px var(--pas-ink)}
.gpn-pas__intro h2 small{display:inline-block;margin-bottom:5px;font-size:.23em;line-height:.95;letter-spacing:.035em;font-weight:600}
.gpn-pas__intro h2 small span{display:block;margin-top:5px;font-size:1.65em}
.gpn-pas__summary{justify-self:end;max-width:352px;padding-bottom:8px}
.gpn-pas__summary p{margin:0 0 24px;color:#58646a;font-size:15px;line-height:1.85;word-break:keep-all}
.gpn-pas__summary a,.gpn-pas__footer a{display:inline-flex;align-items:center;gap:24px;color:var(--pas-ink);font-size:12px;font-weight:700;text-decoration:none;border-bottom:1px solid #859197;padding-bottom:9px}
.gpn-pas a:focus-visible,.gpn-pas button:focus-visible{outline:2px solid #242e33;outline-offset:7px}
.gpn-pas__stage{position:relative;margin:22px -32px 0;aspect-ratio:1400/920;isolation:isolate}
.gpn-pas__ground{position:absolute;left:25%;top:48%;width:52%;height:35%;background:radial-gradient(ellipse,#8d989b45,transparent 66%);transform:rotate(-31deg);filter:blur(18px);z-index:-1;pointer-events:none}
.gpn-pas__device{position:absolute;left:46%;top:8%;width:27%;aspect-ratio:1440/3200;transform:translateX(-50%) perspective(1800px) rotateX(43deg) rotateZ(-32deg);transform-origin:50% 50%;padding:7px;border:1px solid #aab2b7;border-radius:38px;background:linear-gradient(115deg,#fafcfc,#b9c3c8 10%,#fdfefe 45%,#a3acb2 88%,#e9ecee);box-shadow:-2px 3px 0 #e4e9eb,-4px 7px 0 #b3bfc5,-6px 11px 0 #a3afb5,-9px 16px 0 #d5dfe3,-16px 29px 38px #667a8b45,0 0 0 1px #ffffffd9 inset;z-index:2}
.gpn-pas__screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:30px;border:2px solid #242a2b;background:#fafaf8}
.gpn-pas__screen img{display:block;width:100%;height:auto;max-width:none;margin:0;aspect-ratio:1440/3200;filter:none}
.gpn-pas__tiles{position:absolute;inset:0;z-index:5;pointer-events:none}
.gpn-pas-tile{position:absolute;display:flex;align-items:center;justify-content:center;width:25%;aspect-ratio:1.38;margin:0;padding:16px 16px 34px;overflow:visible;cursor:pointer;border:1px solid #ccd1d2;border-radius:15px;background:linear-gradient(135deg,#ffffff,#f4f5f4);color:#222c30;transform:translate(-50%,-50%) perspective(1800px) rotateX(38deg) rotateZ(-32deg);transform-origin:center;box-shadow:-1px 3px 0 #e8edee,-3px 6px 0 #bdc6cb,-5px 10px 0 #d3dade,-10px 22px 32px #4a606330;transition:box-shadow .24s ease,border-color .24s ease;pointer-events:auto;-webkit-tap-highlight-color:transparent}
.gpn-pas-tile:hover,.gpn-pas-tile[aria-pressed=true]{border-color:#4c565b;box-shadow:0 0 0 1px #4c565b,-1px 3px 0 #e8edee,-3px 6px 0 #bdc6cb,-5px 10px 0 #d3dade,-14px 30px 40px #344a5045}
.gpn-pas-tile--roman{left:18%;top:72%;z-index:3}
.gpn-pas-tile--pixel{left:47%;top:47%;z-index:4}
.gpn-pas-tile--landscape{left:76%;top:22%;z-index:3}
.gpn-pas-tile img{display:block;width:64%;max-width:225px;height:auto;aspect-ratio:1;border-radius:50%;object-fit:contain;filter:drop-shadow(0 8px 10px #182a3422);pointer-events:none}
.gpn-pas-tile__name{position:absolute;left:20px;bottom:13px;right:20px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:clamp(10px,1.06vw,16px);line-height:1.2;font-weight:600;letter-spacing:-.02em;text-align:left}
.gpn-pas-tile__name:after{content:"↗";font-weight:400}
.gpn-pas-tile[aria-pressed=true] .gpn-pas-tile__name:after{content:"✓"}
.gpn-pas__callout{position:absolute;z-index:6;padding-left:13px;border-left:2px solid #4b5e66;pointer-events:none}
.gpn-pas__callout:after{content:"";position:absolute;width:1px;background:#c1cbcf;left:-2px;top:100%}
.gpn-pas__callout span{display:block;font-size:10px;letter-spacing:.13em;font-weight:600;color:#76858a;margin-bottom:6px}
.gpn-pas__callout strong{display:block;font-size:clamp(14px,1.2vw,19px);line-height:1.55;letter-spacing:-.02em;font-weight:500;color:#303d43}
.gpn-pas__callout--left{left:7%;top:43%}.gpn-pas__callout--left:after{height:130px}
.gpn-pas__callout--main{left:47%;top:4%}.gpn-pas__callout--main:after{height:145px}
.gpn-pas__callout--right{left:83%;top:51%}.gpn-pas__callout--right:after{height:100px}
.gpn-pas__selected{position:absolute;z-index:7;right:4%;bottom:6%;width:25%;padding-top:19px;border-top:1px solid #b7c3c7}
.gpn-pas__selected>span{display:block;font-size:10px;font-weight:600;letter-spacing:.14em;color:#72828a;margin-bottom:12px}
.gpn-pas__selected strong{display:block;font-size:28px;letter-spacing:-.03em;font-weight:600;line-height:1.2}
.gpn-pas__selected p{margin:13px 0 0;font-size:13px;line-height:1.8;color:#6b7b82;word-break:keep-all}
.gpn-pas__footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:24px;border-top:1px solid var(--pas-line)}
.gpn-pas__footer p{margin:0;font-size:12px;color:#64747d;line-height:1.7}
.gpn-pas__footer p span+span:before{content:"/";margin:0 18px;color:#a6b1b6}
.gpn-pas__status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:1199px){.gpn-pas__wrap{width:calc(100% - 64px);padding-top:80px}.gpn-pas__head{grid-template-columns:1.4fr 1fr;gap:30px}.gpn-pas__intro h2{font-size:7.5vw}.gpn-pas__title-bottom{gap:16px}.gpn-pas__stage{margin:28px -20px 0}.gpn-pas__device{padding:5px;border-radius:28px}.gpn-pas__screen{border-radius:23px;border-width:1px}.gpn-pas-tile{border-radius:12px;padding:12px 12px 28px}.gpn-pas-tile__name{left:14px;right:14px;bottom:10px}.gpn-pas__callout--main:after{height:95px}.gpn-pas__callout--left:after{height:85px}.gpn-pas__callout--right:after{height:65px}.gpn-pas__selected strong{font-size:23px}.gpn-pas__selected p{font-size:12px}}
@media(max-width:767px){.gpn-pas__wrap{width:calc(100% - 40px);padding:64px 0 40px}.gpn-pas__head{display:block}.gpn-pas__intro h2{font-size:clamp(51px,13.4vw,92px);line-height:.87}.gpn-pas__title-bottom{gap:19px}.gpn-pas__intro h2 small{font-size:.23em;margin-bottom:3px}.gpn-pas__summary{justify-self:start;max-width:430px;margin-top:25px}.gpn-pas__summary p{font-size:14px;margin-bottom:18px}.gpn-pas__stage{margin:20px -20px 0;height:735px;aspect-ratio:auto}.gpn-pas__device{left:48%;top:128px;width:212px;padding:4px;border-radius:24px;transform:translateX(-50%) perspective(1400px) rotateX(29deg) rotateZ(-25deg);box-shadow:-1px 3px 0 #e5e9eb,-3px 6px 0 #b6c2c8,-5px 10px 0 #d4dde1,-12px 22px 28px #72868e45}.gpn-pas__screen{border-radius:19px}.gpn-pas-tile{width:164px;aspect-ratio:1.32;padding:10px 10px 24px;border-radius:10px;transform:translate(-50%,-50%) perspective(1400px) rotateX(35deg) rotateZ(-29deg)}.gpn-pas-tile img{width:67%}.gpn-pas-tile--roman{left:21%;top:455px}.gpn-pas-tile--pixel{left:51%;top:339px}.gpn-pas-tile--landscape{left:80%;top:223px}.gpn-pas-tile__name{font-size:9px;left:10px;right:10px;bottom:9px}.gpn-pas__callout span{font-size:8px}.gpn-pas__callout strong{font-size:13px}.gpn-pas__callout--main{left:52%;top:22px}.gpn-pas__callout--main:after{height:94px}.gpn-pas__callout--left{left:7%;top:255px}.gpn-pas__callout--left:after{height:70px}.gpn-pas__callout--right{left:65%;top:518px}.gpn-pas__callout--right:after{height:43px}.gpn-pas__selected{left:22px;right:22px;bottom:15px;width:auto;padding-top:15px}.gpn-pas__selected>span{font-size:9px;margin-bottom:6px}.gpn-pas__selected strong{font-size:24px}.gpn-pas__selected p{margin-top:7px;font-size:12px}.gpn-pas__footer{flex-direction:column;align-items:flex-start;gap:18px}.gpn-pas__footer p{font-size:11px}.gpn-pas__footer p span+span:before{margin:0 10px}}
@media(prefers-reduced-motion:reduce){.gpn-pas-tile{transition:none}}
@media(max-width:767px){.gpn-pas__device{left:49%;top:155px;width:190px}.gpn-pas-tile{width:140px}.gpn-pas__callout--left,.gpn-pas__callout--right{display:none}}
/* Same approved isometric composition, now an uninterrupted 20-face rail. */
.gpn-pas-tile{--pas-pos:0;left:calc(47% + var(--pas-pos)*29%);top:calc(47% - var(--pas-pos)*25%);z-index:3;opacity:0;visibility:hidden;touch-action:pan-y;user-select:none;will-change:left,top,opacity}
.gpn-pas-tile:first-child{opacity:1;visibility:visible}
.gpn-pas-tile:nth-child(2){--pas-pos:-1;opacity:1;visibility:visible}
.gpn-pas-tile:last-child{--pas-pos:1;opacity:1;visibility:visible}
.gpn-pas-tile[aria-pressed=true]{z-index:4}
.gpn-pas-tile__name{font-size:clamp(9px,.93vw,14px);overflow-wrap:anywhere}
.gpn-pas__selected strong{font-size:clamp(19px,1.9vw,28px);min-height:2.4em;overflow-wrap:anywhere}
.gpn-pas__controls{display:flex;align-items:center;gap:12px;margin-top:16px}
.gpn-pas__controls button{display:grid;place-items:center;min-width:36px;height:36px;padding:0;border:1px solid #bac5c9;border-radius:50%;background:transparent;color:#26343b;font-size:20px;line-height:1;cursor:pointer}
.gpn-pas__controls button:hover{background:#fff;border-color:#546771}
.gpn-pas__controls [data-pas-play]{margin-left:8px;font-size:14px}
.gpn-pas__controls [data-pas-count]{font-size:11px;letter-spacing:.06em;font-variant-numeric:tabular-nums}
@media(max-width:767px){.gpn-pas-tile{left:calc(50% + var(--pas-pos)*23%);top:calc(360px - var(--pas-pos)*86px);width:148px}.gpn-pas-tile__name{font-size:9px}.gpn-pas__stage{height:795px}.gpn-pas__selected strong{font-size:22px;min-height:1.2em}.gpn-pas__selected p{font-size:11px}.gpn-pas__controls{margin-top:11px}.gpn-pas__controls button{min-width:40px;height:40px}}

/* Upright device and a dedicated reading column. Keep the actual app capture intact. */
.gpn-perslot-app-showcase{background:radial-gradient(ellipse at 39% 57%,#fff 0,transparent 58%),#eff2f2}
.gpn-pas__stage{margin-top:38px}
.gpn-pas__device{left:43%;top:5%;width:26.5%;transform:translateX(-50%) perspective(1800px) rotateX(34deg) rotateZ(-20deg);box-shadow:-1px 2px 0 #f8fafb,-3px 5px 0 #aebac1,-5px 8px 0 #dce3e6,-8px 13px 0 #b5c1c7,-15px 26px 34px #51646e2b,-26px 42px 70px #66798218,0 0 0 1px #ffffffd9 inset}
.gpn-pas__ground{left:19%;top:50%;width:49%;height:35%;transform:rotate(-20deg);opacity:.65}
.gpn-pas-tile{left:calc(44% + var(--pas-pos)*27%);top:calc(45% - var(--pas-pos)*25%);width:24%;border-color:#cdd5d7;border-radius:13px;transform:translate(-50%,-50%) perspective(1800px) rotateX(32deg) rotateZ(-23deg);background:linear-gradient(135deg,#fff 12%,#f6f8f8);box-shadow:0 1px 0 #fff inset,-1px 2px 0 #edf0f1,-3px 5px 0 #c5cfd3,-5px 8px 0 #e0e6e8,-10px 18px 25px #536a721f,-17px 30px 45px #536a7212}
.gpn-pas-tile:hover,.gpn-pas-tile[aria-pressed=true]{border-color:#6e7c82;box-shadow:0 0 0 1px #6e7c8266,-1px 2px 0 #f1f4f5,-3px 5px 0 #becad0,-5px 8px 0 #dce4e7,-12px 24px 35px #445b692b}
.gpn-pas-tile__name{letter-spacing:.005em;font-weight:600}
.gpn-pas__callout--left{left:5%;top:34%}
.gpn-pas__callout--left:after{height:70px}
.gpn-pas__callout--main{left:43%;top:0}
.gpn-pas__callout--main:after{height:70px}
.gpn-pas__callout--right{left:76%;right:0;top:46%;padding-left:17px}
.gpn-pas__callout--right:after{height:28px}
.gpn-pas__callout strong{font-family:Roboto,"Noto Sans KR",sans-serif;letter-spacing:.015em;line-height:1.65}
.gpn-pas__selected{left:76%;right:0;top:auto;bottom:5%;width:auto;padding-top:23px;border-color:#aab9bf}
.gpn-pas__selected>span{letter-spacing:.16em;font-size:10px;margin-bottom:14px}
.gpn-pas__selected strong{font-family:Roboto,"Noto Sans KR",sans-serif;font-size:clamp(24px,2.1vw,32px);font-weight:600;letter-spacing:-.015em;line-height:1.22;min-height:2.44em;overflow-wrap:normal;word-break:normal}
.gpn-pas__selected p{font-size:13px;line-height:1.9;letter-spacing:.015em;color:#63747c;margin-top:16px}
.gpn-pas__controls{gap:14px;margin-top:22px}
.gpn-pas__controls button{min-width:44px;width:44px;height:44px;border-color:#b3c0c6;transition:background .2s,border-color .2s,transform .2s}
.gpn-pas__controls button:hover{transform:translateY(-2px);background:#ffffffc9;border-color:#657b85}
.gpn-pas__controls [data-pas-count]{min-width:48px;text-align:center;font-size:12px;letter-spacing:.07em;color:#586971}
.gpn-pas__controls [data-pas-play]{margin-left:4px}
@media(min-width:1024px) and (max-width:1199px){.gpn-pas__stage{aspect-ratio:1400/1020}.gpn-pas__callout--right{top:39%}.gpn-pas__selected strong{font-size:24px}.gpn-pas__selected p{font-size:12px}.gpn-pas__controls{gap:8px}}
/* On smaller screens the caption sits below the illustration, never over it. */
@media(min-width:768px) and (max-width:1023px){
 .gpn-pas__stage{display:flow-root;height:auto;min-height:885px;aspect-ratio:auto;margin-top:35px}
 .gpn-pas__device{left:44%;top:55px;width:250px}
 .gpn-pas-tile{left:calc(48% + var(--pas-pos)*27%);top:calc(326px - var(--pas-pos)*136px);width:220px}
 .gpn-pas-tile__name{font-size:12px}
 .gpn-pas__callout--main{left:42%;top:0}
 .gpn-pas__callout--left,.gpn-pas__callout--right{display:none}
 .gpn-pas__selected{position:relative;left:auto;right:auto;top:auto;bottom:auto;margin:675px 5% 35px;padding-top:23px;display:grid;grid-template-columns:1fr auto;column-gap:32px}
 .gpn-pas__selected>span,.gpn-pas__selected strong,.gpn-pas__selected p{grid-column:1}
 .gpn-pas__selected strong{min-height:1.22em;font-size:28px}
 .gpn-pas__selected p{margin-top:12px;font-size:13px}
 .gpn-pas__controls{grid-column:2;grid-row:2/4;align-self:end;margin:0 0 3px}
}
@media(max-width:767px){
 .gpn-pas__stage{display:flow-root;height:auto;min-height:815px;margin-top:28px}
 .gpn-pas__device{left:46%;top:124px;width:190px;transform:translateX(-50%) perspective(1400px) rotateX(26deg) rotateZ(-16deg);box-shadow:-1px 2px 0 #eef2f3,-3px 5px 0 #b9c5cb,-5px 9px 0 #dbe3e6,-11px 20px 30px #6078832b}
 .gpn-pas-tile{left:calc(50% + var(--pas-pos)*23%);top:calc(329px - var(--pas-pos)*91px);width:148px;transform:translate(-50%,-50%) perspective(1400px) rotateX(29deg) rotateZ(-22deg);border-radius:10px}
 .gpn-pas-tile__name{font-size:9px;letter-spacing:0}
 .gpn-pas__ground{left:14%;top:35%;width:72%;height:30%}
 .gpn-pas__callout--main{left:45%;top:5px}
 .gpn-pas__callout--main:after{height:43px}
 .gpn-pas__callout--left,.gpn-pas__callout--right{display:none}
 .gpn-pas__selected{position:relative;left:auto;right:auto;top:auto;bottom:auto;margin:615px 24px 34px;padding-top:21px}
 .gpn-pas__selected>span{font-size:9px;margin-bottom:11px}
 .gpn-pas__selected strong{font-size:25px;min-height:1.22em;line-height:1.3}
 .gpn-pas__selected p{font-size:12px;line-height:1.85;margin-top:12px}
 .gpn-pas__controls{margin-top:19px}
 .gpn-pas__footer{padding-top:24px}
}
@media(prefers-reduced-motion:reduce){.gpn-pas__controls button{transition:none}.gpn-pas__controls button:hover{transform:none}}