/* Imaginary Forces values (measured 2026-11-06, DESIGN_ANALYSIS.md) on trovie dark colors · Nunito Sans · body 15px (Nak 11-06) */
:root{--bg:#F8F8F8;--card:#E2E2E2;--fg:#000000;--dim:#707070;--line:#E0E0E0;--accent:#02537E;--dot:#ABABAB;
--side:5.5vw;--text:750px;--font:"Nunito Sans","Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:300 15px/1.4 var(--font);min-height:100vh;display:flex;flex-direction:column}main{flex:1}
a{color:var(--fg);text-decoration:none}  /* no hover colour (Nak 11-06) */
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
img{max-width:100%;height:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.small{font-size:12.8px;line-height:1;letter-spacing:2px;font-weight:400;text-transform:uppercase}

/* header: wordmark on the left line, menu right (IF: lowercase, SemiBold 12.8) */
header{position:relative;z-index:20;height:88px;padding:0 var(--side);display:flex;align-items:center;justify-content:space-between;gap:16px}
.home header{position:absolute;top:0;left:0;right:0;transition:transform .75s ease-out .3s}.loading header{transform:translateY(-200px)}  /* IF: header drops in when the intro ends */
.wordmark{padding:12px 0;font-size:12.8px;font-weight:400;letter-spacing:.13em;text-transform:uppercase}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:40px;font-size:12.8px;font-weight:600;text-transform:lowercase}
nav a{display:inline-block;padding:14px 0}nav a[aria-current]{color:var(--accent)}

/* everything starts on one left line; words narrow, pictures wide (IF) */
main{padding:clamp(24px,4vw,48px) var(--side) clamp(96px,11vw,160px)}
.home main{padding:0 0 clamp(96px,11vw,160px)}.home .rows{padding-left:5.5%;padding-right:5.5%}  /* IF w-gutter 89% of the page (not the window, so the scrollbar is left out) */
h1{font-size:38.4px;line-height:.9;font-weight:400;margin:clamp(40px,5vw,64px) 0 24px;max-width:var(--text)}
h1.big{font-size:clamp(40px,4.2vw,60.8px);text-transform:lowercase;margin-top:clamp(24px,4vw,48px)}
h2{font-size:38.4px;line-height:.9;font-weight:400;margin:clamp(48px,6vw,80px) 0 20px;max-width:var(--text)}
h3{font-size:25.6px;line-height:1.1;font-weight:400;margin:40px 0 12px;max-width:var(--text)}
p,ul.text{max-width:var(--text);margin:0 0 16px;color:var(--dim)}strong{color:var(--fg);font-weight:600}
p a,ul.text li a{color:var(--accent)}
.lead{font-size:19.2px;line-height:1.4;color:var(--fg);font-weight:300;margin-bottom:24px}
/* Bio = IF about us, measured at 1100 · 1470 · 1800 (11-06): title 165px from the top; text block at 15vw, 31.5vw wide, 100px under the title */
.bio main{padding-top:0}
.bio h1.big{margin:77px 0 0;font-size:60.8px;line-height:.9;font-weight:400;color:#1F211F;max-width:none}
.about{width:70vw;max-width:1400px;margin:100px auto 0}.about .text{width:45%}  /* IF figure.cell 70vw, max 1400, centred; its text 45% (measured 11-06) */
.about h2{margin:0 0 31px;max-width:none;font-size:38.4px;line-height:.9;font-weight:600;color:#000}
.about p{max-width:none;margin:0 0 26px;font-size:19.2px;line-height:1.4;font-weight:300;color:#707070}
.about strong{color:#707070;font-weight:600}
.about .link{display:block;margin:0 0 26px;font-size:16px;line-height:1.4;font-weight:600;letter-spacing:2px}
.about p a{font-weight:600;letter-spacing:2px;text-transform:uppercase;font-size:16px}
.ico{width:1em;height:1em;vertical-align:-.12em;margin-right:10px}  /* link icons: text height, link colour */
figure{margin:clamp(40px,5vw,64px) 0}figure img{display:block;width:100%}
figure[style]{margin:16px 0;min-width:44px}
main>figure:first-child{margin-top:clamp(16px,3vw,32px)}main>figure:first-child+h1{margin-top:28px}
figcaption{margin-top:10px;font-size:12.8px;color:var(--dim)}
.group{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:clamp(40px,5vw,64px) 0}.group figure{margin:0}
@media (max-width:700px){.group{grid-template-columns:1fr}}
.video{position:relative;aspect-ratio:16/9;background:var(--card)}.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
p a img{width:156px}  /* App Store badge at the size Nak used */
.link{display:inline-block;margin:24px 40px 8px 0;font-size:16px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--accent)}  /* IF "GET TO KNOW US" */


/* Work = IF homepage, every value from its styles.css / site.js (read in full 11-08, COMPARE_MAIN.md).
   Intro: body.loading for 4.5 s or until the first scroll. The stage (slides + dots) sits 1.5x zoomed and 88px up, then settles in .75s ease-out. */
.intro{position:fixed;inset:0;z-index:10;display:flex;align-items:center;pointer-events:none;opacity:0;transition:opacity .5s}
.loading .intro{opacity:1}
.intro::after{content:"";position:absolute;inset:0;background:#000;opacity:.25;z-index:1}
.intro h1{position:relative;z-index:2;margin:0 0 0 10vw;width:40vw;max-width:none;font-size:4.2vw;line-height:1.1;font-weight:200;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.9),0 1px 6px rgba(0,0,0,.8),0 2px 12px rgba(0,0,0,.6);opacity:0;transform:translateY(25px);transition:opacity .5s,transform 1s}  /* weight + shadow: Nak 11-06 */
.intro.on h1{opacity:1;transform:none}
@media (max-width:896px) and (orientation:portrait){.intro h1{font-size:48px;width:90vw;margin-left:5vw}}
.hero{padding-top:88px}
.stage{position:relative;margin:0 5.5%;min-height:90vh;transform-origin:center top;transition:transform .75s ease-out}
.loading .stage{transform:translateY(-88px) scale(1.5)}
.frame{position:relative;height:calc(100vh - 176px);overflow:hidden;background:#000;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.slide{position:absolute;inset:0;display:block;color:#fff;opacity:0;pointer-events:none;transition:opacity .9s ease}
.slide.on{opacity:1;pointer-events:auto}.slide img{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
.slide:hover{color:#fff}.cap{text-shadow:0 1px 3px rgba(0,0,0,.35),0 2px 16px rgba(0,0,0,.4)}  /* softer (Nak 11-06) */
.slide .cap{position:absolute;left:28px;bottom:24px;width:75%;display:flex;flex-direction:column;gap:5px;transition:opacity .5s}
.loading .slide .cap{opacity:0}.cap b{font-size:38.4px;line-height:.9;font-weight:400}.cap span{font-size:16px;font-weight:300;line-height:1.4}
.controls{position:absolute;left:0;right:0;top:calc(100vh - 150px);display:flex;justify-content:center;align-items:flex-start;gap:8px}  /* IF: arrows at the ends of a row 80px wider than the dots */
.controls>button{width:32px;height:32px;padding:0;border:0;background:none;color:var(--accent);cursor:pointer}.controls>button svg{display:block;width:32px;height:32px}
.controls .prev svg{transform:rotate(180deg)}.controls .next{margin-top:4px}
.controls ol{list-style:none;margin:5px 0 0;padding:0;display:flex}
.controls ol button{display:block;width:40px;height:26px;margin:0 10px;padding:10px 0;border:0;background:none;cursor:pointer}
.controls ol button span{display:block;height:6px;background:#D8D8D8;transition:background-color .2s}
.controls ol button[aria-current=true] span,.controls ol button:hover span{background:#000}
.rows{transition:opacity .5s .5s}.loading .rows{opacity:0}
.row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:3%}  /* words centred on their picture (Nak 11-08: at the bottom it was unclear which picture they belong to; IF puts them at the bottom) */.row:nth-child(even){flex-direction:row-reverse}
.row>a:first-child{flex:0 0 49%;display:block;background:#DDDDDD}.row img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}  /* grey box = IF; 16:9 = Nak 11-08 */
.row .text{flex:0 0 48%}
.row .text a{width:55%;display:flex;flex-direction:column;gap:5px}.row .text p{margin:0;color:var(--fg)}.row .go{margin-top:10px;color:var(--fg)}
.row:nth-child(even) .text a{margin-left:45%;align-items:flex-end;text-align:right}
.row h2{margin:0}
@media (max-width:1023px){.row h2{font-size:19.2px}}
@media (max-width:767px) and (orientation:portrait),(max-width:896px) and (orientation:landscape){.row,.row:nth-child(even){flex-direction:column;align-items:stretch}.row>a:first-child,.row .text{flex:none;width:100%}.row .text{margin:10px 0 0}.row .text a,.row:nth-child(even) .text a{width:100%;margin:0;align-items:flex-start;text-align:left}.row .go{display:none}}
@media (max-width:767px) and (orientation:portrait){.row .text p.small{display:none}}
@media (max-width:896px) and (orientation:landscape){.row .text{margin-top:6%}}

/* footer: IF — big email, small lines */
footer{background:#000;padding:56px var(--side) 48px;color:var(--fg);display:flex;flex-direction:column;gap:14px}
footer a{color:#fff}footer .mail{font-size:32px;line-height:1.1;font-weight:400}
footer .line{font-size:12.8px;letter-spacing:1px}footer .copy{font-size:11.2px;color:rgba(255,255,255,.6)}
.top{position:fixed;right:calc(2.25% - 19px);bottom:25.5px;z-index:30;width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--accent)}  /* the arrow itself sits right 2.25%-7px, bottom 39 (IF) */
header.swap~.top{opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s .5s}.scrolled header.swap~.top{opacity:1;visibility:visible;transition:opacity .5s}  /* IF: shows past 100px */
@media (max-width:767px) and (orientation:portrait){.top{display:none}}  /* IF #scrollToTop: none on phones upright (both sites; Adobe hid its button on phones too) */
body{-webkit-font-smoothing:antialiased}::selection{background:var(--accent);color:#fff}.preload *{transition:none!important}  /* IF; selection: accent in the gold's place, white text so it stays readable */
@media (max-width:700px){.row>a:first-child{flex-basis:100%}footer .mail{font-size:24px}}
@media (max-width:1023px){.bio main{padding-left:5%;padding-right:5%}.about{margin:100px 0 0;width:auto}.about .text{width:auto}.bio h1.big{font-size:41.6px}.about h2{font-size:28.8px}.about p{font-size:14.4px}.about .lead{font-size:28px}}  /* IF about us under 1024: 5% sides, 41.6 · 28.8 · 14.4 (measured at 375 and 800, 11-09) */
/* Scroll motion from the reference's own code (imaginaryforces.com css/styles.css · dist/site.js, read 11-08; DESIGN_ANALYSIS.md).
   Header: the Nak logo stays top left at all times (no wordmark, Nak 11-08); past 100px the menu fades out (.3s) and the menu button fades in, opening the menu panel. Wide screens only (IF: 1024 and up). */
.menu-btn,.panel{display:none}
.mark{position:absolute;top:18px;left:var(--side);z-index:21;display:block;padding:10px 0}.mark img{display:block;width:30px;height:30px;transition:opacity .2s}
/* Over a picture the logo turns white and the menu lines white (Nak 11-08: "무조건 밝은 색은 흰색", not inverted colours). site.js marks .on-pic.
   The white logo = the same file with only its palette swapped: white circle, letters still cut out (assets/logo/nak-logo-white.png) */
.mark .w{position:absolute;top:10px;left:0;opacity:0}.mark.on-pic .w{opacity:1}.mark.on-pic .n{opacity:0}
header.swap{justify-content:flex-end}.home .mark{transition:transform .75s ease-out .3s}.loading .mark{transform:translateY(-200px)}  /* the Nak logo, always there (Nak 11-08 "NAK.PLUS 없애고 로고만 남겨. 로고는 늘 거기 있는거야") */
header.swap{position:fixed;top:0;left:0;right:0;pointer-events:none}header.swap a,header.swap button{pointer-events:auto}  /* IF header is fixed at every width */
header.swap+main{margin-top:88px}.home header.swap+main{margin-top:0}
.mark{position:fixed}body{overflow-x:hidden}  /* IF body: overflow-x hidden (the intro zoom and the phone dot row stay inside the screen) */
@media (min-width:1024px){
header.swap nav{transition:opacity .3s ease,visibility 0s}
.scrolled header.swap nav{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s .3s}
.mark{left:5.5%}  /* on the pictures' left line (Nak 11-08 "바로 아래 이미지와 함께 왼쪽 정렬"; IF puts its mark at 2.25%-7px) */
.menu-btn{display:block;position:fixed;top:27px;right:calc(5.9% - 11px);z-index:22;width:44px;height:44px;padding:11px;border:0;background:none;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s .3s}
.menu-btn span{position:absolute;right:11px;width:22px;height:2px;background:var(--fg);transition:background-color .2s,opacity .1s,transform .3s,top .3s,width .3s}
.menu-btn span:first-child{top:8px}.menu-btn span:nth-child(2){top:15px}.menu-btn span:last-child{top:22px}  /* three lines, same centre as the old two (Nak 11-08) */
.scrolled .menu-btn{opacity:1;visibility:visible;transition:opacity .3s ease,visibility 0s}
.menu-btn.on-pic span{background:#fff}.menu-on .menu-btn span{width:16px;top:17px;background:var(--accent)}
.menu-on .menu-btn span:nth-child(2){opacity:0}.menu-on .menu-btn span:first-child{transform:rotate(45deg)}.menu-on .menu-btn span:last-child{transform:rotate(135deg)}
.panel{display:block;position:fixed;top:20px;right:1.5%;z-index:2;padding:20px 100px 18px 60px;background:rgba(255,255,255,.9);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s .3s}
.menu-on .panel{opacity:1;visibility:visible;transition:opacity .3s ease,visibility 0s}
.panel ul{display:flex;list-style:none;margin:0 25px 0 0;padding:0;gap:22px;font-size:12.8px;line-height:1;font-weight:600;text-transform:lowercase}
.panel a{padding:10px 0}  /* inline like IF: the padding widens the tap area, not the box (box 51px tall, measured) */.panel a[aria-current]{color:var(--accent)}
}
/* Narrow screens = IF styles.css @media (max-width:1023px) · (max-width:767px) portrait · (max-width:896px) landscape · (max-width:320px), read 11-09.
   Mark top left, menu button always there (IF 2 lines, ours 3 at IF's 12px pitch — Nak 11-08), menu = a panel that drops from the top. Lines/X: the button box is the IF 30 (36) px box + 7px padding to make a 44 (50) px tap area. */
@media (max-width:1023px){
header.swap nav{display:none}
.mark{top:19px;left:3.5%}
.menu-btn{display:block;position:fixed;top:27px;right:calc(10% - 7px);z-index:22;width:44px;height:44px;padding:7px;border:0;background:none;cursor:pointer}
.menu-btn span{position:absolute;right:7px;width:30px;height:3px;background:var(--fg);transition:background-color .2s,opacity .1s,transform .3s,top .3s,width .3s}
.menu-btn span:first-child{top:7px}.menu-btn span:nth-child(2){top:19px}.menu-btn span:last-child{top:31px}
.home .menu-btn{transition:transform .75s ease-out .3s}.loading .menu-btn{transform:translateY(-200px)}  /* IF: the button sits in the header, so it drops in with it after the intro (iPhone Safari, 11-09) */
.menu-btn.on-pic span{background:#fff}.menu-on .menu-btn span{width:27px;top:13px;background:var(--accent)}  /* IF open: 90% wide, 6px down, gold -> accent */
.menu-on .menu-btn span:nth-child(2){opacity:0}.menu-on .menu-btn span:first-child{transform:rotate(45deg)}.menu-on .menu-btn span:last-child{transform:rotate(135deg)}
.menu-on .mark.on-pic .w{opacity:0}.menu-on .mark.on-pic .n{opacity:1}  /* the open panel is white: keep the dark logo on it */
.panel{display:block;position:fixed;top:0;left:0;width:100%;height:55vh;z-index:2;background:rgba(255,255,255,.9);transform:translateY(-55vh);visibility:hidden;transition:transform .2s ease-in-out,visibility 0s .2s}
.menu-on .panel{transform:none;visibility:visible;transition:transform .2s ease-in-out}
.panel ul{display:flex;flex-direction:column;align-items:flex-start;list-style:none;margin:100px 0 auto 5%;padding:0;font-size:40px;line-height:1;font-weight:600;text-transform:lowercase}
.panel li{margin-bottom:50px}.panel a[aria-current]{color:var(--accent)}
.stage{width:95vw;margin:0 auto 20px;min-height:75vh}.frame{height:70vh}.slide .cap span{display:none}
.controls{position:relative;top:auto;margin-top:20px}.controls>button{display:none}  /* IF: dots 30px under the picture (our dot button has 10px tap padding); the arrows fall outside the slideshow, which hides them */
.controls ol{margin:0;width:100%;justify-content:center}.controls ol li{display:flex;flex:0 1 60px;min-width:0}.controls ol button{flex:1 1 40px;min-width:0;width:auto;height:28px}.controls ol button span{height:8px}  /* dots shrink to fit, 10px either side stays */
.home .rows{padding-left:2.5%;padding-right:2.5%}  /* IF .alternating 95% */
.hero{position:relative}.down{display:block;position:absolute;left:3%;top:calc(88px + 71vh);width:33px;height:33px;color:var(--fg);transition:opacity .3s}.scrolled .down{opacity:0}  /* IF .scrolldown: under the header's 88px, 71vh down */
}
.down{display:none}
@media (max-width:1023px){.down{display:block}}
@media (max-width:896px){.cap b{font-size:32px}h2{font-size:32px}}  /* IF h2 2rem under 896; h1 stays 38.4 (IF project title on a phone, measured 11-09) */
@media (max-width:1023px){:root{--side:2.5vw}main{padding-top:0}main>figure:first-child{margin-top:0}}  /* IF: 95% wide, the project film right under the header (Wimbledon at 375 and 800, measured 11-09) */
@media (max-width:767px) and (orientation:portrait){
.mark{left:5%}.menu-btn{right:calc(15% - 7px)}
.panel ul{font-size:24px}.panel li{margin-bottom:25px}
main{position:relative}main::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .5s}.menu-on main::after{opacity:1}  /* IF: the page dims behind the open menu (phones upright) */
.frame{height:62vh}.slide .cap{left:5%;width:90%}.controls{margin-top:10px}.down{top:calc(88px + 78vh)}
}
@media (max-width:896px) and (orientation:landscape){
.mark{left:3.5%}.menu-btn{right:calc(10% - 7px);width:50px;height:50px}  /* IF landscape says top 40px but the 1023 rule's top:34px !important wins: lines stay at 34 */.menu-btn span{width:36px}.menu-on .menu-btn span{width:32.4px}
.panel{height:100vh;transform:translateY(-100vh)}.panel ul{justify-content:center;height:100%;width:100%;margin:5% auto 5% 3.5%;font-size:24px}.panel li{margin-bottom:20px}
.stage{min-height:92vh}.frame{height:80vh}.down{top:calc(88px + 83vh)}
}
@media (max-width:320px){.panel ul{font-size:19.2px}.panel li{margin-bottom:20px}}
/* Work rows: each picture starts 5vh low and hidden; when its row is 50px into view it rises (1s after .3s) and fades in (.5s after .6s). Once. */
.rise .row>a:first-child{transform:translateY(5vh);transition:transform 1s .3s}
.rise .row>a:first-child img{opacity:0;transition:opacity .5s .6s}
.rise .row .text{opacity:0;transform:translateY(5vh);transition:opacity .3s .3s,transform 1s .3s}  /* the words rise too and fade in quickly (IF .info) */
.rise .row.ready>a:first-child{transform:none}.rise .row.ready>a:first-child img{opacity:1}.rise .row.ready .text{opacity:1;transform:none}
@media (max-width:767px) and (orientation:portrait){.rise .row>a:first-child{transform:none}}  /* IF: phones upright only fade */
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
:root{--bg:#0E141C;--card:#1E2530;--fg:#FFFFFF;--dim:rgba(235,235,245,.6);--line:rgba(235,235,245,.14);--accent:#90EAD7;--dot:rgba(235,235,245,.3)}
/* app pages on the IF project-page skeleton (Wimbledon, measured 1024x768, 11-08; Nak "고쳐") */
main{padding-top:0}main>:first-child{margin-top:0}  /* first thing right under the header, 88 from the top */
h2,h3{margin-top:clamp(64px,10.25vw,105px)}figure,.group{margin:clamp(64px,10.25vw,105px) 0}  /* IF: about 105 between blocks */
h3{font-size:32px;line-height:1.1}  /* IF section titles 24pt */
.group{grid-template-columns:repeat(4,minmax(0,1fr))}  /* phone screenshots: eight in two rows */
.group{--pad:clamp(20px,4vw,40px);padding:var(--pad);background:#E2E2E2;border-radius:calc(var(--pad) + 24px)}  /* corners follow the phones inside: their corner (~24px at this size) + the padding */  /* dark screenshots on a light grey panel so they don't melt into the page (Nak 11-08); grey = the portfolio's card grey */
h1:has(>img){font-size:60.8px;line-height:1}h1>img{display:block;height:1em;width:auto;margin-left:-.12em}  /* trovie logo from design (Trovie Design v3, 11-08): mark + Poppins wordmark as one drawing; its mark ink starts 12% into the 1em box, so pulled onto the left line */
/* app gallery = Adobe theme "geometric" (theme CSS read 11-08): 33.333% each, no gap, box 1381:1080 (padding 78.21782%), picture covers it; site max 1600 */
main:has(>.covers){padding-left:0;padding-right:0}.covers{display:flex;flex-wrap:wrap;max-width:1600px;margin:0 auto}
.cover{position:relative;display:block;width:33.3333%;aspect-ratio:1381/1080;overflow:hidden}
.cover img{position:absolute;top:50%;left:50%;width:calc(100% + 2px);height:calc(100% + 2px);max-width:none;object-fit:cover;transform:translate(-50%,-50%)}
.cover::after{content:"";position:absolute;inset:0;background:#000;opacity:0;transition:background-color .2s ease,opacity .2s ease}
.cover .roll{opacity:0;visibility:hidden}
.cover:active .roll{opacity:1;visibility:visible}.cover:active::after{opacity:.5}  /* Adobe: finger down = hover look (touch-hover) */
@media (hover:hover){.cover:hover .roll{opacity:1;visibility:visible}.cover:hover::after{opacity:.5}}  /* hover: rollover picture, black 50% over .2s */
.transition-enabled{opacity:0}  /* Adobe main.css page transition: fade in .25s ease-in; out .25s ease-out on a link */
.transition-in{animation:fade-in .25s ease-in forwards}.transition-out{opacity:1;animation:fade-out .25s ease-out forwards}
@keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes fade-out{from{opacity:1}to{opacity:0}}
.zoom{display:block;cursor:zoom-in}.zoom-view{border:0;padding:0;margin:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;background:none;cursor:zoom-out}
.zoom-view[open]{display:flex;align-items:center;justify-content:center}.zoom-view::backdrop{background:rgba(0,0,0,.85)}
.zoom-view img{width:auto;height:auto;max-width:92vw;max-height:92vh;max-height:92dvh}
@media (max-width:932px){.cover{width:50%}}@media (max-width:540px){.cover{width:100%}}
@media (max-width:700px){.group{grid-template-columns:repeat(2,minmax(0,1fr))}h1:has(>img){font-size:41.6px}}
.group img,.zoom-view img{-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201320%202868%22%3E%3C%21--%20iPhone%2017%20Pro%20Max%20screen%20shape%3A%20the%20iOS%20Simulator%20framebufferMask%20%28Xcode%20CoreSimulator%20profile%29%2C%2011-08%20--%3E%3Cpath%20d%3D%22M1064.51%200C1080.64%200%201096.76%200.048%201112.88%200.645C1131.35%201.329%201149.61%202.73%201167.84%206.127C1204.63%2012.984%201238.09%2027.868%201265.11%2054.891C1292.14%2081.916%201307.02%20115.383%201313.88%20152.177C1317.27%20170.39%201318.67%20188.638%201319.36%20207.093C1319.95%20223.062%201320%20239.029%201320%20255L1320%202613C1320%202628.97%201319.95%202644.94%201319.36%202660.91C1318.67%202679.36%201317.27%202697.61%201313.88%202715.82C1307.02%202752.62%201292.14%202786.08%201265.11%202813.11C1238.09%202840.13%201204.63%202855.02%201167.84%202861.87C1149.61%202865.27%201131.35%202866.67%201112.88%202867.35C1096.76%202867.95%201080.64%202868%201064.51%202868L255.489%202868C239.363%202868%20223.243%202867.95%20207.118%202867.35C188.651%202866.67%20170.391%202865.27%20152.164%202861.87C115.374%202855.02%2081.9114%202840.13%2054.8884%202813.11C27.8631%202786.08%2012.9793%202752.62%206.12403%202715.82C2.72985%202697.61%201.32978%202679.36%200.645052%202660.91C0.0521483%202644.94%200%202628.97%200%202613L0%20255C0%20239.029%200.0521483%20223.062%200.645052%20207.093C1.32978%20188.638%202.72985%20170.39%206.12403%20152.177C12.9793%20115.383%2027.8631%2081.916%2054.8884%2054.891C81.9114%2027.868%20115.374%2012.984%20152.164%206.127C170.391%202.73%20188.651%201.329%20207.118%200.645C223.243%200.048%20239.363%200%20255.489%200L1064.51%200Z%22/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201320%202868%22%3E%3C%21--%20iPhone%2017%20Pro%20Max%20screen%20shape%3A%20the%20iOS%20Simulator%20framebufferMask%20%28Xcode%20CoreSimulator%20profile%29%2C%2011-08%20--%3E%3Cpath%20d%3D%22M1064.51%200C1080.64%200%201096.76%200.048%201112.88%200.645C1131.35%201.329%201149.61%202.73%201167.84%206.127C1204.63%2012.984%201238.09%2027.868%201265.11%2054.891C1292.14%2081.916%201307.02%20115.383%201313.88%20152.177C1317.27%20170.39%201318.67%20188.638%201319.36%20207.093C1319.95%20223.062%201320%20239.029%201320%20255L1320%202613C1320%202628.97%201319.95%202644.94%201319.36%202660.91C1318.67%202679.36%201317.27%202697.61%201313.88%202715.82C1307.02%202752.62%201292.14%202786.08%201265.11%202813.11C1238.09%202840.13%201204.63%202855.02%201167.84%202861.87C1149.61%202865.27%201131.35%202866.67%201112.88%202867.35C1096.76%202867.95%201080.64%202868%201064.51%202868L255.489%202868C239.363%202868%20223.243%202867.95%20207.118%202867.35C188.651%202866.67%20170.391%202865.27%20152.164%202861.87C115.374%202855.02%2081.9114%202840.13%2054.8884%202813.11C27.8631%202786.08%2012.9793%202752.62%206.12403%202715.82C2.72985%202697.61%201.32978%202679.36%200.645052%202660.91C0.0521483%202644.94%200%202628.97%200%202613L0%20255C0%20239.029%200.0521483%20223.062%200.645052%20207.093C1.32978%20188.638%202.72985%20170.39%206.12403%20152.177C12.9793%20115.383%2027.8631%2081.916%2054.8884%2054.891C81.9114%2027.868%20115.374%2012.984%20152.164%206.127C170.391%202.73%20188.651%201.329%20207.118%200.645C223.243%200.048%20239.363%200%20255.489%200L1064.51%200Z%22/%3E%3C/svg%3E") center/100% 100% no-repeat}