/* =========================================
   0. DESIGN TOKENS (The Single Source of Truth)
   ========================================= */

/* --- LIGHT MODE (DEFAULT) --- */
:root {
    /* Base & Surfaces (Warm off-whites) */
    --color-bg-base: #ffffff;         
    --color-bg-surface: #f9f8f6;      
    --color-bg-surface-hover: #f1efeb; 
    
    --color-nav-glass: rgba(249, 248, 246, 0.85); 
    --color-nav-glass-mobile: rgba(249, 248, 246, 0.95);
    
    /* Typography Scale (Dark Text) */
    --color-white: #111111;           
    --color-text-offwhite: #333333;   
    --color-text-grey-light: #444444; 
    --color-text-grey-mid: #555555;
    --color-text-grey: #666666;       
    --color-text-grey-dark: #767676;  
    
    /* Accessible Brand Accents */
    --color-accent: #d90429;          
    --color-success: #2b9348;         
    
    /* Alpha / Transparent Colors */
    --color-border-subtle: rgba(0, 0, 0, 0.08); 
    --color-border-solid: #d6d3cd;    
    --color-white-alpha-15: rgba(0, 0, 0, 0.15);
    --color-white-alpha-30: rgba(0, 0, 0, 0.3);
    --color-white-alpha-50: rgba(0, 0, 0, 0.5);
    --color-accent-alpha-05: rgba(217, 4, 41, 0.05);

    /* --- Typography Families --- */
    --font-family-base: "Inter Display", Inter, system-ui, sans-serif;
    
    /* --- Font Sizes --- */
    --font-size-11: 11px;
    --font-size-12: 12px;
    --font-size-14: 14px;
    --font-size-15: 15px;
    --font-size-16: 16px;
    --font-size-18: 18px;
    --font-size-20: 20px;
    --font-size-22: 22px;
    --font-size-24: 24px;
    --font-size-28: 28px;
    --font-size-32: 32px;
    --font-size-42: 42px;
    --font-size-48: 48px;
    --font-size-64: 64px;

    /* --- Font Weights --- */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;

    /* --- Line Heights --- */
    --line-height-heading: 1.2;
    --line-height-tight: 1.3;
    --line-height-snug: 1.4;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.6;
    --line-height-loose: 1.65;
    --line-height-editorial: 1.7;

    /* --- Letter Spacing --- */
    --letter-spacing-tighter: -0.02em;
    --letter-spacing-tight: -0.01em;
    --letter-spacing-normal: 0em;
    --letter-spacing-wide: 0.01em;
    --letter-spacing-wider: 0.02em;
    --letter-spacing-widest: 0.15em;
    --letter-spacing-caps: 0.2em;

    /* --- Opacity System --- */
    --opacity-full: 1;
    --opacity-high: 0.9;
    --opacity-med-high: 0.8;
    --opacity-med: 0.6;
    
    /* --- Absolute Spacing Scale (Pixels) --- */
    --spacing-1: 1px;
    --spacing-2: 2px;
    --spacing-4: 4px;
    --spacing-6: 6px;
    --spacing-8: 8px;
    --spacing-10: 10px;
    --spacing-12: 12px;
    --spacing-14: 14px;
    --spacing-16: 16px;
    --spacing-18: 18px;
    --spacing-20: 20px;
    --spacing-22: 22px;
    --spacing-24: 24px;
    --spacing-30: 30px;
    --spacing-32: 32px;
    --spacing-40: 40px;
    --spacing-48: 48px;
    --spacing-60: 60px;
    --spacing-64: 64px;
    --spacing-80: 80px;
    --spacing-100: 100px;
    --spacing-120: 120px;
    --spacing-140: 140px;
    --spacing-160: 160px;
    --spacing-240: 240px;

    /* --- Layout / Container Widths --- */
    --container-width-md: 600px;
    --container-width-lg: 680px;
    --container-width-hero: 800px;
    --container-width-xl: 1100px;

    /* --- Borders & Radii --- */
    --border-width-1: 1px;
    --border-width-2: 2px;
    --border-width-4: 4px;
    --border-radius-sm: 4px;
    --border-radius-md: 8px;

    /* --- Effects & Blurs --- */
    --blur-md: 12px;

    /* --- Transitions --- */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;

    /* --- Z-Index Levels --- */
    --z-index-behind: -1;
    --z-index-base: 1;
    --z-index-floating: 10;
    --z-index-nav: 999;
}

/* --- DARK MODE (MANUAL TOGGLE) --- */
:root.dark-mode {
    /* Colors */
    --color-bg-base: #000000;         
    --color-bg-surface: #191510;      
    --color-bg-surface-hover: #2a251e; 
    
    --color-nav-glass: rgba(0, 0, 0, 0.6); 
    --color-nav-glass-mobile: rgba(0, 0, 0, 0.85);
    
    --color-white: #ffffff;           
    --color-text-offwhite: #f4f4f4;   
    --color-text-grey-light: #bbbbbb; 
    --color-text-grey-mid: #999999;
    --color-text-grey: #a3a3a3;       
    --color-text-grey-dark: #888888;  
    
    --color-accent: #ff6b6b;          
    --color-success: #6bff77;         
    
    /* Alpha / Transparent Colors */
    --color-border-subtle: rgba(255, 255, 255, 0.1);
    --color-border-solid: #4D472E;
    --color-white-alpha-15: rgba(255, 255, 255, 0.15);
    --color-white-alpha-30: rgba(255, 255, 255, 0.3);
    --color-white-alpha-50: rgba(255, 255, 255, 0.5);
    --color-accent-alpha-05: rgba(255, 107, 107, 0.05);
}

/* =========================================
   1. BASE RESETS & GLOBALS
   ========================================= */
@font-face {
    font-family: "Inter Display";
    src: url("/fonts/Inter-Display.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
    /* font-feature-settings: "liga" 1, "cv01" 1, "cv08" 1, "cv09" 1, "cv11" 1, "cv13" 0, "zero" 0; */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    width: 100%;
    background-color: var(--color-bg-base);
    color: var(--color-white);
    font-family: var(--font-family-base);

    font-variant-ligatures: common-ligatures contextual;
    font-variant-numeric: normal;

    /* THE FIX: Explicitly turning on Kerning (kern) and Contextual Alternates (calt) 
       so Safari doesn't break the letters, while turning OFF the slashed zero */
    -webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "cv01" 1, "cv08" 1, "cv09" 1, "cv11" 1, "cv13" 0;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "cv01" 1, "cv08" 1, "cv09" 1, "cv11" 1, "cv13" 0;

    scrollbar-width: none; 
    -ms-overflow-style: none; 
    scroll-behavior: smooth;
}

::-webkit-scrollbar {
    display: none;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Accessibility Focus States */
a:focus-visible, 
button:focus-visible {
    outline: var(--border-width-2) solid var(--color-accent);
    outline-offset: var(--spacing-4);
    border-radius: var(--border-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================
   2. GLOBAL NAVIGATION
   ========================================= */
nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: var(--z-index-nav); 
    
    background-color: var(--color-nav-glass); 
    backdrop-filter: blur(var(--blur-md));         
    -webkit-backdrop-filter: blur(var(--blur-md)); 
    
    padding: clamp(var(--spacing-6), 1vw, var(--spacing-12)) clamp(var(--spacing-16), 12vw, var(--spacing-240));
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--color-white);
    border-bottom: var(--border-width-1) solid var(--color-border-subtle);
}

.logo {
    display: inline-block;
    width: auto;
    height: clamp(var(--spacing-12), 2vw, var(--spacing-16));
    opacity: var(--opacity-high);
    filter: invert(1); /* Inverts the white SVG to black for default light mode */
}

:root.dark-mode .logo {
    filter: invert(0); /* Reverts back to white in dark mode */
}

#quick-links {
    display: flex;
    gap: clamp(var(--spacing-12), 2vw, var(--spacing-32));
}

/* Tighten the Work ↔ Prototypes gap only; the gap before the theme toggle
   (an h4 → button pair) keeps the original flex gap. */
#quick-links > h4 + h4 {
    margin-left: calc(var(--spacing-8) - clamp(var(--spacing-12), 2vw, var(--spacing-32)));
}

#quick-links h4 {
    padding: clamp(var(--spacing-8), 1vw, var(--spacing-12)) clamp(var(--spacing-8), 2vw, var(--spacing-16));
}

.nav-new-tag {
    display: inline-block;
    margin-left: 2px;
    font-family: "Permanent Marker", "Inter Display", cursive;
    font-weight: 400;
    font-size: 0.78em;
    letter-spacing: 0.01em;
    line-height: 1;
    color: var(--color-accent);
    vertical-align: super;
    translate: 0 -2px;
}

nav a {
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-regular);
    color: var(--color-white);
    opacity: var(--opacity-high);
    transition: opacity var(--transition-fast);
}

nav a:hover {
    opacity: var(--opacity-full);
}

#theme-toggle {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--color-white);
    font-size: var(--font-size-20);
    cursor: pointer;
    padding: 0;
    margin-left: var(--spacing-8); 
    opacity: var(--opacity-high);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

#theme-toggle:hover {
    opacity: var(--opacity-full);
    transform: translateY(calc(var(--spacing-2) * -1));
}

#theme-toggle svg {
    pointer-events: none;
    width: 20px;
    height: 20px;
}

#theme-toggle .icon-sun { display: none; }
html.dark-mode #theme-toggle .icon-moon { display: none; }
html.dark-mode #theme-toggle .icon-sun { display: block; }

/* =========================================
   3. HOME: HERO SECTION
   ========================================= */
#main {
    position: relative;
    width: 100%;
}

#home {
    min-height: 100vh;
    width: 100%;
    background-color: var(--color-bg-base);
    position: relative;
}

#hero {
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-white);
    padding: var(--spacing-120) clamp(var(--spacing-16), 4vw, var(--spacing-64)) clamp(var(--spacing-40), 4vw, var(--spacing-64));
}

.hero-content {
    width: 100%;
    max-width: var(--container-width-md);
    margin: 0 auto; /* Centers the block itself */
}

.hero-title {
    font-size: clamp(var(--font-size-24), 8vw, var(--font-size-64));
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tighter);
    line-height: var(--line-height-heading);
    margin-bottom: clamp(var(--spacing-16), 5.5vw, var(--spacing-20));
    word-wrap: break-word;
}

.hero-native {
    font-size: clamp(var(--font-size-18), 2vw, var(--font-size-24));
    letter-spacing: var(--letter-spacing-wide);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-base);
}

.dhan-link {
    color: var(--color-white);
    text-decoration: underline;
    text-decoration-color: var(--color-white-alpha-15); 
    text-decoration-thickness: 1.5px; 
    text-underline-offset: var(--spacing-4); 
    transition: all var(--transition-fast);
}

.dhan-link:hover {
    text-decoration-color: var(--color-white-alpha-50);
}

.hero-quote {
    max-width: var(--container-width-hero);
    margin-top: clamp(var(--spacing-20), 4vw, var(--spacing-40));
    font-size: clamp(var(--font-size-16), 1.5vw, var(--font-size-22));
    line-height: var(--line-height-base);
    font-weight: var(--font-weight-regular);
    opacity: var(--opacity-med);
}

.hero-quote span {
    display: block;
    margin-top: clamp(var(--spacing-16), 4vw, var(--spacing-32));
    font-size: clamp(var(--font-size-14), 1.5vw, var(--font-size-16));
    letter-spacing: var(--letter-spacing-wide);
    opacity: var(--opacity-med-high);
    font-style: italic;
}

.hero-quote span a {
    border-bottom: var(--border-width-1) solid var(--color-white-alpha-30); 
    transition: all var(--transition-fast);
}

.hero-quote span a:hover {
    color: var(--color-white); 
    border-bottom-color: var(--color-white); 
}

/* --- Socials --- */
.hero-footer {
    border-top: var(--border-width-1) solid var(--color-border-subtle); 
    padding-top: var(--spacing-30); 
    margin-top: var(--spacing-60);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-20);
}

.location-label {
    font-size: var(--font-size-11); 
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
    color: var(--color-text-grey-dark);
    font-weight: var(--font-weight-semibold);
}

.social-icons {
    display: flex;
    gap: var(--spacing-24); 
    align-items: center;
}

.social-icons ion-icon, 
.social-icons svg {
    font-size: var(--spacing-22);      
    width: var(--spacing-20);          
    height: var(--spacing-20);         
    color: var(--color-text-grey-light);      
    fill: var(--color-text-grey-light);        
    transition: all var(--transition-fast);
}

.social-icons a:hover ion-icon,
.social-icons a:hover svg {
    color: var(--color-white);
    fill: var(--color-white);
    transform: translateY(calc(var(--spacing-2) * -1));
}

/* WhatsApp mark reads visually heavier than the stroked icons;
   nudge it 2px smaller so the row stays optically balanced */
.social-icons a[aria-label="WhatsApp"] svg {
    width: var(--spacing-18);
    height: var(--spacing-18);
}

/* =========================================
   4. HOME: WORK SECTION
   ========================================= */
#work, #personal {
    width: 100%;
    padding: 0 clamp(var(--spacing-16), 4vw, var(--spacing-64)) var(--spacing-120);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    scroll-margin-top: var(--spacing-100);
    overflow-anchor: none;
}

.section-label {
    width: 100%;
    max-width: var(--container-width-hero);
    margin: 0 auto var(--spacing-40) auto; /* Centers block, adds bottom gap */
    text-align: left; /* Forces the text to stick to the left black line */
}

.section-label span {
    color: var(--color-text-grey-dark);
    font-size: var(--font-size-12);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-widest);
    font-weight: var(--font-weight-semibold);
}

/* --- Section Tabs Component (filter tabs for grids) ---
   Sits between .section-label and .work-grid[data-filterable].
   Base/hover/active states mirror .editorial-back and .toc-link.active
   so it reads as part of the same interactive vocabulary. */
.section-tabs {
    width: 100%;
    max-width: var(--container-width-hero);
    margin: 0 auto var(--spacing-24) auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-8);
}

.section-tab {
    appearance: none;
    background: transparent;
    color: var(--color-text-grey-dark);
    border: var(--border-width-1) solid var(--color-border-subtle);
    border-radius: 999px;
    padding: var(--spacing-10) var(--spacing-16);
    font-family: var(--font-family-base);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-snug);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.section-tab:hover:not(.active) {
    color: var(--color-text-offwhite);
    background-color: var(--color-bg-surface);
    border-color: var(--color-border-solid);
}

.section-tab.active {
    color: var(--color-bg-base);
    background-color: var(--color-white);
    border-color: var(--color-white);
}

.section-tab:focus-visible {
    outline: var(--border-width-2) solid var(--color-accent);
    outline-offset: 2px;
}

.work-grid[data-filterable] .work-item[hidden] {
    display: none;
}

.work-grid {
    width: 100%;
    max-width: var(--container-width-hero);
    margin: 0 auto; /* Centers the grid to perfectly match the hero */
    display: flex;
    flex-direction: column;
    padding-bottom: var(--spacing-40);
}

/* --- THE NEW VERTICAL CARD LAYOUT --- */
.work-item {
    display: flex;
    flex-direction: column; /* Stacks image on top of meta row */
    justify-content: flex-start;
    align-items: stretch;
    padding: var(--spacing-40) 0; /* Slightly more breathing room */
    border-bottom: var(--border-width-1) solid var(--color-border-subtle);
    transition: opacity var(--transition-base);
    color: var(--color-white);
    gap: var(--spacing-32); /* Space between image and text */
}

/* --- THE IMAGE CONTAINER (Theme Aware) --- */
.item-screenshot {
    width: 100%;

    aspect-ratio: 16 / 10;
    
    /* Relies purely on your token system now! */
    background-color: var(--color-bg-surface); 
    border: var(--border-width-1) solid var(--color-border-subtle);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.item-screenshot img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* --- PADDED HERO (image sits centered with breathing room) --- */
.item-screenshot--padded {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-40);
}

.item-screenshot--padded img {
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center center;
}

/* --- VIDEO HERO (e.g. Medication Management) --- */
.item-screenshot--video {
    position: relative;
    aspect-ratio: 16 / 9;
    background: transparent;
}

