@media (prefers-reduced-motion: reduce) {
            *, ::before, ::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
            .will-change-transform, .will-change-opacity {
                will-change: auto !important;
            }
        }
        :root {
            --beige: #F4EFE6;
            --beige-dark: #E5DFC8;
            --blue: #012CEB;
            --navy: #051024;
            --border-w: 2px;
            --font-main: 'Inter', Arial, sans-serif;
        }
        html {
            overflow-x: hidden;
        }
        body {
            font-family: var(--font-main);
            background-color: #01040a;
            color: var(--navy);
            margin: 0;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            font-weight: 600;
        }
        .border-grid { border-color: var(--blue); border-width: var(--border-w); }
        .border-b-grid { border-bottom: var(--border-w) solid var(--blue); }
        @media (hover: hover) and (pointer: fine) {
            body, a, button, [role="button"], input, select, textarea, .cursor-pointer, .cursor-hover {
                cursor: none !important;
            }
        }
        .nav-brutal {
            display: flex; position: relative; background: var(--beige);
            border: 2px solid var(--navy); box-shadow: 4px 4px 0px var(--navy);
            padding: 4px; pointer-events: auto; justify-content: center;
            overflow: hidden;
            will-change: width, transform, border-color, background-color;
        }
        @media (min-width: 768px) {
            .nav-brutal { border-width: 3px; box-shadow: 8px 8px 0px var(--navy); padding: 6px; }
        }
        .nav-indicator {
            position: absolute; top: 4px; bottom: 4px; left: 4px;
            background: var(--blue); z-index: 0;
            will-change: transform, width, left;
        }
        @media (min-width: 768px) {
            .nav-indicator { top: 6px; bottom: 6px; left: 6px; }
        }
        .nav-item {
            position: relative; z-index: 1; font-weight: 800;
            letter-spacing: 0.1em; color: var(--navy);
            transition: color 0.3s ease; text-decoration: none; white-space: nowrap;
            flex-shrink: 0;
            text-shadow: 0 0 0.5px currentColor, 0 0 0.5px currentColor;
        }
        .nav-item.active { color: var(--beige); }
        .bg-blueprint {
            background-size: 40px 40px;
            background-image:
                linear-gradient(to right, rgba(1, 44, 235, 0.05) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(1, 44, 235, 0.05) 1px, transparent 1px);
        }
        h2, h3 { font-weight: 800; letter-spacing: -0.03em; }
        ::-webkit-scrollbar { display: none; }
        @keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
        @keyframes float { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(-7px); } }
        #world-viewport {
            width: 100%;
            height: 100vh;
            position: fixed;
            top: 0; left: 0;
            overflow-y: auto;
            overflow-x: hidden;
            z-index: 10;
            background: #01040a;
            perspective: 1500px;
        }
        #world-container {
            will-change: transform, filter, opacity;
            background: var(--beige);
            min-height: 100vh;
            transform-origin: center bottom;
            transform-style: preserve-3d;
        }
        #cinematic-vignette {
            position: fixed; inset: 0; z-index: 9000; pointer-events: none;
            background: radial-gradient(circle at center, transparent 20%, rgba(1,4,12,0.98) 100%);
            opacity: 0.1; transition: opacity 0.8s ease; mix-blend-mode: multiply;
        }
        body.traveling #cinematic-vignette { opacity: 1; }
        body.traveling #vending-machine-section {
            visibility: hidden !important;
        }
        .reveal-text {
            clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
            transform: translateY(20px);
            opacity: 0;
            transition: clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                        opacity 0.9s ease;
            will-change: clip-path, transform, opacity;
        }
        .reveal-text.is-visible {
            clip-path: polygon(0 -20%, 100% -20%, 100% 120%, 0 120%);
            transform: translateY(0);
            opacity: 1;
        }
        .reveal-blur {
            filter: blur(8px);
            transform: scale(0.95) translateY(10px);
            opacity: 0;
            transition: filter 1s cubic-bezier(0.16, 1, 0.3, 1),
                        transform 1s cubic-bezier(0.16, 1, 0.3, 1),
                        opacity 1s ease;
            will-change: filter, transform, opacity;
        }
        .reveal-blur.is-visible {
            filter: blur(0px);
            transform: scale(1) translateY(0);
            opacity: 1;
        }
        @keyframes rumble {
            0% { transform: translateY(0px) translateX(0px); }
            25% { transform: translateY(-1px) translateX(1px) rotate(0.1deg); }
            50% { transform: translateY(1px) translateX(-1px) rotate(-0.1deg); }
            75% { transform: translateY(-1px) translateX(-0.5px) rotate(0.05deg); }
            100% { transform: translateY(0px) translateX(0px); }
        }
        .animate-rumble {
            animation: rumble 0.15s ease-in-out infinite;
        }
        @media (min-width: 768px) {
            .spread-deck > * + * {
                margin-left: -10rem !important;
                transition: margin 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s !important;
            }
            .spread-deck.is-spread > * + * {
                margin-left: -1.5rem !important;
            }
            .spread-reels > * + * {
                margin-left: -8rem !important;
                transition: margin 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s !important;
            }
            .spread-reels.is-spread > * + * {
                margin-left: -0.5rem !important;
            }
        }
        .glow-highlight {
            position: relative;
            display: inline-block;
            color: #8DE254;
            text-shadow: 0 0 15px rgba(141,226,84,0.4);
            font-style: italic;
        }
        .glow-highlight::after {
            content: "";
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(141,226,84,0.8), transparent);
        }
        #intro-thumb-container {
            opacity: 1;
        }
        #intro-window-frame {
            backdrop-filter: blur(1px);
            background: linear-gradient(
                to bottom,
                rgba(1, 44, 235, 0.08) 0%,
                rgba(1, 44, 235, 0.02) 100%
            );
        }
        #main-nav-container,
        #top-ribbon {
            will-change: transform, opacity, filter;
        }
        .glass-reflection {
            position: absolute; top: 0; left: 0; right: 0; bottom: 0;
            background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 55%, transparent 100%);
            animation: drift 15s infinite linear;
            pointer-events: none; z-index: 50; mix-blend-mode: overlay;
        }
        @keyframes drift {
            0% { transform: translateX(-150%) skewX(-15deg); }
            100% { transform: translateX(250%) skewX(-15deg); }
        }
        @keyframes cardWave {
            0% { transform: translateX(-200%) skewX(-15deg); }
            100% { transform: translateX(300%) skewX(-15deg); }
        }
        .card-wave {
            position: absolute; top: 0; left: 0; bottom: 0; width: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), rgba(255,255,255,0.6), rgba(255,255,255,0.15), transparent);
            animation: cardWave 3s infinite linear;
            z-index: 5; pointer-events: none; mix-blend-mode: screen;
        }
        .stack-card {
            will-change: transform, top;
        }
        #transit-train {
            height: 210px;
        }
        #stack-cursor-label {
            position: fixed;
            pointer-events: none;
            z-index: 10003;
            transform: translate(18px, -50%);
            opacity: 0;
            transition: opacity 0.18s ease;
            will-change: transform, opacity;
            white-space: nowrap;
            background: #0a0a0a;
            color: #ECE8E1;
            font-family: 'Schoolbell', cursive;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            padding: 5px 10px;
            border: 1.5px solid #ECE8E1;
            box-shadow: 3px 3px 0 #ECE8E1;
            line-height: 1;
        }
        #stack-cursor-label.visible { opacity: 1; }
        @media (hover: none), (max-width: 767px) {
            #stack-cursor-label { display: none !important; }
        }
        #gallery-cursor-label {
            position: fixed;
            pointer-events: none;
            z-index: 10003;
            transform: translate(18px, -50%);
            opacity: 0;
            transition: opacity 0.18s ease;
            will-change: transform, opacity;
            white-space: nowrap;
            background: #ECE8E1;
            color: #0a0a0a;
            font-family: 'Schoolbell', cursive;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            padding: 5px 10px;
            border: 1.5px solid #0a0a0a;
            box-shadow: 3px 3px 0 #0a0a0a;
            line-height: 1;
        }
        #gallery-cursor-label.visible { opacity: 1; }
        @media (hover: none), (max-width: 767px) {
            #gallery-cursor-label { display: none !important; }
        }
        #dissect-scroll-label {
            position: fixed;
            pointer-events: none;
            z-index: 10003;
            transform: translate(18px, -50%);
            opacity: 0;
            transition: opacity 0.18s ease;
            will-change: transform, opacity;
            white-space: nowrap;
            background: #0a0a0a;
            color: #ECE8E1;
            font-family: 'Schoolbell', cursive;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            padding: 5px 10px;
            border: 1.5px solid #ECE8E1;
            box-shadow: 3px 3px 0 #ECE8E1;
            line-height: 1;
        }
        #dissect-scroll-label.visible { opacity: 1; }
        @media (hover: none), (max-width: 767px) {
            #dissect-scroll-label { display: none !important; }
        }
        .card-expand {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s cubic-bezier(0.23,1,0.32,1), opacity 0.4s ease, margin-top 0.4s ease;
            opacity: 0;
        }
        .card-expand.open {
            max-height: 800px;
            opacity: 1;
        }
        .paper-texture {
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");
            mix-blend-mode: multiply;
            pointer-events: none;
        }
        .page-crease-left {
            background: linear-gradient(to right, transparent 75%, rgba(0,0,0,0.04) 88%, rgba(0,0,0,0.12) 100%);
        }
        .page-crease-right {
            background: linear-gradient(to left, transparent 75%, rgba(0,0,0,0.04) 88%, rgba(0,0,0,0.12) 100%);
        }
        .book-viewport {
            perspective: 2200px;
            transform-style: preserve-3d;
        }
        .book-container {
            transform-style: preserve-3d;
            position: relative;
        }
        .book-page-turning {
            transform-style: preserve-3d;
            transform-origin: left center;
            position: absolute;
            width: 50%;
            height: 100%;
            top: 0;
            right: 0;
            z-index: 30;
            will-change: transform;
        }
        .page-face {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            overflow: hidden;
        }
        .page-face-front {
            transform: rotateY(0deg);
        }
        .page-face-back {
            transform: rotateY(180deg);
        }
        .realistic-paper-stack-right {
            box-shadow:
                0px 0px 0px 1px rgba(0,0,0,0.1),
                1px 1px 0px #e0dbc6,
                2px 2px 0px #d8d3bc,
                3px 3px 0px #d0cab2,
                4px 4px 0px #c8c2a8,
                5px 5px 0px #bfb99e,
                12px 12px 20px rgba(0,0,0,0.3);
        }
        .realistic-paper-stack-left {
            box-shadow:
                0px 0px 0px 1px rgba(0,0,0,0.1),
                -1px 1px 0px #e0dbc6,
                -2px 2px 0px #d8d3bc,
                -3px 3px 0px #d0cab2,
                -4px 4px 0px #c8c2a8,
                -5px 5px 0px #bfb99e,
                -12px 12px 20px rgba(0,0,0,0.3);
        }
        .scotch-tape {
            background: rgba(245, 240, 215, 0.35);
            backdrop-filter: blur(0.5px);
            border-left: 1px dashed rgba(255,255,255,0.4);
            border-right: 1px dashed rgba(255,255,255,0.4);
            box-shadow: 0 1px 3px rgba(0,0,0,0.06);
            transform: rotate(-3deg);
            mix-blend-mode: multiply;
        }
        .scotch-tape::before, .scotch-tape::after {
            content: '';
            position: absolute;
            left: 0; right: 0; height: 4px;
            background-size: 6px 4px;
        }
        .scotch-tape::before {
            top: -4px;
            background-image: linear-gradient(45deg, transparent 75%, rgba(220,215,190,0.4) 75%), linear-gradient(-45deg, transparent 75%, rgba(220,215,190,0.4) 75%);
        }
        .scotch-tape::after {
            bottom: -4px;
            background-image: linear-gradient(45deg, transparent 75%, rgba(220,215,190,0.4) 75%), linear-gradient(-45deg, transparent 75%, rgba(220,215,190,0.4) 75%);
        }
        .pushpin {
            width: 12px;
            height: 12px;
            background: radial-gradient(circle at 35% 35%, #ff3b30 0%, #b30000 70%, #660000 100%);
            border-radius: 50%;
            box-shadow:
                0 1px 1px rgba(0,0,0,0.3),
                3px 5px 4px rgba(0,0,0,0.35);
            position: relative;
        }
        .pushpin::after {
            content: '';
            position: absolute;
            top: 50%; left: 50%;
            width: 4px; height: 4px;
            background: rgba(255,255,255,0.6);
            border-radius: 50%;
            transform: translate(-50%, -50%) translate(-2px, -2px);
        }
        .map-line-path {
            stroke: var(--blue);
            stroke-width: 2;
            fill: none;
            stroke-dasharray: 4000;
            stroke-dashoffset: 4000;
            stroke-linecap: butt;
            stroke-linejoin: round;
        }
        .focus-lift-target {
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease, filter 0.6s ease;
            will-change: transform, opacity, filter;
        }
        .glowing-circle-path {
            stroke: var(--blue);
            stroke-width: 2.5;
            fill: none;
            stroke-dasharray: 600;
            stroke-dashoffset: 600;
            stroke-linecap: round;
            transition: stroke-dashoffset 1.5s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .glowing-circle-path.draw-active {
            stroke-dashoffset: 0;
        }
        .marker-highlight {
            background: linear-gradient(104deg, transparent 0%, rgba(232, 228, 211, 0) 1%, #e8e4d3 4%, #e8e4d3 96%, transparent 100%);
            display: inline-block;
            padding: 2px 8px;
            transform: rotate(-1deg);
            border: 1px dashed rgba(179, 171, 143, 0.6);
            box-shadow: 1px 1px 3px rgba(0,0,0,0.05);
        }
        .evidence-stamp-red {
            border: 2.5px solid rgba(185, 28, 28, 0.85);
            color: rgba(185, 28, 28, 0.9);
            transform: rotate(-3.5deg);
            box-shadow: inset 0 0 4px rgba(185,28,28,0.1), 2px 4px 10px rgba(0,0,0,0.08);
            background: rgba(254, 242, 242, 0.3);
        }
        .evidence-stamp-yellow {
            border: 2px dashed rgba(161, 98, 7, 0.85);
            color: rgba(161, 98, 7, 0.95);
            transform: rotate(2deg);
            box-shadow: 2px 4px 10px rgba(0,0,0,0.06);
            background: rgba(254, 252, 232, 0.35);
        }
        .evidence-stamp-blue {
            border: 2.5px solid rgba(1, 44, 235, 0.8);
            color: rgba(1, 44, 235, 0.95);
            transform: rotate(-1.5deg);
            box-shadow: 2px 4px 10px rgba(0,0,0,0.08);
            background: rgba(239, 246, 255, 0.3);
        }
        .ruled-paper-lines {
            background-size: 100% 24px;
            background-image: linear-gradient(rgba(1, 44, 235, 0.06) 1px, transparent 1px);
        }
        .draggable-sticker {
            position: absolute;
            z-index: 100;
            cursor: grab !important;
            user-select: none;
            touch-action: none;
            will-change: transform, box-shadow;
            filter: drop-shadow(4px 8px 12px rgba(5,16,36,0.3));
            transition: transform 0.15s ease-out;
        }
        .draggable-sticker:active {
            cursor: grabbing !important;
            filter: drop-shadow(8px 16px 20px rgba(5,16,36,0.4));
        }
        .sticker-matte-base {
            background-color: white;
            border: 4px solid white;
            border-radius: 12px;
            box-shadow: 0 0 0 1px rgba(0,0,0,0.12), inset 0 0 4px rgba(0,0,0,0.06);
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .sticker-diecut-round {
            border-radius: 50%;
            background-color: white;
            border: 4.5px solid white;
            box-shadow: 0 0 0 1px rgba(0,0,0,0.12), inset 0 0 4px rgba(0,0,0,0.06);
        }
        #epilogue-quote {
            font-family: 'Schoolbell', cursive !important;
            font-size: clamp(14px, 1.6vw, 20px) !important;
            font-weight: 400 !important;
            text-transform: none !important;
            letter-spacing: 0.02em !important;
            line-height: 1.65 !important;
        }
        #art-terminal h4 {
            font-family: 'Schoolbell', cursive !important;
            font-weight: 700 !important;
            font-size: clamp(18px, 1.6vw, 22px) !important;
            letter-spacing: -0.025em !important;
        }
        #art-terminal p.relative {
            font-family: 'Schoolbell', cursive !important;
            font-size: clamp(12px, 1.1vw, 14px) !important;
            color: rgba(0, 0, 0, 0.8) !important;
            line-height: 1.55 !important;
        }
        #origin-micro-story {
            font-size: clamp(12px, 1.2vw, 15px) !important;
            line-height: 1.65 !important;
        }
        #intro-sticky-note .relative.z-10 > p {
            font-size: clamp(13px, 1.2vw, 15px) !important;
            line-height: 24px !important;
        }
        #intro-sticky-note .relative.z-10 > p > span {
            font-size: clamp(12px, 1.1vw, 14px) !important;
        }
        #frag-origin-cursive {
            font-size: clamp(20px, 2.2vw, 28px) !important;
        }
        #frag-strategy-annot {
            font-size: clamp(12px, 1.3vw, 16px) !important;
            font-weight: 700 !important;
            line-height: 1.35 !important;
        }
        #frag-strategy-annot span {
            font-size: clamp(14px, 1.5vw, 18px) !important;
        }
        #art-stats > div:last-child {
            font-size: clamp(13px, 1.2vw, 15px) !important;
            line-height: 1.35 !important;
        }
        .evidence-stamp-red > span:last-child {
            font-size: clamp(11px, 1.1vw, 15px) !important;
            line-height: 1.3 !important;
        }
        .evidence-stamp-yellow > span:last-child {
            font-size: clamp(9px, 0.95vw, 12px) !important;
            line-height: 1.3 !important;
        }
        .evidence-stamp-blue > span:last-child {
            font-size: clamp(11px, 1.1vw, 15px) !important;
            line-height: 1.3 !important;
        }
        #torn-signature-paper > div:last-child {
            font-size: clamp(22px, 2.2vw, 30px) !important;
            line-height: 1.1 !important;
        }
        #other-highlights-block {
            font-size: clamp(9px, 0.85vw, 10px) !important;
            color: rgba(34, 34, 34, 0.8) !important;
        }
        #about .flex.justify-between.items-end.font-\[\'Schoolbell\'\] {
            font-size: clamp(9px, 0.85vw, 14px) !important;
            opacity: 0.7 !important;
        }
        #about .flex.flex-col.items-start.gap-1.font-\[\'Schoolbell\'\] {
            font-size: clamp(9px, 0.85vw, 14px) !important;
            color: rgba(34, 34, 34, 0.8) !important;
        }
        @media (min-width: 768px) and (max-width: 1023px) {
            #epilogue-quote       { font-size: 16px !important; }
            #art-terminal h4      { font-size: 19px !important; }
            #art-terminal p.relative { font-size: 12px !important; }
            #frag-origin-cursive  { font-size: 21px !important; }
            #frag-strategy-annot  { font-size: 13px !important; }
            #frag-strategy-annot span { font-size: 15px !important; }
            #origin-micro-story   { font-size: 12px !important; }
            #torn-signature-paper > div:last-child { font-size: 22px !important; }
            .evidence-stamp-red > span:last-child  { font-size: 11px !important; }
            .evidence-stamp-blue > span:last-child { font-size: 11px !important; }
        }
        @media (min-width: 1024px) and (max-width: 1440px) {
            #epilogue-quote       { font-size: 17px !important; }
            #art-terminal h4      { font-size: 20px !important; }
            #frag-origin-cursive  { font-size: 24px !important; }
            #torn-signature-paper > div:last-child { font-size: 26px !important; }
        }
        @media (min-width: 1441px) and (max-width: 1920px) {
            #epilogue-quote       { font-size: 19px !important; }
            #frag-origin-cursive  { font-size: 27px !important; }
            #torn-signature-paper > div:last-child { font-size: 29px !important; }
        }
        @media (min-width: 1921px) {
            #epilogue-quote       { font-size: 20px !important; }
            #frag-origin-cursive  { font-size: 28px !important; }
            #torn-signature-paper > div:last-child { font-size: 30px !important; }
        }
        #diary-focal-overlay {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 198;
            opacity: 0;
            will-change: opacity;
            background: radial-gradient(
                ellipse 40vw 44vh at 50% 50%,
                transparent 0%,
                transparent 28%,
                rgba(1, 2, 4, 0.45) 52%,
                rgba(1, 2, 4, 0.82) 74%,
                rgba(1, 2, 4, 0.96) 100%
            );
        }
        .hero-label-item {
            position: relative;
            overflow: hidden;
            display: block;
        }
        .hero-label-primary {
            display: block;
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
            will-change: transform, opacity;
        }
        .hero-label-secondary {
            display: block;
            position: absolute;
            top: 100%;
            left: 0;
            color: var(--blue);
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
            will-change: transform, opacity;
            text-align: inherit;
            width: 100%;
            text-shadow: 0 0 12px rgba(1, 44, 235, 0.5);
            opacity: 0;
        }
        .group:hover .hero-label-primary { transform: translateY(-110%) skewY(-4deg); opacity: 0; }
        .group:hover .hero-label-secondary { transform: translateY(-100%) skewY(0deg); opacity: 1; }
        .delay-1 { transition-delay: 0.05s; }
        .delay-2 { transition-delay: 0.1s; }
        .transform-style-3d {
            transform-style: preserve-3d;
            perspective: 800px;
        }
        .hanging-hinge-top { transform-origin: top center !important; }
        .hanging-hinge-left { transform-origin: top left !important; }
        .brutal-wrap { padding: 4rem 3rem; display: flex; flex-direction: column; gap: 2rem; font-family: 'Inter', sans-serif; }
        @media (max-width: 768px) { .brutal-wrap { padding: 2.5rem 1.5rem; } }
        .brutal-overline { font-family: 'Schoolbell', cursive; font-size: 14px; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; border-bottom: 4px solid var(--text-color); padding-bottom: 8px; display: inline-block; margin-bottom: 1rem; color: var(--text-color); }
        .brutal-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(80px, 16vw, 180px); line-height: 0.85; letter-spacing: -0.02em; margin-bottom: 1rem; text-transform: uppercase; color: var(--text-color); }
        .brutal-sub { font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 800; margin-bottom: 2rem; border: 4px solid var(--text-color); padding: 12px; display: inline-block; text-transform: uppercase; background: var(--text-color); color: var(--bg-color); }
        .brutal-tags { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 3rem; }
        .brutal-tag { font-family: 'Schoolbell', cursive; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; border: 4px solid var(--text-color); padding: 6px 12px; background: transparent; color: var(--text-color); }
        .brutal-hook { font-family: 'Inter', sans-serif; font-weight: 900; font-size: clamp(24px, 4vw, 36px); line-height: 1.1; letter-spacing: -0.04em; border-left: 12px solid var(--text-color); padding-left: 2rem; margin: 3rem 0; color: var(--text-color); }
        .brutal-split { display: grid; grid-template-columns: 1fr 1fr; border: 8px solid var(--text-color); margin: 3rem 0; }
        @media (max-width: 768px) { .brutal-split { grid-template-columns: 1fr; } }
        .brutal-split-left, .brutal-split-right { padding: 3rem; display: flex; flex-direction: column; }
        .brutal-split-left { border-right: 8px solid var(--text-color); background: var(--bg-color); color: var(--text-color); }
        .brutal-split-right { background: var(--text-color); color: var(--bg-color); }
        @media (max-width: 768px) { .brutal-split-left { border-right: none; border-bottom: 8px solid var(--text-color); } }
        .brutal-split-title { font-family: 'Schoolbell', cursive; font-size: 16px; font-weight: 800; text-transform: uppercase; border-bottom: 4px solid currentColor; padding-bottom: 8px; margin-bottom: 1.5rem; letter-spacing: 0.1em; }
        .brutal-split-body { font-family: 'Inter', sans-serif; font-weight: 900; font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; }
        .brutal-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); border: 8px solid var(--text-color); margin: 2rem 0; }
        .brutal-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); border: 8px solid var(--text-color); margin: 2rem 0; }
        @media (max-width: 768px) { .brutal-grid-3, .brutal-grid-2 { grid-template-columns: 1fr; } }
        .brutal-grid-item { padding: 2rem; border-right: 8px solid var(--text-color); border-bottom: 8px solid var(--text-color); display: flex; flex-direction: column; color: var(--text-color); }
        .brutal-grid-3 .brutal-grid-item:nth-child(3n) { border-right: none; }
        .brutal-grid-2 .brutal-grid-item:nth-child(2n) { border-right: none; }
        .brutal-grid-3 .brutal-grid-item:not(:nth-last-child(-n+3)) { border-bottom: 8px solid var(--text-color); }
        .brutal-grid-2 .brutal-grid-item:not(:nth-last-child(-n+2)) { border-bottom: 8px solid var(--text-color); }
        .brutal-grid-3 .brutal-grid-item:nth-last-child(-n+3), .brutal-grid-2 .brutal-grid-item:nth-last-child(-n+2) { border-bottom: none; }
        @media (max-width: 768px) {
            .brutal-grid-3 .brutal-grid-item, .brutal-grid-2 .brutal-grid-item { border-right: none !important; border-bottom: 8px solid var(--text-color) !important; }
            .brutal-grid-3 .brutal-grid-item:last-child, .brutal-grid-2 .brutal-grid-item:last-child { border-bottom: none !important; }
        }
        .brutal-num { font-family: 'Bebas Neue', sans-serif; font-size: 80px; line-height: 0.8; margin-bottom: 1rem; letter-spacing: -0.02em; }
        .brutal-item-title { font-family: 'Inter', sans-serif; font-weight: 900; font-size: 24px; text-transform: uppercase; margin-bottom: 1rem; border-bottom: 4px solid var(--text-color); padding-bottom: 8px; }
        .brutal-item-desc { font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; line-height: 1.5; text-transform: uppercase; }
        .brutal-contact-sheet { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 3rem; margin: 4rem 0; }
        .brutal-img-wrap { position: relative; filter: saturate(0.85) contrast(1.05); transition: filter 0.2s, box-shadow 0.2s, transform 0.2s; min-height: 300px; display: flex; flex-direction: column; overflow: hidden; border-radius: 12px; }
        .brutal-img-wrap:hover { filter: saturate(1.1) contrast(1.1); transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.5); }
        .brutal-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; mix-blend-mode: normal; flex-grow: 1;}
        .brutal-img-meta { position: absolute; top: 0; left: 0; background: var(--text-color); color: var(--bg-color); font-family: 'Schoolbell', cursive; font-size: 12px; font-weight: 800; padding: 6px 12px; text-transform: uppercase; z-index: 10; border-bottom: 4px solid var(--bg-color); border-right: 4px solid var(--bg-color); }
        .brutal-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 3rem; margin: 4rem 0; }
        .brutal-stat-card { border: 8px solid var(--text-color); padding: 2rem; display: flex; flex-direction: column; box-shadow: 16px 16px 0px var(--text-color); background: var(--bg-color); color: var(--text-color); }
        .brutal-stat-big { font-family: 'Bebas Neue', sans-serif; font-size: clamp(80px, 10vw, 140px); line-height: 0.8; margin-bottom: 0.5rem; letter-spacing: -0.02em; }
        .brutal-stat-label { font-family: 'Schoolbell', cursive; font-size: 14px; font-weight: 800; text-transform: uppercase; border-top: 6px solid var(--text-color); padding-top: 1rem; margin-top: auto; letter-spacing: 0.1em; }
        .brutal-stat-sub { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700; margin-bottom: 2rem; text-transform: uppercase; }
        .brutal-flow-container { border: 8px solid var(--text-color); padding: 2rem; background: var(--bg-color); overflow-x: auto; margin-bottom: 2rem; box-shadow: 16px 16px 0px var(--text-color); }
        @keyframes marquee-left {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        @keyframes marquee-right {
            0% { transform: translateX(-50%); }
            100% { transform: translateX(0); }
        }
        @keyframes outlinePulse {
            0% { outline: 4px solid rgba(212, 160, 23, 0.7); outline-offset: 0px; }
            70% { outline: 4px solid rgba(212, 160, 23, 0); outline-offset: 15px; }
            100% { outline: 4px solid rgba(212, 160, 23, 0); outline-offset: 15px; }
        }
        .attention-pulse {
            animation: outlinePulse 2s infinite ease-out;
        }
        .animate-marquee-left { animation: marquee-left 40s linear infinite; }
        .animate-marquee-right { animation: marquee-right 45s linear infinite; }
        .hover-pause:hover { animation-play-state: paused; }
        .mockup-scene {
            position: relative; height: 450px; width: 100%; display: flex; justify-content: center; align-items: center;
            perspective: 1200px; margin: 4rem 0; overflow: visible; z-index: 10;
        }
        @media (max-width: 768px) { .mockup-scene { transform: scale(0.65); height: 280px; margin: 1rem 0; } }
        .mockup-phone {
            position: absolute; width: 240px; height: auto;
            transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
            display: flex; flex-direction: column;
            filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6)) saturate(0.85) contrast(1.05);
            will-change: transform, filter;
        }
        .mockup-left { transform: translateX(-40px) rotate(-4deg) translateY(10px); z-index: 1; }
        .mockup-center { transform: translateY(0px) rotate(0deg); z-index: 3; }
        .mockup-right { transform: translateX(40px) rotate(4deg) translateY(10px); z-index: 2; }
        .mockup-scene.is-visible .mockup-left { transform: translateX(-150px) rotate(-8deg) translateY(15px); }
        .mockup-scene.is-visible .mockup-center { transform: translateY(0px) rotate(0deg); }
        .mockup-scene.is-visible .mockup-right { transform: translateX(150px) rotate(8deg) translateY(15px); }
        .mockup-scene.is-visible:hover .mockup-left { transform: translateX(-240px) rotate(-8deg) translateY(15px) scale(0.9); filter: drop-shadow(0 15px 30px rgba(0,0,0,0.4)) saturate(0.8) brightness(0.7); }
        .mockup-scene.is-visible:hover .mockup-center { transform: translateY(0px) rotate(0deg) scale(0.9); filter: drop-shadow(0 15px 30px rgba(0,0,0,0.4)) saturate(0.8) brightness(0.7); }
        .mockup-scene.is-visible:hover .mockup-right { transform: translateX(240px) rotate(8deg) translateY(15px) scale(0.9); filter: drop-shadow(0 15px 30px rgba(0,0,0,0.4)) saturate(0.8) brightness(0.7); }
        .mockup-scene.is-visible .mockup-left:hover { transform: translateX(-260px) rotate(-4deg) translateY(-10px) scale(1) !important; filter: drop-shadow(0 30px 60px rgba(0,0,0,0.8)) saturate(1.1) brightness(1) contrast(1.05) !important; z-index: 10 !important; }
        .mockup-scene.is-visible .mockup-center:hover { transform: translateY(-15px) rotate(0deg) scale(1) !important; filter: drop-shadow(0 30px 60px rgba(0,0,0,0.8)) saturate(1.1) brightness(1) contrast(1.05) !important; z-index: 10 !important; }
        .mockup-scene.is-visible .mockup-right:hover { transform: translateX(260px) rotate(4deg) translateY(-10px) scale(1) !important; filter: drop-shadow(0 30px 60px rgba(0,0,0,0.8)) saturate(1.1) brightness(1) contrast(1.05) !important; z-index: 10 !important; }
        .splayed-deck {
            position: relative; height: 420px; width: 100%; display: flex; justify-content: center;
            align-items: center; margin: 4rem 0;
        }
        @media (max-width: 768px) { .splayed-deck { transform: scale(0.6); height: 260px; margin: 1rem 0; } }
        .splayed-card {
            position: absolute; width: 220px; height: auto; min-height: 340px; background: transparent;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            overflow: hidden; transform-origin: bottom center; display: flex; flex-direction: column;
            will-change: transform, filter, z-index;
            border-radius: 12px;
        }
        .splayed-card:nth-child(1) { transform: translateX(-60px) rotate(-6deg) translateY(15px); z-index: 1; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6)) saturate(0.7) brightness(0.5); }
        .splayed-card:nth-child(2) { transform: translateX(-30px) rotate(-3deg) translateY(5px); z-index: 2; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6)) saturate(0.7) brightness(0.5); }
        .splayed-card:nth-child(3) { transform: translateX(0px) rotate(0deg) translateY(0px); z-index: 3; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6)) saturate(1.1) brightness(1) contrast(1.05); }
        .splayed-card:nth-child(4) { transform: translateX(30px) rotate(3deg) translateY(5px); z-index: 2; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6)) saturate(0.7) brightness(0.5); }
        .splayed-card:nth-child(5) { transform: translateX(60px) rotate(6deg) translateY(15px); z-index: 1; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6)) saturate(0.7) brightness(0.5); }
        .splayed-deck.is-visible .splayed-card:nth-child(1) { transform: translateX(-160px) rotate(-10deg) translateY(20px); }
        .splayed-deck.is-visible .splayed-card:nth-child(2) { transform: translateX(-80px) rotate(-5deg) translateY(10px); }
        .splayed-deck.is-visible .splayed-card:nth-child(3) { transform: translateX(0px) rotate(0deg) translateY(-10px) scale(1.05); }
        .splayed-deck.is-visible .splayed-card:nth-child(4) { transform: translateX(80px) rotate(5deg) translateY(10px); }
        .splayed-deck.is-visible .splayed-card:nth-child(5) { transform: translateX(160px) rotate(10deg) translateY(20px); }
        .splayed-deck.is-visible:hover .splayed-card:nth-child(1) { transform: translateX(-300px) rotate(-10deg) translateY(20px) scale(0.9); opacity: 0.8; filter: drop-shadow(0 15px 30px rgba(0,0,0,0.6)) saturate(0.7) brightness(0.5); }
        .splayed-deck.is-visible:hover .splayed-card:nth-child(2) { transform: translateX(-150px) rotate(-5deg) translateY(10px) scale(0.9); opacity: 0.8; filter: drop-shadow(0 15px 30px rgba(0,0,0,0.6)) saturate(0.7) brightness(0.5); }
        .splayed-deck.is-visible:hover .splayed-card:nth-child(3) { transform: translateX(0px) rotate(0deg) translateY(-10px) scale(0.9); opacity: 0.8; filter: drop-shadow(0 15px 30px rgba(0,0,0,0.6)) saturate(0.7) brightness(0.5); }
        .splayed-deck.is-visible:hover .splayed-card:nth-child(4) { transform: translateX(150px) rotate(5deg) translateY(10px) scale(0.9); opacity: 0.8; filter: drop-shadow(0 15px 30px rgba(0,0,0,0.6)) saturate(0.7) brightness(0.5); }
        .splayed-deck.is-visible:hover .splayed-card:nth-child(5) { transform: translateX(300px) rotate(10deg) translateY(20px) scale(0.9); opacity: 0.8; filter: drop-shadow(0 15px 30px rgba(0,0,0,0.6)) saturate(0.7) brightness(0.5); }
        .splayed-deck.is-visible .splayed-card:nth-child(1):hover { transform: translateX(-320px) rotate(-6deg) translateY(-10px) scale(1) !important; filter: drop-shadow(0 30px 60px rgba(0,0,0,0.8)) saturate(1.1) brightness(1) contrast(1.05) !important; opacity: 1 !important; z-index: 20 !important; }
        .splayed-deck.is-visible .splayed-card:nth-child(2):hover { transform: translateX(-160px) rotate(-3deg) translateY(-10px) scale(1) !important; filter: drop-shadow(0 30px 60px rgba(0,0,0,0.8)) saturate(1.1) brightness(1) contrast(1.05) !important; opacity: 1 !important; z-index: 20 !important; }
        .splayed-deck.is-visible .splayed-card:nth-child(3):hover { transform: translateX(0px) rotate(0deg) translateY(-20px) scale(1) !important; filter: drop-shadow(0 30px 60px rgba(0,0,0,0.8)) saturate(1.1) brightness(1) contrast(1.05) !important; opacity: 1 !important; z-index: 20 !important; }
        .splayed-deck.is-visible .splayed-card:nth-child(4):hover { transform: translateX(160px) rotate(3deg) translateY(-10px) scale(1) !important; filter: drop-shadow(0 30px 60px rgba(0,0,0,0.8)) saturate(1.1) brightness(1) contrast(1.05) !important; opacity: 1 !important; z-index: 20 !important; }
        .splayed-deck.is-visible .splayed-card:nth-child(5):hover { transform: translateX(320px) rotate(6deg) translateY(-10px) scale(1) !important; filter: drop-shadow(0 30px 60px rgba(0,0,0,0.8)) saturate(1.1) brightness(1) contrast(1.05) !important; opacity: 1 !important; z-index: 20 !important; }
        @keyframes proj-gloria-drift {
            0%   { transform: translateX(5vw)  translateY(3vh); }
            50%  { transform: translateX(-48vw) translateY(-2vh); }
            100% { transform: translateX(-92vw) translateY(4vh); }
        }
        @keyframes billboard-hover {
            0%   { transform: rotate(-4deg) translateY(0px); }
            50%  { transform: rotate(-4deg) translateY(-7px); }
            100% { transform: rotate(-4deg) translateY(0px); }
        }
        .billboard-float {
            animation: billboard-hover 3.8s ease-in-out infinite;
            will-change: transform;
        }
        *, *::before, *::after { box-sizing: border-box; }
        html, body { max-width: 100%; overflow-x: clip; }
        #world-container { max-width: 100vw; overflow-x: clip; }
        .brutal-sub        { font-size: clamp(14px, 1.05vw, 18px); }
        .brutal-split-body { font-size: clamp(20px, 1.7vw, 30px); }
        .brutal-num        { font-size: clamp(64px, 6vw, 104px); }
        .brutal-item-title { font-size: clamp(20px, 1.5vw, 28px); }
        .brutal-item-desc  { font-size: clamp(13px, 0.95vw, 16px); }
        .brutal-stat-sub   { font-size: clamp(13px, 0.95vw, 16px); }
        @supports (height: 100dvh) {
            #world-viewport         { height: 100dvh; }
            #world-container        { min-height: 100dvh; }
        }
        .heading-class {
            font-size: clamp(44px, 5.5vw + 0.5rem, 112px);
            line-height: 1.0;
            letter-spacing: -0.03em;
        }
        .title-class {
            font-size: clamp(28px, 3vw + 0.25rem, 64px);
            line-height: 1.1;
            letter-spacing: -0.025em;
        }
        #preloader-content > div:nth-child(2) {
            font-size: clamp(48px, 6.8vw, 124px) !important;
        }
        #proj-section-badge + h2 {
            font-size: clamp(52px, 9.5vw, 200px) !important;
        }
        #origin-headline {
            font-size: clamp(20px, 2.5vw, 52px) !important;
        }
        #metro-door-text h2 { font-size: clamp(52px, 9vw, 80px) !important; }
        @media (min-width: 768px)  { #metro-door-text h2 { font-size: 140px !important; } }
        @media (min-width: 1024px) { #metro-door-text h2 { font-size: 100px !important; } }
        @media (min-width: 1280px) { #metro-door-text h2 { font-size: 120px !important; } }
        @media (min-width: 1921px) { #metro-door-text h2 { font-size: clamp(120px, 9vw, 180px) !important; } }
        #metro-door-text p  { font-size: clamp(18px, 3.2vw, 56px) !important; }
        #contact > div:last-child > span {
            font-size: clamp(26px, 3.2vw, 60px) !important;
        }
        #fixed-route-board { height: clamp(110px, calc(12vw + 10px), 175px); transform: rotate(-1.2deg); }
        @media (min-width: 768px) and (max-width: 1023px) {
            .mockup-scene   { transform: scale(0.72); margin-block: 0; }
            .splayed-deck   { transform: scale(0.70); margin-block: 0; }
            .nav-item       { font-size: 0.7rem;  letter-spacing: 0.05em; }
            .nav-brutal     { padding: 4px; }
            .nav-indicator  { top: 4px; bottom: 4px; }
            #proj-helper-sticker {
                max-width: 100%;
                width: auto;
            }
            .brutal-title { font-size: clamp(56px, 10vw,  110px) !important; }
            .brutal-hook  { font-size: clamp(18px, 2.5vw,  28px) !important; }
        }
        @media (min-width: 1024px) and (max-width: 1440px) {
            .mockup-scene   { transform: scale(0.90); }
            .splayed-deck   { transform: scale(0.88); }
            .brutal-title { font-size: clamp(64px, 11vw,  160px) !important; }
            .brutal-hook  { font-size: clamp(20px, 2.8vw,  32px) !important; }
        }
        @media (min-width: 1441px) and (max-width: 1920px) {
            .mockup-scene   { transform: scale(1.12); }
            .splayed-deck   { transform: scale(1.12); }
            .nav-item       { font-size: 0.95rem; }
            #proj-section-badge {
                font-size: clamp(11px, 0.68vw, 14px);
            }
            .brutal-wrap { max-width: 1520px; margin-inline: auto; }
            .brutal-hook { font-size: clamp(28px, 2.1vw,  40px) !important; }
        }
        @media (min-width: 1280px) and (max-width: 1440px) {
            html { font-size: clamp(14px, 1.1vw, 15.5px); }
        }
        @media (min-width: 1280px) and (max-width: 1440px) and (max-height: 800px) {
    div:has(> #proj-section-badge) {
        margin-top: 16px;
    }
    #proj-section-badge {
        margin-bottom: 16px;
        margin-top: 34px;
        font-size: 9px;
        padding: 3px 10px;
    }
    div:has(> #stack-area) > div:first-child {
        margin-bottom: 16px;
    }
    #proj-section-badge + h2 {
        padding-bottom: 0;
        font-size: 10vw;
        padding-top: 8px;
        margin-top: 20px;
    }
    #experience {
        justify-content: flex-start;
        padding-top: 20px;
    }
    #proj-helper-sticker {
        padding: 14px;
        width: 380px;
        position: absolute;
        right: 80px;
        top: 80px;
        transform: rotate(-2deg);
        z-index: 30;
    }
    div:has(> #proj-helper-sticker) {
        flex-direction: column;
        align-items: flex-start;
    }
    #proj-header-row {
        flex-direction: row;
        align-items: flex-start;
    }
    #proj-header-row > div:first-child {
        margin-left: 45px;
    }
    #stack-area {
        margin-top: 25px;
    }
    #stack-area .stack-card .card-expand > div:first-child {
        margin-bottom: 8px;
        margin-top: 4px;
    }
    #stack-area .stack-card .card-expand > div:last-child {
        gap: 16px;
    }
    #stack-area .stack-card .card-expand > div:last-child > div:first-child > div[class*="items-start"] {
        margin-bottom: 8px;
    }
    #stack-area .stack-card .card-expand > div:last-child > div:first-child > div[class*="items-start"] > div:last-child {
        padding-right: 4px;
    }
    #stack-area .stack-card .card-expand > div:last-child > div:last-child > div:last-child > div[class*="border-l-"] {
        margin-bottom: 8px;
    }
    #vw-best {
        font-size: 105px;
    }
    #vw-work {
        font-size: 105px;
    }
    #vw-tilted-box {
        height: 100px;
    }
    #transit-stations-container > div {
        padding-bottom: 180px;
    }
    #transit-stations-container > div > div:last-child > div:last-child {
        height: 230px;
    }
    #transit-train {
        height: 155px;
    }
    #transit-train + div {
        height: 50px;
    }
    #transit-next-btn {
        width: 64px;
        height: 64px;
    }
    #transit-prev-btn {
        width: 64px;
        height: 64px;
    }
    #transit-map-view > div:last-child {
        height: 26vh;
        bottom: -45px;
    }
    #fixed-route-board {
        top: calc(82px + 20px);
        right: calc(55px + 20px);
        height: 150px;
    }
    #fixed-route-nodes .route-major .node-label {
        font-size: 10px !important;
    }
    #fixed-route-nodes .route-dummy .node-label {
        font-size: 10px !important;
    }
    #fixed-route-nodes .route-dot {
        width: 10px !important;
        height: 10px !important;
        border-width: 2px !important;
    }
    #transit-train + div > div:nth-child(3) {
        top: 12px !important;
    }
    #transit-train + div > div:nth-child(1) {
        top: 20px !important;
    }
    #transit-train + div > div:nth-child(2) {
        top: 10px !important;
    }
    #transit-train + div > div:nth-child(6) {
        margin-top: 16px !important;
    }
    #transit-train + div > div:nth-child(4) {
        margin-top: 4px !important;
    }
    .step-out-btn {
        font-size: 10px !important;
        padding: 5px 14px !important;
        border-width: 3px !important;
        box-shadow: 5px 5px 0 rgba(11,11,11,1) !important;
        gap: 6px !important;
    }
    .step-out-btn svg {
        width: 16px !important;
        height: 16px !important;
    }
    #contact h2 span:first-child {
        font-size: 11vw;
    }
    #contact h2 span:last-child {
        font-size: 11vw;
        margin-top: -2.5vw;
    }
    #contact > div:first-child > p {
        font-size: 16px;
    }
    #contact > div:last-child > div:first-child > a {
        font-size: 34px;
        white-space: nowrap;
    }
    #top-ribbon {
        height: 40px;
    }
    #top-ribbon > div:first-child {
        padding-left: 24px;
        padding-right: 24px;
        font-size: 11px;
    }
    #main-nav-container {
        bottom: 20px;
    }
    #main-nav .nav-item {
        padding-top: 6px;
        padding-bottom: 6px;
        padding-left: 12px;
        padding-right: 12px;
        font-size: 12px;
    }
    #proj-helper-sticker > span:first-of-type {
        font-size: 17px;
        margin-bottom: 4px;
        line-height: 1.1;
    }
    #proj-helper-sticker > span:last-of-type {
        font-size: 13px;
        line-height: 1.3;
    }
    #stack-area .stack-card {
        padding-top: 14px;
        padding-bottom: 14px;
        padding-left: 18px;
        padding-right: 18px;
    }
    #stack-area .stack-card > div:nth-child(4) > div:first-child {
        font-size: 40px;
    }
    #stack-area .stack-card > div:nth-child(4) {
        margin-bottom: 8px;
    }
    #proj-helper-sticker > div:nth-child(2) {
        padding-bottom: 8px;
        margin-bottom: 8px;
    }
    #hero-quote-block > div > div:first-child > div:first-child {
        font-size: 11px;
    }
    #hero-quote-block > div > div:first-child > div:nth-child(2),
            #hero-quote-block > div > div:first-child > div:nth-child(3) {
        font-size: 28px;
    }
    #hero-quote-block > div > div:last-child {
        width: 90px;
        height: 65px;
        margin-left: 12px;
    }
    #left-page-base > div:last-child > div:first-child {
        margin-top: -18px;
    }
    #origin-headline {
        top: calc(4% + 9px);
        left: 0%;
    }
    #intro-sticky-note {
        transform: rotate(-2deg) scale(0.82) !important;
        transform-origin: top right !important;
        top: calc(11% + 0px);
    }
    #intro-sticky-note p {
        font-size: 7px;
    }
    #intro-sticky-note span {
        font-size: 7px;
    }
    #frag-origin-cursive {
        top: 0%;
        left: 0%;
    }
    #origin-micro-story {
        font-size: 12px !important;
        width: 70%;
        top: calc(55% - 45px);
        left: 0%;
    }
    #personal-cutout {
        bottom: calc(-2% - 40px);
        width: 36%;
        height: 46%;
        left: calc(5% + 15px);
    }
    #art-terminal {
        top: calc(12% - 33px);
        transform: rotate(-2deg) scale(0.9);
        transform-origin: top left;
        zoom: 0.95;
    }
    .realistic-paper-stack-right > div.relative > div:first-child {
        margin-top: -18px;
    }
    #art-stats {
        top: calc(5% - 14px) !important;
        right: calc(8% - 7px) !important;
        transform: rotate(6deg) scale(0.79) !important;
        transform-origin: top right !important;
    }
    #art-stats > div.absolute.top-full {
        font-size: 6px;
        margin-top: 1px;
        left: -9px;
    }
    #experience-typewriter {
        font-size: 9px;
        max-width: 220px;
        padding-right: 2px;
        top: calc(44% - 15px);
    }
    #experience-typewriter > p:first-of-type {
        font-size: 10px;
    }
    #experience-typewriter > div:last-child {
        font-size: 10px;
        right: -15%;
    }
    .evidence-stamp-red {
        height: 85px;
        padding: 6px;
    }
    .evidence-stamp-yellow {
        height: 85px;
        padding: 6px;
    }
    .evidence-stamp-blue {
        height: 85px;
        padding: 6px;
    }
    .evidence-stamp-red > span:last-child {
        font-size: 6px;
    }
    .evidence-stamp-yellow > span:last-child {
        font-size: 6px;
    }
    .evidence-stamp-blue > span:last-child {
        font-size: 6px;
    }
    #metrics-stamps-group {
        gap: 6px;
    }
    #metrics-stamps-group .evidence-stamp-red {
        height: 95px !important;
        padding: 6px !important;
    }
    #metrics-stamps-group .evidence-stamp-yellow {
        height: 95px !important;
        padding: 6px !important;
    }
    #metrics-stamps-group .evidence-stamp-blue {
        height: 95px !important;
        padding: 6px !important;
    }
    #metrics-stamps-group .evidence-stamp-red > span:last-child {
        font-size: 9px !important;
    }
    #metrics-stamps-group .evidence-stamp-yellow > span:last-child {
        font-size: 9px !important;
    }
    #metrics-stamps-group .evidence-stamp-blue > span:last-child {
        font-size: 9px !important;
    }
    #other-highlights-block {
        bottom: calc(-4% + 7px);
        font-size: 9px !important;
    }
    #torn-signature-paper {
        bottom: calc(-8% - 20px);
        zoom: 0.68;
    }
    #left-page-base > div:last-child {
        padding-bottom: 20px;
    }
    #left-page-base > div:last-child > div:last-child {
        font-size: 7px !important;
    }
    #personal-cutout > div:last-child {
        bottom: calc(10% + 10px);
    }
    #frag-strategy-annot {
        font-size: 11px !important;
        top: calc(83% + 28px);
        left: calc(73% - 8px);
    }
    #frag-strategy-annot span {
        font-size: 13px !important;
    }
    #art-polaroid {
        zoom: 0.88;
        right: calc(2% - 5px);
        bottom: calc(25% - 15px);
    }
}
        @media (min-width: 1024px) and (max-width: 1920px) {
            .mockup-scene { transform: scale(1); }
            .splayed-deck { transform: scale(1); }
        }
        @media (min-width: 1921px) {
            html { font-size: clamp(16px, 0.85vw, 20px); }
            .mockup-scene   { transform: scale(1.28); }
            .splayed-deck   { transform: scale(1.28); }
            .nav-item       { font-size: 1rem; }
            #proj-section-badge { font-size: 0.7vw; }
            .brutal-wrap { max-width: 1800px; margin-inline: auto; }
            #experience > div.max-w-\[1400px\] {
                max-width: min(1600px, 85vw);
            }
        }
        @media (min-width: 1420px) and (max-width: 1452px) and (min-height: 780px) and (max-height: 920px) {
    #art-terminal {
        top: calc(12% - 15px);
        zoom: 0.88;
    }
    #art-stats {
        right: calc(8% - 20px);
        transform: rotate(6deg) scale(0.80);
        transform-origin: top right;
    }
    #art-stats > div.absolute.top-full {
        font-size: 7px;
        margin-top: 1px;
        left: -10px;
    }
    #experience-typewriter {
        top: calc(48% - 40px);
        right: calc(8% - 30px);
    }
    #torn-signature-paper {
        bottom: calc(-8% - 30px);
        zoom: 0.80;
    }
    #vw-best {
        font-size: 100px;
    }
    #vw-work {
        font-size: 100px;
    }
    #vw-tilted-box {
        height: 110px;
    }
    #top-ribbon {
        height: 40px;
    }
    #main-nav .nav-item {
        padding-top: 6px;
        padding-bottom: 6px;
        padding-left: 14px;
        padding-right: 14px;
        font-size: 12px;
    }
    #main-nav-container {
        bottom: 20px;
    }
    #proj-section-badge + h2 {
        font-size: 120px !important;
    }
    #proj-section-badge {
        margin-bottom: 14px;
    }
    #proj-header-row {
        margin-bottom: 10px;
    }
    #proj-helper-sticker {
        padding: 12px;
        width: 460px;
        transform: translateY(-50px) translateX(-20px) rotate(-2deg);
    }
    #stack-area .stack-card {
        padding-top: 14px;
        padding-bottom: 14px;
        padding-left: 24px;
        padding-right: 24px;
    }
    .card-expand.open {
        max-height: 380px;
        overflow-y: auto;
    }
    #proj-header-row > div:first-child {
        margin-top: 40px;
    }
    #stack-area .stack-card > div:nth-child(4) > div:first-child {
        font-size: 36px;
    }
    #proj-helper-sticker > span:first-of-type {
        font-size: 17px;
        line-height: 1.1;
        margin-bottom: 4px;
    }
    #proj-helper-sticker > span:last-of-type {
        font-size: 13px;
        line-height: 1.25;
    }
    #stack-area {
        margin-top: 30px;
    }
    #stack-area .stack-card .card-expand > div:last-child > div:first-child > div[class*="items-start"] {
        margin-bottom: 4px;
    }
}
        @media (min-width: 1880px) and (max-width: 1960px) and (min-height: 880px) and (max-height: 1100px) {
    #proj-header-row > div:first-child {
        transform: translate(-80px, -45px);
    }
    #proj-helper-sticker {
        width: 600px;
        padding: 24px;
        transform: translate(50px, -70px) rotate(-2deg) !important;
        padding-top: 36px !important;
        padding-bottom: 36px !important;
    }
    #proj-helper-sticker > span:first-of-type {
        font-size: 28px !important;
        margin-bottom: 16px !important;
    }
    #proj-helper-sticker > span:last-of-type {
        font-size: 22px !important;
        line-height: 1.8 !important;
    }
    #stack-area .stack-card {
        padding: 40px 48px;
        padding-top: 24px;
        padding-bottom: 24px;
    }
    #stack-area .stack-card > div:nth-child(4) > div:first-child {
        font-size: 72px;
    }
    #main-nav .nav-item {
        padding: 12px 24px;
        font-size: 18px;
    }
    #main-nav-container {
        bottom: 38px !important;
    }
    #top-ribbon {
        height: 64px;
    }
    #top-ribbon > div:first-child {
        font-size: 18px;
        padding-left: 48px;
        padding-right: 48px;
    }
    #hinglish-phrase {
        font-size: 18px;
    }
    #scroll-progress-bar + div > span:first-child {
        font-size: 16px;
    }
    #scroll-pct {
        font-size: 18px;
    }
    #stack-area {
        max-width: 1400px !important;
        margin-top: -20px !important;
    }
    #stack-area .stack-card .card-expand .font-\['DM_Sans'\] {
        font-size: 26px !important;
        line-height: 1.8 !important;
    }
    #stack-area .stack-card .card-expand .font-\['Bebas Neue'\] {
        font-size: 72px !important;
    }
    #stack-area .stack-card .card-expand .font-\['Schoolbell'\] {
        font-size: 14px !important;
    }
    #hero-badges {
        transform: scale(1.35);
        transform-origin: top left;
    }
    #hero-quote-block {
        transform: scale(1.35);
        transform-origin: top right;
    }
    #hero-roles-block {
        transform: scale(1.35);
        transform-origin: bottom left;
    }
    .hero-overlay-text.md\:bottom-20 {
        bottom: 150px !important;
        transform: translateX(-50%) scale(1.35) !important;
        transform-origin: bottom center;
    }
    #preloader-content > div.font-\['Schoolbell'\] {
        font-size: 150px !important;
    }
    #loader-container {
        transform: scale(1.35);
        transform-origin: bottom left;
    }
    #skip-btn {
        transform: scale(1.35);
        transform-origin: bottom right;
    }
    #metro-door-text h2 {
        font-size: 180px !important;
    }
    #metro-door-text p {
        font-size: 72px !important;
        margin-top: 16px !important;
        margin-bottom: 40px !important;
    }
    #metro-enter-btn {
        font-size: 32px !important;
        padding: 24px 72px !important;
    }
    #transit-stations-container > div > div:nth-child(2) {
        transform-origin: bottom center !important;
        transform: translateY(-62px) scale(1.25) !important;
    }
    #transit-train {
        height: 170px !important;
    }
    #fixed-route-board {
        margin-top: 20px !important;
    }
    div.absolute:has(> .group > #vw-tilted-box) {
        margin-top: 20px !important;
        translate: 0 15px !important;
    }
    #transit-next-btn, #transit-prev-btn {
        width: 105px !important;
        height: 105px !important;
    }
    #transit-next-btn svg, #transit-prev-btn svg {
        width: 40px !important;
        height: 40px !important;
    }
    #stack-area .stack-card .card-expand div[class*="items-start"] > div:last-child {
        font-size: 19px !important;
        line-height: 1.8 !important;
    }
    #stack-area .stack-card .card-expand div[class*="items-start"] > div:first-child {
        width: 6px !important;
        height: 6px !important;
        margin-top: 12px !important;
    }
    #hero .hero-overlay-text.bottom-16,
            #about-sticky-wrap > div.animate-pulse {
        translate: 0 25px !important;
    }
    #transit-cs-content,
            #transit-case-study-view > div.sticky {
        max-width: 1600px !important;
    }
    #intro-sticky-note {
        transform: scale(0.85) rotate(-2deg) !important;
        transform-origin: top right !important;
    }
    #origin-headline {
        font-size: 41px !important;
        left: 2% !important;
    }
    #art-polaroid {
        translate: 0 5px !important;
    }
    #experience-typewriter {
        translate: 0 -20px !important;
    }
    #metrics-stamps-group {
        translate: 0 -10px !important;
    }
    #other-highlights-block {
        translate: 0 -10px !important;
    }
    #contact p.contact-stagger {
        font-size: 34px !important;
        line-height: 1.4 !important;
        max-width: 800px !important;
    }
    #contact a[href^="mailto"] {
        font-size: 80px !important;
    }
    #contact .contact-stagger span[aria-hidden="true"] {
        font-size: 20px !important;
    }
    #contact .contact-stagger.flex.gap-8 a {
        font-size: 24px !important;
    }
}
        @media (min-width: 1536px) and (max-width: 1560px) and (min-height: 740px) and (max-height: 870px) {
    #experience-typewriter {
        translate: 0 -25px !important;
    }
    #proj-helper-sticker {
        transform: translateY(-32px) rotate(-2deg) !important;
    }
    #stack-area {
        translate: 0 -15px !important;
    }
    #vw-best {
        font-size: 110px !important;
    }
    #vw-work {
        font-size: 110px !important;
    }
    #vw-tilted-box {
        height: 120px !important;
    }
    #fixed-route-board {
        margin-top: -22px !important;
        transform: translateX(18px) rotate(-1.2deg) scale(0.90) !important;
    }
}
        @media (min-width: 1453px) and (max-width: 1535px) and (min-height: 781px) and (max-height: 960px) {
    #experience-typewriter {
        font-size: 11px;
        line-height: 1.4;
        margin-top: -45px;
    }
    #verified-stamp {
        bottom: -30px;
        right: 5%;
    }
    #other-highlights-block {
        translate: 0 -20px;
    }
    #origin-micro-story {
        translate: 0 -10px !important;
    }
    #torn-signature-paper {
        zoom: 0.80;
    }
    .realistic-paper-stack-right {
        overflow: visible;
    }
    #art-terminal {
        zoom: 0.78;
    }
    #vw-best {
        font-size: 105px !important;
    }
    #vw-work {
        font-size: 105px !important;
    }
    #vw-tilted-box {
        height: 115px !important;
    }
    div.absolute:has(> .group > #vw-tilted-box) {
        margin-top: -20px !important;
        translate: 0 35px;
    }
    #transit-stations-container > div {
        padding-bottom: 245px !important;
    }
    #fixed-route-board {
        margin-top: -15px !important;
    }
    #art-polaroid {
        translate: 0 25px;
    }
    #proj-helper-sticker {
        align-self: flex-start;
        margin-top: 110px;
        margin-right: 40px;
    }
    #stack-area {
        margin-top: -35px;
    }
}
        @media (min-width: 1453px) and (max-width: 1535px) and (min-height: 660px) and (max-height: 780px) {
            #origin-headline { font-size: 24px !important; line-height: 1.05 !important; }
            #origin-micro-story { font-size: 10px !important; line-height: 1.4 !important; margin-top: 20px; }
            #art-polaroid { zoom: 0.76; }
            #personal-cutout { width: 28% !important; height: 36% !important; }
            #art-terminal { zoom: 0.78; margin-top: -15px; }
            #art-stats { zoom: 0.74; margin-top: -15px; }
            #experience-typewriter { font-size: 10px !important; line-height: 1.4 !important; margin-top: -55px; }
            #metrics-stamps-group .evidence-stamp-red,
            #metrics-stamps-group .evidence-stamp-yellow,
            #metrics-stamps-group .evidence-stamp-blue { height: 75px !important; padding: 4px !important; }
            #proj-section-badge + h2 { font-size: clamp(80px, 9vw, 110px) !important; }
            #proj-header-row > div:first-child { margin-top: 20px; }
            #proj-helper-sticker { align-self: flex-start; margin-top: 40px; }
            #stack-area { margin-top: -20px; }
            #stack-area .stack-card { padding-top: 10px !important; padding-bottom: 10px !important; }
            #vw-best { font-size: 90px !important; }
            #vw-work { font-size: 90px !important; }
            #vw-tilted-box { height: 100px !important; }
            div.absolute:has(> .group > #vw-tilted-box) { translate: 0 -20px; }
            #fixed-route-board { zoom: 0.76; }
            #transit-stations-container > div { padding-bottom: 200px !important; }
        }
        @media (min-width: 1255px) and (max-width: 1380px) and (min-height: 660px) and (max-height: 760px) {
    #art-terminal {
        zoom: 0.75;
    }
    #art-stats {
        zoom: 0.75;
    }
    #experience-typewriter {
        margin-top: -40px;
    }
    #vw-best {
        font-size: 95px !important;
    }
    #vw-work {
        font-size: 95px !important;
    }
    #vw-tilted-box {
        height: 105px !important;
    }
    div:has(> #transit-next-btn) {
        top: 42% !important;
    }
    div:has(> #transit-prev-btn) {
        top: 42% !important;
    }
    #fixed-route-board {
        zoom: 0.78;
    }
        }
        @media (min-width: 1320px) and (max-width: 1380px) and (min-height: 580px) and (max-height: 665px) {
            #frag-origin-cursive { margin-top: -30px; }
            #origin-headline { margin-top: -20px; }
            #origin-micro-story { font-size: 10px !important; line-height: 1.5 !important; }
            #art-polaroid { zoom: 0.72; }
            #art-terminal { zoom: 0.72; }
            #art-stats { zoom: 0.68; }
            #metrics-stamps-group .evidence-stamp-red,
            #metrics-stamps-group .evidence-stamp-yellow,
            #metrics-stamps-group .evidence-stamp-blue {
                height: 80px !important;
                padding: 5px !important;
            }
            #art-stats { margin-top: -30px; margin-left: 20px; }
            #art-terminal { margin-top: -25px; }
            #experience-typewriter { margin-top: -50px; }
            #metrics-stamps-group { translate: 0 -20px; }
            #art-polaroid { margin-bottom: -25px; }
            #origin-micro-story { margin-top: 25px; }
            #proj-section-badge { font-size: 8px; padding: 2px 8px; margin-top: 12px; }
            #proj-section-badge + h2 { font-size: clamp(70px, 8vw, 100px) !important; margin-top: 8px; }
            #proj-helper-sticker { margin-top: -30px; align-self: flex-start; }
            #stack-area { margin-top: 25px; }
            #stack-area .stack-card { padding-top: 10px !important; padding-bottom: 10px !important; }
            #stack-area .stack-card .text-\[28px\] { font-size: 20px !important; }
            #stack-area .stack-card .text-xs { font-size: 9px !important; }
        }
        @media (min-width: 1500px) and (max-width: 1560px) and (min-height: 660px) and (max-height: 760px) {
            #intro-sticky-note { zoom: 0.78; }
            #frag-origin-cursive { font-size: 22px !important; }
            #origin-micro-story { font-size: 10px !important; line-height: 1.5 !important; }
            #personal-cutout { zoom: 0.82; }
            #art-polaroid { zoom: 0.80; }
            #origin-headline { font-size: 26px !important; line-height: 1.05 !important; }
            #experience-typewriter { margin-top: 10px; margin-left: -20px; font-size: 10px !important; line-height: 1.4 !important; }
            #metrics-stamps-group .evidence-stamp-red,
            #metrics-stamps-group .evidence-stamp-yellow,
            #metrics-stamps-group .evidence-stamp-blue {
                height: 82px !important;
                padding: 5px !important;
            }
            #frag-origin-cursive { font-size: 16px !important; }
            #metrics-stamps-group .evidence-stamp-red > span:last-child,
            #metrics-stamps-group .evidence-stamp-yellow > span:last-child,
            #metrics-stamps-group .evidence-stamp-blue > span:last-child {
                font-size: 7px !important;
                line-height: 1.2 !important;
            }
            #proj-header-row > div:first-child { margin-top: 15px; }
            #proj-helper-sticker { align-self: flex-start; margin-top: 30px; }
            #stack-area { margin-top: -35px; }
            #vw-best { font-size: 70px !important; }
            #vw-work { font-size: 70px !important; }
            #vw-tilted-box { height: 80px !important; }
            div.absolute:has(> .group > #vw-tilted-box) { translate: 0 -25px; }
            #fixed-route-board { zoom: 0.80; }
            #transit-train { height: 90px !important; }
            #transit-stations-container > div { padding-bottom: 240px !important; }
        }
        @media (min-width: 1880px) and (max-width: 1960px) and (min-height: 900px) and (max-height: 980px) {
            #transit-train { height: 170px !important; }
            #transit-stations-container { zoom: 0.95; }
        }
        @media (min-width: 1561px) and (max-width: 1660px) and (min-height: 740px) and (max-height: 840px) {
            #personal-cutout { width: 28% !important; height: 38% !important; }
            #origin-micro-story { font-size: 12px !important; line-height: 1.6 !important; margin-top: 25px; }
            #art-terminal { zoom: 0.82; }
            #art-stats { zoom: 0.80; }
            #experience-typewriter { margin-top: -65px; }
            #art-polaroid { zoom: 0.82; }
            #vw-best { font-size: 105px !important; }
            #vw-work { font-size: 105px !important; }
            #vw-tilted-box { height: 115px !important; }
            #fixed-route-board { zoom: 0.82; }
            #transit-stations-container > div { padding-bottom: 200px !important; }
            #transit-train { height: 150px !important; }
        }
        @media (min-width: 2500px) and (max-width: 2600px) and (min-height: 1280px) and (max-height: 1560px) {
            #top-ribbon { height: 52px !important; font-size: 16px !important; }
            .nav-brutal { padding: 10px !important; }
            .nav-item { font-size: 16px !important; padding: 10px 20px !important; }
            #hero-roles-block span[aria-hidden="true"] { font-size: 16px !important; }
            #hero-roles-block span:not([aria-hidden]) { font-size: 32px !important; }
            #origin-headline { font-size: 32px !important; line-height: 1.05 !important; }
            #intro-sticky-note { zoom: 0.82; }
            #art-polaroid { zoom: 0.82; }
            #personal-cutout { width: 28% !important; height: 38% !important; }
            #origin-micro-story { margin-top: 20px; }
            #experience-typewriter { margin-top: -20px; }
            #proj-section-badge + h2 { font-size: 220px !important; }
            #proj-helper-sticker { zoom: 1.4; }
            #stack-area .stack-card { padding-top: 36px !important; padding-bottom: 36px !important; }
            #stack-area .stack-card .text-xl, #stack-area .stack-card .md\:text-2xl { font-size: 28px !important; }
            #stack-area .stack-card .text-5xl, #stack-area .stack-card .md\:text-6xl { font-size: 72px !important; }
            #stack-area .stack-card .text-\[11px\], #stack-area .stack-card .md\:text-\[12px\] { font-size: 16px !important; }
            #stack-area .stack-card .text-\[11px\], #stack-area .stack-card .md\:text-\[13px\] { font-size: 16px !important; }
            #vw-best { font-size: 180px !important; }
            #vw-work { font-size: 180px !important; }
            #vw-tilted-box { height: 195px !important; }
            #fixed-route-board { zoom: 1.3; margin-top: -10px; }
            #transit-stations-container { zoom: 1.5; }
            #transit-stations-container > div { padding-bottom: 420px !important; }
            #vending { min-height: 100vh !important; }
            #transit-train { height: 350px !important; }
            div.absolute:has(> .group > #vw-tilted-box) { translate: 0 -40px; }
            #proj-content-wrap { max-width: 2200px !important; padding-left: 48px !important; padding-right: 48px !important; align-items: center !important; }
            #stack-area { max-width: 100% !important; align-self: center !important; }
        }
        @media (min-width: 844px) and (max-width: 844px) and (min-height: 390px) and (max-height: 390px) {
    #hero h1 {
        font-size: 225px !important;
    }
    #hero-job-title {
        font-size: 10px !important;
        bottom: 10px !important;
    }
    #about-sticky h2 {
        font-size: 50px !important;
        padding-top: 10px !important;
    }
    #torn-signature-paper {
        zoom: 0.5 !important;
        bottom: -20px !important;
    }
    #vw-best, #vw-work {
        font-size: 70px !important;
    }
    #vw-tilted-box {
        height: 80px !important;
    }
    #fixed-route-board {
        height: 90px !important;
        transform: scale(0.65) !important;
        margin-top: -10px !important;
        right: 20px !important;
    }
    #origin-headline {
        font-size: 50px !important;
    }
    #art-polaroid {
        transform: translateX(30px) translateY(-30px) rotate(4deg) !important;
        bottom: 5% !important;
        max-width: 90px !important;
    }
    #experience-typewriter {
        font-size: 20px !important;
        translate: 0 -10px !important;
    }
    #hero-roles-block {
        zoom: 0.55 !important;
        bottom: 5% !important;
    }
    #hero-quote-block {
        zoom: 0.55 !important;
        top: 15% !important;
    }
    #top-ribbon {
        zoom: 0.6 !important;
    }
    #main-nav-container {
        bottom: 12px !important;
    }
    #main-nav {
        zoom: 0.65 !important;
    }
    #hero .hero-overlay-text.bottom-16 {
        zoom: 0.6 !important;
        bottom: 39px !important;
    }
    #sound-toggle {
        zoom: 0.65 !important;
    }
    #hero-badges {
        top: 75px !important;
        left: 69px !important;
        bottom: auto !important;
        right: auto !important;
        zoom: 0.75 !important;
    }
    #intro-sticky-note {
        transform: scale(0.5) rotate(-2deg) !important;
        transform-origin: top right !important;
    }
    #origin-page-header {
        font-size: 6px !important;
        transform: translateY(-20px) !important;
        margin-top: -11px !important;
    }
    #frag-origin-cursive,
            #origin-headline {
        zoom: 0.3 !important;
        margin-top: -120px !important;
        margin-left: -60px !important;
    }
    #origin-micro-story {
        zoom: 0.6 !important;
        margin-top: -17px !important;
        margin-left: -35px !important;
    }
    #left-page-base > div:last-child > div:last-child {
        font-size: 9px !important;
        transform: translateY(15px) !important;
    }
    #personal-cutout > div:last-child {
        zoom: 0.7 !important;
    }
    #frag-strategy-annot, #frag-strategy-annot span {
        font-size: 7px !important;
        line-height: 1.2 !important;
    }
    #personal-cutout {
        transform: translateY(20px) !important;
    }
    #sticker-vaibhav {
        transform: translate(-50%, 0) rotate(4deg) scale(0.6) !important;
    }
    #art-terminal {
        transform: translate(-60px, -80px) rotate(-2deg) scale(0.45) !important;
    }
    #art-stats {
        transform: rotate(6deg) scale(0.4) !important;
    }
    #origin-page-header-2 {
        transform: scale(0.75) !important;
        transform-origin: top center !important;
        width: 133% !important;
    }
}
        @media (min-width: 1441px) and (max-width: 1535px) and (min-height: 701px) and (max-height: 780px) {
    #vw-best {
        font-size: 110px !important;
    }
    #vw-work {
        font-size: 110px !important;
    }
    #fixed-route-board {
        top: 58px !important;
        right: 55px !important;
        transform: rotate(-1.2deg) !important;
    }
    #transit-train {
        height: 175px !important;
    }
    #transit-stations-container > div {
        margin-top: 45px !important;
    }
    #vw-tilted-box {
        height: 95px !important;
    }
    #art-polaroid {
        bottom: calc(25% - 20px) !important;
    }
    #experience-typewriter {
        font-size: 10px !important;
        padding-right: 6px !important;
        top: calc(48% - 60px) !important;
    }
    #art-stats {
        transform: rotate(6deg) scale(0.78) !important;
        transform-origin: top right !important;
    }
    #art-terminal {
        zoom: 0.78;
    }
    #metrics-stamps-group {
        translate: 0 -35px !important;
    }
    #other-highlights-block {
        translate: 0 -20px !important;
    }
}
        @media (min-width: 1000px) and (max-width: 1100px) and (min-height: 680px) and (max-height: 800px) {
    #intro-sticky-note {
        zoom: 0.8 !important;
    }
    #frag-origin-cursive,
            #origin-headline {
        margin-left: -25px !important;
        margin-top: -10px !important;
    }
    #origin-page-header {
        transform: translateY(-10px) !important;
    }
    #origin-micro-story {
        margin-top: -15px !important;
        margin-left: -25px !important;
    }
    #frag-strategy-annot {
        font-size: 9px !important;
    }
    #art-polaroid {
        zoom: 0.8 !important;
    }
    #art-terminal {
        zoom: 0.8 !important;
    }
    #art-stats {
        zoom: 0.7 !important;
        margin-left: 65px !important;
        margin-top: -25px !important;
    }
    #origin-page-header-2 {
        transform: translateY(-7px) !important;
    }
    #experience-typewriter {
        zoom: 0.8 !important;
    }
}