/* scrmvv Mobile OS — isolated progressive enhancement; desktop styles untouched. */
.mobile-os {display:none}
/* The compact cookie notification is hidden on desktop, which keeps the original notice. */
.cookie-note .mobile-cookie-content {display:none}
@media (max-width:820px) {
  body.mobile-os-mode {height:100dvh;min-height:100dvh;padding-top:0;overflow:hidden;overscroll-behavior:none}
  body.mobile-os-mode > .site-header,
  body.mobile-os-mode > main,
  body.mobile-os-mode > .site-footer {display:none!important}
  /* Compact heads-up notification above the launcher (only on phones). */
  body.mobile-os-mode .cookie-note {
    box-sizing:border-box;z-index:1800;
    top:calc(89px + env(safe-area-inset-top,0px));
    bottom:auto;left:14px;right:14px;width:auto;max-width:430px;margin-inline:auto;
    display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:5px 9px;
    padding:12px 13px 11px;border-radius:17px;
    border:1px solid rgba(192,180,255,.36);
    background:linear-gradient(125deg,rgba(38,36,93,.86),rgba(18,18,51,.94) 67%,rgba(13,13,40,.96));
    box-shadow:inset 0 1px 0 rgba(250,247,255,.2),0 14px 42px rgba(1,2,18,.5),0 0 35px rgba(126,99,235,.1);
    -webkit-backdrop-filter:blur(26px) saturate(155%);backdrop-filter:blur(26px) saturate(155%);
    animation:mobile-cookie-enter .36s cubic-bezier(.16,.9,.2,1) both;
  }
  body.mobile-os-mode .cookie-note[hidden] {display:none!important}
  body.mobile-os-mode .cookie-note > p {display:none}
  body.mobile-os-mode .cookie-note .mobile-cookie-content {grid-column:1/-1;display:grid;grid-template-columns:31px minmax(0,1fr);align-items:start;gap:10px;min-width:0}
  body.mobile-os-mode .cookie-note .mobile-cookie-icon {display:grid;place-items:center;width:31px;height:31px;border:1px solid rgba(183,167,255,.32);border-radius:11px;background:linear-gradient(145deg,rgba(138,113,246,.26),rgba(80,68,171,.14));color:#c7baff;box-shadow:inset 0 1px rgba(255,255,255,.13)}
  body.mobile-os-mode .cookie-note .mobile-cookie-icon svg {width:18px;height:18px;display:block}
  body.mobile-os-mode .cookie-note .mobile-cookie-copy {display:block;min-width:0}
  body.mobile-os-mode .cookie-note .mobile-cookie-title {display:block;margin:1px 0 3px;color:#f1ecff;font-size:12px;font-weight:650;line-height:1.25;letter-spacing:.012em}
  body.mobile-os-mode .cookie-note .mobile-cookie-copy p {margin:0;color:#bfc0e1;font-size:11px;line-height:1.42}
  body.mobile-os-mode .cookie-note .mobile-cookie-copy a {color:#d9d0ff;text-decoration:none;border-bottom:1px solid rgba(197,174,255,.48)}
  body.mobile-os-mode .cookie-note > div:not(.mobile-cookie-content) {grid-column:2;display:flex;justify-content:flex-end;align-items:center;gap:0;margin-top:1px}
  body.mobile-os-mode .cookie-note #cookieAccept {min-width:84px;min-height:29px;padding:0 13px;border-radius:9px;border:1px solid rgba(181,164,255,.43);background:linear-gradient(145deg,rgba(115,96,210,.38),rgba(67,53,148,.45));box-shadow:inset 0 1px rgba(255,255,255,.14);color:#f4f1ff;font:600 11px var(--font-ui,sans-serif);text-transform:none;letter-spacing:0}
  body.mobile-os-mode .cookie-note #cookieAccept:active {transform:scale(.97)}
  @keyframes mobile-cookie-enter {from {opacity:0;transform:translateY(-12px) scale(.97)}to {opacity:1;transform:translateY(0) scale(1)}}
  @media (prefers-reduced-motion:reduce) {body.mobile-os-mode .cookie-note {animation:none}}

  body.mobile-os-mode .lightbox {z-index:2100}
  .mobile-os {--mob-text:#e6e7ff;--mob-muted:#a7aaca;position:fixed;z-index:100;inset:0;display:block;overflow:hidden;background:radial-gradient(ellipse at 64% 22%,#222052 0%,#0d0e2a 46%,#070818 100%);color:var(--mob-text);isolation:isolate}
  .mobile-os *, .mobile-os *::before, .mobile-os *::after {box-sizing:border-box}
  .mobile-os button {color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .mobile-os button:focus-visible {outline:2px solid #b4aaff;outline-offset:3px}
  .mobile-os button svg {display:block;width:22px;height:22px}
  .mobile-os-wallpaper {position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none;background:linear-gradient(165deg,transparent 24%,rgba(115,78,203,.08) 62%,rgba(15,7,37,.6)),repeating-linear-gradient(0deg,transparent 0 70px,rgba(159,145,246,.022) 71px),repeating-linear-gradient(90deg,transparent 0 70px,rgba(159,145,246,.022) 71px)}
  .mobile-os-wallpaper::before {content:"";position:absolute;top:20%;right:-43%;width:126%;aspect-ratio:1;border:1px solid rgba(189,146,255,.23);border-radius:50%;transform:rotate(-22deg);background:radial-gradient(ellipse at 24% 18%,rgba(116,108,243,.18),transparent 44%);box-shadow:inset 36px 28px 85px rgba(107,65,213,.17),-23px -18px 70px rgba(120,97,251,.05)}
  .mobile-os-wallpaper::after {content:"";position:absolute;left:-29%;top:53%;width:148%;height:1px;background:linear-gradient(90deg,transparent,#7772df 46%,#a152bd 70%,transparent);transform:rotate(-21deg);opacity:.48;box-shadow:0 0 22px #7a6fdb}
  .mobile-planet {position:absolute;top:27%;right:-68%;width:143%;aspect-ratio:1;border-radius:50%;background:radial-gradient(ellipse at 28% 10%,rgba(109,105,217,.22),rgba(33,33,96,.25) 47%,rgba(9,9,28,.08) 76%),repeating-linear-gradient(177deg,rgba(148,127,223,.025) 0 3px,transparent 4px 22px);box-shadow:-19px -21px 46px -32px #a0a7ff,inset 16px 8px 90px rgba(132,97,235,.06)}
  .mobile-glass {background:linear-gradient(140deg,rgba(187,182,255,.15),rgba(80,74,154,.14) 38%,rgba(42,39,95,.36) 90%);backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);border:1px solid rgba(199,191,255,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.19),inset 0 -1px 1px rgba(99,72,161,.19),0 14px 40px rgba(3,4,20,.22)}
  .mobile-status {position:absolute;z-index:9;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:calc(21px + env(safe-area-inset-top,0px)) 24px 10px;pointer-events:none}
  .mobile-status-brand {display:flex;flex-direction:column;gap:3px;letter-spacing:.065em;line-height:1.2}
  .mobile-status-brand b {font-size:15px;font-weight:640;letter-spacing:.025em}
  .mobile-status-brand span {color:#9198c8;font:10px var(--font-mono,monospace)}
  .mobile-status-right {display:flex;align-items:center;gap:10px;font:11px var(--font-mono,monospace);pointer-events:auto}
  .mobile-time {font-variant-numeric:tabular-nums;color:#c2c6eb}
  .mobile-lang-toggle {border-radius:10px;padding:8px 10px;font-weight:600;font-size:10px;min-width:42px}
  .mobile-home-screen {position:absolute;inset:0;display:flex;flex-direction:column;padding:calc(112px + env(safe-area-inset-top,0px)) 22px calc(111px + env(safe-area-inset-bottom,0px));transition:opacity .24s ease,transform .24s ease}
  .mobile-home-message {align-self:flex-start;margin-top:clamp(34px,12svh,115px);font:11px/1.6 var(--font-mono,monospace);letter-spacing:.12em;color:#d9d5ff;text-shadow:0 0 14px rgba(131,123,221,.24)}
  .mobile-home-line {display:block;width:25px;height:1px;background:rgba(217,199,255,.68);margin-top:14px}
  .mobile-home-bottom {margin-top:auto;margin-bottom:clamp(1px,3svh,25px)}
  .mobile-launcher-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(13px,3svh,27px) 13px;max-width:350px;margin:0 auto}
  .mobile-launcher-item {display:flex;flex-direction:column;align-items:center;gap:8px;padding:0;border:0;background:transparent;min-width:0;color:#d4d2ef}
  .mobile-app-icon {position:relative;display:grid;place-items:center;width:53px;height:53px;border-radius:16px;border:1px solid rgba(200,182,255,.27);background:linear-gradient(145deg,rgba(113,99,209,.27),rgba(38,36,95,.48));backdrop-filter:blur(12px) saturate(145%);-webkit-backdrop-filter:blur(12px) saturate(145%);box-shadow:inset 0 1px rgba(250,250,255,.19),0 7px 19px rgba(0,0,0,.2);color:#c6baff;transition:transform .18s ease,background .18s ease}
  .mobile-launcher-item:active .mobile-app-icon {transform:scale(.91)}
  .mobile-icon-portfolio {color:#dcd3ff;border-color:rgba(191,172,255,.55);background:linear-gradient(140deg,rgba(145,112,239,.5),rgba(54,43,139,.66));box-shadow:inset 0 1px rgba(255,255,255,.3),0 0 22px rgba(135,98,245,.15)}
  /* Each app keeps the same dimensions, but has its own restrained tint. */
  .mobile-icon-home {color:#bfcbff;background:linear-gradient(145deg,rgba(114,136,211,.27),rgba(35,43,105,.43))}
  .mobile-icon-about {color:#d7b9ff;background:linear-gradient(145deg,rgba(141,98,212,.27),rgba(56,37,118,.43))}
  .mobile-icon-portfolio {color:#e2d4ff}
  .mobile-icon-skills {color:#98dcff;background:linear-gradient(145deg,rgba(67,145,207,.27),rgba(33,60,118,.44))}
  .mobile-icon-highlights {color:#ffc9ad;background:linear-gradient(145deg,rgba(178,117,111,.24),rgba(83,43,92,.43))}
  .mobile-icon-photos {color:#dfb3fa;background:linear-gradient(145deg,rgba(140,96,198,.27),rgba(52,41,113,.43))}
  .mobile-icon-contact {color:#a4e6f0;background:linear-gradient(145deg,rgba(69,160,181,.23),rgba(31,76,107,.45))}
  /* Dock icon artwork inherits each app accent, without changing its glass. */
  .mobile-dock-item .mobile-app-icon {background:none}
  .mobile-launcher-item .mobile-app-icon svg {width:21px;height:21px}
  .mobile-dock-item .mobile-app-icon svg {width:21px;height:21px}

  .mobile-app-name {font-size:11px;line-height:1.2;max-width:100%;text-align:center;white-space:nowrap}
  .mobile-dock {position:absolute;z-index:12;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:11px;padding:0 22px calc(9px + env(safe-area-inset-bottom,0px))}
  .mobile-dock-items {width:min(100%,400px);display:grid;grid-template-columns:repeat(4,1fr);justify-items:center;align-items:center;gap:5px;padding:11px 8px;border-radius:27px}
  .mobile-dock-item {position:relative;display:grid;place-items:center;width:49px;height:49px;border-radius:15px;padding:0;transition:transform .18s ease,background .18s ease}
  .mobile-dock-item .mobile-app-icon {width:100%;height:100%;border:0;background:none;box-shadow:none;backdrop-filter:none}
  .mobile-dock-item.is-current {background:linear-gradient(145deg,rgba(146,118,243,.34),rgba(71,54,159,.32));border-color:rgba(215,201,255,.45)}
  .mobile-dock-item.is-current::after {content:"";position:absolute;bottom:3px;width:4px;height:4px;border-radius:50%;background:#d0baff;box-shadow:0 0 8px #c1a1ff}
  .mobile-gesture-bar {display:block;width:96px;height:4px;border-radius:999px;background:rgba(209,204,246,.7)}
  .mobile-os[data-active]:not([data-active="home"]) .mobile-home-screen {opacity:0;transform:scale(.96);pointer-events:none}
  .mobile-apps {position:absolute;inset:0;pointer-events:none}
  .mobile-os[data-active]:not([data-active="home"]) .mobile-apps {pointer-events:auto}
  .mobile-app-panel {position:absolute;z-index:5;top:calc(83px + env(safe-area-inset-top,0px));left:12px;right:12px;bottom:calc(112px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;min-height:0;overflow:hidden;border:1px solid rgba(200,190,255,.33);border-radius:23px;background:linear-gradient(170deg,rgba(21,22,58,.97),rgba(8,10,34,.995));box-shadow:0 24px 90px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.11);pointer-events:auto;animation:mobile-app-enter .28s cubic-bezier(.2,.82,.2,1) both}
  .mobile-app-panel[hidden] {display:none!important}
  @keyframes mobile-app-enter {from {opacity:0;transform:translateY(16px) scale(.965)} to {opacity:1;transform:translateY(0) scale(1)}}
  .mobile-app-header {position:relative;z-index:2;display:flex;align-items:center;gap:9px;min-height:48px;padding:0 12px;border:0;border-bottom:1px solid rgba(210,203,255,.16);border-radius:22px 22px 0 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.14);flex-shrink:0}
  .mobile-app-header-icon {color:#b2adf9}.mobile-app-header-icon svg {width:17px;height:17px}
  .mobile-app-title {margin:0;min-width:0;flex:1;font-size:12px;font-weight:550;line-height:1}
  .mobile-app-actions {display:flex;align-items:center;gap:4px}
  .mobile-app-actions button {display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:10px;background:transparent;color:#c5c5ed;font-size:22px;line-height:1}
  .mobile-app-actions button:active {background:rgba(196,171,255,.18)}
  .mobile-app-actions button svg {width:16px;height:16px}
  .mobile-app-body {position:relative;flex:1 1 0%;height:0;min-height:0;overflow-x:hidden;overflow-y:auto;overflow-anchor:none;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:rgba(146,130,231,.35) transparent}
  /* Reused full-page sections must not carry their desktop spacing into an app. */
  .mobile-app-body > .section {position:static;display:block;width:100%;max-width:100%;height:auto;min-height:0;margin:0;padding:0;scroll-margin:0;background:transparent}
  .mobile-app-body .section-grid {display:block;width:100%;height:auto;min-height:0;margin:0;padding:0;background:transparent}
  .mobile-app-body .section-heading {height:auto;min-height:0;margin:0;background:transparent}
  .mobile-app-body .photo-section {margin:0;background:transparent}
  .mobile-app-body .content-window {height:auto;min-height:0}
  .mobile-app-body .aero-window {margin:0;padding:0;min-height:0;max-width:none;border:0;border-radius:0;box-shadow:none;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
  .mobile-app-body .aero-window::before,.mobile-app-body .aero-window::after {display:none}
  .mobile-app-body .window-titlebar {display:none!important}
  .mobile-app-body .section-heading {padding:22px 18px 20px}
  .mobile-app-body .section-heading h2,.mobile-app-body .contact-body h2 {font-size:27px}
  .mobile-app-body .photo-section .section-heading.photo-heading {padding:0;margin-bottom:24px}
  .mobile-app-body .copy-column,.mobile-app-body .skill-explorer,.mobile-app-body .timeline,.mobile-app-body .photo-section {padding:21px 18px}
  .mobile-app-body .contact-body {padding:23px 18px}
  .mobile-app-body .contact-links {grid-template-columns:1fr 1fr}
  .mobile-app-body .photo-grid {grid-template-columns:1fr 1fr;grid-template-rows:none}
  .mobile-app-body .about-portfolio-teaser {margin-top:18px}
  .mobile-app-body .reveal {opacity:1;transform:none}
  .mobile-portfolio-intro {padding:22px 17px 13px}
  .mobile-section-caption {font:10px var(--font-mono,monospace);color:#a8a2ed}
  .mobile-portfolio-intro h3 {font-size:30px;line-height:1.15;margin:9px 0 8px;letter-spacing:-.04em}
  .mobile-portfolio-lead {color:#afb1d1;font-size:12px;line-height:1.5;margin:0}
  .mobile-portfolio-filters {display:flex;gap:6px;padding:2px 17px 12px;overflow-x:auto;scrollbar-width:none}
  .mobile-portfolio-filters::-webkit-scrollbar {display:none}
  .mobile-portfolio-filter {white-space:nowrap;border:1px solid rgba(200,188,255,.16);border-radius:9px;background:rgba(70,59,133,.15);min-height:30px;padding:0 11px;font-size:11px;color:#bdb9da}
  .mobile-portfolio-filter.active {background:linear-gradient(135deg,#6758cf,#4c3e9c);border-color:#9d8eff;color:#fff;box-shadow:0 0 18px rgba(116,99,249,.2)}
  .mobile-project-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0 15px 24px}
  .mobile-project-card {display:flex;flex-direction:column;min-width:0;overflow:hidden;padding:0;text-align:left;border:1px solid rgba(198,183,255,.16);border-radius:14px;background:linear-gradient(145deg,rgba(64,54,131,.23),rgba(18,19,47,.83));box-shadow:inset 0 1px rgba(255,255,255,.06);transition:transform .2s ease,border-color .2s ease}
  .mobile-project-card:active {transform:scale(.97);border-color:rgba(186,168,255,.6)}
  .mobile-project-cover {display:block;aspect-ratio:1.42;width:100%;background:linear-gradient(135deg,#322763,#12153a);overflow:hidden}
  .mobile-project-cover img {width:100%;height:100%;object-fit:cover;display:block}
  .mobile-project-meta {display:block;min-height:75px;padding:10px 10px 13px;position:relative}
  .mobile-project-type {display:block;margin-bottom:5px;color:#b8a8f3;font:9px var(--font-mono,monospace)}
  .mobile-project-meta strong {display:block;font-size:12px;font-weight:560;line-height:1.33;padding-right:15px}
  .mobile-project-arrow {position:absolute;right:7px;bottom:9px;color:#9fa2e5}
  .mobile-project-arrow svg {width:15px;height:15px}
  .mobile-project-detail {position:absolute;z-index:3;inset:0;overflow-y:auto;background:linear-gradient(160deg,#151536 0%,#0a0b25 100%);padding:18px 16px 26px;animation:mobile-app-enter .2s ease both}
  .mobile-detail-top {display:flex;align-items:center;justify-content:space-between;margin-bottom:21px;gap:8px}
  .mobile-detail-back {display:inline-flex;align-items:center;gap:4px;background:none;border:0;padding:5px 0;color:#bdb4ff;font-size:12px}
  .mobile-detail-back svg {width:16px;height:16px}
  .mobile-detail-year {color:#858bb7;font:10px var(--font-mono,monospace)}
  .mobile-detail-type {font:10px var(--font-mono,monospace);color:#a6a1ee}
  .mobile-detail-title {font-size:24px;line-height:1.17;letter-spacing:-.035em;margin:7px 0 17px}
  .mobile-detail-gallery {display:flex;gap:9px;overflow-x:auto;margin:0 0 18px;padding:0 0 9px;scroll-snap-type:x mandatory}
  .mobile-detail-image {flex:0 0 88%;aspect-ratio:1.6;scroll-snap-align:center;opacity:1;border-radius:11px}
  .mobile-detail-image img {width:100%;height:100%;object-fit:cover;opacity:1}
  .mobile-detail-description {font-size:13px;line-height:1.65;color:#c6c7dd;margin:0 0 17px}
  .mobile-detail-stack {display:flex;flex-wrap:wrap;gap:6px}
  .mobile-detail-chip {padding:6px 9px;border:1px solid rgba(193,185,242,.16);background:rgba(94,83,181,.13);border-radius:8px;font:10px var(--font-mono,monospace);color:#ced0f4}
  .mobile-detail-status {font-size:11px;color:#969aba;margin:17px 0 0}
  @media(max-height:700px) {
    .mobile-home-screen {padding-top:calc(90px + env(safe-area-inset-top,0px))}
    .mobile-home-message {margin-top:clamp(12px,5svh,35px)}
    .mobile-launcher-grid {gap:11px 10px}
    .mobile-app-icon {width:45px;height:45px;border-radius:14px}
    .mobile-app-name {font-size:10px}
    .mobile-app-panel {top:calc(70px + env(safe-area-inset-top,0px));bottom:calc(104px + env(safe-area-inset-bottom,0px))}
  }
  @media(max-width:350px) {
    .mobile-app-panel {left:7px;right:7px}
    .mobile-project-grid {gap:7px;padding-inline:10px}
    .mobile-project-meta strong {font-size:11px}
    .mobile-status {padding-inline:16px}
    .mobile-launcher-grid {gap:12px 3px}
  }
  @media(prefers-reduced-motion:reduce) {
    .mobile-app-panel,.mobile-project-detail {animation:none}
    .mobile-home-screen,.mobile-app-icon,.mobile-dock-item {transition:none}
  }
}

/* No fictitious screenshots for new cases; simple branded fallback. */
.mobile-project-cover:not(:has(img)){display:flex;align-items:end;padding:12px;box-sizing:border-box;background:radial-gradient(circle at 80% 10%,rgba(172,136,255,.34),transparent 75%),linear-gradient(135deg,#252761,#10132c)}
.mobile-project-cover:not(:has(img))::before{content:"DJANGO / WEB";color:#d1c5ff;font:700 10px var(--font-mono);letter-spacing:.06em}

/* v8 — project screenshots behave as a compact carousel, not giant tiles. */
@media(max-width:1050px){
  .mobile-detail-gallery {display:block;overflow:visible;margin:0 0 15px;padding:0;scroll-snap-type:none}
  .mobile-detail-stage {position:relative;display:block;min-height:0;aspect-ratio:16/10;overflow:hidden;border-radius:11px}
  .mobile-detail-main-image {min-height:0;width:100%;height:100%}
  .mobile-detail-main-image img {width:100%;height:100%;max-height:none;object-fit:contain;display:block}
  .mobile-detail-stage .media-nav {z-index:3;width:32px;height:37px;display:grid;place-items:center}
  .mobile-detail-stage .media-nav svg {width:16px;height:16px}
  .mobile-detail-thumbs {display:flex;gap:7px;overflow-x:auto;margin-top:9px;padding:2px 1px 6px;scrollbar-width:thin;scroll-snap-type:x proximity}
  .mobile-detail-thumb {flex:0 0 68px;width:68px;aspect-ratio:16/10;min-width:0;scroll-snap-align:start}
  .mobile-detail-thumb img {width:100%;height:100%;object-fit:cover;opacity:1;display:block}
  .mobile-detail-stage .media-counter {font-size:10px}
}

/* v11 hotfix — one vertical scroll area for the active portfolio project. */
@media (max-width:820px) {
  .mobile-app-body.mobile-showing-project > .mobile-portfolio-intro,
  .mobile-app-body.mobile-showing-project > .mobile-portfolio-filters,
  .mobile-app-body.mobile-showing-project > .mobile-project-grid {display:none!important}

  .mobile-app-body .mobile-project-detail {
    position:relative;
    inset:auto;
    width:100%;
    height:auto;
    min-height:100%;
    overflow:visible;
    overflow-y:visible;
    margin:0;
    padding:18px 16px 28px;
    background:linear-gradient(160deg,#151536 0%,#0a0b25 100%);
  }
  .mobile-project-detail .mobile-detail-stack {margin:0 0 2px}
  .mobile-project-detail .mobile-detail-actions {
    display:flex;
    margin:20px 0 0;
    padding:0;
    gap:0;
  }
  .mobile-project-detail .mobile-detail-actions > .aero-button {
    flex:1 1 auto;
    width:100%;
    min-width:0;
    justify-content:center;
  }
  .mobile-project-detail .mobile-detail-status {margin:19px 0 0}

  .mobile-detail-more {margin:30px 0 0;padding-top:20px;border-top:1px solid rgba(185,175,255,.18)}
  .mobile-detail-more-title {margin:0 0 14px;color:#e5e1ff;font-size:15px;font-weight:600;line-height:1.3}
  .mobile-detail-more-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .mobile-detail-more-card {display:flex;flex-direction:column;min-width:0;min-height:0;padding:0;overflow:hidden;
    border:1px solid rgba(198,183,255,.18);border-radius:13px;
    background:linear-gradient(145deg,rgba(64,54,131,.26),rgba(16,17,44,.86));
    text-align:left;transition:border-color .18s ease,transform .18s ease}
  .mobile-detail-more-card:active {transform:scale(.98);border-color:rgba(186,168,255,.6)}
  .mobile-detail-more-cover {display:grid;place-items:center;width:100%;aspect-ratio:1.55;overflow:hidden;background:linear-gradient(140deg,#292351,#131331);color:#b9abff;font:600 12px var(--font-mono,monospace)}
  .mobile-detail-more-cover img {width:100%;height:100%;object-fit:cover;display:block}
  .mobile-detail-more-caption {display:block;min-width:0;padding:10px 10px 12px}
  .mobile-detail-more-caption small {display:block;margin-bottom:5px;color:#b6aafa;font:9px var(--font-mono,monospace);line-height:1.3}
  .mobile-detail-more-caption strong {display:block;overflow-wrap:anywhere;font-size:12px;font-weight:550;line-height:1.35}

  /* The blurred overlay must be clipped to the same rounded mask as the teaser. */
  .mobile-app-body .about-portfolio-teaser {isolation:isolate;border-radius:12px;overflow:hidden;clip-path:inset(0 round 12px)}
  .mobile-app-body .about-portfolio-teaser::before {border-radius:inherit;clip-path:inset(0 round 11px)}
  .mobile-app-body .about-portfolio-teaser .teaser-window {border-radius:10px;overflow:hidden;clip-path:inset(0 round 10px)}
}
@media (max-width:350px) {
  .mobile-detail-more-grid {gap:7px}
  .mobile-detail-more-caption {padding:8px 8px 10px}
  .mobile-detail-more-caption strong {font-size:11px}
}