.item-screenshot--video .work-video,
.item-screenshot--video .video-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    background: transparent;
}

.item-screenshot--video .video-poster {
    z-index: 2;
    transition: opacity var(--transition-base);
}

.item-screenshot--video.is-playing .video-poster {
    opacity: 0;
    pointer-events: none;
}

.item-screenshot--video .work-video--dark { display: none; }
:root.dark-mode .item-screenshot--video .work-video--light { display: none; }
:root.dark-mode .item-screenshot--video .work-video--dark { display: block; }

.item-screenshot--video:has(.work-video--light) {
    background: transparent;
}

.item-screenshot--video .work-video--light,
.item-screenshot--video .work-video--dark {
    background: transparent;
    object-fit: cover;
}

.video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.95);
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    transition: background-color var(--transition-base), transform var(--transition-base);
    z-index: 3;
}

.video-play svg {
    width: 32px;
    height: 32px;
    fill: currentColor;
}

.video-play:hover {
    background: #fff;
    transform: translate(-50%, -50%) scale(1.08);
}

.item-screenshot--video.is-playing .video-play {
    display: none;
}

/* --- WRAPPER FOR TEXT AND ARROW --- */
.work-item-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: var(--spacing-20);
}

.work-info h3 {
    font-size: clamp(var(--font-size-20), 2.5vw, var(--font-size-28));
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-12);
    color: var(--color-white);
}

/* --- Work Tags (discipline labels) ---
   Sits below the description on Recent work cards.
   Reads as a category, not an action - so it's smaller and quieter
   than .section-tab and doesn't respond to hover. */
.work-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-8);
    margin-top: var(--spacing-16);
}

.work-tag {
    display: inline-block;
    color: var(--color-text-grey-mid);
    background-color: transparent;
    border: var(--border-width-1) solid rgba(0, 0, 0, 0.16);
    border-radius: 999px;
    padding: var(--spacing-4) var(--spacing-10);
    font-size: var(--font-size-11);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-widest);
    line-height: var(--line-height-snug);
    text-transform: uppercase;
}

html.dark-mode .work-tag {
    border-color: rgba(255, 255, 255, 0.18);
}

.work-info p {
    font-size: clamp(var(--font-size-12), 4vw, var(--font-size-16));
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-base);
    color: var(--color-text-grey-dark);
    transition: color var(--transition-base);
}

.work-arrow svg {
    width: var(--spacing-24);
    height: var(--spacing-24);
    stroke: var(--color-text-grey-dark); 
    transition: all var(--transition-base);
}

/* --- META AS A DISCRETE LINK (split card with linkable text/arrow) --- */
.work-item-meta--link {
    text-decoration: none;
    color: inherit;
}

/* --- HOVER INTERACTIONS --- */

/* 1. Brightens the description text */
.work-item:hover .work-info p,
.work-item-meta--link:hover .work-info p {
    color: var(--color-text-grey-light);
}

/* 2. Animates the arrow up and to the right - only fires from the linkable region */
.work-item:not(.work-item--split):hover .work-arrow svg,
.work-item-meta--link:hover .work-arrow svg {
    stroke: var(--color-white);
    transform: translate(var(--spacing-4), calc(var(--spacing-4) * -1));
}

/* --- Media Showcase (carousel + grid modes) ---
   Shared component: Illustrations and App Icons both use it.
   In the "All" view the track flows horizontally with auto-scroll and chevrons.
   In a dedicated tab the same markup switches to a wall grid via data-view. */
.media-showcase {
    position: relative;
    width: 100%;
}

.media-track {
    display: flex;
    gap: var(--spacing-16);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: var(--spacing-4) 0;
    scroll-padding-inline: var(--spacing-4);
}

.media-track::-webkit-scrollbar {
    display: none;
}

.media-card {
    flex: 0 0 calc(50% - (var(--spacing-16) / 2));
    aspect-ratio: 1 / 1;
    margin: 0;
    background-color: var(--color-bg-surface);
    border: var(--border-width-1) solid var(--color-border-subtle);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    scroll-snap-align: start;
}

.media-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: var(--spacing-12);
    box-sizing: border-box;
}

/* App-icon variant: icons already ship with their own rounded shape.
   The percentage-based padding shrinks them proportionally so they sit as
   a centered focal element inside the card frame at any breakpoint. */
.media-card--icon img {
    padding: 14%;
}

/* Chevron nav - carousel mode only */
.media-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: var(--border-width-1) solid var(--color-border-subtle);
    background-color: var(--color-bg-base);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.media-nav svg {
    width: 20px;
    height: 20px;
}

.media-nav--prev {
    left: calc(var(--spacing-12) * -1);
}

.media-nav--next {
    right: calc(var(--spacing-12) * -1);
}

.media-showcase[data-view="carousel"] .media-nav {
    opacity: 1;
    pointer-events: auto;
}

.media-showcase[data-view="carousel"] .media-nav:hover {
    background-color: var(--color-bg-surface);
    border-color: var(--color-border-solid);
}

.media-showcase[data-view="carousel"] .media-nav:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Grid mode - used inside dedicated tabs (Illustrations, App Icons).
   Default is a 2-column wall for small viewports; above 1920px it expands to 4. */
.media-showcase[data-view="grid"] .media-track {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-16);
    overflow: visible;
    scroll-snap-type: none;
    padding: 0;
}

.media-showcase[data-view="grid"] .media-card {
    flex: initial;
    width: 100%;
}

.media-showcase[data-view="grid"] .media-nav {
    display: none;
}

/* Hide the meta ("Illustrations / A growing set…" or "App Icons / …") in grid view -
   the active tab label acts as the heading. */
.media-showcase[data-view="grid"] + .work-item-meta {
    display: none;
}

/* --- Creative Coding (RSHXN terrain box) ---
   Inherits .item-screenshot styling so the frame matches the other work-item
   cards; theming follows the site's dark-mode class via a MutationObserver
   in assets/CreativeCoding/main.js. */
.item-screenshot--creative-coding {
    touch-action: none;
    cursor: crosshair;
}

.item-screenshot--creative-coding canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* --- Holo identity card (creative coding) ---
   All rules are namespaced under .item-screenshot--holo-card so they cannot
   leak. The stage tints follow the site's .dark-mode class on <html>; the
   printed card itself never changes colour (it is a physical object). */
.item-screenshot--holo-card {
    padding: 0;
    touch-action: none;
    cursor: crosshair;
}

.item-screenshot--holo-card .holo-stage {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: transparent;
    perspective: 1100px;
    user-select: none;
    -webkit-user-select: none;
}

.item-screenshot--holo-card .holo-motion-cta {
    position: absolute;
    bottom: 4.5%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    appearance: none;
    border: 1px solid rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.9);
    color: #1b1b1b;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    opacity: 0.95;
    box-shadow: 0 2px 10px rgba(16, 22, 40, 0.12);
    touch-action: auto;
    pointer-events: auto;
}

html.dark-mode .item-screenshot--holo-card .holo-motion-cta {
    background: rgba(20,20,22,0.9);
    color: #ededed;
    border-color: rgba(255,255,255,0.14);
}

.item-screenshot--holo-card .holo-card {
    height: 76%;
    aspect-ratio: 1.55;
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    transform-style: preserve-3d;
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    will-change: transform;
    box-shadow: 0 1px 2px #10162824, 0 18px 40px -18px #10162866;
    container-type: inline-size;
}

.item-screenshot--holo-card .holo-card > * {
    border-radius: inherit;
    pointer-events: none;
    position: absolute;
    inset: 0;
}

.item-screenshot--holo-card .holo-body {
    background-image: var(--body-grad);
}

.item-screenshot--holo-card .holo-pattern,
.item-screenshot--holo-card .holo-pattern--lit {
    opacity: var(--reveal, 0);
    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27120%27%20height%3D%27120%27%20viewBox%3D%270%200%20120%20120%27%3E%20%3Cg%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%3Cpath%20d%3D%27M14%2026c-6-7.5-1-15.5%204.8-14.2%202.8.6%204.4%203%205.1%204.6%201-1.7%202.9-4%206-3.8%206.3.4%208.8%209%201.4%2015-3.3%202.7-6.4%204.6-8%206-1.7-1.5-5.5-4.6-9.3-7.6z%27%20transform%3D%27rotate%28-10%2025%2022%29%27%2F%3E%20%3Cpath%20d%3D%27M74%2018c-5.2-6.6-.6-13.6%204.6-12.3%202.5.6%203.9%202.7%204.5%204.2.9-1.5%202.7-3.5%205.4-3.2%205.6.6%207.6%208%20.9%2013.2-3%202.3-5.7%204-7.1%205.2-1.5-1.3-5-4-8.3-7.1z%27%20transform%3D%27rotate%2814%2084%2015%29%27%2F%3E%20%3Cpath%20d%3D%27M44%2066c-7-8.6-1.4-17.8%205.4-16.2%203.2.7%205%203.4%205.8%205.2%201.1-1.9%203.3-4.5%206.8-4.3%207.2.5%2010%2010.3%201.6%2017.2-3.8%203.1-7.3%205.3-9.1%206.9-1.9-1.7-6.3-5.3-10.5-8.8z%27%20transform%3D%27rotate%28-5%2055%2060%29%27%2F%3E%20%3Cpath%20d%3D%27M96%2074c-5.6-6.9-1-14.2%204.4-12.9%202.6.6%204%202.9%204.7%204.4%201-1.6%202.8-3.7%205.5-3.4%205.8.6%208%208.4%201.1%2013.8-3.1%202.4-5.9%204.2-7.3%205.4-1.6-1.3-5.2-4.2-8.4-7.3z%27%20transform%3D%27rotate%288%20105%2070%29%27%2F%3E%20%3Cpath%20d%3D%27M18%2096c-6.4-7.9-1.2-16.2%205-14.7%202.9.7%204.6%203.2%205.3%204.8%201.1-1.7%203.1-4.1%206.2-3.8%206.6.5%209.1%209.4%201.3%2015.7-3.5%202.8-6.7%204.8-8.4%206.2-1.8-1.6-5.8-4.9-9.4-8.2z%27%20transform%3D%27rotate%28-14%2029%2092%29%27%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E);
    background-repeat: repeat;
    background-size: 21%;
}

