/* ===== SCROLLBARS (all viewports) ===== */
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); }
        ::-webkit-scrollbar-thumb { background: rgba(255, 214, 10, 0.2); border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: rgba(255, 214, 10, 0.35); }

        /* ===== MOBILE START SCREEN =====
           Safari's start page, rebuilt: a note, a title, and a grid of
           bookmarks that open the same pages the desktop opens. Sizes are in
           the existing scale; no new type is introduced here. */
        .mobile-view {
            display: none;
            position: fixed;
            inset: 0;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            background: #0D0D0F;
            padding: max(18px, env(safe-area-inset-top)) 18px
                     max(24px, env(safe-area-inset-bottom));
            z-index: 40;
        }

        /* ---- the desktop notice, as a full-screen gate ----
           It sits inside .mobile-view, which is display:none above 768px, so
           the gate never renders on a desktop. */
        .mob-gate {
            position: fixed;
            inset: 0;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: max(28px, env(safe-area-inset-top)) 26px
                     max(28px, env(safe-area-inset-bottom));
            background: #0D0D0F;
            overscroll-behavior: contain;   /* don't scroll the grid underneath */
        }

        .mob-gate.gone { display: none; }

        .mob-gate-inner {
            width: 100%;
            max-width: 420px;
            max-height: 100%;
            overflow-y: auto;
        }

        .mob-gate-kicker {
            margin: 0 0 10px;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #FFD34D;
        }

        .mob-gate-title {
            margin: 0 0 14px;
            font-size: 28px;
            font-weight: 600;
            line-height: 1.15;
            letter-spacing: -0.01em;
            color: #FFFFFF;
        }

        .mob-gate-body {
            margin: 0 0 32px;
            font-size: 13px;
            line-height: 1.6;
            color: #8C8C93;
        }

        .mob-gate-go {
            display: block;
            width: 100%;
            min-height: 52px;              /* well past the 44px touch minimum */
            padding: 15px 20px;
            border: none;
            border-radius: 14px;
            background: #FFD34D;
            color: #17171A;
            font-family: inherit;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
        }

        .mob-gate-go:active { transform: scale(0.985); }

        /* What shows is decided by one state class on .mob-gate, never by the
           `hidden` attribute: relying on the UA's [hidden] rule meant a single
           missing override left an element stuck visible or stuck gone. Every
           rule below is .mob-gate.state .child, so it always outranks the
           element's own base rule. */
        .mob-gate-stage2,
        .mob-gate-timer { display: none; }

        .mob-gate.counting .mob-gate-go    { display: none; }
        .mob-gate.counting .mob-gate-timer { display: flex; }
        .mob-gate.owned   .mob-gate-stage1 { display: none; }
        .mob-gate.owned   .mob-gate-stage2 { display: block; }

        .mob-gate-timer {
            align-items: baseline;
            justify-content: center;
            gap: 8px;
            min-height: 52px;              /* the button's height: nothing shifts */
        }

        .mob-gate-count {
            font-variant-numeric: tabular-nums;   /* so the digits don't jiggle */
            font-size: 34px;
            font-weight: 600;
            line-height: 1;
            color: #FFD34D;
        }

        .mob-gate-unit {
            font-size: 13px;
            color: #6E6E76;
        }

        .mob-head { margin-bottom: 30px; }

        .mob-head h1 {
            margin: 0 0 6px;
            font-size: 28px;
            font-weight: 600;
            letter-spacing: -0.01em;
            color: #FFFFFF;
        }

        .mob-head p {
            margin: 0;
            font-size: 13px;
            line-height: 1.5;
            color: #8C8C93;
        }

        .mob-label {
            margin: 0 0 14px;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #6E6E76;
        }

        .mob-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
        }

        .mob-tile {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 4px;
            min-height: 96px;          /* comfortably past the 44px minimum */
            padding: 14px;
            background: #17171A;
            border: 1px solid rgba(255, 255, 255, 0.07);
            border-radius: 14px;
            font-family: inherit;
            text-align: left;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }

        .mob-tile:active { background: #1F1F24; }

        .mob-ico {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            height: 34px;
            margin-bottom: 8px;
            border-radius: 9px;
            font-size: 16px;
            font-weight: 700;
            color: #0D0D0F;
        }

        .mob-name {
            font-size: 15px;
            font-weight: 600;
            color: #F2F2F4;
        }

        .mob-url {
            font-size: 11px;
            color: #6E6E76;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 100%;
        }

        .mob-foot {
            margin: 30px 0 0;
            font-size: 12px;
            color: #5C5C64;
        }


        @media (min-width: 430px) and (max-width: 768px) {
            .mob-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        }

        /* Last word in the cascade. .mobile-view's base rule above is
           display:none for desktop, so the start screen is switched back on
           here, and the desk is switched off. */
        @media (max-width: 768px) {
            .mobile-view { display: block; }

            /* The boot terminal belongs to the desk. On a phone it is one more
               thing to tap past before the start screen, so it never renders. */
            .welcome-overlay { display: none !important; }
            .studio-wrapper, .nav-bar { display: none; }
            /* the desk's hover/focus label belongs to the desk */
            .notification-tag { display: none !important; }

            /* a page opened from the start screen fills the phone */
            .finder-window {
                width: 100%;
                height: 100%;
                max-width: 100%;
                max-height: 100%;
                border-radius: 0;
                top: 0;
                left: 0;
                transform: none;
            }
            .window-sidebar { display: none; }
        }