/* Landing page — sits on top of projects/appstore.css */
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: #fff; padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }

/* ---------- Hero ---------- */
.hero { min-height: calc(100svh - 53px); padding-block: 24px 48px; display: grid; place-items: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero-text { display: grid; justify-items: center; gap: 10px; max-width: 880px; }
.hero .eyebrow { margin: 0; }
.hero-title { font-size: clamp(2.75rem, 6.2vw, 4.75rem); line-height: 1; font-weight: 600; letter-spacing: -0.03em; margin: 0; }
.hero-tagline { font-size: clamp(1.125rem, 1.8vw, 1.3125rem); line-height: 1.4; letter-spacing: -0.016em; color: var(--text-2); margin: 4px 0 0; max-width: 40em; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }

/* ---------- Stage: iPhone Duo (3D, duo3d.js) ---------- */
.stage { position: relative; width: 100%; display: grid; justify-items: center; }
.duo { position: relative; width: 100%; height: calc(100svh - 53px - 72px); min-height: 360px; }
/* Narrow or portrait screens: the Duo is width-limited, so size the box to the model (19:13.5 framing) instead of the viewport height */
@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  .hero { min-height: 0; padding-block: 16px 8px; }
  .duo { height: auto; min-height: 0; aspect-ratio: 19 / 13.5; max-height: calc(100svh - 53px - 72px); }
}
@media (max-width: 700px) { .duo { aspect-ratio: 16.8 / 12.6; } }
.duo-canvas { position: absolute; inset: 0; cursor: pointer; opacity: 0; transition: opacity 500ms ease; }
.duo.is-ready .duo-canvas { opacity: 1; }
.duo-canvas canvas { display: block; width: 100% !important; height: 100% !important; }
.duo-fallback { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.duo.is-fallback .duo-fallback { display: block; }
/* invisible HTML copy of the screen, positioned by duo3d.js over the flat inner screen */
.hit { position: absolute; opacity: 0; pointer-events: none; }
.hit .art { position: absolute; inset: 0; container-type: size; }
.duo.is-open .hit { pointer-events: auto; }
.duo.is-fallback .hit { display: none; }

/* ---------- Screen UI: home screen (inner) — sizes in cqw of the screen ---------- */
.ui { position: absolute; inset: 0; text-align: left; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; color: #fff; letter-spacing: -0.01em; }
.ui .status { position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 5.4cqh; display: flex; justify-content: space-between; align-items: center; padding: 0 3.4cqw; font-size: 1.5cqw; font-weight: 600; }
.ui .status .ic { display: flex; gap: 0.6cqw; align-items: center; }
.ui .bars { display: flex; gap: 0.18cqw; align-items: flex-end; height: 1.05cqw; }
.ui .bars i { width: 0.28cqw; background: currentColor; border-radius: 0.1cqw; }
.ui .bars i:nth-child(1) { height: 40%; } .ui .bars i:nth-child(2) { height: 60%; } .ui .bars i:nth-child(3) { height: 80%; } .ui .bars i:nth-child(4) { height: 100%; }
.ui .batt { width: 2.2cqw; height: 1.05cqw; border-radius: 0.3cqw; border: 0.12cqw solid currentColor; padding: 0.12cqw; opacity: 0.9; }
.ui .batt::before { content: ""; display: block; height: 100%; width: 80%; background: currentColor; border-radius: 0.15cqw; }

.ui-home { background: #b9b1a3 url("assets/device/duo-wallpaper.jpg") center / cover no-repeat; }

/* Layout follows Apple's iPhone Duo home screen: tall Photos widget (left), two widgets + 4-col icon grid (right half,
   which is also what the folded cover screen shows), slim dock on the right edge. Canvas is 1600x1125: 1cqw=16px, 1cqh=11.25px. */
.ui .photo-w { position: absolute; left: 5cqw; top: 11cqh; width: 37cqw; height: 78cqh; margin: 0; border-radius: 2.8cqw; overflow: hidden; box-shadow: 0 0.6cqw 2.4cqw rgba(40,30,90,0.25); }
.ui .photo-w img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ui .photo-w::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(0,0,0,0.55)); }
.ui .photo-w figcaption { position: absolute; left: 2.2cqw; right: 2.2cqw; bottom: 2cqw; z-index: 1; color: #fff; display: grid; gap: 0.5cqw; }
.ui .photo-w .pt { font-size: 2.3cqw; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.ui .photo-w .ps { font-size: 1.15cqw; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; }

.ui .wgs { position: absolute; left: 52.5cqw; top: 13cqh; width: 36.4cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; }
.ui .wg { height: 25cqh; border-radius: 2.6cqw; padding: 1.9cqw 2cqw; display: grid; align-content: start; gap: 0.3cqw; box-shadow: 0 0.5cqw 1.8cqw rgba(40,30,90,0.18); }
.ui .wg span { display: block; line-height: 1.1; }
.ui .wg-proj { background: linear-gradient(180deg, #3d84dc, #2163c4); color: #fff; }
.ui .wg .wk { font-size: 1.5cqw; font-weight: 600; }
.ui .wg .wbig { font-size: 5.4cqw; font-weight: 300; letter-spacing: -0.03em; line-height: 1; }
.ui .wg .ws { font-size: 1.3cqw; font-weight: 500; opacity: 0.9; }
.ui .wg-note { background: #fff; color: #1d1d1f; padding: 0 2cqw; gap: 0.55cqw; overflow: hidden; }
.ui .wg-note .nh { display: block; height: 6.2cqh; margin: 0 -2cqw 1.2cqw; background: linear-gradient(180deg, #ffd65a, #f7bd1e); border-bottom: 0.25cqw dotted #d9d9de; }
.ui .wg-note .nt { font-size: 1.6cqw; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.2cqw; }
.ui .wg-note .ni { font-size: 1.3cqw; font-weight: 500; color: #8e8e93; }

/* Right half: icon grid (no labels, like the reference) */
.ui .apps-grid { position: absolute; left: 52.5cqw; top: 42cqh; width: 36.4cqw; display: grid; grid-template-columns: repeat(4, 1fr); row-gap: calc(13.5cqh - 6.8cqw); justify-items: center; }
.ui .app { display: grid; justify-items: center; gap: 1cqw; width: 6.8cqw; color: #fff; text-decoration: none; }
.ui .ai { width: 6.8cqw; height: 6.8cqw; border-radius: 1.55cqw; overflow: hidden; display: block; box-shadow: 0 0.3cqw 1cqw rgba(40,30,90,0.18); transition: transform 300ms var(--ease-out); }
.ui .ai img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ui .ph { display: grid; place-items: center; width: 100%; height: 100%; }
.ui .ph svg { width: 56%; height: 56%; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ui .al { display: none; font-size: 1.4cqw; font-weight: 500; line-height: 1.15; text-align: center; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0.1cqw 0.4cqw rgba(0,0,0,0.25); }
.ui a.app:hover .ai { transform: scale(1.06); }
.ui a.app:active .ai { transform: scale(0.94); transition-duration: 80ms; }
.ui .app.is-soon { cursor: default; }

/* Right edge: vertical dock */
.ui .dock { position: absolute; right: 1.6cqw; top: 31cqh; display: grid; gap: 1.3cqw; padding: 0.8cqw; border-radius: 3cqw;
  background: rgba(255,255,255,0.26); -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%);
  box-shadow: inset 0 0.1cqw 0 rgba(255,255,255,0.55), inset 0 0 0 0.08cqw rgba(255,255,255,0.3); }
.ui .dock-app { display: block; width: 5.6cqw; height: 5.6cqw; transition: transform 300ms var(--ease-out); }
.ui a.dock-app:hover { transform: scale(1.06); }
.ui a.dock-app:active { transform: scale(0.94); transition-duration: 80ms; }
.ui .di { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 1.3cqw; overflow: hidden; box-shadow: 0 0.3cqw 1cqw rgba(40,30,90,0.18); }
.ui .di svg { width: 62%; height: 62%; }
.ui .di-linkedin { background: #0a66c2; color: #fff; font: 700 2.9cqw/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; letter-spacing: -0.04em; }
.ui .di-github { background: #1d1d1f; }
.ui .di-mail { background: linear-gradient(180deg, #4fb4ff, #1a73ff); }
.ui .di-photos { background: #fff; }
.ui .di-photos svg { width: 78%; height: 78%; }
.ui .dock-app.is-soon { cursor: default; }

/* ---------- Screen UI: cover lock screen (outer) ---------- */
.ui-lock { color: #fff; text-align: center; background: #b9b1a3 url("assets/device/duo-wallpaper.jpg") 72% center / auto 100% no-repeat; }
.ui-lock .status { color: #fff; padding: 0 9cqw 0 7cqw; height: 7cqh; font-size: 3.2cqw; }
.ui-lock .status .bars { height: 2.4cqw; gap: 0.4cqw; } .ui-lock .status .bars i { width: 0.6cqw; }
.ui-lock .status .batt { width: 5cqw; height: 2.4cqw; border-width: 0.3cqw; padding: 0.3cqw; border-radius: 0.7cqw; }
.ui-lock .date { margin-top: 15cqh; font-size: 4.6cqw; font-weight: 600; opacity: 0.92; }
.ui-lock .time { font-size: 24cqw; line-height: 1; font-weight: 700; letter-spacing: -0.02em; margin-top: 0.5cqh; text-shadow: 0 0.4cqw 2cqw rgba(0,0,0,0.08); }
.ui-lock .notif { position: absolute; left: 5cqw; right: 5cqw; bottom: 8cqh; text-align: left; padding: 3.4cqw 4cqw; border-radius: 6cqw; color: #1d1d1f;
  background: rgba(255,255,255,0.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1cqw 4cqw rgba(0,0,0,0.12); }
.ui-lock .notif .app { display: flex; align-items: center; gap: 2cqw; font-size: 3.2cqw; font-weight: 600; color: #6e6e73; }
.ui-lock .notif .app i { width: 5cqw; height: 5cqw; border-radius: 1.3cqw; background: linear-gradient(#ffe066, #f4b400); display: block; }
.ui-lock .notif b { display: block; margin-top: 1.6cqw; font-size: 4.2cqw; font-weight: 600; }
.ui-lock .notif span { display: block; font-size: 3.6cqw; color: #3a3a3c; margin-top: 0.6cqw; line-height: 1.3; }

/* ---------- Work: grouped by tech ---------- */
.tech-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 44px; }
@media (max-width: 860px) { .tech-groups { grid-template-columns: 1fr; } }
.tech { background: #fff; border-radius: 22px; padding: 26px 26px 14px; scroll-margin-top: 80px; display: flex; flex-direction: column; }
.tech:target { box-shadow: 0 0 0 2px var(--blue); }
.tech-head { display: flex; gap: 14px; align-items: flex-start; }
.tech-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex: none; color: #fff; }
.tech-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tech-head h3 { font-size: 1.3125rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; margin: 2px 0 0; }
.tech-head p { margin: 4px 0 0; font-size: 0.9375rem; line-height: 1.45; color: var(--text-2); }
.apps { list-style: none; margin: 18px 0 0; padding: 0; }
.app-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--hair-soft); color: var(--text); }
.app-row:hover { text-decoration: none; }
.app-row img { width: 56px; height: 56px; border-radius: 12.5px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.06); }
.app-row .row-ph { width: 56px; height: 56px; border-radius: 12.5px; display: grid; place-items: center; }
.app-row .row-ph svg { width: 56%; height: 56%; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.app-row b { display: block; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; }
.app-row .sub { display: block; font-size: 0.875rem; color: var(--text-2); line-height: 1.35; }
.app-row .plat { display: block; font-size: 0.75rem; color: var(--text-3); margin-top: 2px; }
.app-row:hover .btn-get { background: rgba(0,0,0,0.08); }
.empty { padding: 16px 0 12px; border-top: 1px solid var(--hair-soft); font-size: 0.9375rem; color: var(--text-3); margin-top: 18px; }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }
.contact-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 14px; align-items: center; padding: 16px 20px; color: var(--text); }
.contact-row:hover { text-decoration: none; background: rgba(0,0,0,0.03); }
.contact-row b { display: block; font-weight: 600; }
.contact-row .grow span { font-size: 0.875rem; color: var(--text-2); }
.c-ic { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; }
.c-ic svg { width: 22px; height: 22px; }
.chev { color: var(--text-3); width: 14px; height: 14px; stroke-width: 2.6; }


/* Hero background */
.hero { background: #fff; }

/* =========================================================
   Projects panel (after mirellesine.com): home-screen iPhone + App Store list
   ========================================================= */
.projects-panel { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: clamp(32px, 7vw, 110px); align-items: center; }
.projects-panel > * { min-width: 0; }
#work { overflow-x: clip; } /* the halo glow is wider than a phone screen */
@media (max-width: 900px) { .projects-panel { grid-template-columns: minmax(0, 1fr); } .apps-stage { order: 2; } }
.apps-stage { position: relative; display: grid; justify-items: center; }
.apps-stage .hint { margin: 18px 0 0; font-size: 0.8125rem; color: var(--text-3); }
.homephone { width: min(100%, 360px); }
/* Apple Intelligence–style glow behind the phone */
.halo { position: absolute; z-index: 0; top: 4%; bottom: 10%; left: 50%; width: min(115%, 470px); transform: translateX(-50%); border-radius: 30%;
  background: conic-gradient(from var(--a, 0deg), #ff7ab6, #ffb347, #ffe066, #7ad8ff, #8f7bff, #ff7ab6);
  filter: blur(60px); opacity: 0.45; animation: halo 12s linear infinite; }
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes halo { to { --a: 360deg; } }
@media (prefers-reduced-motion: reduce) { .halo { animation: none; } }
.homephone { position: relative; z-index: 1; }

/* Home screen, sized in container units of the screen */
.hs { position: absolute; inset: 0; container-type: size; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; letter-spacing: -0.01em;
  background: #b9b1a3 url("assets/device/duo-wallpaper.jpg") 62% center / auto 100% no-repeat;
  padding: 15cqw 6.5cqw 0; display: flex; flex-direction: column; gap: 4.4cqw; }
.hs::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.15)); pointer-events: none; }
.hs > * { position: relative; }
.hs a, .hs a:hover { color: inherit; text-decoration: none; }
.hs .sbar { position: absolute; top: 4.6cqw; left: 10cqw; right: 8cqw; display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 4.2cqw; }
.hs .sbar-i { display: flex; gap: 1.6cqw; align-items: center; }
.hs .bars { display: flex; gap: 0.5cqw; align-items: flex-end; height: 3cqw; }
.hs .bars i { width: 0.8cqw; background: #fff; border-radius: 0.3cqw; }
.hs .bars i:nth-child(1) { height: 40%; } .hs .bars i:nth-child(2) { height: 60%; } .hs .bars i:nth-child(3) { height: 80%; } .hs .bars i:nth-child(4) { height: 100%; }
.hs .batt { width: 6.4cqw; height: 3cqw; border: 0.35cqw solid rgba(255,255,255,.9); border-radius: 0.9cqw; padding: 0.35cqw; }
.hs .batt::before { content: ""; display: block; height: 100%; width: 80%; background: #fff; border-radius: 0.4cqw; }
.hs .widgets { display: grid; grid-template-columns: 1fr 1fr; gap: 6cqw; }
.hs .wslot { display: grid; justify-items: center; gap: 1.6cqw; }
.hs .wslot.wide { margin-top: auto; }
.hs .wlabel { font-size: 3cqw; font-weight: 500; text-shadow: 0 0.2cqw 0.8cqw rgba(0,0,0,0.3); }
.hs .widget { width: 100%; aspect-ratio: 1; border-radius: 6.5cqw; padding: 4cqw; display: flex; flex-direction: column; box-shadow: 0 1cqw 3cqw rgba(0,0,0,0.15); }
.hs .w-tech { background: linear-gradient(180deg, #fff8c4, #ffef8f); color: #1d1d1f; gap: 1.6cqw; }
.hs .w-tech .wk { font-size: 3.2cqw; font-weight: 700; color: #8a6d00; margin-bottom: 0.8cqw; }
.hs .w-tech .wl { display: flex; align-items: center; gap: 1.8cqw; font-size: 3.2cqw; font-weight: 600; line-height: 1.15; }
.hs .w-tech .wl i { width: 2cqw; height: 2cqw; border-radius: 50%; flex: none; }
.hs .w-glass { background: rgba(255,255,255,0.22); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); box-shadow: inset 0 0.2cqw 0 rgba(255,255,255,0.5), inset 0 0 0 0.2cqw rgba(255,255,255,0.25); }
.hs .w-glass .wk { font-size: 3.4cqw; font-weight: 600; opacity: 0.9; }
.hs .w-glass .wbig { margin-top: auto; font-size: 13cqw; font-weight: 700; line-height: 1; letter-spacing: -0.04em; background: linear-gradient(90deg, #ffe066, #ff8fb1); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hs .w-glass .wv { font-size: 3.6cqw; font-weight: 600; margin-top: 0.8cqw; }
.hs .w-glass .ws { font-size: 2.8cqw; opacity: 0.85; }
.hs .grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 4.4cqw; }
.hs-app { display: grid; justify-items: center; gap: 1.4cqw; }
.hs .aicon { width: 15.5cqw; height: 15.5cqw; border-radius: 3.6cqw; overflow: hidden; display: grid; place-items: center; box-shadow: 0 0.8cqw 2cqw rgba(0,0,0,0.18); transition: transform 300ms var(--ease-out); }
.hs .aicon img { width: 100%; height: 100%; object-fit: cover; }
.hs .aicon svg, .applist .aicon svg { width: 56%; height: 56%; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hs .lbl { font-size: 2.8cqw; font-weight: 500; max-width: 20cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0.2cqw 0.8cqw rgba(0,0,0,0.35); }
.hs a.hs-app:hover .aicon { transform: scale(1.06); }
.hs a.hs-app:active .aicon { transform: scale(0.94); transition-duration: 80ms; }
.hs .w-code { aspect-ratio: auto; background: rgba(28,28,30,0.88); color: #f5f5f7; padding: 4cqw 5cqw; }
.hs .w-code .file { display: flex; align-items: center; gap: 1.6cqw; font-size: 2.8cqw; color: #a1a1a6; font-weight: 600; }
.hs .w-code .file::before { content: ""; width: 2.4cqw; height: 2.4cqw; border-radius: 0.6cqw; background: #f05138; }
.hs .w-code pre { margin: 2.4cqw 0 0; font: 3.1cqw/1.55 ui-monospace, "SF Mono", Menlo, monospace; white-space: pre; }
.hs .w-code .k { color: #ff7ab2; } .hs .w-code .t { color: #dabaff; } .hs .w-code .m { color: #67b7a4; }
.hs .dock { display: flex; justify-content: space-around; padding: 3.4cqw 4cqw; margin: 1cqw -1cqw 0; border-radius: 9cqw;
  background: rgba(255,255,255,0.24); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); box-shadow: inset 0 0.2cqw 0 rgba(255,255,255,0.5); }
.hs .dock > * { width: 15.5cqw; height: 15.5cqw; display: block; }
.hs .dock .di { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 3.6cqw; overflow: hidden; }
.hs .dock .di svg { width: 62%; height: 62%; }
.hs .dock .di-linkedin { background: #0a66c2; color: #fff; font: 700 7.6cqw/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; letter-spacing: -0.04em; }
.hs .dock .di-github { background: #1d1d1f; }
.hs .dock .di-mail { background: linear-gradient(180deg, #4fb4ff, #1a73ff); }
.hs .dock .di-photos { background: #fff; }
.hs .dock .di-photos svg { width: 78%; height: 78%; }
.hs .hbar { display: block; width: 36cqw; height: 1.4cqw; border-radius: 1cqw; background: rgba(255,255,255,0.85); margin: 2.4cqw auto 2.6cqw; }
.hs .is-soon { cursor: default; }

/* Right side */
.apps-side .eyebrow { margin-bottom: 4px; }
.apps-side .lede { color: var(--text); margin-top: 14px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.filters button { height: 32px; padding: 0 14px; border-radius: 980px; font-size: 0.875rem; background: var(--band); color: var(--text); transition: background-color 150ms ease, color 150ms ease; }
.filters button:hover { background: #ebebef; }
.filters button[aria-selected="true"] { background: var(--text); color: #fff; }
.pager-wrap { margin-top: 18px; }
.pages { overflow: hidden; touch-action: pan-y; }
.track { display: flex; transition: transform 500ms var(--ease-out); }
.applist { list-style: none; margin: 0; padding: 0; flex: 0 0 100%; min-width: 0; }
.applist .row { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center; padding: 12px 0; color: var(--text); position: relative; }
.applist .row:hover { text-decoration: none; }
.applist li + li .row::before { content: ""; position: absolute; top: 0; left: 80px; right: 0; height: 1px; background: var(--hair-soft); }
.applist .aicon.lg { width: 64px; height: 64px; border-radius: 14.3px; overflow: hidden; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 0 0 0.5px rgba(0,0,0,0.04); }
.applist .aicon.lg img { width: 100%; height: 100%; object-fit: cover; }
.applist .txt { min-width: 0; }
.applist .name { display: block; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; }
.applist .sub { display: block; font-size: 0.9375rem; color: var(--text-2); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.applist .plat { display: block; font-size: 0.75rem; color: var(--text-3); margin-top: 1px; }
.applist .get { height: 30px; padding: 0 18px; border-radius: 980px; display: inline-flex; align-items: center; font-size: 0.9375rem; font-weight: 600; color: var(--blue); background: var(--band); }
.applist a.row:hover .get { background: #e8e8ed; }
.applist .is-soon .get { color: var(--text-3); }
.applist .is-soon { cursor: default; }
.applist .none { padding: 18px 0; color: var(--text-3); }
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.pager .paddle { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--band); color: var(--text-2); transition: opacity 150ms ease; }
.pager .paddle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pager .paddle:disabled { opacity: 0.35; cursor: default; }
.dots { display: flex; gap: 8px; }
.dots button { width: 8px; height: 8px; border-radius: 50%; padding: 0; background: #d2d2d7; }
.dots button[aria-current="true"] { background: var(--blue); }

/* ---------- Expertise ---------- */
.center { text-align: center; }
.expertise { margin-top: 36px; display: grid; justify-items: center; gap: 28px; }
.seg { position: relative; display: inline-flex; padding: 4px; border-radius: 980px; background: #e8e8ed; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { position: relative; z-index: 1; height: 36px; padding: 0 18px; border-radius: 980px; font-size: 0.9375rem; color: var(--text-2); white-space: nowrap; transition: color 200ms ease; }
.seg button[aria-selected="true"] { color: var(--text); font-weight: 600; }
.seg-thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; border-radius: 980px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 0 0 0.5px rgba(0,0,0,0.04); transition: transform 420ms var(--ease-out), width 420ms var(--ease-out); }
.exp-panel { max-width: 860px; }
.exp-panel .chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.exp-panel .chip { padding: 9px 18px; border-radius: 980px; background: #fff; font-size: 0.9375rem; color: var(--text); box-shadow: 0 0 0 1px rgba(0,0,0,0.04); }
.exp-note { margin: 22px auto 0; max-width: 40em; font-size: 0.9375rem; line-height: 1.5; color: var(--text-2); }
.exp-panel.in .chip { animation: chip-in 420ms var(--ease-out) both; }
.exp-panel.in .chip:nth-child(n) { animation-delay: calc(var(--d, 0) * 1ms); }
@keyframes chip-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .exp-panel.in .chip { animation: none; } .seg-thumb { transition: none; } }

/* Same rotating glow as the projects iPhone, behind the open Duo (wide, landscape) */
.duo-halo { top: 6%; bottom: 6%; width: min(76%, 1060px); border-radius: 30%; filter: blur(70px); pointer-events: none;
  opacity: 0; transform: translateX(-50%) scale(0.82); transition: opacity 1400ms ease, transform 1600ms cubic-bezier(0.22, 1, 0.36, 1); }
/* bloom in only once the Duo has fully opened */
.duo.is-open .duo-halo, .duo.is-fallback .duo-halo { opacity: 0.55; transform: translateX(-50%) scale(1); }
.duo .duo-canvas, .duo .duo-fallback, .duo .hit { z-index: 1; }