.item-screenshot--holo-card .holo-pattern {
    mix-blend-mode: multiply;
    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27120%27%20height%3D%27120%27%20viewBox%3D%270%200%20120%20120%27%3E%20%3Cg%20fill%3D%27none%27%20stroke%3D%27%23571034%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%3Cpath%20d%3D%27M14%2026c-6-7.5-1-15.5%204.8-14.2%202.8.6%204.4%203%205.1%204.6%201-1.7%202.9-4%206-3.8%206.3.4%208.8%209%201.4%2015-3.3%202.7-6.4%204.6-8%206-1.7-1.5-5.5-4.6-9.3-7.6z%27%20transform%3D%27rotate%28-10%2025%2022%29%27%2F%3E%20%3Cpath%20d%3D%27M74%2018c-5.2-6.6-.6-13.6%204.6-12.3%202.5.6%203.9%202.7%204.5%204.2.9-1.5%202.7-3.5%205.4-3.2%205.6.6%207.6%208%20.9%2013.2-3%202.3-5.7%204-7.1%205.2-1.5-1.3-5-4-8.3-7.1z%27%20transform%3D%27rotate%2814%2084%2015%29%27%2F%3E%20%3Cpath%20d%3D%27M44%2066c-7-8.6-1.4-17.8%205.4-16.2%203.2.7%205%203.4%205.8%205.2%201.1-1.9%203.3-4.5%206.8-4.3%207.2.5%2010%2010.3%201.6%2017.2-3.8%203.1-7.3%205.3-9.1%206.9-1.9-1.7-6.3-5.3-10.5-8.8z%27%20transform%3D%27rotate%28-5%2055%2060%29%27%2F%3E%20%3Cpath%20d%3D%27M96%2074c-5.6-6.9-1-14.2%204.4-12.9%202.6.6%204%202.9%204.7%204.4%201-1.6%202.8-3.7%205.5-3.4%205.8.6%208%208.4%201.1%2013.8-3.1%202.4-5.9%204.2-7.3%205.4-1.6-1.3-5.2-4.2-8.4-7.3z%27%20transform%3D%27rotate%288%20105%2070%29%27%2F%3E%20%3Cpath%20d%3D%27M18%2096c-6.4-7.9-1.2-16.2%205-14.7%202.9.7%204.6%203.2%205.3%204.8%201.1-1.7%203.1-4.1%206.2-3.8%206.6.5%209.1%209.4%201.3%2015.7-3.5%202.8-6.7%204.8-8.4%206.2-1.8-1.6-5.8-4.9-9.4-8.2z%27%20transform%3D%27rotate%28-14%2029%2092%29%27%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E);
    -webkit-mask-image:
        radial-gradient(ellipse 82% 96% at var(--reveal-x, 50%) var(--reveal-y, 50%), #000 0%, #000c 38%, transparent 76%),
        linear-gradient(var(--reveal-angle, 90deg), #000 12%, #00000080 46%, transparent 62%);
    mask-image:
        radial-gradient(ellipse 82% 96% at var(--reveal-x, 50%) var(--reveal-y, 50%), #000 0%, #000c 38%, transparent 76%),
        linear-gradient(var(--reveal-angle, 90deg), #000 12%, #00000080 46%, transparent 62%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.item-screenshot--holo-card .holo-pattern--lit {
    mix-blend-mode: screen;
    opacity: calc(var(--reveal, 0) * 0.85);
    -webkit-mask-image:
        radial-gradient(ellipse 82% 96% at var(--reveal-x, 50%) var(--reveal-y, 50%), #000 0%, #000c 38%, transparent 76%),
        linear-gradient(var(--reveal-angle, 90deg), transparent 38%, #00000080 54%, #000 88%);
    mask-image:
        radial-gradient(ellipse 82% 96% at var(--reveal-x, 50%) var(--reveal-y, 50%), #000 0%, #000c 38%, transparent 76%),
        linear-gradient(var(--reveal-angle, 90deg), transparent 38%, #00000080 54%, #000 88%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.item-screenshot--holo-card .holo-foil,
.item-screenshot--holo-card .holo-foil--b,
.item-screenshot--holo-card .holo-foil--c {
    background-repeat: repeat;
}

.item-screenshot--holo-card .holo-foil {
    background-image: var(--l1-img, none);
    background-size: var(--l1-size, 400% 400%);
    background-position: var(--l1-x, 50%) var(--l1-y, 50%);
    background-blend-mode: var(--l1-bgblend, normal);
    mix-blend-mode: var(--l1-blend, overlay);
    filter: var(--l1-filter, none);
    opacity: var(--l1-o, 0);
}

.item-screenshot--holo-card .holo-foil--b {
    background-image: var(--l2-img, none);
    background-size: var(--l2-size, 300% 300%);
    background-position: var(--l2-x, 50%) var(--l2-y, 50%);
    background-blend-mode: var(--l2-bgblend, normal);
    mix-blend-mode: var(--l2-blend, overlay);
    filter: var(--l2-filter, none);
    opacity: var(--l2-o, 0);
}

.item-screenshot--holo-card .holo-foil--c {
    background-image: var(--l3-img, none);
    background-size: var(--l3-size, 200% 200%);
    background-position: var(--l3-x, 50%) var(--l3-y, 50%);
    background-blend-mode: var(--l3-bgblend, normal);
    mix-blend-mode: var(--l3-blend, overlay);
    filter: var(--l3-filter, none);
    opacity: var(--l3-o, 0);
}

.item-screenshot--holo-card .holo-glare {
    background-image: radial-gradient(
        farthest-corner circle at var(--gx, 50%) var(--gy, 50%),
        #ffffffbf 10%,
        #ffffff8c 20%,
        #00000080 120%
    );
    mix-blend-mode: overlay;
    opacity: calc(var(--glare-o, 0.55) * (0.93 + var(--breath, 0.5) * 0.07));
}

.item-screenshot--holo-card .holo-sheen {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, calc(var(--edge-t, 0) * 0.55 + 0.1)),
        inset 0 -1px 0 rgba(255, 255, 255, calc(var(--edge-b, 0) * 0.5 + 0.06)),
        inset 1px 0 0 rgba(255, 255, 255, calc(var(--edge-l, 0) * 0.5 + 0.06)),
        inset -1px 0 0 rgba(255, 255, 255, calc(var(--edge-r, 0) * 0.5 + 0.06)),
        inset 0 -2px 4px rgba(90, 20, 55, calc(var(--edge-t, 0) * 0.09)),
        inset 0 2px 4px rgba(90, 20, 55, calc(var(--edge-b, 0) * 0.09)),
        inset 0 0 0 1px #ffffff24;
}

.item-screenshot--holo-card .holo-spot {
    background: radial-gradient(
        ellipse 130% 110% at var(--gx, 50%) var(--gy, 50%),
        #ffffff57 0%,
        #fff4fc24 38%,
        transparent 74%
    );
    mix-blend-mode: soft-light;
    opacity: calc(var(--spot, 0) * 0.55);
}

.item-screenshot--holo-card .holo-smear {
    background: linear-gradient(var(--smear-angle, 0deg), transparent 26%, #ffffff4d 50%, transparent 74%);
    background-size: 260% 260%;
    background-position: var(--gx, 50%) var(--gy, 50%);
    mix-blend-mode: soft-light;
    opacity: calc(var(--smear, 0) * 0.3);
}

.item-screenshot--holo-card .holo-noise {
    mix-blend-mode: overlay;
    opacity: 0.14;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23p)' opacity='.5'/%3E%3C/svg%3E");
    background-size: 26%;
}

.item-screenshot--holo-card .holo-content {
    z-index: 2;
    isolation: isolate;
    color: #6b1a3d;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4%;
    padding: 7% 7% 6%;
}

.item-screenshot--holo-card .holo-text {
    min-width: 0;
}

.item-screenshot--holo-card .holo-name,
.item-screenshot--holo-card .holo-since {
    font-family: inherit;
    font-weight: 600;
    font-feature-settings: "liga" 1, "calt" 1, "dlig" 1;
    font-variant-ligatures: common-ligatures discretionary-ligatures contextual;
    color: #6b1a3d;
    margin: 0;
}

.item-screenshot--holo-card .holo-name {
    letter-spacing: -0.015em;
    text-shadow:
        var(--emboss-x, 0) var(--emboss-y, 0) 0 #ffffff57,
        calc(var(--emboss-x, 0) * -1) calc(var(--emboss-y, 0) * -1) 1px #6e1e462b;
    font-size: clamp(15px, 5cqw, 40px);
    line-height: 1.15;
}

.item-screenshot--holo-card .holo-since {
    color: #6b1a3db8;
    text-shadow: 0 1px #fff6;
    margin-top: 0.55em;
    font-size: clamp(12px, 3.2cqw, 26px);
    line-height: 1.25;
}

.item-screenshot--holo-card .holo-tile {
    aspect-ratio: 0.86;
    width: 27%;
    background: var(--tile-dark, #8e3a63);
    border-radius: 14px;
    flex: none;
    align-self: flex-end;
    position: relative;
    overflow: hidden;
    box-shadow:
        calc(var(--emboss-x, 0) * -1.5) calc(var(--emboss-y, 0) * -1.5 + 2px) 3px #7828502e,
        calc(var(--emboss-x, 0) * -3) calc(var(--emboss-y, 0) * -3 + 8px) 18px -8px #78285057,
        0 0 0 1px #ffffff80 inset;
    transform: translate(calc(var(--emboss-x, 0) * -1.1), calc(var(--emboss-y, 0) * -1.1));
}

.item-screenshot--holo-card .holo-tile > * {
    pointer-events: none;
    position: absolute;
    inset: 0;
}

.item-screenshot--holo-card .holo-tile__photo,
.item-screenshot--holo-card .holo-tile__photo--neg {
    background-image: var(--tile-src);
    background-repeat: no-repeat;
    background-size: 132%;
    background-position: var(--tile-x, 50%) 32%;
}

.item-screenshot--holo-card .holo-tile__photo {
    filter: grayscale() contrast(1.18) brightness(1.16);
}

.item-screenshot--holo-card .holo-tile__photo--neg {
    filter: grayscale(1) contrast(1.42) brightness(0.92) invert(1) sepia(0.55) hue-rotate(var(--tile-hue, 190deg)) saturate(2.1);
    -webkit-mask-image: linear-gradient(
        var(--tile-sweep-angle, 90deg),
        #000 calc(var(--tile-invert, 0) * 210% - 78%),
        #000000fa calc(var(--tile-invert, 0) * 210% - 64%),
        #000000e8 calc(var(--tile-invert, 0) * 210% - 50%),
        #000000bf calc(var(--tile-invert, 0) * 210% - 36%),
        #00000080 calc(var(--tile-invert, 0) * 210% - 22%),
        #00000040 calc(var(--tile-invert, 0) * 210% - 8%),
        #00000017 calc(var(--tile-invert, 0) * 210% + 6%),
        #00000005 calc(var(--tile-invert, 0) * 210% + 20%),
        transparent calc(var(--tile-invert, 0) * 210% + 34%)
    );
    mask-image: linear-gradient(
        var(--tile-sweep-angle, 90deg),
        #000 calc(var(--tile-invert, 0) * 210% - 78%),
        #000000fa calc(var(--tile-invert, 0) * 210% - 64%),
        #000000e8 calc(var(--tile-invert, 0) * 210% - 50%),
        #000000bf calc(var(--tile-invert, 0) * 210% - 36%),
        #00000080 calc(var(--tile-invert, 0) * 210% - 22%),
        #00000040 calc(var(--tile-invert, 0) * 210% - 8%),
        #00000017 calc(var(--tile-invert, 0) * 210% + 6%),
        #00000005 calc(var(--tile-invert, 0) * 210% + 20%),
        transparent calc(var(--tile-invert, 0) * 210% + 34%)
    );
    opacity: 0.94;
}

.item-screenshot--holo-card .holo-tile__grain {
    mix-blend-mode: overlay;
    opacity: 0.34;
    background-image:
        repeating-linear-gradient(63deg, #ffffff29 0, #fff0 1px, #00000021 2px, #fff0 3px),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E");
    background-size: auto, 42%;
}

.item-screenshot--holo-card .holo-tile__wear {
    mix-blend-mode: soft-light;
    opacity: calc(0.28 + var(--tile-invert, 0) * 0.4);
    background-image: repeating-linear-gradient(
        28deg,
        #0000 0 9px,
        #ffffff17 9px 10px,
        #0000 10px 23px,
        #ffffff0d 23px 24px,
        #0000 24px 51px
    );
}

.item-screenshot--holo-card .holo-tile__vignette {
    background: radial-gradient(78% 74% at 50% 42%, #0000 40%, #501e3c29 78%, #501e3c57 100%);
}

.item-screenshot--holo-card .holo-tile__duo {
    background-image: linear-gradient(160deg, var(--tile-dark, #d81f6a), var(--tile-light, #6bb8dd));
    mix-blend-mode: color;
}

.item-screenshot--holo-card .holo-tile__tone {
    background-image: linear-gradient(160deg, var(--tile-dark, #d81f6a), var(--tile-light, #6bb8dd));
    mix-blend-mode: soft-light;
    opacity: 0.9;
}

.item-screenshot--holo-card .holo-tile__foil {
    background-image: repeating-linear-gradient(
        98deg,
        #ff8985 0%,
        #ffee70 3%,
        #b0ff70 6%,
        #8ffff8 9%,
        #8aa1ff 12%,
        #dc85ff 15%,
        #ff8985 18%
    );
    background-size: 300% 300%;
    background-position: var(--tile-x, 50%) calc(var(--tile-invert, 0) * 100%);
    mix-blend-mode: color-dodge;
    filter: contrast(1.7) saturate(0.85);
    opacity: calc(var(--tile-invert, 0) * 0.5);
}

.item-screenshot--holo-card .holo-tile__gloss {
    background-image: radial-gradient(
        farthest-corner circle at var(--gx, 50%) var(--gy, 50%),
        #ffffff42 0%,
        #ffffff0f 50%,
        #3c142d29 110%
    );
    mix-blend-mode: soft-light;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px #ffffff57;
}

@media (prefers-reduced-motion: reduce) {
    .item-screenshot--holo-card .holo-card {
        transform: none;
    }
}

/* On narrow screens the 4:3 tile leaves excessive padding around the
   1.55-aspect holo card. Bump the height so it fills the tile. */
@media (max-width: 640px) {
    .item-screenshot--holo-card .holo-card {
        height: auto;
        width: 92%;
    }
}

/* --- Folding receipts prototype (creative coding) ---
   The Jupiter payments interaction, running inside a work-item card. Every
   rule is scoped under .item-screenshot--card-fold and every internal class
   is `cf-`-prefixed, so the phone-app's generic names (.stage, .app, .bar,
   .receipt, .pill) cannot leak into the rest of the site. Canvas / ink
   colours flip with html.dark-mode; typography inherits Inter Display from
   --font-family-base. */
.item-screenshot--card-fold {
    padding: 0;
    position: relative;
    overflow: hidden;

    /* Jupiter brand — sampled from the app icon; unchanged across themes */
    --cf-brand: #e36e64;
    --cf-brand-tint: rgba(227, 110, 100, 0.14);
    --cf-brand-text: #b54a41;

    /* Light-mode surfaces */
    --cf-canvas: #f5f3ef;
    --cf-bar-bg: rgba(245, 243, 239, 0.92);
    --cf-ticket-bg: #fff;
    --cf-ticket-bg-hover: #f2f2f7;
    --cf-ink: #30302f;
    --cf-ink2: #61605f;
    --cf-ink3: rgba(60, 60, 67, 0.6);
    --cf-hairline: rgba(0, 0, 0, 0.12);
    --cf-rule: rgba(0, 0, 0, 0.18);
    --cf-fill3: rgba(118, 118, 128, 0.12);
    --cf-outline: #d1d1d6;
    --cf-btn: #e5e5ea;
    --cf-drop1: rgba(0, 0, 0, 0.1);
    --cf-drop2: rgba(0, 0, 0, 0.06);
    --cf-crease-shadow: rgba(24, 20, 16, 0.22);

    /* State-icon colours */
    --cf-ok: #416a62;
    --cf-warn: #b45309;
    --cf-bad: #b42318;
}

html.dark-mode .item-screenshot--card-fold {
    --cf-canvas: #14140f;
    --cf-bar-bg: rgba(20, 20, 15, 0.92);
    --cf-ticket-bg: #1f1c17;
    --cf-ticket-bg-hover: #2a251e;
    --cf-ink: #ededed;
    --cf-ink2: #a8a6a2;
    --cf-ink3: rgba(235, 235, 245, 0.55);
    --cf-hairline: rgba(255, 255, 255, 0.09);
    --cf-rule: rgba(255, 255, 255, 0.15);
    --cf-fill3: rgba(120, 120, 128, 0.24);
    --cf-outline: #3a3a3f;
    --cf-btn: #2c2c30;
    --cf-drop1: rgba(0, 0, 0, 0.55);
    --cf-drop2: rgba(0, 0, 0, 0.35);
    --cf-crease-shadow: rgba(0, 0, 0, 0.5);

    --cf-brand-tint: rgba(227, 110, 100, 0.18);
    --cf-brand-text: #f28d84;

    --cf-ok: #6fbfa8;
    --cf-warn: #eab776;
    --cf-bad: #f08579;
}

/* The mount div fills the card so the phone stage can size itself off a
   real box, rather than collapsing to zero as an empty block-level child. */
.item-screenshot--card-fold [data-card-fold-mount] {
    position: absolute;
    inset: 0;
}

/* SF Symbols — tintable PNG masks (URLs are injected by card-fold.js so the
   asset path resolves regardless of the host page's location). */
.item-screenshot--card-fold .cf-sf {
    display: inline-block;
    flex-shrink: 0;
    width: var(--cf-sf-size, 24px);
    height: var(--cf-sf-size, 24px);
    background-color: var(--cf-sf-color, currentColor);
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
}

/* --- Phone frame — iPhone 17 Pro logical points, drawn at 402 × 874 --- */
.item-screenshot--card-fold .cf-stage {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: transparent;
    -webkit-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

.item-screenshot--card-fold .cf-device {
    position: relative;
}

.item-screenshot--card-fold .cf-device__inner {
    position: absolute;
    left: 0;
    top: 0;
    width: 418px;
    height: 890px;
    transform-origin: top left;
}

.item-screenshot--card-fold .cf-device__outline {
    position: absolute;
    inset: 0;
    border: 2px solid var(--cf-outline);
    border-radius: 70px;
    pointer-events: none;
}

.item-screenshot--card-fold .cf-btn {
    position: absolute;
    width: 3px;
    background: var(--cf-btn);
    pointer-events: none;
}
.item-screenshot--card-fold .cf-btn--left { left: -3px; border-radius: 2px 0 0 2px; }
.item-screenshot--card-fold .cf-btn--right { right: -3px; border-radius: 0 2px 2px 0; }

.item-screenshot--card-fold .cf-screen {
    position: absolute;
    inset: 8px;
    overflow: hidden;
    border-radius: 62px;
    background: var(--cf-canvas);
    /* backdrop-filter inside .cf-bar creates its own stacking context that
       ignores the ancestor's overflow-clipped border-radius on the top corners.
       clip-path clips regardless of stacking context, so the phone screen
       stays properly rounded at the very top. */
    -webkit-clip-path: inset(0 round 62px);
            clip-path: inset(0 round 62px);
}

/* Status bar, to Apple's Design Resources spec (Dynamic Island iPhones) */
.item-screenshot--card-fold .cf-statusbar {
    position: absolute;
    inset-inline: 0;
    top: 0;
    z-index: 100;
    height: 62px;
    color: var(--cf-ink);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
        "Helvetica Neue", Helvetica, Arial, sans-serif;
    pointer-events: none;
}
.item-screenshot--card-fold .cf-statusbar__time {
    position: absolute;
    left: 26px;
    top: 21.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 22px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.4px;
}
.item-screenshot--card-fold .cf-statusbar__icons {
    position: absolute;
    right: 26px;
    top: 26px;
    display: flex;
    align-items: center;
    gap: 5px;
    height: 13px;
}

.item-screenshot--card-fold .cf-island {
    position: absolute;
    left: 50%;
    top: 14px;
    z-index: 100;
    width: 126px;
    height: 37px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgba(120, 120, 128, 0.2);
    pointer-events: none;
}
html.dark-mode .item-screenshot--card-fold .cf-island {
    background: rgba(0, 0, 0, 0.8);
}

.item-screenshot--card-fold .cf-home-indicator {
    position: absolute;
    left: 50%;
    bottom: 8px;
    z-index: 100;
    width: 144px;
    height: 5px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: var(--cf-ink);
    pointer-events: none;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .item-screenshot--card-fold .cf-home-indicator {
        background: transparent;
        -webkit-backdrop-filter: blur(6px) grayscale(1) invert(1) contrast(2.2);
                backdrop-filter: blur(6px) grayscale(1) invert(1) contrast(2.2);
    }
}

/* --- Payments screen --- */
.item-screenshot--card-fold .cf-app {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: var(--cf-canvas);
    font-family: var(--font-family-base);
    color: var(--cf-ink);
}

.item-screenshot--card-fold .cf-bar {
    position: relative;
    z-index: 10;
    flex-shrink: 0;
    padding-top: 62px;
    background: var(--cf-bar-bg);
    -webkit-backdrop-filter: blur(24px);
            backdrop-filter: blur(24px);
}
.item-screenshot--card-fold .cf-bar__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
}
.item-screenshot--card-fold .cf-bar__group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.item-screenshot--card-fold .cf-bar__title {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
        "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.4px;
    color: var(--cf-ink);
}
.item-screenshot--card-fold .cf-bar__hairline {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background: var(--cf-hairline);
    opacity: 0;
}

.item-screenshot--card-fold .cf-iconbtn {
    display: flex;
    margin: -4px;
    padding: 4px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    border-radius: 999px;
    cursor: pointer;
    -webkit-appearance: none;
            appearance: none;
}
.item-screenshot--card-fold .cf-bar__group .cf-iconbtn {
    margin: -4px 0 -4px -4px;
}
.item-screenshot--card-fold .cf-iconbtn:active {
    opacity: 0.6;
}

.item-screenshot--card-fold .cf-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 58px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.item-screenshot--card-fold .cf-content::-webkit-scrollbar {
    display: none;
}

/* --- The receipt — a ticket with punched notches + scalloped bottom --- */
.item-screenshot--card-fold .cf-receipt {
    margin: 0 16px;
    filter: drop-shadow(0 1px 1px var(--cf-drop1))
            drop-shadow(0 6px 14px var(--cf-drop2));
}

.item-screenshot--card-fold .cf-ticket {
    position: relative;
    border-radius: 8px;
    background: var(--cf-ticket-bg);
    --cf-notch:
        radial-gradient(circle 11px at 0 51px, transparent 11px, #000 11.5px),
        radial-gradient(circle 11px at 100% 51px, transparent 11px, #000 11.5px),
        radial-gradient(circle 13px at 13px 100%, transparent 13px, #000 13.5px);
    -webkit-mask-image: var(--cf-notch);
            mask-image: var(--cf-notch);
    -webkit-mask-size: 100% 100%, 100% 100%, 26px 100%;
            mask-size: 100% 100%, 100% 100%, 26px 100%;
    -webkit-mask-repeat: no-repeat, no-repeat, repeat-x;
            mask-repeat: no-repeat, no-repeat, repeat-x;
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
}

.item-screenshot--card-fold .cf-ticket__stub {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 51px;
    padding: 0 16px;
}
.item-screenshot--card-fold .cf-ticket__title {
    margin: 0;
    font-family: var(--font-family-base);
    font-size: 17px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: var(--letter-spacing-tight);
    color: var(--cf-ink);
}

.item-screenshot--card-fold .cf-ticket__perf {
    position: absolute;
    top: 51px;
    left: 15px;
    right: 15px;
    border-top: 1px dashed var(--cf-rule);
}

.item-screenshot--card-fold .cf-ticket__body {
    padding: 20px 16px 32px;
}

.item-screenshot--card-fold .cf-hero {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 36px;
    letter-spacing: -0.5px;
    color: var(--cf-ink);
    font-variant-numeric: tabular-nums;
}

.item-screenshot--card-fold .cf-meta {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 20px;
    color: var(--cf-ink2);
}
.item-screenshot--card-fold .cf-ref {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 18px;
    color: var(--cf-ink2);
}
.item-screenshot--card-fold .cf-para {
    margin: 16px 0 0;
    font-size: 15px;
    line-height: 22px;
    color: var(--cf-ink);
}

.item-screenshot--card-fold .cf-rows {
    margin: 24px 0 0;
}
.item-screenshot--card-fold .cf-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
}
.item-screenshot--card-fold .cf-row:first-child {
    padding-top: 0;
}
.item-screenshot--card-fold .cf-row + .cf-row {
    border-top: 1px solid var(--cf-hairline);
}
.item-screenshot--card-fold .cf-row dt {
    font-size: 15px;
    line-height: 20px;
    color: var(--cf-ink2);
}
.item-screenshot--card-fold .cf-row dd {
    margin: 0;
    text-align: right;
    font-size: 15px;
    line-height: 20px;
    color: var(--cf-ink);
    font-variant-numeric: tabular-nums;
}

.item-screenshot--card-fold .cf-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 16px 0 0;
    font-size: 15px;
    line-height: 22px;
    color: var(--cf-ink);
}
.item-screenshot--card-fold .cf-note--far {
    margin-top: 30px;
}
.item-screenshot--card-fold .cf-note .cf-sf {
    margin-top: 5px;
    opacity: 0.6;
}

.item-screenshot--card-fold .cf-pill {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border: 0;
    border-radius: 4px;
    text-align: center;
    font-family: var(--font-family-base);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    cursor: pointer;
    -webkit-appearance: none;
            appearance: none;
}
.item-screenshot--card-fold .cf-pill--primary {
    margin-top: 16px;
    background: var(--cf-brand-tint);
    color: var(--cf-brand-text);
}
.item-screenshot--card-fold .cf-pill--primary:active {
    opacity: 0.7;
}
.item-screenshot--card-fold .cf-pill--secondary {
    margin-top: 8px;
    border: 1px solid var(--cf-rule);
    background: var(--cf-ticket-bg);
    color: var(--cf-ink);
}
.item-screenshot--card-fold .cf-pill--secondary:active {
    background: var(--cf-ticket-bg-hover);
}
.item-screenshot--card-fold .cf-pill--secondary.cf-pill--alone {
    margin-top: 16px;
}
.item-screenshot--card-fold .cf-pill--locked {
    margin-top: 16px;
    background: var(--cf-fill3);
    color: var(--cf-ink2);
    cursor: default;
}

.item-screenshot--card-fold .cf-actions {
    margin-top: 16px;
    border-top: 1px solid var(--cf-hairline);
}
.item-screenshot--card-fold .cf-actions--tight {
    margin-top: 2px;
}
.item-screenshot--card-fold .cf-actionrow {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 0;
    border: 0;
    background: none;
    color: var(--cf-ink);
    font-family: var(--font-family-base);
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
            appearance: none;
}
.item-screenshot--card-fold .cf-actionrow + .cf-actionrow {
    border-top: 1px solid var(--cf-hairline);
}
.item-screenshot--card-fold .cf-actionrow:active {
    opacity: 0.6;
}

.item-screenshot--card-fold .cf-talk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin-top: 16px;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--cf-brand-text);
    font-family: var(--font-family-base);
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
            appearance: none;
}
.item-screenshot--card-fold .cf-talk:active {
    opacity: 0.6;
}

/* --- Folding stack --- */
.item-screenshot--card-fold .cf-fs-frame {
    position: relative;
}
.item-screenshot--card-fold .cf-fs-anchor {
    position: sticky;
    height: 0;
}
.item-screenshot--card-fold .cf-fs-card {
    position: absolute;
    inset-inline: 0;
    top: 0;
}
.item-screenshot--card-fold .cf-fs-card.cf-is-gone {
    visibility: hidden;
}
.item-screenshot--card-fold .cf-fs-card.cf-is-folding {
    perspective: 1200px;
    perspective-origin: 50% 0;
    transform-style: preserve-3d;
}
.item-screenshot--card-fold .cf-fs-stack,
.item-screenshot--card-fold .cf-fs-nested {
    position: relative;
}
.item-screenshot--card-fold .cf-fs-card.cf-is-folding .cf-fs-stack,
.item-screenshot--card-fold .cf-fs-card.cf-is-folding .cf-fs-nested {
    transform-style: preserve-3d;
}
.item-screenshot--card-fold .cf-fs-slice {
    position: relative;
    backface-visibility: hidden;
    clip-path: inset(0);
}
.item-screenshot--card-fold .cf-fs-slice--last {
    clip-path: inset(0 0 -28px 0);
}
.item-screenshot--card-fold .cf-fs-card.cf-is-flat .cf-fs-slice--first {
    clip-path: none;
}
.item-screenshot--card-fold .cf-fs-paper {
    position: absolute;
    inset-inline: 0;
    top: 0;
}
.item-screenshot--card-fold .cf-fs-crease {
    position: absolute;
    bottom: 0;
    left: 16px;
    right: 16px;
    height: 16px;
    opacity: 0;
    background: linear-gradient(to top, var(--cf-crease-shadow), transparent);
    pointer-events: none;
}
.item-screenshot--card-fold .cf-fs-group {
    position: absolute;
    inset-inline: 0;
    transform-origin: top;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* --- Swap Cards — a stack of payment receipts. The front card swipes off,
   shrinks into depth, and tucks back in at the bottom while the next card
   counter-swings in. Scoped under .item-screenshot--swap-cards; classes are
   `sc-`-prefixed so none of the card typography leaks out of the tile. */
.item-screenshot--swap-cards {
    padding: 0;
    overflow: hidden;
    container-type: size;
    container-name: swapcards;
}

.item-screenshot--swap-cards [data-swap-cards-mount] {
    position: absolute;
    inset: 0;
}

.item-screenshot--swap-cards .sc-stage {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    font-family: "Inter Display", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    color: #111113;
    pointer-events: none;
}


.proto-overlay__pane--media .item-screenshot--swap-cards .sc-stage {
    pointer-events: auto;
}

/* Soft floor shadow under the whole stack. */
.item-screenshot--swap-cards .sc-stack::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: -18%;
    height: 30%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.09), transparent 70%);
    filter: blur(14px);
    pointer-events: none;
}

html.dark-mode .item-screenshot--swap-cards .sc-stack::before {
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5), transparent 70%);
}

/* Card width is driven by the tile via container queries. clamp bounds it
   so the body text stays readable in a tiny grid tile and the card doesn't
   dominate when the overlay goes full-size. The 0.43 ratio and all internal
   type scale flow from --sc-card-w. */
.item-screenshot--swap-cards .sc-stack {
    --sc-card-w: clamp(260px, 72cqw, 440px);
    --sc-card-h: calc(var(--sc-card-w) * 0.43);
    --sc-radius: calc(var(--sc-card-w) * 0.05);
    position: relative;
    width: var(--sc-card-w);
    height: var(--sc-card-h);
    outline: none;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: auto;
}

.item-screenshot--swap-cards .sc-stack:focus-visible::after {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: calc(var(--sc-radius) + 10px);
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    pointer-events: none;
}

/* ---------- Card ---------- */
.item-screenshot--swap-cards .sc-card {
    position: absolute;
    inset: 0;
    border-radius: var(--sc-radius);
    background: linear-gradient(160deg, #ffffff 0%, #fbfbfc 55%, #f5f5f7 100%);
    box-shadow:
        0 1px 1px rgba(0, 0, 0, 0.03),
        0 6px 14px -4px rgba(20, 20, 30, 0.08),
        0 22px 40px -18px rgba(20, 20, 30, 0.16);
    overflow: hidden;
    transform-origin: 50% 60%;
    will-change: transform;
    cursor: grab;
    color: #111113;
}

.item-screenshot--swap-cards .sc-card.is-dragging { cursor: grabbing; }

/* Colour bloom behind the avatars — gives the frosted look. */
.item-screenshot--swap-cards .sc-card__glow {
    position: absolute;
    top: -35%;
    right: -12%;
    width: 55%;
    height: 130%;
    background:
        radial-gradient(circle at 60% 40%, var(--sc-glow-a, #e8c9cf) 0%, transparent 55%),
        radial-gradient(circle at 40% 70%, var(--sc-glow-b, #d9d9de) 0%, transparent 60%);
    filter: blur(28px);
    opacity: 0.55;
    pointer-events: none;
}

.item-screenshot--swap-cards .sc-card__inner {
    position: relative;
    height: 100%;
    padding: 7.2% 6.4% 6%;
    display: flex;
    flex-direction: column;
}

/* Progressive blur sweep from the trailing edge as the card recedes. */
.item-screenshot--swap-cards .sc-card__pblur {
    --w: 0.55;
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: none;
}
.item-screenshot--swap-cards .sc-card.is-flying .sc-card__pblur { display: block; }
.item-screenshot--swap-cards .sc-card__pblur > i {
    position: absolute;
    inset: 0;
    --edge: calc((var(--sc-pb) - var(--k) * var(--w)) * 100%);
    -webkit-backdrop-filter: blur(var(--r));
            backdrop-filter: blur(var(--r));
    -webkit-mask-image: linear-gradient(var(--sc-pb-dir, to left), #000 calc(var(--edge) - 14%), transparent calc(var(--edge) + 14%));
            mask-image: linear-gradient(var(--sc-pb-dir, to left), #000 calc(var(--edge) - 14%), transparent calc(var(--edge) + 14%));
}
.item-screenshot--swap-cards .sc-card__pblur > i:nth-child(1) { --k: 0;    --r: 1px; }
.item-screenshot--swap-cards .sc-card__pblur > i:nth-child(2) { --k: 0.33; --r: 2px; }
.item-screenshot--swap-cards .sc-card__pblur > i:nth-child(3) { --k: 0.66; --r: 4px; }
.item-screenshot--swap-cards .sc-card__pblur > i:nth-child(4) { --k: 1;    --r: 7px; }

.item-screenshot--swap-cards .sc-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.item-screenshot--swap-cards .sc-card__amount {
    font-size: max(26px, calc(var(--sc-card-w) * 0.1));
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1;
    margin: 0;
}

.item-screenshot--swap-cards .sc-card__avatars { display: flex; margin-top: -2px; }

.item-screenshot--swap-cards .sc-avatar {
    --sc-av-size: max(24px, calc(var(--sc-card-w) * 0.088));
    width: var(--sc-av-size);
    height: var(--sc-av-size);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: calc(var(--sc-av-size) * 0.36);
    font-weight: 700;
    color: #fff;
    box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0, 0, 0, 0.15);
    background: var(--sc-av);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.item-screenshot--swap-cards .sc-avatar + .sc-avatar { margin-left: calc(var(--sc-av-size) * -0.32); }

.item-screenshot--swap-cards .sc-card__line {
    margin: 6.5% 0 0;
    display: flex;
    align-items: center;
    gap: 0.42em;
    font-size: max(11px, calc(var(--sc-card-w) * 0.042));
    letter-spacing: -0.01em;
}

.item-screenshot--swap-cards .sc-card__name {
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.2em;
}

.item-screenshot--swap-cards .sc-badge {
    width: 0.95em;
    height: 0.95em;
    flex: none;
    color: #2f9bf5;
}

.item-screenshot--swap-cards .sc-card__verb { color: #8a8a90; font-weight: 500; }

.item-screenshot--swap-cards .sc-card__bottom {
    margin-top: 3.4%;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: max(10.5px, calc(var(--sc-card-w) * 0.04));
}

.item-screenshot--swap-cards .sc-card__note { color: #6b6b72; }
.item-screenshot--swap-cards .sc-card__time { color: #6b6b72; font-variant-numeric: tabular-nums; }

/* --- Apple Duo — a foldable phone rendered on canvas. The script owns all
   layout inside .ad-stage; the tile just gives it a sized box and swallows
   pointer events in the grid so a click opens the overlay instead of
   folding the phone. Pointer events are re-enabled when the media node is
   moved into the overlay. The canvas itself is transparent so the tile's
   surface color (and dark-mode variant) shows through behind the phone. */
.item-screenshot--apple-duo {
    padding: 0;
    overflow: hidden;
    border-radius: 12px;
}

.item-screenshot--apple-duo [data-apple-duo-mount] {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
}

.item-screenshot--apple-duo .ad-stage {
    position: absolute;
    inset: 0;
    outline: none;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
    cursor: grab;
    border-radius: inherit;
    overflow: hidden;
}

.item-screenshot--apple-duo .ad-stage.is-dragging { cursor: grabbing; }

.item-screenshot--apple-duo .ad-canvas {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.proto-overlay__pane--media .item-screenshot--apple-duo {
    border-radius: var(--border-radius-sm);
}

.proto-overlay__pane--media .item-screenshot--apple-duo .ad-stage {
    pointer-events: auto;
}

/* --- Bin Toss — a delete dialog where a file crumples into a paper ball and
   is tossed into a corrugated bin. All layout happens inside a 516x725 card
   coordinate system that the JS scales to fit the tile; everything is scoped
   under .item-screenshot--bin-toss with `bt-`-prefixed classes so the generic
   names (.card, .dialog, .file, .ball, .toast) can't leak out. */
.item-screenshot--bin-toss {
    padding: 0;
    overflow: hidden;
    background: transparent;
}

.item-screenshot--bin-toss [data-bin-toss-mount] {
    position: absolute;
    inset: 0;
}

.item-screenshot--bin-toss .bt-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Inter Display", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    color: #151515;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
    overflow: hidden;
    --bt-scale: 1;
    --bt-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --bt-spring-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.proto-overlay__pane--media .item-screenshot--bin-toss .bt-stage {
    pointer-events: auto;
}

.item-screenshot--bin-toss .bt-stage.is-grabbing,
.item-screenshot--bin-toss .bt-stage.is-grabbing * {
    cursor: grabbing !important;
}

.item-screenshot--bin-toss .bt-card {
    position: relative;
    flex: none;
    width: 516px;
    height: 725px;
    background: transparent;
    border-radius: 0;
    overflow: hidden;
    transform: scale(var(--bt-scale));
    transition: height 0.62s var(--bt-ease-out) 0.04s;
}

html.dark-mode .item-screenshot--bin-toss .bt-card {
    color: #ededed;
}

.item-screenshot--bin-toss .bt-card.is-deleted { height: 128px; }
.item-screenshot--bin-toss .bt-card.no-anim,
.item-screenshot--bin-toss .bt-card.no-anim * { transition: none !important; }

.item-screenshot--bin-toss .bt-dialog {
    position: absolute;
    left: 0;
    top: 0;
    width: 516px;
    height: 725px;
    transform-origin: 50% 40%;
    transition:
        opacity 0.22s ease,
        filter 0.26s ease,
        transform 0.4s var(--bt-ease-out);
}

.item-screenshot--bin-toss .bt-card.is-deleted .bt-dialog {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(-8px) scale(0.97);
    pointer-events: none;
}

.item-screenshot--bin-toss .bt-card.is-restoring .bt-dialog {
    animation: bt-dialog-in 0.3s ease backwards;
}

@keyframes bt-dialog-in {
    from { opacity: 0.55; filter: blur(2px); }
    to   { opacity: 1;    filter: blur(0); }
}

.item-screenshot--bin-toss .bt-dialog__header {
    position: relative;
    z-index: 10;
    padding: 38px 37px 0;
    pointer-events: none;
}

.item-screenshot--bin-toss .bt-dialog__header h2 {
    margin: 0;
    font-size: 24px;
    line-height: 30px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: #151515;
}

html.dark-mode .item-screenshot--bin-toss .bt-dialog__header h2 { color: #f2f2f2; }

.item-screenshot--bin-toss .bt-dialog__header p {
    margin: 9px 0 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    letter-spacing: -0.003em;
    color: #555555;
}

html.dark-mode .item-screenshot--bin-toss .bt-dialog__header p { color: #a9a9a9; }

.item-screenshot--bin-toss .bt-dialog__footer {
    position: absolute;
    left: 37px;
    right: 49px;
    bottom: 42px;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14.5px;
    line-height: 20px;
    pointer-events: none;
}

.item-screenshot--bin-toss .bt-hint { color: #727272; }
.item-screenshot--bin-toss .bt-hint b { font-weight: 500; color: #2b2b2b; }
html.dark-mode .item-screenshot--bin-toss .bt-hint { color: #9c9c9c; }
html.dark-mode .item-screenshot--bin-toss .bt-hint b { color: #e2e2e2; }
.item-screenshot--bin-toss .bt-hint .bt-muted { color: #8a8a8a; }
.item-screenshot--bin-toss .bt-misses { color: #8a8a8a; font-size: 14px; }

.item-screenshot--bin-toss .bt-arena {
    position: absolute;
    inset: 0;
}

.item-screenshot--bin-toss .bt-bin {
    position: absolute;
    left: 194px;
    top: 259px;
    width: 128px;
    height: 168px;
    overflow: visible;
    transform-origin: 64px 156px;
    pointer-events: none;
}
.item-screenshot--bin-toss .bt-bin--back  { z-index: 1; }
.item-screenshot--bin-toss .bt-bin--front { z-index: 3; }

.item-screenshot--bin-toss .bt-bin-shadow {
    position: absolute;
    left: 183px;
    top: 404px;
    width: 150px;
    height: 22px;
    border-radius: 50%;
    background:
        radial-gradient(closest-side, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.06) 55%, rgba(0, 0, 0, 0)) 50% 40% / 78% 55% no-repeat,
        radial-gradient(closest-side, rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0));
    filter: blur(1.5px);
    z-index: 0;
    pointer-events: none;
}

.item-screenshot--bin-toss .bt-ball {
    position: absolute;
    left: 0;
    top: 0;
    width: 54px;
    height: 54px;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    will-change: transform;
    filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
}
.item-screenshot--bin-toss .bt-ball svg { display: block; width: 100%; height: 100%; }
.item-screenshot--bin-toss .bt-ball.is-behind { z-index: 2; }

.item-screenshot--bin-toss .bt-ball-shadow {
    position: absolute;
    left: 0;
    top: 0;
    width: 46px;
    height: 9px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.13), rgba(0, 0, 0, 0));
    opacity: 0;
    z-index: 0;
    pointer-events: none;
    will-change: transform, opacity;
}

.item-screenshot--bin-toss .bt-file {
    position: absolute;
    left: 0;
    top: 0;
    width: 64px;
    height: 78px;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    z-index: 4;
    cursor: grab;
    touch-action: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    will-change: transform;
    outline: none;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.05));
    transition: filter 0.2s ease;
}
.item-screenshot--bin-toss .bt-file svg { display: block; width: 100%; height: 100%; }
.item-screenshot--bin-toss .bt-file.is-lifted {
    filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.12)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.05));
}
.item-screenshot--bin-toss .bt-file:focus-visible {
    filter: drop-shadow(0 0 0.5px #9a9a9a) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.05));
}

.item-screenshot--bin-toss .bt-file-label {
    position: absolute;
    left: 158px;
    top: 576px;
    width: 200px;
    text-align: center;
    font-size: 13.5px;
    line-height: 20px;
    color: #6c6c6c;
    z-index: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}
html.dark-mode .item-screenshot--bin-toss .bt-file-label { color: #a3a3a3; }

.item-screenshot--bin-toss .bt-ghost {
    position: absolute;
    left: 0;
    top: 0;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border-radius: 50%;
    background: rgba(40, 40, 40, 0.13);
    border: 2px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 6;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}
.item-screenshot--bin-toss .bt-ghost::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid rgba(60, 60, 60, 0.25);
    opacity: 0;
}
.item-screenshot--bin-toss .bt-ghost.is-pressing::after { animation: bt-ghost-ripple 0.5s ease-out; }
@keyframes bt-ghost-ripple {
    from { opacity: 0.8; transform: scale(1); }
    to   { opacity: 0;   transform: scale(1.9); }
}

.item-screenshot--bin-toss .bt-puffs { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.item-screenshot--bin-toss .bt-puff {
    position: absolute;
    border-radius: 50%;
    background: #e6e6e6;
    filter: blur(1.4px);
}

.item-screenshot--bin-toss .bt-toast {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 516px;
    height: 128px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 37px 0 36px;
    pointer-events: none;
}

.item-screenshot--bin-toss .bt-toast > * { opacity: 0; }
.item-screenshot--bin-toss .bt-card.is-deleted .bt-toast { pointer-events: auto; }
.item-screenshot--bin-toss .bt-card.is-deleted .bt-toast > * {
    opacity: 1;
    transform: none;
    filter: blur(0);
    transition:
        opacity 0.32s ease var(--bt-d, 0s),
        transform 0.5s var(--bt-ease-out) var(--bt-d, 0s),
        filter 0.36s ease var(--bt-d, 0s);
}
.item-screenshot--bin-toss .bt-card.is-deleted .bt-toast > .bt-toast__icon {
    --bt-d: 0.2s;
    transition:
        opacity 0.2s ease var(--bt-d),
        transform 0.55s var(--bt-spring-pop) var(--bt-d);
}
.item-screenshot--bin-toss .bt-card.is-deleted .bt-toast > .bt-toast__text { --bt-d: 0.27s; }
.item-screenshot--bin-toss .bt-card.is-deleted .bt-toast > .bt-toast__undo {
    --bt-d: 0.34s;
    transition:
        opacity 0.32s ease var(--bt-d),
        transform 0.5s var(--bt-ease-out) var(--bt-d),
        filter 0.36s ease var(--bt-d),
        background-color 0.15s ease,
        border-color 0.15s ease;
}

.item-screenshot--bin-toss .bt-toast__icon {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 50% 20%, #f5585a 0%, #e5383b 45%, #cf2427 100%);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.25),
        inset 0 -2px 4px rgba(0, 0, 0, 0.12),
        0 2px 6px rgba(214, 40, 43, 0.25);
    transform: scale(0.4) rotate(-14deg);
}
.item-screenshot--bin-toss .bt-toast__icon svg { width: 20px; height: 20px; }

.item-screenshot--bin-toss .bt-toast__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.item-screenshot--bin-toss .bt-toast__text strong {
    font-size: 17px;
    line-height: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #1a1a1a;
}
html.dark-mode .item-screenshot--bin-toss .bt-toast__text strong { color: #f2f2f2; }
.item-screenshot--bin-toss .bt-toast__text span {
    margin-top: 3px;
    font-size: 15px;
    line-height: 20px;
    color: #6b6b6b;
}
html.dark-mode .item-screenshot--bin-toss .bt-toast__text span { color: #a3a3a3; }

.item-screenshot--bin-toss .bt-toast__undo {
    flex: none;
    height: 42px;
    padding: 0 15px;
    border-radius: 12px;
    border: 1.5px solid #e3e3e3;
    background: #fff;
    font: 500 15px/1 "Inter Display", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    color: #2c2c2c;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.item-screenshot--bin-toss .bt-toast__undo:hover { background: #fafafa; border-color: #d9d9d9; }
.item-screenshot--bin-toss .bt-toast__undo:active { transform: scale(0.97); }
.item-screenshot--bin-toss .bt-toast__undo:focus-visible { outline: 2px solid #c9c9c9; outline-offset: 2px; }

html.dark-mode .item-screenshot--bin-toss .bt-toast__undo {
    background: #262626;
    border-color: #3a3a3a;
    color: #ededed;
}
html.dark-mode .item-screenshot--bin-toss .bt-toast__undo:hover {
    background: #303030;
    border-color: #4a4a4a;
}

/* --- Shopping (Kanaka) — a fake jewellery storefront with three cards; click
   a card and the piece lifts out of its image in 3D over a dimmed page. The
   browser mockup is laid out in a fixed 1142x1148 stage coordinate system
   that the JS scales to fit the tile via --kn-scale. Everything is scoped
   under .item-screenshot--shopping with `kn-`-prefixed class names so the
   generic names (.card, .window, .focus, .nav, .grid) cannot leak out. */
@font-face {
    font-family: "KanakaInter";
    src: url("assets/Shopping/assets/fonts/Inter.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}
@font-face {
    font-family: "KanakaInterTight";
    src: url("assets/Shopping/assets/fonts/InterTight.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}

.item-screenshot--shopping {
    padding: 0;
    overflow: hidden;
    background: transparent;
}

.item-screenshot--shopping [data-shopping-mount] {
    position: absolute;
    inset: 0;
}

.item-screenshot--shopping .kn-viewport {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: "KanakaInter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    color: #161616;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.proto-overlay__pane--media .item-screenshot--shopping .kn-viewport {
    pointer-events: auto;
}

.item-screenshot--shopping .kn-frame {
    position: relative;
    width: calc(968px * var(--kn-scale, 1));
    height: calc(748px * var(--kn-scale, 1));
    border-radius: calc(30px * var(--kn-scale, 1));
    background: transparent;
    overflow: hidden;
    flex: none;
}

.item-screenshot--shopping .kn-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 968px;
    height: 748px;
    transform: scale(var(--kn-scale, 1));
    transform-origin: 0 0;
    background: transparent;
    touch-action: none;
    isolation: isolate;
}

.item-screenshot--shopping .kn-stage.is-grab { cursor: grab; }
.item-screenshot--shopping .kn-stage.is-grabbing,
.item-screenshot--shopping .kn-stage.is-grabbing * { cursor: grabbing; }

.item-screenshot--shopping .kn-t {
    position: absolute;
    font-size: calc(var(--kn-fs) * 1px);
    line-height: 1;
    top: calc(var(--kn-base) * 1px - var(--kn-fs) * 0.8633 * 1px);
    white-space: nowrap;
}

.item-screenshot--shopping .kn-window {
    position: absolute;
    left: 40px;
    top: 40px;
    width: 888px;
    height: 668px;
    background: #fff;
    border-radius: 10px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 12px 28px rgba(0, 0, 0, 0.04),
        0 40px 90px rgba(0, 0, 0, 0.06);
}

.item-screenshot--shopping .kn-traffic .kn-dot {
    position: absolute;
    top: 33px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
}
.item-screenshot--shopping .kn-dot--red    { left: 31px; background: #fd3c00; }
.item-screenshot--shopping .kn-dot--yellow { left: 54.5px; background: #fd8c00; }
.item-screenshot--shopping .kn-dot--green  { left: 76.5px; background: #028a3d; }

.item-screenshot--shopping .kn-pill {
    position: absolute;
    top: 15px;
    height: 46px;
    border-radius: 23px;
    background: #fff;
    box-shadow: 0 0 0 1px #f5f5f5, 0 1px 3px rgba(0, 0, 0, 0.035);
}

.item-screenshot--shopping .kn-url {
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    padding: 0 22px 0 52px;
}

.item-screenshot--shopping .kn-url__icon {
    position: absolute;
    left: 9.5px;
    top: 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #141414;
    display: grid;
    place-items: center;
}
.item-screenshot--shopping .kn-url__icon svg { width: 13px; height: 10px; fill: #fff; }

.item-screenshot--shopping .kn-url__text {
    position: static;
    --kn-fs: 20.8;
    --kn-base: 32.5;
    left: 52px;
    color: #1c1c1c;
    font-weight: 500;
    letter-spacing: 0;
}

.item-screenshot--shopping .kn-user {
    right: 16px;
    display: flex;
    align-items: center;
    padding: 0 22px 0 45px;
}

.item-screenshot--shopping .kn-user__dot {
    position: absolute;
    left: 18px;
    top: 19px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #1b7c3e;
}

.item-screenshot--shopping .kn-user__text {
    position: static;
    --kn-fs: 20.7;
    --kn-base: 31.5;
    left: 45px;
    color: #0b7a4a;
    font-weight: 500;
    letter-spacing: 0;
}

.item-screenshot--shopping .kn-page {
    position: absolute;
    left: 16px;
    top: 76px;
    right: 16px;
    bottom: 17px;
    background: transparent;
    box-shadow: none;
    font-family: "KanakaInterTight", "KanakaInter", -apple-system, BlinkMacSystemFont, sans-serif;
}

.item-screenshot--shopping .kn-nav {
    position: absolute;
    inset: 0 0 auto 0;
    width: auto;
    height: 88px;
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid #f0f0f0;
    z-index: auto;
}

.item-screenshot--shopping .kn-logo__mark {
    position: absolute;
    left: 40px;
    top: 35px;
    width: 22px;
    height: 17px;
    fill: #1a1a1a;
}

.item-screenshot--shopping .kn-logo__word {
    --kn-fs: 20.7;
    --kn-base: 52;
    left: 74px;
    font-weight: 600;
    letter-spacing: 0;
    color: #1a1a1a;
    font-family: "KanakaInter", -apple-system, BlinkMacSystemFont, sans-serif;
}

.item-screenshot--shopping .kn-logo__reg {
    font-size: 0.6em;
    font-weight: 400;
    margin-left: 2px;
    vertical-align: 0.55em;
    line-height: 0;
    color: #444;
}

.item-screenshot--shopping .kn-nav__links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.item-screenshot--shopping .kn-nav__links a,
.item-screenshot--shopping .kn-nav__bag {
    --kn-fs: 19;
    --kn-base: 51;
    font-weight: 500;
    color: #8a8b8a;
    text-decoration: none;
}

.item-screenshot--shopping .kn-nav__links li:nth-child(1) a { left: 293px; color: #434443; }
.item-screenshot--shopping .kn-nav__links li:nth-child(2) a { left: 383px; }
.item-screenshot--shopping .kn-nav__links li:nth-child(3) a { left: 480px; }
.item-screenshot--shopping .kn-nav__bag { left: 761px; color: #8f8f8f; font-weight: 400; }

.item-screenshot--shopping .kn-heading {
    --kn-fs: 26.3;
    --kn-base: 156;
    left: 44px;
    font-weight: 500;
    color: #161616;
    letter-spacing: 0;
}
.item-screenshot--shopping .kn-heading__count { color: #c0c0c0; font-weight: 400; }

.item-screenshot--shopping .kn-grid {
    position: absolute;
    left: 44px;
    top: 192px;
    display: grid;
    grid-template-columns: repeat(3, 236px);
    column-gap: 30px;
}

.item-screenshot--shopping .kn-card {
    position: relative;
    height: 340px;
    cursor: pointer;
    outline: none;
}
.item-screenshot--shopping .kn-card:focus-visible .kn-card__media { box-shadow: 0 0 0 3px #c9a24a; }

.item-screenshot--shopping .kn-card__media {
    width: 236px;
    height: 273px;
    background: #f5f1ea;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.item-screenshot--shopping .kn-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}
.item-screenshot--shopping .kn-card:hover .kn-card__media img { transform: scale(1.04); }

.item-screenshot--shopping .kn-card__title {
    --kn-fs: 18.9;
    --kn-base: 311;
    left: 0;
    font-weight: 500;
    color: #252525;
    letter-spacing: 0;
}

.item-screenshot--shopping .kn-card__price {
    --kn-fs: 18.5;
    --kn-base: 337.5;
    left: -1px;
    font-weight: 400;
    color: #858584;
}

.item-screenshot--shopping .kn-jewel {
    position: absolute;
    inset: 0;
    width: 968px;
    height: 748px;
    pointer-events: none;
    z-index: 2;
}

.item-screenshot--shopping .kn-focus {
    position: absolute;
    inset: 0;
    background: rgba(22, 15, 8, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s ease;
    z-index: 1;
}
.item-screenshot--shopping .kn-stage.is-focus .kn-focus { opacity: 1; pointer-events: auto; }

.item-screenshot--shopping .kn-focus-ui {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: 3;
}
.item-screenshot--shopping .kn-stage.is-focus .kn-focus-ui { opacity: 1; pointer-events: auto; }

.item-screenshot--shopping .kn-focus__close {
    position: absolute;
    top: 32px;
    right: 32px;
    width: 44px;
    height: 44px;
    border: 0;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.2s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.item-screenshot--shopping .kn-focus__close:hover { background: #fff; }
.item-screenshot--shopping .kn-focus__close:focus-visible { outline: 3px solid #d9b46a; outline-offset: 3px; }
.item-screenshot--shopping .kn-focus__close svg {
    width: 18px;
    height: 18px;
    stroke: #1a1a1a;
    stroke-width: 2.2;
    stroke-linecap: round;
    fill: none;
}

.item-screenshot--shopping .kn-focus__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 48px;
    text-align: center;
    font-family: "KanakaInterTight", "KanakaInter", sans-serif;
    transform: translateY(12px);
    transition: transform 0.4s ease 0.2s;
}
.item-screenshot--shopping .kn-stage.is-focus .kn-focus__caption { transform: none; }

.item-screenshot--shopping .kn-focus__name {
    margin: 0;
    font-size: 28px;
    font-weight: 500;
    color: #f6efe2;
    letter-spacing: -0.2px;
}
.item-screenshot--shopping .kn-focus__price {
    margin: 6px 0 0;
    font-size: 20px;
    font-weight: 500;
    color: #d9b46a;
}
.item-screenshot--shopping .kn-focus__hint {
    margin: 10px 0 0;
    font-size: 13px;
    color: rgba(246, 239, 226, 0.55);
}

.item-screenshot--shopping .kn-demo-cursor {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 5;
}
.item-screenshot--shopping .kn-stage.is-demo .kn-demo-cursor { opacity: 1; }

.item-screenshot--shopping .kn-demo-cursor__ring,
.item-screenshot--shopping .kn-demo-cursor__dot {
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.12s ease, height 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.item-screenshot--shopping .kn-demo-cursor__ring {
    width: 54px;
    height: 54px;
    border: 2px solid rgba(255, 255, 255, 0.95);
    background: rgba(30, 22, 12, 0.18);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.item-screenshot--shopping .kn-demo-cursor__dot {
    width: 12px;
    height: 12px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* ============================================================
   Email (Paper plane reply) — iframe-embedded standalone demo.
   The standalone prototype lives at assets/Email/index.html and
   runs its own JS. Mirrors the Shopping wrap pattern: a frame
   with calc()-scaled physical dimensions wraps an inner iframe
   fixed at 1180x780 that is transform-scaled from the top-left.
   ============================================================ */
.item-screenshot--email,
.proto-tile__media .item-screenshot.item-screenshot--email,
.proto-overlay__pane--media .item-screenshot.item-screenshot--email {
    position: relative;
    overflow: hidden;
    background: #fff;
}

.item-screenshot--email .em-viewport {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.item-screenshot--email .em-frame {
    position: relative;
    width: calc(1180px * var(--em-scale, 1));
    height: calc(780px * var(--em-scale, 1));
    background: #fff;
    overflow: hidden;
    flex: none;
}

.item-screenshot--email .em-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 1180px;
    height: 780px;
    border: 0;
    background: #fff;
    transform: scale(var(--em-scale, 1));
    transform-origin: 0 0;
    pointer-events: none;
    color-scheme: light;
}

.proto-overlay__pane--media .item-screenshot--email .em-stage {
    pointer-events: auto;
}

/* ============================================================
   Spectral card (WebGL Sierpinski hologram) prototype
   Standalone prototype at assets/Spectral/index.html runs its
   own JS. Native 500x720 iframe scaled by --sp-scale to fit.
   ============================================================ */
.item-screenshot--spectral,
.proto-tile__media .item-screenshot.item-screenshot--spectral,
.proto-overlay__pane--media .item-screenshot.item-screenshot--spectral {
    position: relative;
    overflow: hidden;
    background: #08090b;
}

.item-screenshot--spectral .sp-viewport {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.item-screenshot--spectral .sp-frame {
    position: relative;
    width: calc(500px * var(--sp-scale, 1));
    height: calc(720px * var(--sp-scale, 1));
    background: transparent;
    overflow: hidden;
    flex: none;
}

.item-screenshot--spectral .sp-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 500px;
    height: 720px;
    border: 0;
    background: transparent;
    transform: scale(var(--sp-scale, 1));
    transform-origin: 0 0;
    pointer-events: none;
    color-scheme: dark;
}

.proto-overlay__pane--media .item-screenshot--spectral .sp-stage {
    pointer-events: auto;
}

/* ============================================================
   Stage Card (Knockout video pass) prototype. Standalone demo
   at assets/StageCard/index.html runs its own JS; the parent
   scales a 500x720 iframe via --sc-scale to fit the tile.
   ============================================================ */
.item-screenshot--stage-card,
.proto-tile__media .item-screenshot.item-screenshot--stage-card,
.proto-overlay__pane--media .item-screenshot.item-screenshot--stage-card {
    position: relative;
    overflow: hidden;
    background-color: #292b2e;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 48px 48px;
    background-position: center center;
}

@media (prefers-color-scheme: light) {
    .item-screenshot--stage-card,
    .proto-tile__media .item-screenshot.item-screenshot--stage-card,
    .proto-overlay__pane--media .item-screenshot.item-screenshot--stage-card {
        background-color: #e9e9ec;
        background-image:
            linear-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px),
            linear-gradient(90deg, rgba(0, 0, 0, 0.06) 1px, transparent 1px);
    }
}

/* Vignette painted on the parent so the darkening sweeps past the
   iframe edges all the way to the tile corners; the standalone's
   body::before is hidden in embed mode to avoid stacking two */
.item-screenshot--stage-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.45) 100%);
    z-index: 2;
}

@media (prefers-color-scheme: light) {
    .item-screenshot--stage-card::after {
        background: radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.08) 100%);
    }
}

.item-screenshot--stage-card .sc-viewport {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.item-screenshot--stage-card .sc-frame {
    position: relative;
    width: calc(1000px * var(--sc-scale, 1));
    height: calc(750px * var(--sc-scale, 1));
    background: transparent;
    overflow: hidden;
    flex: none;
}

.item-screenshot--stage-card .sc-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 1000px;
    height: 750px;
    border: 0;
    background: transparent;
    transform: scale(var(--sc-scale, 1));
    transform-origin: 0 0;
    pointer-events: none;
    color-scheme: dark;
}

.proto-overlay__pane--media .item-screenshot--stage-card .sc-stage {
    pointer-events: auto;
}

.item-screenshot--shopping .kn-demo-cursor.is-pressed .kn-demo-cursor__ring {
    width: 40px;
    height: 40px;
    background: rgba(217, 180, 106, 0.45);
}
.item-screenshot--shopping .kn-demo-cursor.is-grab .kn-demo-cursor__ring {
    width: 46px;
    height: 46px;
    border-color: #d9b46a;
    background: rgba(217, 180, 106, 0.3);
}
.item-screenshot--shopping .kn-demo-cursor.is-grab .kn-demo-cursor__dot { background: #d9b46a; }

/* --- Writing card (typed notes displayed in place of a screenshot) --- */
.writing-card {
    width: 100%;
    background-color: var(--color-bg-surface);
    border: var(--border-width-1) solid var(--color-border-subtle);
    border-radius: var(--border-radius-sm);
    padding: clamp(var(--spacing-24), 4vw, var(--spacing-40));
}

.writing-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-14);
}

.writing-list li {
    position: relative;
    padding-left: var(--spacing-20);
    color: var(--color-text-grey-light);
    font-size: clamp(var(--font-size-14), 1.6vw, var(--font-size-16));
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--letter-spacing-wide);
}

.writing-list li::before {
    content: "–";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-text-grey-dark);
}

/* Duplicated cards exist only to make the carousel wrap seamlessly; the
   grid view shows the canonical set once. */
.media-showcase[data-view="grid"] .media-card--clone {
    display: none;
}

@media (min-width: 1921px) {
    .media-showcase[data-view="grid"] .media-track {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 640px) {
    .media-nav {
        display: none;
    }
}

/* =========================================
   5. CASE STUDY: EDITORIAL LAYOUT
   ========================================= */
.layout-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: var(--spacing-60); 
    max-width: var(--container-width-xl);
    margin: 0 auto;
    position: relative;
    padding: 0 var(--spacing-20);
}

.editorial-container {
    width: 100%;
    max-width: var(--container-width-hero);
    margin: 0 auto;
    padding: var(--spacing-80) 0 var(--spacing-120) 0;
    box-sizing: border-box;
    color: var(--color-white);
}

.nav-container {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    width: 100%;
    margin-bottom: var(--spacing-48);
}

.editorial-back {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-8); 
    color: var(--color-text-grey-dark);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-12) var(--spacing-18);
    margin-left: calc(var(--spacing-6) * -1); 
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);
}

.editorial-back:hover {
    background-color: var(--color-bg-surface-hover); 
    color: var(--color-accent); 
}

/* Header Elements */
.editorial-meta {
    font-size: var(--font-size-14);
    color: var(--color-text-grey-dark);
    margin-bottom: var(--spacing-16);
    letter-spacing: var(--letter-spacing-wider);
}

.editorial-meta .highlight {
    color: var(--color-success); 
    font-style: normal;
}

.editorial-title {
    font-size: clamp(var(--font-size-32), 5vw, var(--font-size-48));
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-tighter);
    margin-bottom: var(--spacing-24);
    color: var(--color-white);
}

.editorial-excerpt {
    font-size: clamp(var(--font-size-16), 2vw, var(--font-size-20));
    font-style: italic;
    line-height: var(--line-height-base);
    letter-spacing: var(--letter-spacing-wider);
    color: var(--color-text-grey-light);
    margin-bottom: var(--spacing-40);
}

.editorial-divider {
    border: 0;
    border-top: var(--border-width-1) solid var(--color-border-subtle);
    margin-bottom: var(--spacing-40);
}

/* Body Elements */
.editorial-label {
    width: 100%;
    max-width: var(--container-width-md);
    margin-bottom: var(--spacing-20);
}

.editorial-label span {
    color: var(--color-accent);
    font-size: var(--font-size-12);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps);
    font-weight: var(--font-weight-semibold);
}

.editorial-section-title {
    font-size: clamp(var(--font-size-24), 4vw, var(--font-size-32));
    font-weight: var(--font-weight-medium);
    color: var(--color-text-offwhite);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-base);
    padding-bottom: var(--spacing-4);
    margin-top: var(--spacing-4);
    margin-bottom: var(--spacing-12);
    width: 100%;
}

.editorial-section-subtitle {
    font-size: clamp(var(--font-size-18), 2.4vw, var(--font-size-22));
    font-weight: var(--font-weight-medium);
    color: var(--color-text-offwhite);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-base);
    margin-top: var(--spacing-32);
    margin-bottom: var(--spacing-8);
    width: 100%;
}

.editorial-body {
    font-size: clamp(var(--font-size-16), 2vw, var(--font-size-18));
    line-height: var(--line-height-loose);
    letter-spacing: var(--letter-spacing-wider);
    color: var(--color-text-offwhite);
}

.editorial-body p {
    margin-bottom: var(--spacing-24);
}

/* Editorial Lists & Tables */
.editorial-body ul {
    margin: 0 0 var(--spacing-24) var(--spacing-20);
    padding: 0;
}

.editorial-body li {
    margin-bottom: var(--spacing-12);
    line-height: var(--line-height-relaxed);
}

/* Generic .editorial-body table styling targets the simple "Project at a
   glance" tables. The .table component (inside .table-wrapper) has its own
   design tokens further down, so we exclude it here to keep the wrapper's
   rounded border flush against the header row and to avoid a specificity
   arms race with the mobile overrides. */
.editorial-body table:not(.table) {
    width: 100%;
    margin-top: var(--spacing-16);
    margin-bottom: var(--spacing-24);
    border-collapse: collapse;
    text-align: left;
}

.editorial-body table:not(.table) td {
    padding: var(--spacing-10) 0;
    vertical-align: top;
}

.editorial-body table:not(.table) td:first-child {
    padding-right: var(--spacing-32);
}

.editorial-body table:not(.table) td p {
    margin-bottom: 0;
    font-size: var(--font-size-16);
    color: var(--color-text-grey-light);
}

/* Table */
.table-wrapper {
    width: 100%;
    overflow-x: scroll;
    margin: var(--spacing-32) 0;
    border: var(--border-width-1) solid var(--color-border-subtle);
    border-radius: var(--border-radius-md);
    scrollbar-width: thin;
    scrollbar-color: var(--color-text-grey-dark) transparent;
}

.table-wrapper::-webkit-scrollbar {
    height: 6px;
}

.table-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.table-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--color-text-grey-dark);
    border-radius: var(--border-radius-sm);
}

.table-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-text-grey-mid);
}

.table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
    font-size: var(--font-size-14);
    line-height: var(--line-height-relaxed);
}

.table thead th {
    background-color: var(--color-bg-surface);
    padding: var(--spacing-8) var(--spacing-12);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-grey-dark);
    text-align: left;
    border-bottom: var(--border-width-1) solid var(--color-border-subtle);
    letter-spacing: var(--letter-spacing-wider);
    font-size: var(--font-size-12);
    text-transform: uppercase;
    white-space: nowrap;
}

.table tbody td {
    padding: var(--spacing-8) var(--spacing-12);
    border-bottom: var(--border-width-1) solid var(--color-border-subtle);
    color: var(--color-text-grey-light);
    vertical-align: top;
}

.table tbody tr:last-child td {
    border-bottom: none;
    padding-bottom: var(--spacing-16);
}

.table tbody tr:first-child td {
    padding-top: var(--spacing-16);
}

.table .col-dimension {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-offwhite);
    white-space: nowrap;
}

.table .col-highlight {
    background-color: var(--color-accent-alpha-05);
}

.table thead th.col-highlight {
    color: var(--color-accent);
}

.table tbody td.col-highlight {
    color: var(--color-text-offwhite);
    font-weight: var(--font-weight-medium);
}

.table-good { color: var(--color-success); }
.table-bad { color: var(--color-text-grey-dark); }
.table-neutral { color: var(--color-text-grey-mid); }

/* =========================================
   6. COMPONENTS (Media, Cards, Flow)
   ========================================= */

/* --- Media Container --- */
.media-container {
    width: 100%;
    background-color: var(--color-bg-surface);
    border: var(--border-width-1) solid var(--color-border-solid);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-16);
    margin: var(--spacing-24) 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-16);
    overflow: hidden;
}

.media-container--final {
    border-color: #8b6fc7;
}

:root.dark-mode .media-container--final {
    border-color: #8b6fc7;
}

.media-container img,
.media-container video {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 80vh;
    display: block;
    margin: 0 auto;
}

/* Case-study video with light/dark variants; picks the video that matches the
   active theme. Selectors are prefixed with .media-container so they beat the
   .media-container video base rule on specificity. */
.media-container .case-video,
.media-container .case-image {
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
    display: block;
}
.media-container .case-video--dark,
.media-container .case-image--dark { display: none; }
:root.dark-mode .media-container .case-video--light,
:root.dark-mode .media-container .case-image--light { display: none; }
:root.dark-mode .media-container .case-video--dark,
:root.dark-mode .media-container .case-image--dark { display: block; }

.media-container:has(.case-video),
.media-container:has(.case-image) {
    padding: 0;
    gap: 0;
}

.editorial-body .media-container .media-caption {
    margin: var(--spacing-12) auto 0;
    font-family: "CircularXX TT", var(--font-family-base);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: -0.2px;
    color: #A0A0A0;
    text-align: center;
}

/* --- Flowchart --- */
.flow-container {
    width: 100%;
    background-color: var(--color-bg-surface);
    border: var(--border-width-1) solid var(--color-border-solid);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-16);
    margin: var(--spacing-24) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flow-node {
    background-color: var(--color-bg-surface-hover); 
    color: var(--color-text-offwhite);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-regular);
    padding: var(--spacing-12) var(--spacing-20);
    border-radius: var(--border-radius-sm);
    text-align: center;
    border: var(--border-width-1) solid var(--color-border-subtle);
}

.flow-arrow {
    color: var(--color-border-solid);
    font-size: var(--font-size-18);
    margin: var(--spacing-8) 0;
    opacity: var(--opacity-high);
}

.flow-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-16);
    position: relative;
}

/* --- Text Container --- */
.text-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-20);
    width: 100%;
    margin: var(--spacing-32) 0;
}

.text-card {
    background-color: var(--color-bg-surface);
    border: var(--border-width-1) solid var(--color-border-solid);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-16);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.text-card p {
    margin-bottom: var(--spacing-12);
    font-size: clamp(var(--font-size-16), 4vw, var(--font-size-18));
    font-weight: var(--font-weight-regular);
}

.text-card p:last-child,
.text-card ul:last-child,
.text-card ol:last-child {
    margin-bottom: 0;
}

/* --- Stat Grid (headline numbers with captions) --- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--spacing-32);
    width: 100%;
    margin: var(--spacing-24) 0 var(--spacing-40);
}

.stat-value {
    font-size: clamp(var(--font-size-42), 5vw, var(--font-size-64));
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    letter-spacing: var(--letter-spacing-tighter);
    color: var(--color-white);
    margin-bottom: var(--spacing-12);
}

.stat-label {
    font-size: var(--font-size-14);
    color: var(--color-text-grey-dark);
    line-height: 1.4;
}

@media (max-width: 768px) {
    .stat-grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-24); }
    .stat-value { font-size: var(--font-size-32); }
}

/* --- Callout Box --- */
.callout-box {
    background-color: var(--color-bg-surface);
    border: var(--border-width-1) solid var(--color-border-solid);
    border-left: var(--border-width-4) solid var(--color-accent);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-16);
    margin: var(--spacing-40) 0;
}

.callout-title {
    font-size: clamp(var(--font-size-16), 4vw, var(--font-size-18));
    font-weight: var(--font-weight-regular);
    font-style: italic;
    color: var(--color-white);
    margin: 0;
}

/* --- Chip Group Component (interactive) --- */
/* Colours + typography sampled from Dhan Charts Figma component; hardcoded so the
   chip looks identical regardless of the portfolio's light/dark theme.
   Font spec: CircularXX TT Book 12/14, letter-spacing -0.41. */
.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid #EDEDED;
    border-radius: 4px;
    padding: 8px;
    zoom: 2;
}

.chip {
    padding: 2px 8px;
    background-color: #ffffff;
    color: #817E7E;
    border: 1px solid #EDEDED;
    border-radius: 4px;
    font-family: "CircularXX TT", var(--font-family-base);
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: -0.41px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    user-select: none;
}

.chip:hover:not(.chip--selected) {
    background-color: #FAFAFA;
}

.chip--selected {
    background-color: #4B9B08;
    color: #ffffff;
    border-color: #4B9B08;
}

.chip:focus-visible {
    outline: 2px solid #4B9B08;
    outline-offset: 2px;
}

/* --- Authorisation Sheet Component (interactive OTP) --- */
/* Sheet chrome, illustration, note bar are static; only .otp-cell inputs are interactive.
   Colours sampled from Dhan Charts Figma so the sheet renders identically in light/dark. */
.auth-sheet {
    width: 100%;
    max-width: 360px;
    background-color: #ffffff;
    border: 1px solid #EDEDED;
    border-radius: 12px;
    padding: 24px 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    font-family: "CircularXX TT", var(--font-family-base);
    color: #1A1A1A;
}

.auth-sheet__illustration {
    width: 155.386px;
    height: 160px;
    margin: 0 auto 16px;
    display: block;
}

.auth-sheet__title {
    margin: 0 0 32px;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: -0.41px;
    color: #363636;
    text-align: center;
}

.auth-sheet__subtitle {
    margin: 0 0 12px;
    align-self: stretch;
    text-align: left;
    font-size: 12px;
    font-weight: 450;
    line-height: 16px;
    letter-spacing: -0.41px;
    color: #817E7E;
}

.auth-sheet__subtitle strong {
    color: #363636;
    font-weight: 500;
}

.auth-sheet__otp {
    display: flex;
    gap: 8px;
    width: 100%;
    margin: 0 0 12px;
}

.otp-cell {
    flex: 1;
    aspect-ratio: 1 / 1;
    min-width: 0;
    text-align: center;
    font-family: "CircularXX TT", var(--font-family-base);
    font-size: 20px;
    font-weight: 700;
    color: #138C61;
    background-color: #ffffff;
    border: 1px solid #C8C8C8;
    border-radius: 8px;
    outline: none;
    caret-color: transparent;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    -moz-appearance: textfield;
}

.otp-cell::-webkit-outer-spin-button,
.otp-cell::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.otp-cell:focus {
    border-color: #138C61;
    box-shadow: 0 0 0 4px rgba(19, 140, 97, 0.15);
}

.otp-cell.otp-cell--filled:not(:focus) {
    -webkit-text-security: disc;
    color: #138C61;
}

.auth-sheet__resend {
    margin: 0 0 64px;
    align-self: flex-start;
    font-size: 12px;
    font-weight: 450;
    line-height: 16px;
    letter-spacing: -0.41px;
    color: #817E7E;
}

.auth-sheet__resend a {
    color: #1F6FEB;
    font-weight: 500;
    text-decoration: none;
}

.auth-sheet__resend a:hover {
    text-decoration: underline;
}

.auth-sheet__note {
    width: calc(100% + 40px);
    margin: 4px -20px 0;
    padding: 12px 20px;
    background-color: #FFFAEB;
    font-family: "CircularXX TT", var(--font-family-base);
    font-size: 12px;
    font-weight: 450;
    line-height: 16px;
    letter-spacing: -0.41px;
    color: #817E7E;
}

.auth-sheet__note span {
    color: #EF9309;
    font-weight: 500;
    margin-right: 4px;
}

/* --- Persistent Status Bar Component (interactive) --- */
/* Bottom-anchored system-state indicator. Colours sampled from Dhan Charts Figma. */
.status-bar {
    width: 100%;
    max-width: 420px;
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #ffffff;
    border: 1px solid #EDEDED;
    border-radius: 8px;
    padding: 12px 16px;
    font-family: "CircularXX TT", var(--font-family-base);
}

.status-bar__indicator {
    width: 16px;
    height: 16px;
    display: block;
    flex-shrink: 0;
}

.editorial-body .status-bar__label {
    flex: 1;
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: -0.41px;
    color: #363636;
    text-align: left;
}

.status-bar__edit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: -0.41px;
    color: #817E7E;
    cursor: pointer;
    transition: color 0.15s ease;
}

.status-bar__edit svg {
    display: block;
    width: 16px;
    height: 16px;
}

.status-bar__edit:hover {
    color: #363636;
}

.status-bar__edit:focus-visible {
    outline: 2px solid #4B9B08;
    outline-offset: 2px;
    outline-offset: 4px;
}

.status-bar-states {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.status-bar-state {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    align-items: center;
}

.editorial-body .status-bar-state__caption {
    margin: 0;
    font-family: "CircularXX TT", var(--font-family-base);
    font-size: 12px;
    font-weight: 450;
    letter-spacing: -0.41px;
    color: #817E7E;
    text-align: center;
    max-width: 420px;
    width: 100%;
}

/* --- Prompt Action Card Component --- */
.prompt-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-20);
    background-color: var(--color-bg-surface);
    border: var(--border-width-1) solid var(--color-border-solid);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-16);
    margin: var(--spacing-32) 0;
    text-decoration: none;
    transition: all var(--transition-base);
    width: 100%;
    cursor: pointer;
}

.prompt-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.prompt-icon ion-icon,
.prompt-icon svg {
    font-size: var(--spacing-24);
    width: var(--spacing-24);
    height: var(--spacing-24);
    color: var(--color-text-offwhite);
    transition: color var(--transition-base);
}

.prompt-text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.prompt-text h3 {
    color: var(--color-text-offwhite);
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-medium);
    margin: 0;
    transition: color var(--transition-base);
}

.prompt-text p {
    color: var(--color-text-grey-light);
    font-size: var(--font-size-14);
    margin: 0;
    line-height: var(--line-height-base);
    letter-spacing: var(--letter-spacing-wide);
}

/* Turns the icon and title to your brand accent color on hover */
.prompt-card:hover .prompt-icon ion-icon,
.prompt-card:hover .prompt-icon svg,
.prompt-card:hover .prompt-text h3 {
    color: var(--color-accent);
}

/* Static variant: no hover, boxed icon */
.prompt-card--static { cursor: default; }
.prompt-card--static:hover .prompt-icon ion-icon,
.prompt-card--static:hover .prompt-icon svg,
.prompt-card--static:hover .prompt-text h3 {
    color: var(--color-text-offwhite);
}
.prompt-card--static .prompt-icon {
    width: var(--spacing-48);
    height: var(--spacing-48);
    border: var(--border-width-1) solid var(--color-border-solid);
    border-radius: var(--border-radius-sm);
    flex-shrink: 0;
}

/* --- VS Code Window Component --- */
.vscode-window {
    width: 100%;
    max-width: 600px;
    background-color: #1e1e1e; /* Official VS Code Dark Background */
    border-radius: var(--border-radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    text-align: left;
}

.vscode-header {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #252526; /* Official VS Code Tab Bar */
    padding: var(--spacing-10) var(--spacing-16);
    position: relative;
    border-bottom: 1px solid #333333;
}

.mac-dots {
    position: absolute;
    left: var(--spacing-16);
    display: flex;
    gap: 6px;
}

.mac-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.dot.red { background-color: #ff5f56; }
.dot.yellow { background-color: #ffbd2e; }
.dot.green { background-color: #27c93f; }

.file-name {
    color: #969696;
    font-size: var(--font-size-12);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    letter-spacing: var(--letter-spacing-wide);
}

.vscode-body {
    padding: var(--spacing-20) var(--spacing-24);
    overflow-x: auto;
}

.vscode-body pre {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: var(--font-size-14);
    line-height: var(--line-height-relaxed);
    color: #d4d4d4; /* Default VS Code text color */
}

/* --- VS Code Custom Scrollbar --- */
/* 1. Re-enable for Firefox */
.vscode-body {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

/* 2. Re-enable and style for Chrome/Safari/Edge */
.vscode-body::-webkit-scrollbar {
    display: block; /* Overrides your global display: none */
    height: 8px;    /* Height of the horizontal scrollbar */
}

.vscode-body::-webkit-scrollbar-track {
    background: transparent; 
    margin: 0 var(--spacing-4); /* Keeps it from hitting the exact edge */
}

.vscode-body::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.15); 
    border-radius: var(--border-radius-sm);
}

.vscode-body::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.3); 
}

/* VS Code Syntax Highlighting Colors */
.code-key { color: #569cd6; }    /* Blue for properties/keywords */
.code-string { color: #ce9178; } /* Orange for strings */
.code-comment { color: #6a9955; }/* Green for comments */
.code-punct { color: #cccccc; }  /* Light grey for punctuation */
.code-num { color: #b5cea8; }    /* Light green for numbers */
.code-func { color: #dcdcaa; }   /* Pale yellow for function names */
.code-type { color: #4ec9b0; }   /* Teal for classes and types */

/* =========================================
   7. SIDEBAR NAVIGATION (TOC)
   ========================================= */
.toc-sidebar {
    width: var(--spacing-240); 
    display: none; 
    position: sticky;
    top: var(--spacing-100);       
    height: fit-content; 
    z-index: var(--z-index-floating);
}

@media (min-width: 1100px) {
    .toc-sidebar {
        display: block;
    }
}

.toc-header {
    font-size: var(--font-size-12);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-grey-dark);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
    margin-bottom: var(--spacing-24);
}

.toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-left: var(--border-width-1) solid var(--color-border-subtle); 
}

.toc-link {
    display: block;
    font-size: var(--font-size-14);
    color: var(--color-text-grey-dark);
    padding: var(--spacing-8) 0 var(--spacing-8) var(--spacing-24); 
    line-height: var(--line-height-snug);
    transition: all var(--transition-fast);
    
    border-left: var(--border-width-2) solid transparent; 
    margin-left: calc(var(--border-width-1) * -1); 
}

.toc-link:hover {
    color: var(--color-text-grey-light);
}

.toc-link.active {
    color: var(--color-white); 
    border-left-color: var(--color-accent); 
    background: linear-gradient(90deg, var(--color-accent-alpha-05) 0%, transparent 100%); 
}

/* =========================================
   8. IMAGE COMPARISON SLIDER
   ========================================= */
.image-comparison {
    position: relative;
    width: 100%;
    border-radius: 0; /* Sharp corners to sit flush inside media-container */
    overflow: hidden;
    --position: 50%;
    box-shadow: 0 var(--spacing-10) var(--spacing-32) var(--color-white-alpha-15); 
}

.image-comparison img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}

.image-comparison__after {
    position: relative;
    z-index: var(--z-index-base);
}

.image-comparison__before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    clip-path: inset(0 calc(100% - var(--position)) 0 0);
}

.image-comparison__slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: ew-resize;
    z-index: var(--z-index-floating);
    margin: 0;
}

/* =========================================
   THE SCRUBBER HANDLE (Hardcoded Dark)
   ========================================= */
.image-comparison__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--position);
    width: var(--border-width-2);
    /* Hardcoded dark line to always contrast against the white screenshots */
    background-color: #111111; 
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-comparison__handle-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--spacing-8);
    width: var(--spacing-60); 
    height: var(--spacing-32);
    
    /* Hardcoded colors: Dark pill, white arrow icons */
    background-color: #111111; 
    color: #ffffff; 
    
    border-radius: var(--spacing-16); 
    /* Slightly stronger, hardcoded black shadow for maximum depth */
    box-shadow: 0 var(--spacing-4) var(--spacing-12) rgba(0, 0, 0, 0.4);
    /* Subtle inner border to give the pill a premium 3D feel */
    border: var(--border-width-1) solid rgba(255, 255, 255, 0.15);
    font-size: var(--font-size-16);
    transition: transform var(--transition-fast);
}

.image-comparison__slider:active + .image-comparison__handle .image-comparison__handle-btn {
    transform: scale(0.95);
}

/* =========================================
   SCROLL INDICATOR (Home page only)
   Vertical stack of tiny ticks pinned to the right edge; the active tick
   highlights the viewer's scroll position through the page.
   ========================================= */
.scroll-indicator {
    position: fixed;
    top: 50%;
    right: var(--spacing-24);
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-6);
    z-index: var(--z-index-nav);
    pointer-events: none;
}

.scroll-indicator__tick {
    width: var(--spacing-16);
    height: var(--spacing-1);
    background-color: var(--color-white);
    opacity: 0.35;
    border-radius: 999px;
    transition: background-color var(--transition-fast),
                opacity var(--transition-fast),
                width var(--transition-fast);
}

.scroll-indicator__tick.is-active {
    opacity: var(--opacity-full);
    width: var(--spacing-32);
}

@media (prefers-reduced-motion: reduce) {
    .scroll-indicator__tick {
        transition: none;
    }
}

/* Reserve the fixture for wider viewports; on mobile the ticks would crowd
   the content edge, so we hide them and rely on native scroll cues. */
@media (max-width: 768px) {
    .scroll-indicator {
        display: none;
    }
}

/* =========================================
   9. MOBILE & TABLET RESPONSIVENESS
   ========================================= */

/* --- TABLET (iPads, smaller laptops) --- */
@media (max-width: 1024px) {
    /* 1. Ensure uniform wide margins (48px) on tablet edges */
    nav { padding: var(--spacing-16) var(--spacing-48); }
    #hero {
        padding-top: var(--spacing-120);
        padding-left: var(--spacing-48);
        padding-right: var(--spacing-48);
    }
    #work, #personal { padding: 0 var(--spacing-48) var(--spacing-80); }
    
    /* 2. Step down the image height gracefully */
    .item-screenshot {
        min-height: 320px; 
    }
}

/* --- MOBILE (Phones) --- */
@media (max-width: 768px) {
    /* 1. Ensure uniform tight margins (24px) on phone edges */
    nav { padding: var(--spacing-16) var(--spacing-24); background-color: var(--color-nav-glass-mobile); }
    #hero { 
        min-height: auto; height: auto;
        padding-top: var(--spacing-140); 
        padding-bottom: var(--spacing-60);
        padding-left: var(--spacing-24); 
        padding-right: var(--spacing-24);
        align-items: flex-start; text-align: left; 
    }
    #work, #personal { padding: 0 var(--spacing-24) var(--spacing-80); }
    
    .hero-title { font-size: var(--font-size-42); margin-bottom: var(--spacing-16); }
    .hero-native { font-size: var(--font-size-18); }
    #quick-links { gap: var(--spacing-20); }
    .hero-footer { margin-top: var(--spacing-40); }
    
    /* 2. The Mobile Card Adjustments */
    .work-item {
        padding: var(--spacing-32) 0; 
        gap: var(--spacing-20); 
    }
    .work-info h3 { font-size: var(--font-size-20); }
    .work-info p { font-size: var(--font-size-14); color: var(--color-text-grey-mid); }
    .work-arrow { min-width: var(--spacing-24); }
   
    .item-screenshot {
        min-height: 0;
        border-radius: var(--border-radius-sm);
    }

    .item-screenshot img {
        width: 100%;
        height: 100%;
        /* Force it to match the 400px container */
        object-fit: contain;
        object-position: center;
        /* Zoom and crop to fill the empty space perfectly */
        display: block;
    }

    .work-item-meta {
        align-items: flex-start; 
    }

    /* Padded website cards - tighten breathing room on mobile */
    .item-screenshot--padded { padding: var(--spacing-16); }

    /* Editorial Overrides */
    .layout-wrapper { padding: 0; }
    .editorial-container { padding: var(--spacing-120) var(--spacing-24) var(--spacing-80); }
    .editorial-title { margin-bottom: var(--spacing-16); }
    .media-container { padding: var(--spacing-16); margin: var(--spacing-24) 0; }
    .flow-container { padding: var(--spacing-16); }
    .flow-node { font-size: var(--font-size-14); padding: var(--spacing-10) var(--spacing-16); }
    .flow-row { flex-direction: column; gap: var(--spacing-8); }
    .text-container { grid-template-columns: 1fr; gap: var(--spacing-16); }
    .text-card { padding: var(--spacing-16); }

    /* Tables - let cells wrap to viewport instead of forcing horizontal scroll off-screen */
    .table { min-width: 0; font-size: var(--font-size-12); }
    .table thead th { padding: var(--spacing-8); font-size: var(--font-size-11); }
    .table tbody td { padding: var(--spacing-8); }
    .table .col-dimension { white-space: normal; }
}

/* =========================================
   7. LIGHTBOX (Case-study image preview)
   ========================================= */

/* Custom magnifier cursor on case-study image containers (and the images
   inside). White fill + black stroke stays visible on both light and dark
   backgrounds. Falls back to zoom-in. Only containers that hold an <img> —
   video-only containers keep the default cursor. */
.media-container:has(img),
.media-container img {
    cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20 L28 28' stroke='white' stroke-width='6'/%3E%3Ccircle cx='13' cy='13' r='9' fill='white' stroke='white' stroke-width='4'/%3E%3Ccircle cx='13' cy='13' r='9' fill='white' stroke='black' stroke-width='2'/%3E%3Cpath d='M13 9 V17 M9 13 H17' stroke='black' stroke-width='2'/%3E%3Cpath d='M20 20 L28 28' stroke='black' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E") 13 13, zoom-in;
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-24);
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
    cursor: zoom-out;
}

:root.dark-mode .lightbox {
    background-color: rgba(0, 0, 0, 0.9);
}

.lightbox.is-open {
    opacity: 1;
    visibility: visible;
}

.lightbox__img {
    max-width: min(100%, 1400px);
    max-height: 90vh;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
    border-radius: var(--border-radius-sm);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    cursor: default;
    transform: scale(0.98);
    transition: transform var(--transition-base);
}

.lightbox.is-open .lightbox__img {
    transform: scale(1);
}

.lightbox__close,
.lightbox__nav {
    position: absolute;
    z-index: 2;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg-surface);
    border: var(--border-width-1) solid var(--color-border-solid);
    border-radius: 50%;
    color: var(--color-white);
    cursor: pointer;
    padding: 0;
    transition: background-color var(--transition-fast), opacity var(--transition-fast);
}

.lightbox__close { top: var(--spacing-20); right: var(--spacing-20); }
.lightbox__nav--prev { top: 50%; left: var(--spacing-20); transform: translateY(-50%); }
.lightbox__nav--next { top: 50%; right: var(--spacing-20); transform: translateY(-50%); }

.lightbox__close:hover,
.lightbox__nav:not(:disabled):hover {
    background-color: var(--color-bg-surface-hover);
}

.lightbox__nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.lightbox__close svg,
.lightbox__nav svg {
    width: 18px;
    height: 18px;
    display: block;
}

.lightbox__counter {
    position: absolute;
    bottom: var(--spacing-20);
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-text-grey);
    font-size: var(--font-size-12);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--letter-spacing-wide);
    padding: var(--spacing-6) var(--spacing-12);
    background-color: var(--color-bg-surface);
    border: var(--border-width-1) solid var(--color-border-solid);
    border-radius: 999px;
}

