/* NativeLibraryView / NativeArtworkBackground / NativeSearchField, at iPhone
   point coordinates. Small Dynamic Type affects fonts, not a second CSS zoom.
   Only the completed 393pt screen is scaled into the hardware frame. */
.device:has(.ios-preview){height:604px}
.device-screen:has(.ios-preview){background:#000;--ios-screen-scale:.6870229}
.ios-preview{position:absolute;inset:0 auto auto 0;width:393px;height:852px;transform:scale(var(--ios-screen-scale));transform-origin:top left;overflow:hidden;background:#000;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;font-size:14px;line-height:1.3;letter-spacing:normal;text-align:left;font-synthesis:none;-webkit-font-smoothing:antialiased;color-scheme:dark;--ios-accent:#ffa056;--ios-card:#1c1c1e;--ios-fill:#7878803d;--ios-secondary:#ebebf599}
.ios-preview *{box-sizing:border-box}
.ios-preview button,.ios-preview a{font:inherit;color:inherit;letter-spacing:normal;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.ios-preview a{text-decoration:none}
.ios-preview button{border:0;cursor:pointer}
.ios-preview svg{display:block;width:20px;height:20px;flex:none}
.ios-preview :focus-visible{outline:2px solid var(--ios-accent);outline-offset:3px}
.ios-status{height:59px;position:relative;display:flex;justify-content:space-between;align-items:flex-start;padding:20px 29px 0 35px;font-size:16px;font-weight:600;line-height:21px}
.ios-status>i{position:absolute;left:50%;top:11px;transform:translateX(-50%);width:126px;height:36px;border-radius:24px;background:#000}
.ios-status>div{display:flex;align-items:center;gap:5px;height:21px}
.ios-status>div svg{fill:currentColor;width:18px;height:14px}
.ios-status>div svg:last-child{width:26px}
.ios-library-content{padding:0 16px 110px;height:793px;overflow:hidden}
.ios-library-header{display:flex;align-items:center;gap:8px;padding:22px 2px 2px;margin:0 0 12px;min-height:68px}
.ios-library-header h3{font-size:31px;line-height:37px;font-weight:700;letter-spacing:-.025em;margin:0 auto 0 0}
.ios-sort{width:44px;height:44px;display:grid;place-items:center;color:var(--ios-accent)!important}
.ios-profile{display:inline-flex;align-items:center;gap:7px;min-height:44px;flex:none;padding:0 12px 0 7px;border-radius:30px;background:#7878803d;font-size:10.7px!important;font-weight:600!important;white-space:nowrap}
.ios-profile>span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#c55300;color:#fff;font-size:10px;font-weight:700}
.ios-media-picker{display:flex;align-items:stretch;padding:2px;height:44px;border-radius:24px;background:#1c1c1e;font-size:10.4px;font-weight:600;margin:0 0 18px}
.ios-media-picker>span{flex:1;display:grid;place-items:center;border-radius:22px}
.ios-media-picker>span[aria-current]{background:#636366;color:#fff;box-shadow:0 1px 3px #0003}
.ios-search{display:flex;align-items:center;gap:8px;border-radius:22px;min-height:44px;padding:0 12px;background:#7676803d;color:var(--ios-secondary)!important;font-size:14px!important;margin:0 0 12px}
.ios-search svg{width:18px;height:18px;opacity:.85}
.ios-library-summary{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;margin:0 0 12px!important;color:var(--ios-secondary);font-size:12px}
.ios-library-summary>a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;color:var(--ios-accent);font-size:12px;font-weight:500}
.ios-library-summary>a>svg{width:17px;height:17px}
.ios-library-summary>a>svg:last-child:not(:first-child){width:12px;height:12px}
.ios-library-summary>.ios-saves-add{width:44px}
.ios-library-list{display:grid;gap:12px;background:none!important;padding:0!important;border:0!important}
.ios-preview .ios-library-row{position:relative;isolation:isolate;display:grid!important;grid-template-columns:34px 52px minmax(0,1fr) 42.4px;grid-template-rows:auto;align-items:center;gap:12px!important;min-height:106px;margin:0!important;padding:14px!important;border-radius:16px!important;overflow:hidden;background:var(--ios-card)!important;box-shadow:inset 0 0 0 1px #ffffff14!important;border:0!important}
.ios-preview .ios-library-row::before{content:""!important;position:absolute!important;inset:-20px -28px auto!important;width:auto!important;height:max(180px,calc(100% + 40px))!important;z-index:-2!important;border:0!important;border-radius:0!important;background:var(--ios-art) center/cover!important;filter:blur(28px)!important;opacity:.28!important;-webkit-mask-image:linear-gradient(#000,#000a,transparent);mask-image:linear-gradient(#000,#000a,transparent)}
.ios-preview .ios-library-row::after{display:none!important}
.ios-preview .ios-library-row>*{position:relative;grid-column:auto!important;grid-row:1!important;align-self:center;z-index:1}
.ios-preview .ios-library-row>img{display:block;width:52px!important;height:78px!important;object-fit:cover;border-radius:8px!important;flex:none}
.ios-preview .ios-rank{display:grid;place-items:center;min-width:34px;width:auto;min-height:36px;padding:0 8px;border-radius:10px;background:#ffffff13;font-size:12px!important;line-height:1.2;font-weight:600;font-variant-numeric:tabular-nums}
.ios-preview .ios-row-copy{min-width:0;padding:0!important}
.ios-preview .ios-row-copy>b{display:block;font-size:14px!important;font-weight:600;line-height:1.22;overflow-wrap:break-word}
.ios-preview .ios-row-copy>small{display:block;margin:4px 0 0!important;color:var(--ios-secondary);font-size:12px!important;font-weight:400;line-height:1.25;overflow-wrap:break-word}
.ios-preview .ios-ranking-ring{position:relative!important;display:grid!important;place-items:center;width:42.4px!important;height:42.4px!important;margin:0!important;padding:2px!important;background:none!important;color:#30d158;font-variant-numeric:tabular-nums}
.ios-ranking-ring svg{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);fill:none;stroke:currentColor;stroke-width:3;transform:rotate(-90deg)}
.ios-ranking-ring .ios-ring-track{opacity:.17}
.ios-ranking-ring .ios-ring-fill{stroke-linecap:round}
.ios-preview .ios-ranking-ring>span{font-size:12.8px;font-weight:700;line-height:1}
.ios-preview .ios-ranking-ring.score-fine{color:#ff9f0a}
.ios-preview .ios-ranking-ring.score-bad{color:#ff453a}
.ios-preview .ios-saved-row{grid-template-columns:52px minmax(0,1fr) 41px 41px;gap:12px 6px!important}
.ios-preview .ios-saved-row>.ios-row-copy{padding-left:6px!important}
.ios-save-action{display:grid;place-items:center;min-height:44px;width:41px}
.ios-save-action svg{width:20px;height:20px}
.ios-tabbar{position:absolute;z-index:4;left:16px;right:16px;bottom:28px;height:64px;padding:4px;display:flex;align-items:stretch;gap:0;border-radius:36px;border:1px solid #ffffff25;background:#252525c9;-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);box-shadow:inset 0 1px 1px #ffffff30,0 5px 18px #0003}
.ios-tabbar>a{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:29px;font-size:10px;font-weight:600;color:#f5f5f5;line-height:13px}
.ios-tabbar>a>svg{width:28px;height:28px;stroke-width:1.8}
.ios-tabbar>a.ios-tab-selected{background:#ffffff1f;color:var(--ios-accent)}
.ios-plus{display:grid;place-items:center;background:#c55300;color:white;width:30px;height:30px;border-radius:50%}
.ios-plus svg{width:24px;height:24px;stroke-width:2.8}
.ios-home-indicator{position:absolute;z-index:5;width:134px;height:5px;bottom:8px;left:50%;transform:translateX(-50%);background:#fff;border-radius:3px}
.ios-duel-content{padding:0 16px}
.ios-detail-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:44px;margin:14px 0 28px}
.ios-detail-nav>a:first-child{display:inline-flex;align-items:center;gap:4px;min-height:44px;font-size:16px;color:var(--ios-accent)}
.ios-duel-step h2{font-size:22.4px;line-height:1.2;font-weight:700;letter-spacing:-.02em;margin:0 0 12px}
.ios-duel-step .duel-wrap{position:relative}
.ios-duel-step .duel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-top:18px}
.ios-duel-step .contender{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:16px 10px 14px;border-radius:16px;background:#2c2c2e;color:#fff}
.ios-duel-step .contender .thumb{display:block;width:96px;height:144px;flex:none;overflow:hidden;border-radius:6px;background:#2c2c2e}
.ios-duel-step .contender img{display:block;width:100%;height:100%;object-fit:cover}
.ios-duel-step .contender .row-main{display:flex;flex-direction:column;gap:4px;align-items:center;min-width:0;width:100%}
.ios-duel-step .contender .row-title{display:block;font-size:12px;line-height:1.3;font-weight:600}
.ios-duel-step .contender .row-byline{display:block;color:var(--ios-secondary);font-size:10.4px;line-height:1.35}
.ios-duel-step .duel-vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:34px;height:34px;background:#2c2c2e;color:var(--ios-secondary);border-radius:50%;box-shadow:inset 0 0 0 1px #ffffff14,0 2px 8px #0003;font-size:8.8px;font-weight:700;pointer-events:none}
.ios-duel-step .btn-plain{display:block;margin:14px auto 0;min-height:44px;background:none;color:var(--ios-secondary);font-size:11.2px;font-weight:500;padding:0 12px}
.ios-duel-step .contender[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--ios-accent)}
.ios-duel-step .contender[aria-pressed=true]~.contender{opacity:.7}
.ios-demo-reset{margin-top:24px;text-align:center;color:var(--ios-secondary)}
.ios-demo-reset .phone-choice,.ios-demo-reset .reset-matchup{font-size:11px;line-height:1.5}
.ios-demo-reset .reset-matchup{background:none;border:0;min-height:44px;color:var(--ios-accent);padding:0 12px}
.stage-side:has(.ios-preview){opacity:1}
@media(hover:hover){.ios-preview a:hover,.ios-duel-step .btn-plain:hover{filter:brightness(1.15)}.ios-duel-step .contender:hover{box-shadow:inset 0 0 0 2px var(--ios-accent)}}
@media(prefers-reduced-transparency:reduce){.ios-tabbar{background:#252525;-webkit-backdrop-filter:none;backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){.ios-preview *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Studio framing keeps the native screens sharp and their complete docks visible. */
.device-stage:has(.ios-preview){perspective:1500px;isolation:isolate;height:690px;gap:12px}
.device-stage:has(.ios-preview)::after{display:none}
.device:has(.ios-preview){background:linear-gradient(110deg,#636367,#161618 18%,#080809 75%,#5f6065);border-color:#3c3c40;box-shadow:0 0 0 1px #aaa,0 0 0 3px #29292d,14px 20px 35px #0000001a,0 45px 65px #00000018}
.stage-left:has(.ios-preview){transform:translate(15px,20px) rotate(-9deg) rotateY(8deg)}
.stage-right:has(.ios-preview){transform:translate(-15px,20px) rotate(9deg) rotateY(-8deg)}
.stage-center:has(.ios-preview){transform:translateY(-8px);z-index:3}
@media(max-width:700px){.device-stage:has(.ios-preview){height:680px;margin-bottom:-143px}.stage-left:has(.ios-preview){transform:translate(25px,22px) rotate(-10deg)}.stage-right:has(.ios-preview){transform:translate(-25px,22px) rotate(10deg)}}

/* WebKit clips the blurred artwork at the same rounded mask as SwiftUI. */
.ios-preview .ios-library-row{clip-path:inset(0 round 16px)}