@media (max-width: 600px) {
    .lightbox__nav--prev { left: var(--spacing-12); }
    .lightbox__nav--next { right: var(--spacing-12); }
}

@media (prefers-reduced-motion: reduce) {
    .lightbox,
    .lightbox__img {
        transition: none;
    }
}

/* =========================================
   PROTOTYPES PAGE
   Standalone browsing surface at /prototypes.html.
   Mobbin-style: filter chips + sort selector + masonry grid of tiles.
   Each tile is clickable and expands into the shared overlay.
   ========================================= */
#proto-page {
    width: 100%;
    padding: var(--spacing-120) clamp(var(--spacing-16), 4vw, var(--spacing-64)) var(--spacing-120);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.proto-page__header {
    width: 100%;
    max-width: var(--container-width-xl);
    margin: 0 auto var(--spacing-32);
}

.proto-page__title {
    font-size: clamp(var(--font-size-32), 4vw, var(--font-size-48));
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-heading);
    color: var(--color-white);
    margin: 0 0 var(--spacing-12);
}

.proto-page__lede {
    font-size: var(--font-size-16);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-grey-dark);
    max-width: var(--container-width-md);
    margin: 0;
}

.proto-toolbar {
    width: 100%;
    max-width: var(--container-width-xl);
    margin: 0 auto var(--spacing-24);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-16);
    flex-wrap: wrap;
}

.proto-toolbar__filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-8);
}

.proto-sort {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-8);
    padding: var(--spacing-10) var(--spacing-16);
    border: var(--border-width-1) solid var(--color-border-subtle);
    border-radius: 999px;
    color: var(--color-text-grey-dark);
    font-size: var(--font-size-14);
    letter-spacing: var(--letter-spacing-wider);
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.proto-sort:hover {
    border-color: var(--color-border-solid);
    color: var(--color-white);
}

.proto-sort__label {
    opacity: 0;
    position: absolute;
    pointer-events: none;
}

.proto-sort__select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    padding: 0 var(--spacing-16) 0 0;
    cursor: pointer;
    outline: none;
}

.proto-sort__select:focus { outline: none; }
.proto-sort:focus-within {
    border-color: var(--color-border-solid);
    color: var(--color-white);
}

.proto-sort__chev {
    width: 14px;
    height: 14px;
    pointer-events: none;
    position: absolute;
    right: var(--spacing-12);
    color: inherit;
}

.proto-grid {
    width: 100%;
    max-width: var(--container-width-xl);
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-16);
    padding-bottom: var(--spacing-40);
}

.proto-col {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    gap: var(--spacing-16);
    min-width: 0;
}

.proto-tile {
    position: relative;
    display: block;
    width: 100%;
    background: var(--color-bg-surface);
    border: var(--border-width-1) solid var(--color-border-subtle);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    transition: transform var(--transition-base), border-color var(--transition-base);
}

.proto-tile[hidden] {
    display: none;
}

.proto-tile:hover {
    border-color: var(--color-border-solid);
    transform: translateY(-2px);
}

.proto-tile:focus-visible {
    outline: var(--border-width-2) solid var(--color-accent);
    outline-offset: var(--spacing-4);
}

.proto-tile--holo    { aspect-ratio: 4 / 3; }
.proto-tile--terrain { aspect-ratio: 4 / 3; }
.proto-tile--fold    { aspect-ratio: 10 / 16; }
.proto-tile--swap-cards { aspect-ratio: 4 / 3; }
.proto-tile--apple-duo { aspect-ratio: 4 / 3; }
.proto-tile--bin-toss  { aspect-ratio: 5 / 7; }
.proto-tile--shopping  { aspect-ratio: 968 / 748; }
.proto-tile--email     { aspect-ratio: 1180 / 780; }
.proto-tile--spectral  { aspect-ratio: 500 / 720; }
.proto-tile--stage-card { aspect-ratio: 4 / 3; }

.proto-tile__badge {
    position: absolute;
    top: var(--spacing-16);
    left: var(--spacing-16);
    z-index: 2;
    padding: var(--spacing-4) var(--spacing-12);
    background: var(--color-bg-surface-hover);
    border: var(--border-width-1) solid var(--color-border-subtle);
    border-radius: 999px;
    color: var(--color-white);
    font-size: var(--font-size-12);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-snug);
    pointer-events: none;
}

.proto-tile__media {
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.proto-tile__media .item-screenshot {
    width: 100%;
    height: 100%;
    min-height: 100%;
    aspect-ratio: auto;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.proto-empty {
    width: 100%;
    max-width: var(--container-width-xl);
    margin: var(--spacing-40) auto 0;
    text-align: center;
    color: var(--color-text-grey-dark);
    font-size: var(--font-size-14);
    letter-spacing: var(--letter-spacing-wider);
}

@media (max-width: 640px) {
    .proto-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .proto-sort { align-self: flex-end; }
}

/* --- Overlay (click a tile → opens here) --- */
/* ============================================================
   Prototype bottom sheet
   Sheet slides up from the bottom, media fills the top, title
   + description sit in a compact footer. Same markup/class names
   as the previous side-by-side overlay so per-prototype stage
   selectors (.proto-overlay__pane--media .item-screenshot--*)
   keep working untouched.
   ============================================================ */
.proto-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-index-nav);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
}

.proto-overlay[hidden] {
    display: none;
}

.proto-overlay__scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    animation: proto-fade 320ms cubic-bezier(0.32, 0.72, 0, 1);
}

.proto-overlay.is-closing .proto-overlay__scrim {
    animation: proto-fade-out 280ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

@keyframes proto-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes proto-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes proto-sheet-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@keyframes proto-sheet-down {
    from { transform: translateY(0); }
    to   { transform: translateY(100%); }
}

.proto-overlay__panel {
    position: relative;
    width: 100%;
    max-width: none;
    height: 95vh;
    max-height: 95dvh;
    background: var(--color-bg-base);
    border: var(--border-width-1) solid var(--color-border-subtle);
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: proto-sheet-up 360ms cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
}

.proto-overlay.is-closing .proto-overlay__panel {
    animation: proto-sheet-down 300ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

.proto-overlay__panel::before {
    content: "";
    position: absolute;
    top: var(--spacing-12);
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: var(--color-border-subtle);
    z-index: 3;
    pointer-events: none;
}

.proto-overlay__pane {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.proto-overlay__pane--media {
    flex: 1 1 auto;
    background: transparent;
    border: 0;
    padding: var(--spacing-32) var(--spacing-24) var(--spacing-24);
    min-height: 0;
    pointer-events: auto;
}

.proto-overlay__pane--media .item-screenshot {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    background: transparent;
    border: 0;
    border-radius: var(--border-radius-sm);
    pointer-events: auto;
}

.proto-overlay__pane--meta {
    flex: 0 0 auto;
    padding: var(--spacing-16) var(--spacing-32) var(--spacing-24);
    gap: var(--spacing-4);
    border-top: var(--border-width-1) solid var(--color-border-subtle);
    background: var(--color-bg-surface);
}

.proto-overlay__pane--meta h2 {
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
    margin: 0 0 var(--spacing-4) 0;
}

.proto-overlay__pane--meta p {
    font-size: var(--font-size-14);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-grey-dark);
    margin: 0;
    max-width: 72ch;
}

.proto-overlay__controls {
    position: absolute;
    top: var(--spacing-16);
    right: var(--spacing-16);
    z-index: 4;
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
}

.proto-overlay__nav-btn,
.proto-overlay__close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    background: var(--color-bg-surface);
    border: var(--border-width-1) solid var(--color-border-subtle);
    border-radius: 999px;
    color: var(--color-white);
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}

.proto-overlay__nav-btn:hover,
.proto-overlay__close:hover {
    background: var(--color-bg-surface-hover);
    border-color: var(--color-border-solid);
}

.proto-overlay__nav-btn[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
}

.proto-overlay__nav-btn svg,
.proto-overlay__close svg {
    width: 18px;
    height: 18px;
}

.proto-overlay__close {
    margin-left: var(--spacing-4);
}

body.proto-open {
    overflow: hidden;
}

@media (max-width: 768px) {
    /* backdrop-filter over a draggable surface stutters on mobile Safari.
       Use a solid darker scrim instead. */
    .proto-overlay__scrim {
        background: rgba(0, 0, 0, 0.9);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .proto-overlay__panel {
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 16px 16px 0 0;
    }
    .proto-overlay__pane--media {
        padding: var(--spacing-32) var(--spacing-16) var(--spacing-16);
    }
    .proto-overlay__pane--meta {
        padding: var(--spacing-16) var(--spacing-20) calc(var(--spacing-20) + env(safe-area-inset-bottom, 0px));
    }
    .proto-overlay__pane--meta h2 {
        font-size: var(--font-size-16);
    }
    .proto-overlay__pane--meta p {
        font-size: var(--font-size-13);
    }
    .proto-overlay__controls {
        top: var(--spacing-12);
        right: var(--spacing-12);
        gap: var(--spacing-6);
    }
    .proto-overlay__nav-btn,
    .proto-overlay__close {
        width: 34px;
        height: 34px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .proto-overlay__scrim,
    .proto-overlay__panel {
        animation: none;
    }
    .proto-tile {
        transition: border-color var(--transition-fast);
    }
    .proto-tile:hover {
        transform: none;
    }
}