/* Asset: scanio.css */

        :root {
            --cream: #f6f0e5;
            --paper: #fffdf7;
            --green: #20c46f;
            --lime: #b7ff6a;
            --deep: #0e7b43;
            --yellow: #f0b14d;
            --terr: #c96a3a;
            --ink: #0b1510;
            --muted: #66736a;
            --line: rgba(11, 21, 16, .09);
            font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, Segoe UI, sans-serif;
        }

        * {
            box-sizing: border-box
        }

        html, body {
            margin: 0;
            min-height: 100%;
            color: var(--ink)
        }

        body {
            background: radial-gradient(circle at 10% 0%, rgba(32, 196, 111, .18), transparent 28%), radial-gradient(circle at 95% 10%, rgba(201, 106, 58, .16), transparent 31%), linear-gradient(135deg, #fff9ef, #f4eee2 52%, #e6f0e4)
        }

        button, input {
            font: inherit
        }

        button {
            border: 0;
            cursor: pointer
        }

        button:active {
            transform: translateY(1px) scale(.99)
        }

        .page {
            max-width: 1180px;
            margin: auto;
            padding: 18px
        }

        .hero {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 20px;
            padding: 16px 18px;
            margin-bottom: 16px;
            border-radius: 26px;
            background: rgba(255, 253, 247, .78);
            border: 1px solid rgba(255, 255, 255, .9);
            box-shadow: 0 18px 50px rgba(15, 23, 18, .08)
        }

        .hero h1 {
            margin: 0;
            font-size: 32px;
            line-height: .95;
            letter-spacing: -.065em
        }

        .hero p {
            margin: 8px 0 0;
            color: var(--muted);
            font-weight: 700;
            line-height: 1.35
        }

        .logo {
            display: flex;
            gap: 9px;
            align-items: center;
            color: var(--deep);
            font-size: 12px;
            font-weight: 950;
            letter-spacing: .14em;
            text-transform: uppercase
        }

        .logoMark {
            width: 32px;
            height: 32px;
            border-radius: 11px;
            border: 2px solid var(--deep);
            display: grid;
            place-items: center
        }

        .logoMark:after {
            content: "";
            width: 11px;
            height: 11px;
            border: 2px solid var(--deep);
            border-radius: 50%
        }

        .layout {
            display: grid;
            grid-template-columns:420px 1fr;
            gap: 17px;
            align-items: start
        }

        .phone {
            width: 420px;
            max-width: calc(100vw - 36px);
            height: 824px;
            position: sticky;
            top: 12px;
            padding: 9px;
            border-radius: 49px;
            background: #101612;
            box-shadow: 0 28px 80px rgba(15, 23, 18, .24)
        }

        .screen {
            height: 100%;
            position: relative;
            overflow: hidden;
            border-radius: 39px;
            background: linear-gradient(180deg, #fff8ec, #f6f0e5 58%, #e8f2e6)
        }

        .island {
            position: absolute;
            z-index: 40;
            left: 50%;
            top: 13px;
            transform: translateX(-50%);
            width: 112px;
            height: 29px;
            border-radius: 99px;
            background: #020403
        }

        .status {
            position: absolute;
            z-index: 39;
            left: 0;
            right: 0;
            top: 0;
            height: 49px;
            padding: 0 29px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 13px;
            font-weight: 900
        }

        .phoneView {
            position: absolute;
            inset: 0;
            padding: 55px 15px 92px;
            overflow-y: auto;
            opacity: 0;
            pointer-events: none;
            transform: translateX(18px);
            transition: .25s ease
        }

        .phoneView.active {
            opacity: 1;
            pointer-events: auto;
            transform: none
        }

        .phoneView::-webkit-scrollbar {
            width: 0
        }

        .topline {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px
        }

        .title {
            margin: 0;
            font-size: 29px;
            line-height: .98;
            letter-spacing: -.06em
        }

        .subtitle {
            margin: 5px 0 0;
            color: var(--muted);
            font-size: 13px;
            font-weight: 700
        }

        .streak {
            display: flex;
            align-items: center;
            gap: 8px;
            min-height: 45px;
            padding: 8px 11px;
            border-radius: 99px;
            background: rgba(255, 253, 247, .94);
            box-shadow: 0 11px 28px rgba(15, 23, 18, .11);
            font-weight: 950
        }

        .streak.bump {
            animation: bump .7s cubic-bezier(.18, 1.15, .28, 1)
        }

        .streak small {
            display: block;
            color: var(--muted);
            font-size: 8px;
            letter-spacing: .13em;
            text-transform: uppercase
        }

        .streak b {
            font-size: 14px
        }

        .panicon {
            width: 27px;
            height: 23px;
            position: relative
        }

        .panicon:before {
            content: "";
            position: absolute;
            left: 2px;
            bottom: 2px;
            width: 18px;
            height: 10px;
            border-radius: 0 0 10px 10px;
            background: #1b1f1c
        }

        .panicon:after {
            content: "";
            position: absolute;
            right: 0;
            bottom: 7px;
            width: 9px;
            height: 3px;
            border-radius: 99px;
            background: #1b1f1c
        }

        .steam {
            position: absolute;
            top: 0;
            width: 3px;
            height: 13px;
            border-radius: 99px;
            background: linear-gradient(#fff, #bfc6c0)
        }

        .steam.a {
            left: 8px;
            transform: rotate(32deg)
        }

        .steam.b {
            left: 14px;
            transform: rotate(-32deg)
        }

        @keyframes bump {
            0% {
                transform: scale(1)
            }
            25% {
                transform: scale(1.08) translateY(-2px)
            }
            100% {
                transform: scale(1)
            }
        }

        /* original solar-system recipe structure */
        .orbitWrap {
            position: relative;
            height: 304px;
            margin-top: 16px;
            border-radius: 31px;
            overflow: hidden;
            background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .94), transparent 35%), radial-gradient(circle at 20% 25%, rgba(32, 196, 111, .12), transparent 27%), radial-gradient(circle at 82% 72%, rgba(201, 106, 58, .14), transparent 29%), rgba(255, 253, 247, .58);
            border: 1px solid rgba(255, 255, 255, .85);
            box-shadow: 0 15px 38px rgba(15, 23, 18, .13);
            touch-action: pan-y
        }

        .orbitWrap.slideLeft {
            animation: slideLeft .35s ease
        }

        .orbitWrap.slideRight {
            animation: slideRight .35s ease
        }

        @keyframes slideLeft {
            0% {
                transform: none;
                opacity: 1
            }
            45% {
                transform: translateX(-34px) scale(.97);
                opacity: .55
            }
            46% {
                transform: translateX(34px) scale(.97);
                opacity: .55
            }
            100% {
                transform: none;
                opacity: 1
            }
        }

        @keyframes slideRight {
            0% {
                transform: none;
                opacity: 1
            }
            45% {
                transform: translateX(34px) scale(.97);
                opacity: .55
            }
            46% {
                transform: translateX(-34px) scale(.97);
                opacity: .55
            }
            100% {
                transform: none;
                opacity: 1
            }
        }

        .orbitAddRoot {
            display:none;
            position: absolute;
            z-index: 12;
            right: 14px;
            bottom: 14px;
            width: 52px;
            height: 52px
        }

        .orbitAddButton {
            width: 52px;
            height: 52px;
            border: 0;
            border-radius: 50%;
            color: #073616;
            background: linear-gradient(145deg, var(--green), var(--lime));
            font-size: 28px;
            font-weight: 900;
            line-height: 1;
            box-shadow: 0 14px 28px rgba(14, 123, 67, .28);
            cursor: pointer;
            transition: transform .2s ease, box-shadow .2s ease
        }

        .orbitAddButton:hover {
            transform: scale(1.05)
        }

        .orbitAddRoot.open .orbitAddButton {
            transform: rotate(45deg);
            box-shadow: 0 10px 22px rgba(14, 123, 67, .22)
        }

        .orbitAddOption {
            position: absolute;
            width: 48px;
            height: 48px;
            border: 0;
            border-radius: 50%;
            display: grid;
            place-items: center;
            padding: 0;
            color: #073616;
            background: rgba(255, 253, 247, .98);
            box-shadow: 0 12px 26px rgba(15, 23, 18, .16);
            opacity: 0;
            pointer-events: none;
            transform: scale(.72);
            transition: transform .28s cubic-bezier(.18, .95, .26, 1), opacity .22s ease
        }

        .orbitAddOption b {
            font-size: 9px;
            font-weight: 950;
            letter-spacing: .02em
        }

        .orbitAddOption span {
            display: block;
            font-size: 15px;
            line-height: 1
        }

        .orbitAddRoot.open .orbitAddOption {
            opacity: 1;
            pointer-events: auto;
            transform: scale(1)
        }

        .orbitAddOption.scan {
            right: 58px;
            bottom: 6px
        }

        .orbitAddOption.manual {
            right: 6px;
            bottom: 58px
        }

        .orbitAddSheet {
            position: absolute;
            z-index: 13;
            left: 12px;
            right: 12px;
            bottom: 12px;
            display: none;
            padding: 12px;
            border-radius: 22px;
            background: rgba(255, 253, 247, .98);
            border: 1px solid rgba(255, 255, 255, .92);
            box-shadow: 0 18px 40px rgba(15, 23, 18, .18)
        }

        .orbitAddSheet.open {
            display: block;
            animation: orbitAddSheetIn .28s ease both
        }

        @keyframes orbitAddSheetIn {
            from {
                opacity: 0;
                transform: translateY(10px)
            }
            to {
                opacity: 1;
                transform: none
            }
        }

        .orbitAddSheetHead {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px
        }

        .orbitAddSheetHead b {
            font-size: 12px
        }

        .orbitAddSheetHead button {
            width: 30px;
            height: 30px;
            border: 0;
            border-radius: 11px;
            background: #f0eadf;
            font-size: 16px
        }

        .orbitAddCustomForm {
            display: flex;
            gap: 6px;
            margin: 0 0 9px
        }

        .orbitAddCustomInput {
            min-width: 0;
            flex: 1;
            height: 34px;
            padding: 0 10px;
            border: 1px solid rgba(15, 23, 18, .12);
            border-radius: 11px;
            background: #fff;
            color: var(--ink);
            font: inherit;
            font-size: 10px;
            font-weight: 750
        }

        .orbitAddCustomInput:focus {
            outline: 2px solid rgba(32, 196, 111, .32);
            border-color: var(--green)
        }

        .orbitAddCustomSubmit {
            flex: 0 0 auto;
            height: 34px;
            padding: 0 11px;
            border: 0;
            border-radius: 11px;
            background: var(--deep);
            color: #fff;
            font-size: 10px;
            font-weight: 900;
            cursor: pointer
        }

        .orbitAddSheetGrid {
            display: grid;
            grid-template-columns:repeat(4, minmax(0, 1fr));
            gap: 6px;
            max-height: 150px;
            overflow: auto
        }

        .orbitAddNoMatches {
            grid-column: 1/-1;
            margin: 12px 4px;
            color: var(--muted);
            font-size: 10px;
            font-weight: 750;
            line-height: 1.35;
            text-align: center
        }

        .orbitAddChoice {
            min-width: 0;
            padding: 8px 3px;
            border: 1px solid rgba(15, 23, 18, .06);
            border-radius: 12px;
            color: var(--ink);
            background: #fff;
            font-size: 8px;
            font-weight: 900;
            cursor: pointer
        }

        .orbitAddChoice span {
            display: block;
            margin-bottom: 3px;
            font-size: 18px
        }

        .orbitAddChoice.selected {
            color: #073616;
            background: var(--lime);
            border-color: rgba(14, 123, 67, .2)
        }

        .badge {
            position: absolute;
            z-index: 8;
            top: 13px;
            left: 13px;
            padding: 8px 11px;
            border-radius: 99px;
            background: rgba(255, 253, 247, .94);
            color: var(--deep);
            font-size: 10px;
            font-weight: 950;
            letter-spacing: .11em;
            text-transform: uppercase;
            box-shadow: 0 8px 20px rgba(15, 23, 18, .09)
        }

        .badge.student {
            color: #275e93;
            background: #edf6ff
        }

        .badge.premium {
            color: var(--terr);
            background: #fff0dc
        }

        .badge.infinite {
            min-width: 39px;
            text-align: center;
            font-size: 20px;
            line-height: .8;
            letter-spacing: 0;
            color: var(--ink);
            background: linear-gradient(145deg, #fffdf7, #e9f6e8)
        }

        .badge.remix {
            font-size: 18px;
            letter-spacing: 0;
            color: var(--ink)
        }

        .orbit {
            position: absolute;
            inset: 0
        }

        .ring, .ring2, .ring3 {
            position: absolute;
            border-radius: 50%;
            border: 1px solid rgba(14, 123, 67, .18)
        }

        .ring {
            inset: 35px
        }

        .ring2 {
            inset: 70px;
            border-color: rgba(201, 106, 58, .18)
        }

        .ring3 {
            inset: 105px;
            border-color: rgba(240, 177, 77, .22)
        }

        .dish {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 118px;
            height: 118px;
            border-radius: 50%;
            padding: 0;
            background: #ddd;
            overflow: hidden;
            box-shadow: 0 22px 50px rgba(15, 23, 18, .25), 0 0 0 8px rgba(255, 253, 247, .6);
            z-index: 4
        }

        .dish img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block
        }

        .dish:after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6)
        }

        /* Planets translate around the dish. Fixed small size so up to six ingredients stay visible. */
        .ingredientPlanet {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 46px;
            height: 46px;
            border-radius: 50%;
            padding: 0;
            background: #ddd;
            overflow: visible;
            box-shadow: 0 8px 18px rgba(15, 23, 18, .14), 0 0 0 3px rgba(255, 253, 247, .78);
            will-change: transform;
            transform: translate(-50%, -50%)
        }

        .ingredientPlanet img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            border-radius: 50%;
            background: transparent
        }

        .ingredientPlanet span {
            position: absolute;
            left: 50%;
            top: calc(100% + 3px);
            transform: translateX(-50%);
            white-space: nowrap;
            padding: 3px 5px;
            border-radius: 99px;
            background: rgba(255, 253, 247, .94);
            font-size: 7px;
            font-weight: 950;
            box-shadow: 0 5px 12px rgba(15, 23, 18, .08)
        }

        .topmatch {
            margin-top: 13px;
            padding: 14px;
            border-radius: 25px;
            background: rgba(255, 253, 247, .92);
            box-shadow: 0 14px 34px rgba(15, 23, 18, .1)
        }

        .topmatch small {
            color: var(--deep);
            font-size: 10px;
            font-weight: 950;
            letter-spacing: .1em
        }

        .topmatch h3 {
            margin: 5px 0 0;
            font-size: 20px;
            letter-spacing: -.045em
        }

        .topmatch p {
            margin: 6px 0 12px;
            color: var(--muted);
            font-size: 12px;
            line-height: 1.35;
            font-weight: 700
        }

        .primary {
            height: 48px;
            width: 100%;
            border-radius: 17px;
            background: linear-gradient(145deg, var(--green), var(--lime));
            color: #073616;
            font-size: 14px;
            font-weight: 950
        }

        .dots {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 5px;
            margin-top: 9px
        }

        .dot {
            width: 3px;
            height: 3px;
            border-radius: 99px;
            background: rgba(11, 21, 16, .2);
            transition: .22s ease
        }

        .dot.free {
            background: rgba(14, 123, 67, .28)
        }

        .dot.student {
            background: rgba(39, 94, 147, .28)
        }

        .dot.premium {
            background: rgba(201, 106, 58, .30)
        }

        .dot.infinity {
            width: 18px;
            height: 14px;
            display: grid;
            place-items: center;
            background: transparent;
            color: rgba(11, 21, 16, .38);
            font-size: 14px;
            font-weight: 950;
            line-height: 1
        }

        .dot.active {
            width: 24px;
            background: var(--terr)
        }

        .dot.free.active {
            background: var(--deep)
        }

        .dot.student.active {
            background: #275e93
        }

        .dot.premium.active {
            background: var(--terr)
        }

        .dot.infinity.active {
            width: 24px;
            color: var(--ink);
            background: rgba(183, 255, 106, .42)
        }

        .controls {
            display: grid;
            grid-template-columns:52px 1fr 52px;
            gap: 9px;
            margin-top: 10px;
            align-items: center
        }

        .arrow {
            height: 48px;
            border-radius: 17px;
            background: rgba(255, 253, 247, .94);
            font-size: 24px;
            font-weight: 950;
            box-shadow: 0 10px 22px rgba(15, 23, 18, .07)
        }

        .arrow:disabled {
            opacity: .34;
            cursor: not-allowed;
            box-shadow: none
        }

        .hint {
            text-align: center;
            color: var(--muted);
            font-size: 11px;
            font-weight: 850
        }

        /* Dedicated Recipes section: a clean grid. The Today screen keeps the solar orbit unchanged. */
        .libraryHead {
            display: flex;
            justify-content: space-between;
            align-items: flex-start
        }

        .libraryCount {
            padding: 8px 10px;
            border-radius: 99px;
            background: rgba(255, 253, 247, .9);
            color: var(--deep);
            font-size: 10px;
            font-weight: 950
        }

        .search {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 12px;
            padding: 0 13px;
            height: 43px;
            border-radius: 16px;
            background: rgba(255, 253, 247, .92);
            border: 1px solid var(--line)
        }

        .search input {
            width: 100%;
            border: 0;
            outline: 0;
            background: transparent;
            font-weight: 750;
            color: var(--ink)
        }

        .recipeGrid {
            display: grid;
            grid-template-columns:repeat(2, minmax(0, 1fr));
            gap: 12px;
            margin-top: 13px;
            padding-bottom: 8px
        }

        .recipeGridCard {
            position: relative;
            min-width: 0;
            padding: 8px 8px 10px;
            border-radius: 22px;
            background: rgba(255, 253, 247, .94);
            text-align: left;
            box-shadow: 0 12px 28px rgba(15, 23, 18, .09);
            border: 1px solid rgba(255, 255, 255, .92);
            overflow: hidden;
            transition: transform .2s ease, box-shadow .2s ease
        }

        .recipeGridCard:hover {
            transform: translateY(-3px);
            box-shadow: 0 17px 35px rgba(15, 23, 18, .14)
        }

        .recipeGridCard .photo {
            position: relative;
            display: block;
            width: 100%;
            aspect-ratio: 1/1;
            border-radius: 17px;
            overflow: hidden;
            background: #ddd
        }

        .recipeGridCard .photo img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            transition: transform .35s ease
        }

        .recipeGridCard:hover .photo img {
            transform: scale(1.045)
        }

        .recipeGridCard .gridBadge {
            position: absolute;
            z-index: 2;
            top: 14px;
            left: 14px;
            padding: 5px 7px;
            border-radius: 99px;
            background: rgba(255, 253, 247, .92);
            color: var(--deep);
            font-size: 7px;
            font-weight: 950;
            letter-spacing: .09em;
            text-transform: uppercase;
            box-shadow: 0 6px 16px rgba(15, 23, 18, .1)
        }

        .recipeGridCard .gridBadge.premium {
            color: var(--terr);
            background: #fff0dc
        }

        .recipeGridCard .gridBadge.remix {
            color: var(--ink);
            font-size: 10px;
            letter-spacing: 0
        }

        .recipeGridCard b {
            display: -webkit-box;
            margin: 9px 2px 0;
            min-height: 26px;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            font-size: 12px;
            line-height: 1.08;
            letter-spacing: -.025em
        }

        .recipeGridMeta {
            display: flex;
            justify-content: space-between;
            gap: 5px;
            align-items: center;
            margin: 7px 2px 0;
            color: var(--muted);
            font-size: 8px;
            font-weight: 900
        }

        .recipeGridMeta span:last-child {
            padding: 4px 6px;
            border-radius: 99px;
            background: rgba(32, 196, 111, .10);
            color: var(--deep)
        }

        .scanRecipeSummary {
            margin-top: 12px;
            padding: 12px 14px;
            border-radius: 18px;
            background: linear-gradient(145deg, rgba(32, 196, 111, .14), rgba(183, 255, 106, .24));
            border: 1px solid rgba(14, 123, 67, .13);
            color: var(--deep)
        }

        .scanRecipeSummary[hidden] {
            display: none
        }

        .scanRecipeSummary b {
            display: block;
            font-size: 13px
        }

        .scanRecipeSummary span {
            display: block;
            margin-top: 3px;
            color: var(--muted);
            font-size: 9px;
            font-weight: 800;
            line-height: 1.35
        }

        .emptyLibrary {
            display: none;
            grid-column: 1/-1;
            padding: 70px 20px;
            text-align: center;
            color: var(--muted);
            font-weight: 850
        }

        .emptyLibrary.show {
            display: block
        }

        /* Immersive Scan section — exclusive camera-style experience */
        .scanView {
            background: linear-gradient(180deg, rgba(255, 248, 236, .92), rgba(232, 242, 230, .86))
        }

        .scanHeader {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px
        }

        .scanModePill {
            display: flex;
            align-items: center;
            gap: 7px;
            padding: 8px 10px;
            border-radius: 99px;
            background: rgba(14, 123, 67, .1);
            color: var(--deep);
            font-size: 9px;
            font-weight: 950;
            letter-spacing: .1em;
            text-transform: uppercase
        }

        .scanModePill:before {
            content: "";
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--green);
            box-shadow: 0 0 0 6px rgba(32, 196, 111, .12);
            animation: scanLivePulse 1.8s ease-in-out infinite
        }

        @keyframes scanLivePulse {
            50% {
                box-shadow: 0 0 0 10px rgba(32, 196, 111, 0)
            }
        }

        .scanStage {
            position: relative;
            height: 398px;
            margin-top: 13px;
            border-radius: 31px;
            overflow: hidden;
            background: #06100b;
            box-shadow: 0 22px 48px rgba(5, 15, 10, .27), inset 0 0 0 1px rgba(255, 255, 255, .12);
            isolation: isolate
        }

        .scanFeed {
            position: absolute;
            inset: -8px;
            display: grid;
            grid-template-columns:1fr 1fr;
            grid-template-rows:1fr 1fr;
            gap: 3px;
            filter: saturate(.86) brightness(.58) contrast(1.05);
            transform: scale(1.03);
            transition: filter .35s ease, transform .5s ease
        }

        .scanFeed img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            opacity: .92;
            transition: transform .6s ease;
            background: radial-gradient(circle at 35% 30%, #d9efb4, #568c5c 48%, #173b2a)
        }

        .scanFeed img:nth-child(2) {
            background: radial-gradient(circle at 62% 32%, #ffb078, #b94232 46%, #471b16)
        }

        .scanFeed img:nth-child(3) {
            background: radial-gradient(circle at 45% 36%, #fff0bf, #cda35c 48%, #654c2b)
        }

        .scanFeed img:nth-child(4) {
            background: radial-gradient(circle at 58% 38%, #f6d394, #ba7e3c 48%, #573516)
        }

        .scanLivePreview {
            position: absolute;
            z-index: 1;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0;
            pointer-events: none;
            background: #06100b;
            filter: saturate(.96) brightness(.82);
            transition: opacity .24s ease
        }

        .scanLivePreview.active {
            opacity: 1
        }

        .scanStage.cameraLive .scanFeed, .scanStage.cameraLive .scanUploadPreview {
            opacity: 0
        }

        .scanStage.scanning .scanFeed {
            filter: saturate(1.12) brightness(.72) contrast(1.08);
            transform: scale(1.065)
        }

        .scanStage.scanning .scanFeed img:nth-child(odd) {
            transform: scale(1.035)
        }

        .scanUploadPreview {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 1;
            opacity: 0;
            pointer-events: none;
            filter: saturate(.92) brightness(.65);
            transition: opacity .3s ease
        }

        .scanUploadPreview.show {
            opacity: 1
        }

        .scanShade {
            position: absolute;
            z-index: 2;
            inset: 0;
            background: radial-gradient(circle at 50% 47%, transparent 0 23%, rgba(2, 10, 6, .08) 43%, rgba(2, 8, 5, .44) 100%), linear-gradient(180deg, rgba(2, 8, 5, .38), transparent 28%, transparent 68%, rgba(2, 8, 5, .72));
            pointer-events: none
        }

        .scanTopHud {
            position: absolute;
            z-index: 8;
            top: 14px;
            left: 14px;
            right: 14px;
            display: flex;
            justify-content: space-between;
            align-items: center
        }

        .scanLive {
            display: flex;
            align-items: center;
            gap: 7px;
            padding: 7px 9px;
            border-radius: 99px;
            background: rgba(5, 13, 8, .48);
            backdrop-filter: blur(10px);
            color: #fff;
            font-size: 8px;
            font-weight: 950;
            letter-spacing: .12em;
            text-transform: uppercase;
            border: 1px solid rgba(255, 255, 255, .15)
        }

        .scanLive:before {
            content: "";
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #9eff76;
            box-shadow: 0 0 12px #9eff76
        }

        .scanTorch {
            width: 34px;
            height: 34px;
            border-radius: 13px;
            background: rgba(5, 13, 8, .48);
            backdrop-filter: blur(10px);
            color: #fff;
            border: 1px solid rgba(255, 255, 255, .15);
            font-size: 15px;
            display: grid;
            place-items: center
        }

        .scanTorch.active {
            background: #fff6c9;
            color: #5f4700;
            box-shadow: 0 0 30px rgba(255, 235, 120, .48)
        }

        .scanStage.torchOn:after {
            content: "";
            position: absolute;
            z-index: 3;
            inset: 0;
            background: radial-gradient(circle at 50% 45%, rgba(255, 249, 207, .32), transparent 65%);
            pointer-events: none
        }

        .scanGuide {
            position: absolute;
            z-index: 5;
            left: 35px;
            right: 35px;
            top: 67px;
            bottom: 74px;
            border-radius: 28px;
            background: rgba(255, 255, 255, .015);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07)
        }

        .scanCorner {
            position: absolute;
            width: 29px;
            height: 29px;
            border-color: #c1ff79;
            border-style: solid;
            filter: drop-shadow(0 0 7px rgba(183, 255, 106, .5))
        }

        .scanCorner.tl {
            left: 0;
            top: 0;
            border-width: 3px 0 0 3px;
            border-radius: 12px 0 0 0
        }

        .scanCorner.tr {
            right: 0;
            top: 0;
            border-width: 3px 3px 0 0;
            border-radius: 0 12px 0 0
        }

        .scanCorner.bl {
            left: 0;
            bottom: 0;
            border-width: 0 0 3px 3px;
            border-radius: 0 0 0 12px
        }

        .scanCorner.br {
            right: 0;
            bottom: 0;
            border-width: 0 3px 3px 0;
            border-radius: 0 0 12px 0
        }

        .scanCore {
            position: absolute;
            z-index: 7;
            left: 50%;
            top: 48%;
            transform: translate(-50%, -50%);
            width: 88px;
            height: 88px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            background: radial-gradient(circle, rgba(255, 255, 255, .18), rgba(255, 255, 255, .025) 60%, transparent 61%);
            border: 1px solid rgba(255, 255, 255, .34);
            box-shadow: 0 0 0 13px rgba(255, 255, 255, .04), 0 0 45px rgba(183, 255, 106, .14);
            backdrop-filter: blur(4px)
        }

        .scanCore:before, .scanCore:after {
            content: "";
            position: absolute;
            border-radius: 50%;
            border: 1px dashed rgba(193, 255, 121, .55)
        }

        .scanCore:before {
            inset: 9px
        }

        .scanCore:after {
            inset: -9px;
            border-color: rgba(255, 255, 255, .24)
        }

        .scanStage.scanning .scanCore {
            animation: scanCorePulse 1.05s ease-in-out infinite
        }

        .scanStage.scanning .scanCore:before {
            animation: scanSpin 2.2s linear infinite
        }

        .scanStage.scanning .scanCore:after {
            animation: scanSpin 3.2s linear reverse infinite
        }

        @keyframes scanCorePulse {
            50% {
                transform: translate(-50%, -50%) scale(1.08);
                box-shadow: 0 0 0 20px rgba(183, 255, 106, .02), 0 0 60px rgba(183, 255, 106, .25)
            }
        }

        @keyframes scanSpin {
            to {
                transform: rotate(360deg)
            }
        }

        .scanPercent {
            position: relative;
            z-index: 2;
            color: #fff;
            font-size: 13px;
            font-weight: 950;
            letter-spacing: .06em;
            text-shadow: 0 2px 12px rgba(0, 0, 0, .6)
        }

        .scanLaser {
            position: absolute;
            z-index: 6;
            left: 27px;
            right: 27px;
            top: 72px;
            height: 2px;
            opacity: 0;
            background: linear-gradient(90deg, transparent, #c7ff86 17%, #fff 50%, #c7ff86 83%, transparent);
            box-shadow: 0 0 8px #b7ff6a, 0 0 23px rgba(183, 255, 106, .7);
            pointer-events: none
        }

        .scanLaser:after {
            content: "";
            position: absolute;
            left: 8%;
            right: 8%;
            top: -15px;
            height: 31px;
            background: linear-gradient(180deg, transparent, rgba(183, 255, 106, .12), transparent);
            filter: blur(2px)
        }

        .scanStage.scanning .scanLaser {
            opacity: 1;
            animation: scanLaserSweep 2.75s cubic-bezier(.45, 0, .55, 1) infinite
        }

        @keyframes scanLaserSweep {
            0% {
                transform: translateY(0)
            }
            50% {
                transform: translateY(246px)
            }
            100% {
                transform: translateY(0)
            }
        }

        .detectTag {
            position: absolute;
            z-index: 9;
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 7px 9px;
            border-radius: 12px;
            background: rgba(5, 15, 9, .62);
            color: #fff;
            font-size: 9px;
            font-weight: 900;
            backdrop-filter: blur(11px);
            border: 1px solid rgba(255, 255, 255, .13);
            box-shadow: 0 9px 24px rgba(0, 0, 0, .2);
            opacity: 0;
            transform: translateY(7px) scale(.88);
            transition: .35s cubic-bezier(.18, 1.2, .28, 1)
        }

        .detectTag b {
            color: #c9ff8e;
            font-size: 8px
        }

        .detectTag:before {
            content: "";
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #b7ff6a;
            box-shadow: 0 0 10px rgba(183, 255, 106, .9)
        }

        .detectTag.found {
            opacity: 1;
            transform: none
        }

        .detectTag.d0 {
            left: 17px;
            top: 104px
        }

        .detectTag.d1 {
            right: 17px;
            top: 151px
        }

        .detectTag.d2 {
            left: 26px;
            bottom: 111px
        }

        .detectTag.d3 {
            right: 22px;
            bottom: 84px
        }

        .scanBottomHud {
            position: absolute;
            z-index: 8;
            left: 16px;
            right: 16px;
            bottom: 14px;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            color: #fff
        }

        .scanBottomHud b {
            display: block;
            font-size: 12px
        }

        .scanBottomHud span {
            display: block;
            margin-top: 3px;
            color: rgba(255, 255, 255, .66);
            font-size: 9px;
            font-weight: 700
        }

        .scanSignal {
            display: flex;
            align-items: flex-end;
            gap: 3px;
            height: 17px
        }

        .scanSignal i {
            display: block;
            width: 3px;
            border-radius: 99px;
            background: #c8ff8b;
            animation: scanSignal 1s ease-in-out infinite
        }

        .scanSignal i:nth-child(1) {
            height: 6px
        }

        .scanSignal i:nth-child(2) {
            height: 11px;
            animation-delay: .12s
        }

        .scanSignal i:nth-child(3) {
            height: 16px;
            animation-delay: .24s
        }

        .scanSignal i:nth-child(4) {
            height: 9px;
            animation-delay: .36s
        }

        @keyframes scanSignal {
            50% {
                opacity: .3;
                transform: scaleY(.65)
            }
        }

        .scanControlCard {
            margin-top: 12px;
            padding: 13px 14px 14px;
            border-radius: 27px;
            background: rgba(255, 253, 247, .92);
            box-shadow: 0 15px 34px rgba(15, 23, 18, .1);
            border: 1px solid rgba(255, 255, 255, .9)
        }

        .scanControlCopy {
            text-align: center
        }

        .scanControlCopy b {
            display: block;
            font-size: 15px;
            letter-spacing: -.02em
        }

        .scanControlCopy span {
            display: block;
            margin-top: 4px;
            color: var(--muted);
            font-size: 10px;
            font-weight: 750;
            line-height: 1.25
        }

        .scanActionRow {
            display: grid;
            grid-template-columns:1fr 76px 1fr;
            align-items: center;
            margin-top: 11px
        }

        .scanSmallButton {
            height: 48px;
            display: grid;
            place-items: center;
            align-content: center;
            gap: 1px;
            border-radius: 17px;
            background: rgba(14, 123, 67, .07);
            color: var(--deep);
            font-size: 17px;
            font-weight: 950;
            cursor: pointer
        }

        .scanSmallButton span {
            font-size: 8px;
            font-weight: 950;
            text-transform: uppercase;
            letter-spacing: .09em
        }

        .scanFile {
            display: none
        }

        .scanSourceOptions {
            display: none
        }

        .scanShutter {
            position: relative;
            width: 66px;
            height: 66px;
            margin: auto;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 0 0 4px rgba(14, 123, 67, .16), 0 12px 25px rgba(14, 123, 67, .2);
            display: grid;
            place-items: center
        }

        .scanShutter:before {
            content: "";
            position: absolute;
            inset: 5px;
            border-radius: 50%;
            border: 2px solid var(--deep)
        }

        .scanShutter span {
            width: 43px;
            height: 43px;
            border-radius: 50%;
            background: linear-gradient(145deg, var(--deep), var(--green));
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
            transition: .25s ease
        }

        .scanShutter.scanning span {
            border-radius: 14px;
            transform: scale(.65);
            background: var(--terr)
        }

        .scanShutter.done span:after {
            content: "✓";
            display: grid;
            place-items: center;
            height: 100%;
            color: #fff;
            font-size: 21px;
            font-weight: 950
        }

        .scanResult {
            display: none;
            margin-top: 12px;
            padding: 14px;
            border-radius: 27px;
            background: rgba(255, 253, 247, .94);
            box-shadow: 0 17px 38px rgba(15, 23, 18, .12);
            border: 1px solid rgba(255, 255, 255, .9);
            animation: scanResultIn .55s cubic-bezier(.18, 1.08, .28, 1) both
        }

        .scanResult.show {
            display: block
        }

        @keyframes scanResultIn {
            from {
                opacity: 0;
                transform: translateY(16px) scale(.96)
            }
        }

        .scanResultHead {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 10px
        }

        .scanResultHead b {
            font-size: 16px;
            letter-spacing: -.025em
        }

        .scanResultHead span {
            display: block;
            margin-top: 3px;
            color: var(--muted);
            font-size: 10px;
            font-weight: 750
        }

        .scanScore {
            padding: 7px 9px;
            border-radius: 99px;
            background: rgba(32, 196, 111, .12);
            color: var(--deep);
            font-size: 9px;
            font-weight: 950;
            white-space: nowrap
        }

        .scanFoundStrip {
            display: flex;
            gap: 8px;
            margin: 12px 0;
            overflow-x: auto;
            padding: 2px
        }

        .scanFoundStrip::-webkit-scrollbar {
            height: 0
        }

        .scanFound {
            min-width: 64px;
            text-align: center
        }

        .scanFound img {
            width: 54px;
            height: 54px;
            border-radius: 50%;
            object-fit: cover;
            display: block;
            margin: auto;
            box-shadow: 0 8px 17px rgba(15, 23, 18, .14), 0 0 0 4px rgba(32, 196, 111, .1)
        }

        .scanFound b {
            display: block;
            margin-top: 6px;
            font-size: 8px
        }

        .scanFound small {
            display: block;
            color: var(--deep);
            font-size: 7px;
            font-weight: 950;
            margin-top: 2px
        }

        .scanArrival {
            animation: scanArrival .9s cubic-bezier(.18, 1.18, .28, 1)
        }

        @keyframes scanArrival {
            0% {
                opacity: .15;
                transform: scale(.76) rotate(-4deg);
                filter: blur(8px)
            }
            65% {
                opacity: 1;
                transform: scale(1.035) rotate(1deg);
                filter: blur(0)
            }
            100% {
                transform: none
            }
        }

        .tabbar {
            position: absolute;
            z-index: 35;
            left: 9px;
            right: 9px;
            bottom: 9px;
            height: 72px;
            border-bottom-left-radius: 34px;
            border-bottom-right-radius: 34px;
            background: rgba(255, 253, 247, .86);
            display: grid;
            grid-template-columns:repeat(4, 1fr);
            padding: 8px 14px 12px;
            box-shadow: 0 -10px 24px rgba(15, 23, 18, .05);
            backdrop-filter: blur(12px)
        }

        .tab {
            background: transparent;
            color: #8a948d;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 3px;
            font-size: 9px;
            font-weight: 900
        }

        .tab.active {
            color: var(--deep)
        }

        .navGlyph {
            position: relative;
            width: 25px;
            height: 25px;
            display: grid;
            place-items: center;
            font-size: 20px;
            line-height: 1
        }

        .navLabel {
            line-height: 1
        }

        .navHome {
            font-size: 22px;
            font-weight: 950;
            transform: translateY(-1px)
        }

        .navProof {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            /*background: currentColor;*/
            color: #0e7b43;
            font-size: 13px;
            font-weight: 950;
            box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .38)
        }

        .tab.active .navProof {
            background: var(--deep)
        }

        .navPot {
            width: 30px;
            height: 26px
        }

        .navPot .potBasin {
            position: absolute;
            left: 5px;
            right: 7px;
            bottom: 2px;
            height: 12px;
            border: 2px solid currentColor;
            border-top: 0;
            border-radius: 0 0 9px 9px;
            background: transparent;
            transition: background .2s ease, border-color .2s ease
        }

        .navPot .potRim {
            position: absolute;
            left: 3px;
            right: 5px;
            top: 9px;
            height: 0;
            border-top: 2px solid currentColor;
            border-radius: 99px
        }

        .navPot .spoonHandle {
            position: absolute;
            right: 1px;
            top: 2px;
            width: 13px;
            height: 2px;
            border-radius: 99px;
            background: currentColor;
            transform: rotate(32deg);
            transform-origin: right center
        }

        .navPot .spoonBowl {
            position: absolute;
            right: 11px;
            top: 5px;
            width: 7px;
            height: 7px;
            border: 2px solid currentColor;
            border-radius: 50%;
            background: transparent
        }

        .tab.active .navPot .potBasin {
            background: currentColor
        }

        .scan .navGlyph {
            width: 41px;
            height: 41px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            background: var(--deep);
            color: #fff;
            margin-top: -20px;
            font-size: 19px;
            box-shadow: 0 10px 22px rgba(14, 123, 67, .25)
        }

        .scan .navGlyph:before, .scan .navGlyph:after {
            content: "";
            position: absolute;
            width: 11px;
            height: 11px;
            border: 2px solid #fff
        }

        .scan .navGlyph:before {
            left: 9px;
            top: 9px;
            border-right: 0;
            border-bottom: 0;
            border-radius: 4px 0 0 0
        }

        .scan .navGlyph:after {
            right: 9px;
            bottom: 9px;
            border-left: 0;
            border-top: 0;
            border-radius: 0 0 4px 0
        }

        .scan .scanDot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 0 0 3px rgba(255, 255, 255, .18)
        }

        .scanChoiceMenu {
            position: absolute;
            z-index: 72;
            left: 62.5%;
            bottom: 75px;
            width: 154px;
            padding: 7px;
            border: 1px solid rgba(14, 123, 67, .14);
            border-radius: 18px;
            background: rgba(255, 253, 247, .97);
            box-shadow: 0 18px 40px rgba(11, 38, 24, .18), 0 3px 10px rgba(11, 38, 24, .08);
            backdrop-filter: blur(18px);
            transform: translateX(-50%) translateY(8px) scale(.96);
            transform-origin: 50% 100%;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
        }

        .scanChoiceMenu:after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -14px;
            height: 18px;
        }

        .scan:hover + .scanChoiceMenu,
        .scan:focus-visible + .scanChoiceMenu,
        .scanChoiceMenu:hover,
        .scanChoiceMenu.open {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateX(-50%) translateY(0) scale(1);
        }

        .scanChoiceButton {
            width: 100%;
            min-height: 43px;
            border: 0;
            border-radius: 13px;
            background: transparent;
            color: #1c2b22;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 10px;
            text-align: left;
            cursor: pointer;
            transition: background .16s ease, transform .16s ease;
        }

        .scanChoiceButton:hover,
        .scanChoiceButton:focus-visible {
            background: #eef8ef;
            outline: none;
            transform: translateY(-1px);
        }

        .scanChoiceButton + .scanChoiceButton {
            margin-top: 3px
        }

        .scanChoiceIcon {
            width: 30px;
            height: 30px;
            flex: 0 0 30px;
            border-radius: 10px;
            background: #e7f6ea;
            color: var(--deep);
            display: grid;
            place-items: center;
        }

        .scanChoiceButton.live .scanChoiceIcon {
            background: var(--deep);
            color: #fff;
        }

        .scanChoiceIcon svg {
            width: 17px;
            height: 17px;
            display: block;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.9;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .scanChoiceText {
            display: flex;
            flex-direction: column;
            gap: 2px
        }

        .scanChoiceText b {
            font-size: 11px;
            line-height: 1.05
        }

        .scanChoiceText small {
            font-size: 8px;
            color: #77847b;
            font-weight: 800;
            line-height: 1.05
        }

        /* right-side original cooking/proof test area */
        .panel {
            display: grid;
            gap: 16px
        }

        .card {
            border-radius: 28px;
            padding: 17px;
            background: rgba(255, 253, 247, .75);
            box-shadow: 0 18px 54px rgba(15, 23, 18, .09);
            border: 1px solid rgba(255, 255, 255, .85)
        }

        .card h2 {
            margin: 0;
            color: var(--terr);
            font-size: 18px;
            letter-spacing: .14em;
            text-transform: uppercase
        }

        .card p {
            margin: 7px 0 0;
            color: var(--muted);
            line-height: 1.35;
            font-weight: 650
        }

        .cookbox {
            display: none
        }

        .cookbox.show {
            display: block
        }

        .cookimg {
            display: none;
            height: 225px;
            margin: 14px 0 12px;
            border-radius: 26px;
            background: #ddd;
            box-shadow: 0 18px 46px rgba(15, 23, 18, .16);
            position: relative;
            overflow: hidden
        }

        .cookimg.show {
            display: block
        }

        .cookimg img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block
        }

        .cookimg:after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 42%, rgba(11, 21, 16, .55))
        }

        .cookimg span {
            position: absolute;
            left: 16px;
            right: 16px;
            bottom: 14px;
            z-index: 2;
            color: #fff;
            font-size: 20px;
            font-weight: 950;
            text-shadow: 0 8px 24px rgba(0, 0, 0, .3)
        }

        .cookIngredients {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            margin: 10px 0;
            padding: 2px
        }

        .cookIng {
            min-width: 68px;
            text-align: center
        }

        .cookIng img {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            object-fit: cover;
            box-shadow: 0 8px 18px rgba(15, 23, 18, .14), 0 0 0 4px rgba(255, 253, 247, .75)
        }

        .cookIng span {
            display: block;
            margin-top: 6px;
            color: var(--muted);
            font-size: 9px;
            font-weight: 900
        }

        .heat {
            height: 12px;
            border-radius: 99px;
            background: rgba(15, 23, 18, .08);
            overflow: hidden;
            margin: 14px 0 6px
        }

        .heat span {
            display: block;
            height: 100%;
            width: 0;
            background: var(--yellow)
        }

        .heatMeta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            margin: 0 2px 10px;
            color: var(--muted);
            font-size: 10px;
            font-weight: 900
        }

        .heatMeta b {
            color: var(--deep);
            font-size: 12px;
            font-variant-numeric: tabular-nums
        }

        .direction {
            padding: 12px;
            border-radius: 18px;
            background: rgba(255, 253, 247, .84);
            font-weight: 750;
            line-height: 1.35
        }

        .steps {
            display: grid;
            gap: 9px;
            margin-top: 12px
        }

        .step {
            border-radius: 18px;
            background: rgba(255, 253, 247, .85);
            padding: 12px;
            display: grid;
            grid-template-columns:28px 1fr;
            gap: 10px;
            border: 1px solid rgba(15, 23, 18, .08)
        }

        .num {
            width: 28px;
            height: 28px;
            border-radius: 11px;
            background: rgba(32, 196, 111, .12);
            display: grid;
            place-items: center;
            color: var(--deep);
            font-weight: 950
        }

        .step.active {
            border-color: rgba(240, 177, 77, .55);
            box-shadow: 0 0 0 3px rgba(240, 177, 77, .16)
        }

        .step.done {
            background: rgba(32, 196, 111, .13)
        }

        .step.done .num {
            background: linear-gradient(145deg, var(--green), var(--lime));
            color: #073616
        }

        .step.active {
            border-color: rgba(240, 177, 77, .55);
            box-shadow: 0 0 0 3px rgba(240, 177, 77, .16)
        }

        .step b {
            display: block
        }

        .step span:last-child {
            color: var(--muted);
            font-size: 13px;
            line-height: 1.3
        }

        .stepTime {
            display: block;
            margin-top: 5px;
            color: var(--deep);
            font-size: 10px;
            font-weight: 950;
            letter-spacing: .04em
        }

        .heatMeta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            margin: 0 2px 10px;
            color: var(--muted);
            font-size: 10px;
            font-weight: 900
        }

        .heatMeta b {
            color: var(--deep);
            font-size: 12px;
            font-variant-numeric: tabular-nums
        }

        .stepTime {
            display: block;
            margin-top: 5px;
            color: var(--deep);
            font-size: 10px;
            font-weight: 950;
            letter-spacing: .04em
        }

        .sandboxGrid {
            display: grid;
            grid-template-columns:repeat(3, 1fr);
            gap: 10px;
            margin-top: 14px
        }

        .sandboxBtn {
            min-height: 70px;
            border-radius: 20px;
            background: rgba(255, 253, 247, .86);
            box-shadow: inset 0 0 0 1px rgba(15, 23, 18, .08), 0 10px 22px rgba(15, 23, 18, .06);
            padding: 12px;
            text-align: left;
            font-weight: 950
        }

        .sandboxBtn small {
            display: block;
            color: var(--muted);
            margin-top: 5px;
            font-size: 12px;
            line-height: 1.2
        }

        /* modal */
        .overlay {
            position: fixed;
            inset: 0;
            z-index: 900;
            display: none;
            place-items: center;
            padding: 22px;
            background: rgba(6, 10, 7, .38);
            backdrop-filter: blur(14px)
        }

        .overlay.show {
            display: grid
        }

        .balloon {
            width: min(560px, calc(100vw - 34px));
            max-height: calc(100vh - 36px);
            overflow: auto;
            border-radius: 34px;
            background: rgba(255, 253, 247, .99);
            box-shadow: 0 32px 95px rgba(0, 0, 0, .3);
            animation: balloonIn .34s cubic-bezier(.2, .95, .25, 1) both
        }

        .balloon::-webkit-scrollbar {
            width: 0
        }

        @keyframes balloonIn {
            0% {
                opacity: 0;
                transform: translateY(18px) scale(.94)
            }
            62% {
                opacity: 1;
                transform: translateY(-3px) scale(1.015)
            }
            100% {
                opacity: 1;
                transform: none
            }
        }

        .close {
            width: 36px;
            height: 36px;
            border-radius: 14px;
            background: rgba(255, 255, 255, .18);
            color: #fff;
            font-size: 22px;
            font-weight: 900
        }

        .modalTop {
            padding: 16px;
            background: linear-gradient(145deg, var(--deep), var(--green));
            color: #fff
        }

        .modalHead {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            align-items: flex-start
        }

        .modalHead h2 {
            margin: 0;
            font-size: 24px;
            letter-spacing: -.04em
        }

        .modalHead p {
            margin: 4px 0 0;
            color: rgba(255, 255, 255, .82);
            font-size: 12px
        }

        .recipeModalBody {
            padding: 18px
        }

        .modalSolar {
            position: relative;
            height: 290px;
            border-radius: 28px;
            background: radial-gradient(circle at center, rgba(255, 255, 255, .95), transparent 35%), rgba(246, 240, 229, .65);
            overflow: hidden
        }

        .modalSolar .ring {
            inset: 35px
        }

        .modalSolar .ring2 {
            inset: 72px
        }

        .modalDish {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 138px;
            height: 138px;
            border-radius: 50%;
            overflow: hidden;
            box-shadow: 0 20px 44px rgba(15, 23, 18, .22), 0 0 0 10px rgba(255, 255, 255, .7)
        }

        .modalDish img {
            width: 100%;
            height: 100%;
            object-fit: cover
        }

        .modalIngredient {
            position: absolute;
            width: 72px;
            text-align: center
        }

        .modalIngredient img {
            width: 62px;
            height: 62px;
            border-radius: 50%;
            object-fit: cover;
            box-shadow: 0 10px 24px rgba(15, 23, 18, .15), 0 0 0 5px rgba(255, 255, 255, .78)
        }

        .modalIngredient span {
            display: block;
            margin-top: 5px;
            font-size: 9px;
            font-weight: 950
        }

        .mi0 {
            left: 22px;
            top: 95px
        }

        .mi1 {
            right: 25px;
            top: 35px
        }

        .mi2 {
            right: 17px;
            bottom: 70px
        }

        .mi3 {
            left: 42px;
            bottom: 50px
        }

        .mi4 {
            left: 50%;
            top: 8px;
            transform: translateX(-50%)
        }

        .modalMeta {
            display: grid;
            grid-template-columns:repeat(3, 1fr);
            gap: 8px;
            margin: 12px 0
        }

        .metaBox {
            padding: 10px;
            border-radius: 16px;
            background: rgba(246, 240, 229, .62);
            text-align: center
        }

        .metaBox b {
            display: block;
            font-size: 15px
        }

        .metaBox span {
            display: block;
            margin-top: 2px;
            color: var(--muted);
            font-size: 8px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: .08em
        }

        .modalDescription {
            color: var(--muted);
            font-size: 13px;
            line-height: 1.4;
            font-weight: 700
        }

        /* rewards */
        .rewardTop {
            padding: 16px;
            color: #fff;
            background: linear-gradient(145deg, var(--terr), var(--yellow));
            position: relative;
            overflow: hidden
        }

        .rewardTop:after, .proofTop:after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .24), transparent);
            transform: translateX(-120%);
            animation: topSweep 2.4s ease-in-out infinite;
            pointer-events: none
        }

        @keyframes topSweep {
            0%, 45% {
                transform: translateX(-120%)
            }
            100% {
                transform: translateX(120%)
            }
        }

        .popupHead {
            position: relative;
            z-index: 2;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 14px
        }

        .popupHead h2 {
            margin: 0;
            font-size: 22px;
            letter-spacing: -.04em
        }

        .popupHead p {
            margin: 4px 0 0;
            color: rgba(255, 255, 255, .82);
            font-size: 12px;
            line-height: 1.28;
            font-weight: 650
        }

        .rewardBody {
            padding: 16px;
            display: grid;
            gap: 12px
        }

        .rewardHero {
            min-height: 132px;
            border-radius: 24px;
            background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .75), transparent 42%), linear-gradient(135deg, #fff1d7, #f6f0e5 54%, #e8f2e6);
            display: grid;
            place-items: center;
            position: relative;
            overflow: hidden
        }

        .rewardMedal {
            width: 88px;
            height: 88px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            background: linear-gradient(145deg, var(--yellow), var(--terr));
            box-shadow: 0 18px 42px rgba(201, 106, 58, .24);
            animation: medalPop .55s cubic-bezier(.18, 1.35, .28, 1) both
        }

        @keyframes medalPop {
            from {
                opacity: 0;
                transform: scale(.68) rotate(-14deg)
            }
            to {
                opacity: 1;
                transform: none
            }
        }

        .rewardMedal .panicon {
            transform: scale(1.6)
        }

        .rewardList {
            display: grid;
            grid-template-columns:repeat(4, 1fr);
            gap: 9px
        }

        .rewardCard {
            position: relative;
            min-height: 105px;
            border-radius: 22px;
            padding: 10px 8px;
            background: rgba(246, 240, 229, .58);
            box-shadow: inset 0 0 0 1px rgba(15, 23, 18, .06);
            overflow: hidden;
            text-align: left;
            font-weight: 950
        }

        .rewardCard.active {
            background: rgba(32, 196, 111, .13);
            box-shadow: inset 0 0 0 2px rgba(32, 196, 111, .38), 0 16px 36px rgba(32, 196, 111, .13)
        }

        .rewardCard span {
            display: block;
            color: var(--muted);
            font-size: 10px;
            line-height: 1.15;
            margin-top: 5px
        }

        .rewardIcon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            background: #fff;
            box-shadow: 0 10px 20px rgba(15, 23, 18, .08);
            margin-bottom: 9px;
            font-size: 20px
        }

        .rewardCard.animate {
            animation: rewardBounce .8s cubic-bezier(.18, 1.3, .28, 1)
        }

        @keyframes rewardBounce {
            0% {
                transform: scale(.82) rotate(-6deg)
            }
            55% {
                transform: scale(1.08) rotate(4deg)
            }
            100% {
                transform: none
            }
        }

        .sparkBurst {
            position: absolute;
            pointer-events: none;
            width: 8px;
            height: 16px;
            border-radius: 5px;
            top: 0;
            background: var(--green);
            animation: smallFall .9s ease-in forwards
        }

        .sparkBurst:nth-child(2n) {
            background: var(--yellow)
        }

        .sparkBurst:nth-child(3n) {
            background: var(--terr)
        }

        @keyframes smallFall {
            to {
                transform: translateY(140px) rotate(300deg);
                opacity: 0
            }
        }

        /* proof with original animations and liquid navigation */
        .proofTop {
            padding: 15px;
            background: linear-gradient(145deg, var(--deep), var(--green));
            color: #fff;
            position: relative;
            overflow: hidden
        }

        .proofNav {
            position: relative;
            z-index: 2;
            margin-top: 12px;
            padding: 4px;
            border-radius: 22px;
            background: rgba(255, 255, 255, .18);
            display: grid;
            grid-template-columns:repeat(5, 1fr);
            overflow: hidden
        }

        .liquid {
            position: absolute;
            left: 4px;
            top: 4px;
            bottom: 4px;
            width: calc(20% - 8px);
            border-radius: 18px;
            background: rgba(255, 255, 255, .93);
            transition: transform .35s cubic-bezier(.18, .9, .28, 1);
            box-shadow: 0 10px 22px rgba(0, 0, 0, .12)
        }

        .liquid:after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
            animation: shine 2.4s linear infinite
        }

        @keyframes shine {
            from {
                transform: translateX(-100%)
            }
            to {
                transform: translateX(100%)
            }
        }

        .proofTab {
            position: relative;
            z-index: 2;
            height: 40px;
            background: transparent;
            color: rgba(255, 255, 255, .76);
            font-size: 10px;
            font-weight: 900
        }

        .proofTab.active {
            color: var(--deep)
        }

        .proofBody {
            padding: 16px;
            display: grid;
            gap: 12px;
            transition: .22s ease
        }

        .proofBody.animate {
            animation: proofBodyIn .42s ease
        }

        @keyframes proofBodyIn {
            from {
                opacity: 0;
                transform: translateY(8px);
                filter: blur(2px)
            }
        }

        .summary, .statCard, .chip {
            background: rgba(246, 240, 229, .62);
            border-radius: 20px;
            box-shadow: inset 0 0 0 1px rgba(15, 23, 18, .06)
        }

        .summary {
            padding: 15px
        }

        .summary b {
            display: block;
            font-size: 25px;
            line-height: 1;
            letter-spacing: -.05em
        }

        .summary span {
            display: block;
            margin-top: 6px;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.35
        }

        .compare {
            display: grid;
            grid-template-columns:1fr 1fr;
            gap: 12px
        }

        .statCard {
            padding: 14px
        }

        .statCard h4 {
            margin: 0;
            color: var(--muted);
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: .08em
        }

        .big {
            display: block;
            margin-top: 8px;
            font-size: 27px;
            letter-spacing: -.06em;
            font-weight: 950
        }

        .mini {
            display: block;
            margin-top: 4px;
            color: var(--muted);
            font-size: 12px;
            font-weight: 700
        }

        .bar {
            height: 10px;
            border-radius: 99px;
            background: rgba(15, 23, 18, .08);
            overflow: hidden;
            margin-top: 12px
        }

        .bar span {
            display: block;
            height: 100%;
            border-radius: inherit;
            background: var(--green);
            transition: width .82s cubic-bezier(.18, .9, .28, 1)
        }

        .chips {
            display: grid;
            grid-template-columns:repeat(3, 1fr);
            gap: 10px
        }

        .chip {
            padding: 12px
        }

        .chip b {
            display: block;
            font-size: 18px;
            color: var(--terr)
        }

        .chip span {
            display: block;
            margin-top: 4px;
            color: var(--muted);
            font-size: 11px;
            font-weight: 800;
            line-height: 1.2
        }

        .mealDoneStage {
            display: none;
            padding: 22px;
            min-height: 360px;
            place-items: center;
            text-align: center;
            background: radial-gradient(circle at 50% 45%, rgba(32, 196, 111, .18), transparent 42%), linear-gradient(180deg, #fffdf7, #f6f0e5)
        }

        .mealDoneStage.show {
            display: grid
        }

        .donePlate {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            margin: auto;
            background: radial-gradient(circle, #fff 0 42%, var(--yellow) 43% 55%, #fff 57%);
            box-shadow: 0 20px 50px rgba(15, 23, 18, .14), 0 0 0 14px rgba(32, 196, 111, .10);
            animation: donePlatePop .72s cubic-bezier(.18, 1.35, .28, 1) both
        }

        .donePlate:after {
            content: "✓";
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            background: linear-gradient(145deg, var(--green), var(--lime));
            color: #073616;
            font-size: 32px;
            font-weight: 950;
            box-shadow: 0 16px 35px rgba(32, 196, 111, .25)
        }

        @keyframes donePlatePop {
            0% {
                opacity: 0;
                transform: scale(.58) rotate(-24deg)
            }
            60% {
                opacity: 1;
                transform: scale(1.08) rotate(8deg)
            }
            100% {
                transform: none
            }
        }

        .mealDoneStage h3 {
            font-size: 36px;
            line-height: .92;
            letter-spacing: -.07em;
            margin: 18px 0 6px
        }

        .mealDoneStage p {
            margin: 0;
            color: var(--muted);
            font-weight: 650;
            line-height: 1.35
        }

        .proofSpark {
            position: absolute;
            z-index: 6;
            width: 7px;
            height: 14px;
            border-radius: 4px;
            background: rgba(255, 255, 255, .95);
            top: -18px;
            animation: proofSparkFall 1.15s ease-in forwards;
            pointer-events: none
        }

        .proofSpark:nth-child(2n) {
            background: var(--yellow)
        }

        .proofSpark:nth-child(3n) {
            background: var(--lime)
        }

        @keyframes proofSparkFall {
            to {
                transform: translateY(145px) rotate(260deg);
                opacity: 0
            }
        }

        /* finish + push */
        .finish {
            position: fixed;
            inset: 0;
            z-index: 950;
            display: none;
            place-items: center;
            padding: 28px;
            background: radial-gradient(circle at 50% 40%, rgba(32, 196, 111, .22), rgba(6, 10, 7, .68));
            backdrop-filter: blur(16px)
        }

        .finish.show {
            display: grid
        }

        .finishCard {
            width: min(420px, calc(100vw - 40px));
            border-radius: 42px;
            background: linear-gradient(180deg, #fffdf7, #f6f0e5);
            box-shadow: 0 36px 110px rgba(0, 0, 0, .38);
            padding: 26px;
            text-align: center;
            position: relative;
            overflow: hidden
        }

        .finishRing {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            margin: 20px auto 18px;
            background: radial-gradient(circle, rgba(255, 253, 247, .95) 0 48%, transparent 49%), conic-gradient(var(--green), var(--lime), var(--yellow), var(--terr), var(--green));
            animation: finishspin 1.4s ease both;
            display: grid;
            place-items: center
        }

        .finishRing img {
            width: 92px;
            height: 92px;
            border-radius: 50%;
            object-fit: cover;
            box-shadow: 0 18px 45px rgba(15, 23, 18, .22)
        }

        @keyframes finishspin {
            from {
                transform: rotate(-160deg) scale(.66);
                opacity: 0
            }
            to {
                transform: rotate(360deg) scale(1);
                opacity: 1
            }
        }

        .finish h2 {
            font-size: 38px;
            letter-spacing: -.08em;
            line-height: .92;
            margin: 0
        }

        .finish p {
            color: var(--muted);
            line-height: 1.36;
            font-weight: 650
        }

        .finishIngredients {
            margin-top: 18px;
            text-align: left
        }

        .finishIngredients h3 {
            margin: 0 0 8px;
            font-size: 17px;
            letter-spacing: -.02em
        }

        .finishIngredients p {
            margin: 0 0 10px;
            font-size: 13px
        }

        .finishIngredientList {
            display: grid;
            gap: 8px;
            max-height: min(280px, 34vh);
            overflow-y: auto;
            padding-right: 3px
        }

        .finishIngredient {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 10px 12px;
            border-radius: 16px;
            background: rgba(255, 253, 247, .78)
        }

        .finishIngredient b,
        .finishIngredient small {
            display: block
        }

        .finishIngredient small {
            margin-top: 2px;
            color: var(--muted)
        }

        .finishIngredient select {
            flex: 0 0 auto;
            max-width: 122px;
            border: 1px solid rgba(10, 28, 18, .14);
            border-radius: 10px;
            background: #fffdf7;
            color: var(--ink);
            font: inherit;
            font-size: 13px;
            font-weight: 750;
            padding: 8px
        }

        .finishIngredient .finishIngredientMissing {
            color: var(--muted);
            font-size: 12px;
            font-weight: 700;
            text-align: right
        }

        .conf {
            position: absolute;
            top: -30px;
            width: 8px;
            height: 18px;
            border-radius: 4px;
            background: var(--green);
            animation: fall 1.7s ease-in forwards
        }

        .conf:nth-child(2n) {
            background: var(--terr)
        }

        .conf:nth-child(3n) {
            background: var(--yellow)
        }

        @keyframes fall {
            to {
                transform: translateY(520px) rotate(420deg);
                opacity: 0
            }
        }

        .pushstack {
            position: fixed;
            top: 18px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1100;
            width: min(430px, calc(100vw - 30px));
            display: grid;
            gap: 10px;
            pointer-events: none
        }

        .push {
            min-height: 70px;
            border-radius: 24px;
            background: rgba(255, 253, 247, .97);
            box-shadow: 0 22px 60px rgba(15, 23, 18, .22);
            display: grid;
            grid-template-columns:44px 1fr auto;
            gap: 11px;
            align-items: center;
            padding: 12px 14px;
            animation: pushin .25s ease both
        }

        .pushIcon {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: rgba(201, 106, 58, .12);
            display: grid;
            place-items: center;
            font-weight: 950;
            color: var(--terr)
        }

        .push b {
            display: block;
            font-size: 14px
        }

        .push span {
            display: block;
            color: var(--muted);
            font-size: 12px;
            line-height: 1.25
        }

        .push time {
            color: #9aa59e;
            font-size: 11px;
            font-weight: 900
        }

        @keyframes pushin {
            from {
                opacity: 0;
                transform: translateY(-18px) scale(.96)
            }
        }

        .push.hide {
            animation: pushout .22s ease forwards
        }

        @keyframes pushout {
            to {
                opacity: 0;
                transform: translateY(-12px) scale(.96)
            }
        }

        .imgFallback {
            background: radial-gradient(circle at 35% 30%, #fff, transparent 18%), linear-gradient(135deg, #d8ead9, #ffe0b8) !important
        }

        .loadingImage {
            background: linear-gradient(110deg, #e9e3d7 24%, #fffaf1 38%, #e9e3d7 52%);
            background-size: 220% 100%;
            animation: imageShimmer 1.15s linear infinite
        }

        .photoReady {
            animation: imageReveal .28s ease both
        }

        @keyframes imageShimmer {
            to {
                background-position-x: -220%
            }
        }

        @keyframes imageReveal {
            from {
                opacity: .2;
                transform: scale(1.035)
            }
            to {
                opacity: 1;
                transform: none
            }
        }

        @media (max-width: 900px) {
            .layout {
                grid-template-columns:1fr
            }

            .phone {
                position: relative;
                top: 0;
                margin: auto
            }

            .panel {
                max-width: 650px;
                margin: auto
            }

            .hero {
                max-width: 650px;
                margin: 0 auto 16px
            }

            .sandboxGrid {
                grid-template-columns:1fr 1fr
            }
        }

        @media (max-width: 480px) {
            .page {
                padding: 0
            }

            .hero, .panel {
                display: none
            }

            .phone {
                width: 100vw;
                max-width: none;
                height: 100dvh;
                border-radius: 0;
                padding: 0
            }

            .screen {
                border-radius: 0
            }

            .tabbar {
                left: 0;
                right: 0;
                bottom: 0;
                border-radius: 0
            }

            .island {
                top: 9px
            }

            .status {
                height: 45px
            }

            .phoneView {
                padding-top: 51px
            }

            .rewardList {
                grid-template-columns:1fr 1fr
            }

            .compare {
                grid-template-columns:1fr
            }

            .proofTab {
                font-size: 9px
            }

            .balloon {
                max-height: calc(100dvh - 18px)
            }
        }

        /* Production surface only. Development sandboxes remain available in source, never in the app UI. */
        .panel, .animationGallery {
            display: none !important
        }

        .layout {
            grid-template-columns:1fr
        }

        .phone {
            margin-inline: auto
        }

        body.mobile-mode {
            overflow: hidden;
            background: #f6f0e5
        }

        body.mobile-mode .page {
            width: 100vw;
            max-width: none;
            height: 100dvh;
            padding: 0
        }

        body.mobile-mode .hero {
            display: none !important
        }

        body.mobile-mode .layout {
            display: block;
            width: 100%;
            height: 100%
        }

        body.mobile-mode .phone {
            position: relative;
            top: 0;
            width: 100vw;
            max-width: none;
            height: 100dvh;
            margin: 0;
            padding: 0;
            border-radius: 0;
            box-shadow: none;
        }

        body.mobile-mode .screen {
            border-radius: 0
        }

        body.mobile-mode .tabbar {
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 0
        }

        @media screen and (min-width: 480px) {
            body.mobile-mode .tabbar{
                position: absolute !important;
            }
        }
        /* Integrated Scan animation — hidden until the existing Scan tab is pressed. */
        .scanFlowOverlay {
            position: fixed;
            inset: 0;
            z-index: 10000;
            background: #061009;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity .34s ease, visibility .34s ease
        }

        .scanFlowOverlay.show {
            opacity: 1;
            visibility: visible;
            pointer-events: auto
        }

        .scanFlowFrame {
            display: block;
            width: 100%;
            height: 100%;
            border: 0;
            background: #061009
        }

        .scanFlowClose {
            position: absolute;
            right: 18px;
            top: 18px;
            z-index: 3;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            background: rgba(6, 16, 9, .72);
            border: 1px solid rgba(255, 255, 255, .14);
            color: #f8fff5;
            font-size: 24px;
            line-height: 1;
            backdrop-filter: blur(14px);
            box-shadow: 0 12px 28px rgba(0, 0, 0, .24)
        }

        .scanFlowClose:hover {
            background: rgba(21, 35, 25, .9)
        }

        .scanFlowInline {
            position: absolute;
            inset: 0;
            z-index: 130;
            background: #061009;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity .34s ease, visibility .34s ease;
            border-radius: inherit;
            overflow: hidden
        }

        .scanFlowInline.show {
            opacity: 1;
            visibility: visible;
            pointer-events: auto
        }

        .scanFlowInlineFrame {
            display: block;
            width: 100%;
            height: 100%;
            border: 0;
            background: #061009
        }

        .scanFlowInlineClose {
            position: absolute;
            right: 14px;
            top: 14px;
            z-index: 3;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            background: rgba(6, 16, 9, .72);
            border: 1px solid rgba(255, 255, 255, .14);
            color: #f8fff5;
            font-size: 23px;
            line-height: 1;
            backdrop-filter: blur(14px);
            box-shadow: 0 12px 28px rgba(0, 0, 0, .24)
        }

        .scanFlowInlineClose:hover {
            background: rgba(21, 35, 25, .9)
        }

        /* Scan launch: the existing app UI clears upward, then Stage 02 is revealed. */
        .screen > .phoneView.active, .screen > .tabbar, .screen > .status, .screen > .island {
            transition: transform .58s cubic-bezier(.22, .76, .22, 1), opacity .42s ease, filter .42s ease;
            will-change: transform, opacity, filter;
        }

        .screen.scan-launching > .phoneView.active,
        .screen.scan-launching > .tabbar,
        .screen.scan-launching > .status,
        .screen.scan-launching > .island {
            transform: translate3d(0, -112%, 0) !important;
            opacity: 0 !important;
            filter: blur(2px);
            pointer-events: none !important;
        }

        .scanFlowInline {
            background: #f6f0e5;
            transform: translate3d(0, 5%, 0);
            transition: opacity .30s ease, visibility .30s ease, transform .52s cubic-bezier(.22, .76, .22, 1)
        }

        .scanFlowInline.show {
            transform: translate3d(0, 0, 0)
        }

        .scanFlowInlineFrame {
            background: #f6f0e5
        }


        /* Lightweight final-three background comparison. Production scan flow is unchanged. */
        .finalThreeCompare {
            margin-top: 16px
        }

        .finalThreeCompare > p {
            margin-bottom: 14px
        }

        .finalCompareGroup {
            display: grid;
            gap: 9px;
            margin-top: 15px
        }

        .finalCompareGroupTitle {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            align-items: center;
            color: var(--muted);
            font-size: 10px;
            font-weight: 950;
            text-transform: uppercase;
            letter-spacing: .09em
        }

        .finalCompareGroupTitle span:last-child {
            font-size: 8px;
            opacity: .72;
            letter-spacing: .05em
        }

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

        .finalCompareItem {
            overflow: hidden;
            border-radius: 21px;
            border: 1px solid rgba(15, 23, 18, .09);
            box-shadow: 0 12px 28px rgba(15, 23, 18, .08);
            background: rgba(255, 253, 247, .9)
        }

        .finalCompareItem.dark {
            border-color: rgba(255, 255, 255, .08);
            background: #071009
        }

        .finalMini {
            position: relative;
            height: 238px;
            overflow: hidden;
            isolation: isolate
        }

        .finalMini:before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(14, 123, 67, .06) 1px, transparent 1px), linear-gradient(rgba(14, 123, 67, .06) 1px, transparent 1px);
            background-size: 22px 22px;
            pointer-events: none
        }

        .finalMini.dark {
            background: radial-gradient(circle at 50% 30%, rgba(101, 255, 154, .08), transparent 38%), #071009;
            color: #f5fff7
        }

        .finalMini.light {
            background: radial-gradient(circle at 10% 0%, rgba(32, 196, 111, .18), transparent 30%), radial-gradient(circle at 95% 10%, rgba(201, 106, 58, .14), transparent 32%), linear-gradient(180deg, #fff8ec, #f6f0e5 58%, #e8f2e6);
            color: var(--ink)
        }

        .finalMini.light:before {
            opacity: .9
        }

        .finalMiniStage {
            position: absolute;
            left: 12px;
            top: 12px;
            z-index: 4;
            padding: 6px 8px;
            border-radius: 999px;
            font-size: 8px;
            font-weight: 950;
            letter-spacing: .09em;
            text-transform: uppercase;
            background: rgba(255, 255, 255, .12);
            border: 1px solid rgba(255, 255, 255, .15)
        }

        .finalMini.light .finalMiniStage {
            background: rgba(255, 253, 247, .82);
            border-color: rgba(15, 23, 18, .08);
            color: var(--deep)
        }

        .finalCompareCaption {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 6px;
            padding: 9px 10px;
            background: rgba(255, 253, 247, .95);
            font-size: 10px;
            font-weight: 950;
            color: var(--ink)
        }

        .finalCompareItem.dark .finalCompareCaption {
            background: #0c1510;
            color: #eef8f0
        }

        .finalCompareCaption small {
            font-size: 8px;
            color: var(--muted);
            letter-spacing: .08em;
            text-transform: uppercase
        }

        /* 05 analyse */
        .miniCookGlow {
            position: absolute;
            left: 50%;
            bottom: 15px;
            width: 170px;
            height: 80px;
            transform: translateX(-50%);
            border-radius: 50%;
            background: radial-gradient(ellipse, rgba(240, 177, 77, .22), transparent 66%);
            filter: blur(7px)
        }

        .miniFire {
            position: absolute;
            left: 50%;
            bottom: 28px;
            display: flex;
            align-items: flex-end;
            gap: 2px;
            transform: translateX(-50%)
        }

        .miniFire i {
            display: block;
            width: 16px;
            height: 28px;
            border-radius: 50% 50% 45% 45%/65% 65% 35% 35%;
            background: linear-gradient(#fff7b1, #ffd154 32%, #ff9339 62%, #ff5a2e);
            filter: drop-shadow(0 0 8px rgba(255, 147, 57, .42));
            animation: miniFlame 1.05s ease-in-out infinite
        }

        .miniFire i:nth-child(2) {
            height: 36px;
            animation-delay: -.35s
        }

        .miniFire i:nth-child(3) {
            animation-delay: -.68s
        }

        @keyframes miniFlame {
            50% {
                transform: scaleY(.78) translateY(3px)
            }
        }

        .miniPan {
            position: absolute;
            left: 50%;
            bottom: 48px;
            width: 150px;
            height: 54px;
            transform: translateX(-50%);
            animation: miniPanSnap 2.5s ease-in-out infinite
        }

        .miniPan:before {
            content: "";
            position: absolute;
            left: 0;
            top: 7px;
            width: 112px;
            height: 40px;
            border-radius: 50% 50% 42% 42%/35% 35% 65% 65%;
            background: linear-gradient(180deg, #4c5853, #18201c 52%, #080d0a);
            border: 1px solid rgba(255, 255, 255, .18);
            box-shadow: inset 0 8px 15px rgba(0, 0, 0, .22), 0 12px 22px rgba(0, 0, 0, .24)
        }

        .miniPan:after {
            content: "";
            position: absolute;
            left: 106px;
            top: 17px;
            width: 50px;
            height: 10px;
            border-radius: 99px;
            background: linear-gradient(#626c67, #252e2a);
            transform: rotate(3deg)
        }

        @keyframes miniPanSnap {
            0%, 18%, 100% {
                transform: translateX(-50%) rotate(0)
            }
            28% {
                transform: translateX(-50%) rotate(-8deg)
            }
            38% {
                transform: translateX(-50%) rotate(10deg)
            }
            54% {
                transform: translateX(-50%) rotate(0)
            }
        }

        .miniOmelette {
            position: absolute;
            left: 50%;
            bottom: 76px;
            width: 96px;
            height: 47px;
            border-radius: 50%;
            transform: translateX(-50%);
            background: linear-gradient(#fff1a7, #ffd95a 52%, #ba7418);
            box-shadow: 0 8px 18px rgba(0, 0, 0, .22);
            animation: miniToss 2.5s cubic-bezier(.24, .72, .25, 1) infinite;
            z-index: 5
        }

        .miniOmelette:before {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 30% 45%, #ef5e52 0 5px, transparent 6px), radial-gradient(circle at 62% 28%, #65c747 0 4px, transparent 5px), radial-gradient(circle at 75% 58%, #ef5e52 0 5px, transparent 6px), radial-gradient(circle at 50% 72%, #65c747 0 4px, transparent 5px)
        }

        @keyframes miniToss {
            0%, 18%, 100% {
                transform: translateX(-50%) translateY(0) rotateX(0)
            }
            48% {
                transform: translateX(-50%) translateY(-92px) rotateX(180deg) scale(.95)
            }
            78% {
                transform: translateX(-50%) translateY(0) rotateX(360deg)
            }
        }

        .miniSlices {
            position: absolute;
            left: 50%;
            top: 42px;
            width: 150px;
            height: 70px;
            transform: translateX(-50%);
            z-index: 6
        }

        .miniSlices i {
            position: absolute;
            left: 66px;
            top: 28px;
            width: 13px;
            height: 23px;
            border-radius: 7px;
            animation: miniSliceOrbit 4.6s linear infinite
        }

        .miniSlices i:nth-child(1) {
            background: #ff746b
        }

        .miniSlices i:nth-child(2) {
            background: #7ce84d;
            animation-delay: -1.53s
        }

        .miniSlices i:nth-child(3) {
            background: #ffd95e;
            animation-delay: -3.06s
        }

        @keyframes miniSliceOrbit {
            0% {
                transform: translate(-55px, 8px) scale(.8)
            }
            25% {
                transform: translate(0, -15px) scale(1.1)
            }
            50% {
                transform: translate(55px, 8px) scale(.8)
            }
            75% {
                transform: translate(0, 25px) scale(1.18)
            }
            100% {
                transform: translate(-55px, 8px) scale(.8)
            }
        }

        .miniCookCopy {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 10px;
            text-align: center;
            font-size: 8px;
            letter-spacing: .22em;
            text-transform: uppercase;
            font-weight: 900;
            opacity: .72;
            color: #ff5a2e
        }

        /* 06 review */
        .miniDeck {
            position: absolute;
            inset: 0;
            display: grid;
            place-items: center;
            perspective: 900px
        }

        .miniDeck:before, .miniDeck:after {
            content: "";
            position: absolute;
            width: 76%;
            height: 76px;
            border-radius: 18px;
            background: linear-gradient(135deg, #17251c, #0b130e);
            border: 1px solid rgba(255, 255, 255, .10);
            box-shadow: 0 16px 30px rgba(0, 0, 0, .22)
        }

        .miniDeck:before {
            transform: translateY(13px) scale(.93);
            opacity: .62
        }

        .miniDeck:after {
            transform: translateY(26px) scale(.86);
            opacity: .4
        }

        .finalMini.light .miniDeck:before, .finalMini.light .miniDeck:after {
            background: rgba(255, 253, 247, .86);
            border-color: rgba(15, 23, 18, .10);
            box-shadow: 0 14px 26px rgba(15, 23, 18, .10)
        }

        .miniReviewCard {
            position: absolute;
            width: 80%;
            height: 82px;
            border-radius: 19px;
            padding: 12px;
            display: flex;
            align-items: center;
            gap: 11px;
            background: linear-gradient(135deg, #17251c, #0b130e);
            border: 1px solid rgba(255, 255, 255, .12);
            box-shadow: 0 17px 34px rgba(0, 0, 0, .30);
            transform-origin: center;
            will-change: transform
        }

        .finalMini.light .miniReviewCard {
            background: rgba(255, 253, 247, .94);
            border-color: rgba(15, 23, 18, .10);
            box-shadow: 0 15px 30px rgba(15, 23, 18, .12)
        }

        .miniReviewCard span {
            width: 44px;
            height: 44px;
            border-radius: 14px;
            display: grid;
            place-items: center;
            background: rgba(255, 255, 255, .08);
            font-size: 23px
        }

        .finalMini.light .miniReviewCard span {
            background: rgba(32, 196, 111, .10)
        }

        .miniReviewCard b {
            display: block;
            font-size: 12px
        }

        .miniReviewCard small {
            display: block;
            margin-top: 4px;
            font-size: 9px;
            color: #91a097
        }

        .finalMini.light .miniReviewCard small {
            color: var(--muted)
        }

        .miniReviewCard.c1 {
            animation: miniDeckOne 5.2s cubic-bezier(.22, .74, .2, 1) infinite
        }

        .miniReviewCard.c2 {
            animation: miniDeckTwo 5.2s cubic-bezier(.22, .74, .2, 1) infinite
        }

        .miniReviewCard.c3 {
            animation: miniDeckThree 5.2s cubic-bezier(.22, .74, .2, 1) infinite
        }

        @keyframes miniDeckOne {
            0%, 15% {
                transform: translate3d(0, 0, 65px) scale(1)
            }
            26% {
                transform: translate3d(0, 62px, 76px) scale(.98)
            }
            39%, 78% {
                transform: translate3d(0, 20px, -28px) scale(.87)
            }
            100% {
                transform: translate3d(0, -72px, 0) scale(.72)
            }
        }

        @keyframes miniDeckTwo {
            0%, 25% {
                transform: translate3d(0, 10px, -18px) scale(.93)
            }
            39%, 52% {
                transform: translate3d(0, 0, 65px) scale(1)
            }
            63% {
                transform: translate3d(0, 62px, 76px) scale(.98)
            }
            76% {
                transform: translate3d(0, 20px, -28px) scale(.87)
            }
            100% {
                transform: translate3d(0, 0, 0) scale(.72)
            }
        }

        @keyframes miniDeckThree {
            0%, 51% {
                transform: translate3d(0, 20px, -28px) scale(.87)
            }
            63%, 77% {
                transform: translate3d(0, 0, 65px) scale(1)
            }
            88% {
                transform: translate3d(0, 62px, 76px) scale(.98)
            }
            100% {
                transform: translate3d(0, 72px, 0) scale(.72)
            }
        }

        /* 07 reveal */
        .miniPortal {
            position: absolute;
            left: 50%;
            top: 48%;
            width: 125%;
            height: 78%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            background: radial-gradient(circle, rgba(32, 196, 111, .24), rgba(84, 244, 255, .12) 32%, transparent 67%);
            filter: blur(15px);
            animation: miniPortalBreathe 3.7s ease-in-out infinite
        }

        @keyframes miniPortalBreathe {
            50% {
                transform: translate(-50%, -50%) scale(1.12);
                opacity: .74
            }
        }

        .miniSphere {
            position: absolute;
            left: 50%;
            top: 49%;
            width: 126px;
            height: 126px;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .56), rgba(255, 255, 255, .08) 17%, rgba(84, 244, 255, .20) 42%, rgba(32, 196, 111, .11) 62%, rgba(8, 20, 14, .17));
            border: 1px solid rgba(255, 255, 255, .35);
            box-shadow: inset 0 0 22px rgba(255, 255, 255, .10), 0 0 35px rgba(84, 244, 255, .17), 0 0 28px rgba(32, 196, 111, .16);
            animation: miniSpherePulse 3.7s ease-in-out infinite
        }

        @keyframes miniSpherePulse {
            50% {
                transform: translate(-50%, -50%) scale(1.08);
                box-shadow: inset 0 0 27px rgba(255, 255, 255, .13), 0 0 48px rgba(84, 244, 255, .23), 0 0 36px rgba(32, 196, 111, .22)
            }
        }

        .miniSphereText {
            position: absolute;
            left: 50%;
            top: 49%;
            transform: translate(-50%, -50%);
            z-index: 5;
            text-align: center;
            font-size: 9px;
            line-height: 1.4;
            letter-spacing: .17em;
            text-transform: uppercase;
            color: #fff;
            text-shadow: 0 2px 8px rgba(0, 0, 0, .35)
        }

        .miniFoodBall {
            position: absolute;
            z-index: 6;
            width: 46px;
            height: 46px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            font-size: 22px;
            background: radial-gradient(circle at 30% 25%, #fff 0 4%, #223428 5% 58%, #071009 60%);
            border: 1px solid rgba(255, 255, 255, .17);
            box-shadow: 0 10px 22px rgba(0, 0, 0, .25)
        }

        .miniFoodBall.f1 {
            left: 14%;
            top: 24%;
            animation: miniBallA 3.2s ease-in-out infinite
        }

        .miniFoodBall.f2 {
            right: 14%;
            top: 31%;
            animation: miniBallB 3.2s ease-in-out infinite -.7s
        }

        .miniFoodBall.f3 {
            left: 50%;
            bottom: 15%;
            animation: miniBallC 3.2s ease-in-out infinite -1.4s
        }

        @keyframes miniBallA {
            0%, 14% {
                opacity: 0;
                transform: scale(.52)
            }
            22%, 82% {
                opacity: 1;
                transform: translate(0, 0) scale(1)
            }
            50% {
                transform: translate(44px, 38px) scale(.72);
                opacity: .62
            }
        }

        @keyframes miniBallB {
            0%, 14% {
                opacity: 0;
                transform: scale(.52)
            }
            22%, 82% {
                opacity: 1;
                transform: translate(0, 0) scale(1)
            }
            50% {
                transform: translate(-42px, 25px) scale(.72);
                opacity: .62
            }
        }

        @keyframes miniBallC {
            0%, 14% {
                opacity: 0;
                transform: translate(-50%, 0) scale(.52)
            }
            22%, 82% {
                opacity: 1;
                transform: translate(-50%, 0) scale(1)
            }
            50% {
                transform: translate(-50%, -38px) scale(.72);
                opacity: .62
            }
        }

        .miniRevealCopy {
            position: absolute;
            left: 8%;
            right: 8%;
            bottom: 8px;
            text-align: center;
            font-size: 7px;
            letter-spacing: .14em;
            text-transform: uppercase;
            font-weight: 900;
            opacity: .7
        }

        .miniCaptureScene {
            position: absolute;
            inset: 0
        }

        .miniCaptureScene:before {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 50% 44%, rgba(255, 255, 255, .24), transparent 38%), radial-gradient(circle at 18% 20%, rgba(32, 196, 111, .10), transparent 28%), radial-gradient(circle at 82% 72%, rgba(201, 106, 58, .11), transparent 30%)
        }

        .miniCaptureGrid {
            position: absolute;
            inset: 0;
            background-image: linear-gradient(rgba(14, 123, 67, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 123, 67, .08) 1px, transparent 1px);
            background-size: 28px 28px;
            opacity: .4
        }

        .finalMini.dark .miniCaptureGrid, .finalMini.captureDark .miniCaptureGrid {
            background-image: linear-gradient(rgba(183, 255, 106, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(183, 255, 106, .07) 1px, transparent 1px)
        }

        .miniCaptureObject {
            position: absolute;
            z-index: 2;
            display: grid;
            place-items: center;
            filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .18))
        }

        .miniCaptureObject:after {
            content: "";
            position: absolute;
            inset: -8px;
            border-radius: 22px;
            border: 2px solid rgba(183, 255, 106, .72);
            box-shadow: 0 0 18px rgba(183, 255, 106, .35)
        }

        .miniCaptureObject.tomato {
            left: 13%;
            top: 36%;
            width: 72px;
            height: 72px;
            border-radius: 50%;
            background: radial-gradient(circle at 35% 28%, #ff9e96, #f5534a 48%, #b52925 100%)
        }

        .miniCaptureObject.tomato:before {
            content: "";
            position: absolute;
            left: 50%;
            top: 3px;
            transform: translateX(-50%);
            width: 44px;
            height: 30px;
            background: #53c256;
            clip-path: polygon(50% 0, 62% 27%, 89% 15%, 75% 42%, 100% 50%, 71% 56%, 78% 85%, 52% 66%, 36% 96%, 36% 64%, 12% 84%, 21% 55%, 0 49%, 27% 42%, 14% 15%, 41% 27%)
        }

        .miniCaptureObject.leaf {
            right: 13%;
            top: 29%;
            width: 64px;
            height: 90px;
            background: linear-gradient(180deg, #8ef675, #4fb74c);
            border-radius: 66% 34% 64% 36% / 54% 64% 36% 46%;
            transform: rotate(14deg)
        }

        .miniCaptureObject.leaf:before {
            content: "";
            position: absolute;
            left: 31px;
            top: 11px;
            width: 3px;
            height: 66px;
            background: rgba(255, 255, 255, .72);
            transform: rotate(9deg);
            border-radius: 99px;
            box-shadow: -14px 14px 0 -1px rgba(255, 255, 255, .38), -7px 28px 0 -1px rgba(255, 255, 255, .34), 10px 16px 0 -1px rgba(255, 255, 255, .38), 4px 32px 0 -1px rgba(255, 255, 255, .34)
        }

        .miniCaptureObject.prawn {
            left: 50%;
            bottom: 18%;
            transform: translateX(-50%);
            width: 120px;
            height: 60px;
            border-radius: 999px;
            background: linear-gradient(180deg, #ffd75b, #f3b13e 62%, #d4841d);
            box-shadow: inset 0 10px 0 rgba(255, 255, 255, .22)
        }

        .miniCaptureObject.prawn:before {
            content: "";
            position: absolute;
            left: 10px;
            top: 17px;
            width: 18px;
            height: 28px;
            border-radius: 18px 14px 18px 18px;
            background: #ff8f3c;
            box-shadow: 76px 4px 0 #ff8f3c, 39px -11px 0 -3px #74cb55, 40px 18px 0 -3px #74cb55
        }

        .miniCaptureObject.prawn:after {
            content: "";
            position: absolute;
            inset: -8px;
            border-radius: 28px;
            border: 2px solid rgba(183, 255, 106, .72);
            box-shadow: 0 0 18px rgba(183, 255, 106, .35)
        }

        .miniCaptureBubble {
            position: absolute;
            z-index: 7;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            font-size: 20px;
            background: radial-gradient(circle at 30% 25%, #fff 0 4%, #223428 5% 58%, #071009 60%);
            border: 1px solid rgba(255, 255, 255, .17);
            box-shadow: 0 10px 22px rgba(0, 0, 0, .25)
        }

        .miniCaptureBubble:before {
            content: "";
            position: absolute;
            left: 10px;
            top: 9px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .95)
        }

        .miniCaptureBubble.b1 {
            left: 14%;
            top: 16%;
            animation: miniBubblePop1 3.2s ease-in-out infinite
        }

        .miniCaptureBubble.b2 {
            right: 14%;
            top: 13%;
            animation: miniBubblePop2 3.2s ease-in-out infinite .35s
        }

        .miniCaptureBubble.b3 {
            left: 50%;
            top: 49%;
            transform: translateX(-50%);
            animation: miniBubblePop3 3.2s ease-in-out infinite .7s
        }

        @keyframes miniBubblePop1 {
            0%, 12% {
                opacity: 0;
                transform: translateY(10px) scale(.55)
            }
            20%, 78% {
                opacity: 1;
                transform: translateY(0) scale(1)
            }
            50% {
                transform: translateY(-5px) scale(1.04)
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1)
            }
        }

        @keyframes miniBubblePop2 {
            0%, 12% {
                opacity: 0;
                transform: translateY(10px) scale(.55)
            }
            20%, 78% {
                opacity: 1;
                transform: translateY(0) scale(1)
            }
            50% {
                transform: translateY(-5px) scale(1.04)
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1)
            }
        }

        @keyframes miniBubblePop3 {
            0%, 12% {
                opacity: 0;
                transform: translateX(-50%) translateY(10px) scale(.55)
            }
            20%, 78% {
                opacity: 1;
                transform: translateX(-50%) translateY(0) scale(1)
            }
            50% {
                transform: translateX(-50%) translateY(-5px) scale(1.04)
            }
            100% {
                opacity: 1;
                transform: translateX(-50%) translateY(0) scale(1)
            }
        }

        .finalMini.captureLight {
            background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .94), transparent 35%), radial-gradient(circle at 20% 25%, rgba(32, 196, 111, .12), transparent 27%), radial-gradient(circle at 82% 72%, rgba(201, 106, 58, .14), transparent 29%), rgba(255, 253, 247, .58)
        }

        .finalMini.captureDark {
            background: radial-gradient(circle at 50% 42%, rgba(183, 255, 106, .09), transparent 26%), radial-gradient(circle at 20% 25%, rgba(32, 196, 111, .07), transparent 22%), #071009
        }

        @media (max-width: 1050px) {
            .finalCompareGrid {
                grid-template-columns:1fr
            }

            .finalMini {
                height: 280px
            }
        }

        @media (max-width: 900px) {
            .finalCompareGrid {
                grid-template-columns:repeat(2, minmax(0, 1fr))
            }

            .finalMini {
                height: 230px
            }
        }

        @media (max-width: 650px) {
            .finalCompareGrid {
                grid-template-columns:1fr
            }

            .finalMini {
                height: 300px
            }
        }

        /* Scan.io surface correction: bubbles and review cards use the app UI palette everywhere. */
        :root {
            --scanio-ui-surface: linear-gradient(180deg, #fff8ec 0%, #f6f0e5 58%, #e8f2e6 100%);
            --scanio-ui-card: linear-gradient(145deg, rgba(255, 253, 247, .98), rgba(232, 242, 230, .96));
        }

        .miniDeck:before, .miniDeck:after,
        .finalMini.light .miniDeck:before, .finalMini.light .miniDeck:after,
        .finalMini.dark .miniDeck:before, .finalMini.dark .miniDeck:after {
            background: var(--scanio-ui-card) !important;
            border-color: rgba(14, 123, 67, .16) !important;
            box-shadow: 0 14px 28px rgba(15, 23, 18, .12) !important;
        }

        .miniReviewCard,
        .finalMini.light .miniReviewCard,
        .finalMini.dark .miniReviewCard {
            background: var(--scanio-ui-card) !important;
            color: var(--ink) !important;
            border-color: rgba(14, 123, 67, .16) !important;
            box-shadow: 0 16px 34px rgba(15, 23, 18, .14) !important;
        }

        .miniReviewCard span,
        .finalMini.light .miniReviewCard span,
        .finalMini.dark .miniReviewCard span {
            background: linear-gradient(145deg, rgba(255, 253, 247, .98), rgba(183, 255, 106, .20)) !important;
            color: var(--ink) !important;
            border: 1px solid rgba(14, 123, 67, .12) !important;
        }

        .miniReviewCard small,
        .finalMini.dark .miniReviewCard small,
        .finalMini.light .miniReviewCard small {
            color: var(--muted) !important
        }

        .miniFoodBall,
        .miniCaptureBubble {
            background: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .98) 0 7%, transparent 8%),
            radial-gradient(circle at 55% 58%, rgba(183, 255, 106, .26), transparent 58%),
            var(--scanio-ui-surface) !important;
            border: 1px solid rgba(14, 123, 67, .22) !important;
            box-shadow: 0 12px 25px rgba(15, 23, 18, .16), inset 0 0 0 1px rgba(255, 255, 255, .72) !important;
            color: var(--ink) !important;
        }

        .miniFoodBall:before, .miniCaptureBubble:before {
            background: rgba(255, 255, 255, .98) !important
        }

        /* 07 Reveal Scan.io UI demo adaptation */
        .finalMini.light.revealDemo {
            background: radial-gradient(circle at 18% 12%, rgba(32, 196, 111, .13), transparent 22%), radial-gradient(circle at 84% 12%, rgba(201, 106, 58, .11), transparent 22%), linear-gradient(180deg, #fff8ec 0%, #f8f1e7 58%, #e8f2e6 100%) !important;
            overflow: hidden
        }

        .finalMini.light.revealDemo:before {
            opacity: .88
        }

        .finalMini.light.revealDemo .miniRevealArchitecture {
            position: absolute;
            inset: 0;
            pointer-events: none
        }

        .finalMini.light.revealDemo .miniRevealArchitecture .orbit {
            position: absolute;
            left: 50%;
            top: 52%;
            border: 1px solid rgba(14, 123, 67, .12);
            border-radius: 50%;
            transform: translate(-50%, -50%)
        }

        .finalMini.light.revealDemo .miniRevealArchitecture .orbit.o1 {
            width: 76%;
            height: 47%
        }

        .finalMini.light.revealDemo .miniRevealArchitecture .orbit.o2 {
            width: 58%;
            height: 34%;
            opacity: .8
        }

        .finalMini.light.revealDemo .miniRevealArchitecture .orbit.o3 {
            width: 40%;
            height: 22%;
            opacity: .65
        }

        .finalMini.light.revealDemo .miniRevealArchitecture .beam {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 1px;
            height: 42%;
            background: linear-gradient(180deg, transparent, rgba(14, 123, 67, .08), transparent);
            transform: translate(-50%, -50%) rotate(90deg)
        }

        .finalMini.light.revealDemo .miniRevealArchitecture .beam.b2 {
            transform: translate(-50%, -50%) rotate(24deg);
            height: 36%;
            opacity: .7
        }

        .finalMini.light.revealDemo .miniRevealArchitecture .beam.b3 {
            transform: translate(-50%, -50%) rotate(-24deg);
            height: 36%;
            opacity: .7
        }

        .finalMini.light.revealDemo .miniPortal {
            left: 50%;
            top: 50%;
            width: 118%;
            height: 82%;
            background: radial-gradient(circle at 50% 48%, rgba(160, 240, 217, .38), rgba(117, 225, 204, .22) 28%, rgba(132, 201, 175, .10) 48%, transparent 70%);
            filter: blur(11px);
            animation: miniPortalBreathe 4.6s ease-in-out infinite
        }

        .finalMini.light.revealDemo .miniLiquidPool {
            position: absolute;
            left: 50%;
            top: 56%;
            width: 54%;
            height: 18%;
            transform: translateX(-50%);
            border-radius: 50%;
            background: radial-gradient(ellipse at center, rgba(167, 236, 216, .55), rgba(93, 209, 189, .24) 46%, rgba(255, 255, 255, 0) 72%);
            filter: blur(2px);
            opacity: .95
        }

        .finalMini.light.revealDemo .miniSphere {
            left: 50%;
            top: 46%;
            width: 114px;
            height: 114px;
            background: radial-gradient(circle at 36% 27%, rgba(255, 255, 255, .85), rgba(255, 255, 255, .40) 11%, rgba(174, 243, 226, .58) 24%, rgba(97, 212, 194, .40) 45%, rgba(255, 253, 247, .22) 62%, rgba(181, 223, 214, .18) 100%);
            border: 1px solid rgba(14, 123, 67, .16);
            box-shadow: inset 0 0 34px rgba(255, 255, 255, .40), 0 20px 34px rgba(15, 23, 18, .10), 0 0 26px rgba(111, 212, 186, .24);
            animation: miniSpherePulseUI 4.6s ease-in-out infinite
        }

        .finalMini.light.revealDemo .miniSphere:before {
            content: "";
            position: absolute;
            inset: 18px;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, .42)
        }

        .finalMini.light.revealDemo .miniSphere:after {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            width: 62%;
            height: 62%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            background: radial-gradient(circle at 42% 32%, rgba(255, 255, 255, .95), rgba(255, 255, 255, .15) 22%, rgba(93, 209, 189, .35) 58%, rgba(255, 255, 255, 0) 70%);
            filter: blur(.2px);
            animation: liquidCoreMorph 5.1s ease-in-out infinite
        }

        @keyframes miniSpherePulseUI {
            50% {
                transform: translate(-50%, -50%) scale(1.06);
                box-shadow: inset 0 0 38px rgba(255, 255, 255, .44), 0 22px 38px rgba(15, 23, 18, .13), 0 0 34px rgba(111, 212, 186, .28)
            }
        }

        @keyframes liquidCoreMorph {
            0%, 100% {
                border-radius: 50% 50% 48% 52% / 46% 54% 46% 54%;
                transform: translate(-50%, -50%) scale(1)
            }
            50% {
                border-radius: 56% 44% 53% 47% / 42% 58% 45% 55%;
                transform: translate(-50%, -50%) scale(1.06, .94)
            }
        }

        .finalMini.light.revealDemo .miniSphereText {
            top: 46%;
            color: #2e5d4a;
            text-shadow: none;
            font-size: 8px;
            letter-spacing: .22em
        }

        .finalMini.light.revealDemo .miniFoodBall {
            width: 48px;
            height: 48px;
            box-shadow: 0 12px 25px rgba(15, 23, 18, .15), inset 0 0 0 1px rgba(255, 255, 255, .76) !important;
            animation-duration: 5s
        }

        .finalMini.light.revealDemo .miniFoodBall.f1 {
            left: 17%;
            top: 28%;
            animation-name: miniBallArcA
        }

        .finalMini.light.revealDemo .miniFoodBall.f2 {
            right: 16%;
            top: 24%;
            animation-name: miniBallArcB
        }

        .finalMini.light.revealDemo .miniFoodBall.f3 {
            left: 50%;
            bottom: 12%;
            animation-name: miniBallArcC
        }

        @keyframes miniBallArcA {
            0%, 12% {
                opacity: 0;
                transform: scale(.52)
            }
            18%, 82% {
                opacity: 1;
                transform: translate(0, 0) scale(1)
            }
            50% {
                transform: translate(54px, 30px) scale(.86)
            }
        }

        @keyframes miniBallArcB {
            0%, 12% {
                opacity: 0;
                transform: scale(.52)
            }
            18%, 82% {
                opacity: 1;
                transform: translate(0, 0) scale(1)
            }
            50% {
                transform: translate(-56px, 36px) scale(.84)
            }
        }

        @keyframes miniBallArcC {
            0%, 12% {
                opacity: 0;
                transform: translate(-50%, 0) scale(.52)
            }
            18%, 82% {
                opacity: 1;
                transform: translate(-50%, 0) scale(1)
            }
            50% {
                transform: translate(-50%, -54px) scale(.84)
            }
        }

        .finalMini.light.revealDemo .miniRevealCopy {
            bottom: 10px;
            color: #4b5f56;
            opacity: .9;
            font-size: 7px;
            letter-spacing: .13em
        }

        .finalMini.light.revealDemo .miniAmbientTag {
            position: absolute;
            z-index: 6;
            padding: 4px 7px;
            border-radius: 999px;
            font-size: 7px;
            font-weight: 900;
            letter-spacing: .08em;
            text-transform: uppercase;
            background: rgba(255, 253, 247, .86);
            border: 1px solid rgba(14, 123, 67, .12);
            color: #4a5e54;
            box-shadow: 0 10px 20px rgba(15, 23, 18, .07)
        }

        .finalMini.light.revealDemo .miniAmbientTag.t1 {
            left: 11%;
            top: 16%
        }

        .finalMini.light.revealDemo .miniAmbientTag.t2 {
            right: 11%;
            top: 14%
        }

        .finalMini.light.revealDemo .miniAmbientTag.t3 {
            left: 50%;
            bottom: 24%;
            transform: translateX(-50%)
        }


        /* Override 07 reveal demo to use the earlier premium liquid-universe language instead of the architectural sphere */
        .finalMini.light.revealDemo .miniRevealArchitecture {
            display: none
        }

        .finalMini.light.revealDemo .miniSphere,
        .finalMini.light.revealDemo .miniSphereText,
        .finalMini.light.revealDemo .miniLiquidPool {
            display: none
        }

        .finalMini.light.revealDemo .miniPortal {
            left: 50%;
            top: 49%;
            width: 126%;
            height: 84%;
            background: radial-gradient(circle at 50% 46%, rgba(186, 249, 225, .46), rgba(117, 225, 204, .28) 28%, rgba(154, 215, 188, .14) 48%, transparent 72%);
            filter: blur(10px);
            animation: miniPortalBreathe 5.2s ease-in-out infinite
        }

        .finalMini.light.revealDemo .miniLiquidUniverse {
            position: absolute;
            left: 50%;
            top: 46%;
            width: 132px;
            height: 132px;
            transform: translate(-50%, -50%);
            border-radius: 44% 56% 51% 49% / 40% 52% 48% 60%;
            background: radial-gradient(circle at 36% 28%, rgba(255, 255, 255, .88), rgba(255, 255, 255, .42) 10%, rgba(161, 241, 224, .60) 22%, rgba(103, 214, 195, .42) 43%, rgba(255, 253, 247, .20) 60%, rgba(166, 223, 204, .16) 100%);
            border: 1px solid rgba(255, 255, 255, .56);
            box-shadow: inset 0 0 34px rgba(255, 255, 255, .34), 0 20px 34px rgba(15, 23, 18, .10), 0 0 30px rgba(111, 212, 186, .28);
            filter: saturate(1.03);
            animation: liquidUniverseMorph 5.4s ease-in-out infinite;
            z-index: 4
        }

        .finalMini.light.revealDemo .miniLiquidUniverse:before {
            content: "";
            position: absolute;
            inset: 12px;
            border-radius: 55% 45% 48% 52% / 42% 58% 46% 54%;
            border: 1px solid rgba(255, 255, 255, .42);
            animation: liquidUniverseMorphInner 4.8s ease-in-out infinite reverse
        }

        .finalMini.light.revealDemo .miniLiquidUniverse:after {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            width: 60%;
            height: 60%;
            transform: translate(-50%, -50%);
            border-radius: 53% 47% 58% 42% / 47% 56% 44% 53%;
            background: radial-gradient(circle at 42% 34%, rgba(255, 255, 255, .95), rgba(255, 255, 255, .18) 18%, rgba(89, 211, 194, .34) 58%, rgba(255, 255, 255, 0) 72%);
            box-shadow: 0 0 18px rgba(99, 210, 190, .18);
            animation: liquidCoreMorph 4.6s ease-in-out infinite
        }

        .finalMini.light.revealDemo .miniUniverseRing {
            position: absolute;
            left: 50%;
            top: 46%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            border: 1px solid rgba(14, 123, 67, .14);
            z-index: 2
        }

        .finalMini.light.revealDemo .miniUniverseRing.r1 {
            width: 176px;
            height: 112px;
            opacity: .92
        }

        .finalMini.light.revealDemo .miniUniverseRing.r2 {
            width: 140px;
            height: 88px;
            opacity: .72;
            transform: translate(-50%, -50%) rotate(-18deg)
        }

        .finalMini.light.revealDemo .miniUniverseRing.r3 {
            width: 96px;
            height: 56px;
            opacity: .50;
            transform: translate(-50%, -50%) rotate(22deg)
        }

        .finalMini.light.revealDemo .miniUniverseDust {
            position: absolute;
            left: 50%;
            top: 46%;
            width: 180px;
            height: 140px;
            transform: translate(-50%, -50%);
            z-index: 1;
            pointer-events: none
        }

        .finalMini.light.revealDemo .miniUniverseDust i {
            position: absolute;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .78);
            box-shadow: 0 0 10px rgba(255, 255, 255, .34)
        }

        .finalMini.light.revealDemo .miniUniverseDust i:nth-child(1) {
            left: 12%;
            top: 42%;
            opacity: .8
        }

        .finalMini.light.revealDemo .miniUniverseDust i:nth-child(2) {
            left: 78%;
            top: 30%;
            width: 5px;
            height: 5px;
            opacity: .65
        }

        .finalMini.light.revealDemo .miniUniverseDust i:nth-child(3) {
            left: 72%;
            top: 66%;
            width: 4px;
            height: 4px;
            opacity: .55
        }

        .finalMini.light.revealDemo .miniUniverseDust i:nth-child(4) {
            left: 24%;
            top: 22%;
            width: 4px;
            height: 4px;
            opacity: .55
        }

        .finalMini.light.revealDemo .miniUniverseDust i:nth-child(5) {
            left: 46%;
            top: 78%;
            width: 5px;
            height: 5px;
            opacity: .68
        }

        .finalMini.light.revealDemo .miniUniverseTitle {
            position: absolute;
            left: 50%;
            top: 46%;
            transform: translate(-50%, -50%);
            z-index: 5;
            text-align: center;
            font-size: 7px;
            line-height: 1.45;
            letter-spacing: .22em;
            text-transform: uppercase;
            color: #325b4c
        }

        .finalMini.light.revealDemo .miniFoodBall {
            width: 50px;
            height: 50px;
            box-shadow: 0 12px 24px rgba(15, 23, 18, .16), inset 0 0 0 1px rgba(255, 255, 255, .76) !important;
            animation-duration: 5.8s
        }

        .finalMini.light.revealDemo .miniFoodBall.f1 {
            left: 15%;
            top: 27%;
            animation-name: miniBallArcA
        }

        .finalMini.light.revealDemo .miniFoodBall.f2 {
            right: 15%;
            top: 23%;
            animation-name: miniBallArcB
        }

        .finalMini.light.revealDemo .miniFoodBall.f3 {
            left: 50%;
            bottom: 11%;
            animation-name: miniBallArcC
        }

        .finalMini.light.revealDemo .miniRevealCopy {
            bottom: 10px;
            color: #4a5f56;
            opacity: .92;
            font-size: 7px;
            letter-spacing: .12em
        }

        @keyframes liquidUniverseMorph {
            0%, 100% {
                transform: translate(-50%, -50%) rotate(0deg) scale(1);
                border-radius: 44% 56% 51% 49% / 40% 52% 48% 60%
            }
            50% {
                transform: translate(-50%, -50%) rotate(9deg) scale(1.05, .97);
                border-radius: 61% 39% 45% 55% / 48% 38% 62% 52%
            }
        }

        @keyframes liquidUniverseMorphInner {
            0%, 100% {
                border-radius: 55% 45% 48% 52% / 42% 58% 46% 54%
            }
            50% {
                border-radius: 46% 54% 58% 42% / 55% 42% 58% 45%
            }
        }


        /* 08 Liquid portal + 09 Portal living sphere demos on Scan.io UI background */
        .finalMini.portalDemo, .finalMini.portalSphereDemo {
            background: radial-gradient(circle at 10% 0%, rgba(32, 196, 111, .18), transparent 30%), radial-gradient(circle at 95% 10%, rgba(201, 106, 58, .14), transparent 32%), linear-gradient(180deg, #fff8ec, #f6f0e5 58%, #e8f2e6);
            color: var(--ink)
        }

        .finalMini.portalDemo:before, .finalMini.portalSphereDemo:before {
            opacity: .9
        }

        .portalStageWrap {
            position: absolute;
            inset: 0
        }

        .portalHalo {
            position: absolute;
            left: 50%;
            top: 46%;
            width: 172px;
            height: 172px;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            background: radial-gradient(circle, rgba(138, 233, 210, .18), transparent 66%);
            filter: blur(8px);
            opacity: .9
        }

        .portalDisc {
            position: absolute;
            top: 46%;
            width: 124px;
            height: 124px;
            border-radius: 50%;
            mix-blend-mode: normal;
            box-shadow: 0 16px 24px rgba(15, 23, 18, .08);
            animation: portalFloat 5.5s ease-in-out infinite
        }

        .portalDisc.left {
            left: 34%;
            transform: translate(-50%, -50%);
            background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .46), rgba(206, 252, 176, .2) 15%, #b8e04f 16%, #9cc93f 60%, #87b53d 100%)
        }

        .portalDisc.right {
            left: 66%;
            transform: translate(-50%, -50%);
            background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .42), rgba(178, 255, 255, .18) 15%, #78dfe0 16%, #59c3c8 56%, #49a8b1 100%);
            animation-delay: -2.75s
        }

        .portalCenter {
            position: absolute;
            left: 50%;
            top: 46%;
            width: 82px;
            height: 82px;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            display: grid;
            place-items: center;
            text-align: center;
            padding: 10px;
            font-size: 8px;
            line-height: 1.42;
            letter-spacing: .16em;
            text-transform: uppercase;
            color: #fff;
            background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .08), rgba(0, 0, 0, .08) 15%, #2f4c61 16%, #35697d 56%, #264253 100%);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34), 0 0 0 1px rgba(15, 23, 18, .06);
            z-index: 4
        }

        .portalCrescent {
            position: absolute;
            left: 24%;
            top: 46%;
            width: 58px;
            height: 102px;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            background: linear-gradient(180deg, rgba(13, 20, 18, .88), rgba(19, 30, 25, .88));
            z-index: 3;
            box-shadow: 0 6px 18px rgba(0, 0, 0, .12)
        }

        .portalCopy {
            position: absolute;
            left: 10%;
            right: 10%;
            bottom: 11px;
            text-align: center;
            font-size: 7px;
            letter-spacing: .13em;
            text-transform: uppercase;
            font-weight: 900;
            color: #4b6056;
            opacity: .88
        }

        @keyframes portalFloat {
            0%, 100% {
                transform: translate(-50%, -50%) scale(1)
            }
            50% {
                transform: translate(-50%, -50%) scale(1.035) translateY(-1px)
            }
        }

        .portalSphereDemo .portalGlow {
            position: absolute;
            left: 50%;
            top: 46%;
            width: 172px;
            height: 112px;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            border: 1px solid rgba(14, 123, 67, .12);
            opacity: .8
        }

        .portalSphereDemo .sphereOuter {
            position: absolute;
            left: 50%;
            top: 46%;
            width: 122px;
            height: 122px;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .72), rgba(255, 255, 255, .18) 12%, rgba(164, 241, 230, .58) 26%, rgba(87, 208, 196, .28) 48%, rgba(255, 255, 255, .18) 68%, rgba(255, 255, 255, .08));
            border: 1px solid rgba(255, 255, 255, .54);
            box-shadow: inset 0 0 30px rgba(255, 255, 255, .34), 0 20px 28px rgba(15, 23, 18, .08), 0 0 28px rgba(93, 205, 185, .22);
            z-index: 2;
            animation: spherePulse 5.3s ease-in-out infinite
        }

        .portalSphereDemo .sphereOuter:before {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            width: 84px;
            height: 84px;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            background: linear-gradient(90deg, #b3de4d 0 50%, #61c8ce 50% 100%);
            filter: saturate(1.05);
            clip-path: ellipse(50% 47% at 50% 50%);
            opacity: .96
        }

        .portalSphereDemo .sphereOuter:after {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            width: 44px;
            height: 44px;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .28), rgba(11, 18, 17, .07) 10%, #35697d 11%, #31596d 60%, #24414f 100%);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28)
        }

        .portalSphereDemo .sphereLabel {
            position: absolute;
            left: 50%;
            top: 46%;
            transform: translate(-50%, -50%);
            z-index: 5;
            text-align: center;
            font-size: 7px;
            line-height: 1.45;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: #fff
        }

        .portalSphereDemo .miniFoodBall {
            background: radial-gradient(circle at 30% 25%, #fff 0 4%, #e8f2e6 5% 55%, #dcebe1 56% 100%);
            border: 1px solid rgba(15, 23, 18, .08);
            box-shadow: 0 10px 22px rgba(15, 23, 18, .15)
        }

        .portalSphereDemo .miniFoodBall.f1 {
            left: 16%;
            top: 24%;
            animation: miniBallA 3.6s ease-in-out infinite
        }

        .portalSphereDemo .miniFoodBall.f2 {
            right: 16%;
            top: 28%;
            animation: miniBallB 3.6s ease-in-out infinite -.7s
        }

        .portalSphereDemo .miniFoodBall.f3 {
            left: 26%;
            bottom: 18%;
            animation: miniBallC2 3.6s ease-in-out infinite -1.4s
        }

        @keyframes miniBallC2 {
            0%, 14% {
                opacity: 0;
                transform: scale(.52)
            }
            22%, 82% {
                opacity: 1;
                transform: translate(0, 0) scale(1)
            }
            50% {
                transform: translate(34px, -30px) scale(.72);
                opacity: .62
            }
        }

        @keyframes spherePulse {
            0%, 100% {
                transform: translate(-50%, -50%) scale(1)
            }
            50% {
                transform: translate(-50%, -50%) scale(1.04)
            }
        }


        /* 08 uses the exact 6C Liquid portal from the earlier Extra section, placed on the Scan.io UI background. */
        .finalMini.portalDemo .extraLiquidPortal {
            position: absolute;
            inset: 0;
            overflow: hidden;
            background: transparent
        }

        .finalMini.portalDemo .extraLiquidPortal:before,
        .finalMini.portalDemo .extraLiquidPortal:after {
            content: "";
            position: absolute;
            width: 250px;
            height: 250px;
            border-radius: 42% 58% 62% 38%;
            filter: blur(1px);
            animation: extraPortalExact 3.6s ease-in-out infinite
        }

        .finalMini.portalDemo .extraLiquidPortal:before {
            left: -40px;
            top: 10px;
            background: rgba(200, 255, 71, .7)
        }

        .finalMini.portalDemo .extraLiquidPortal:after {
            right: -40px;
            bottom: 0;
            background: rgba(84, 244, 255, .55);
            animation-delay: -1.6s
        }

        @keyframes extraPortalExact {
            50% {
                transform: translate(50px, 20px) rotate(130deg) scale(1.25);
                border-radius: 63% 37% 33% 67%
            }
        }

        .finalMini.portalDemo .extraPortalCenter {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 132px;
            height: 132px;
            border-radius: 50%;
            background: linear-gradient(180deg, #fff8ec 0%, #f6f0e5 58%, #e8f2e6 100%);
            box-shadow: 0 0 0 2px rgba(255, 255, 255, .92), 0 0 30px rgba(183, 255, 106, .35);
            display: grid;
            place-items: center;
            text-align: center;
            font-weight: 900;
            font-size: 12px;
            color: var(--ink);
            z-index: 3;
            letter-spacing: 0;
            line-height: 1.12;
            overflow: hidden
        }

        .finalMini.portalDemo .extraPortalCenter:before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background-image: linear-gradient(rgba(14, 123, 67, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 123, 67, .08) 1px, transparent 1px);
            background-size: 18px 18px;
            opacity: .48;
            pointer-events: none
        }

        .finalMini.portalDemo .extraPortalCenter > *, .finalMini.portalDemo .extraPortalCenter {
            isolation: isolate
        }

        .finalMini.portalDemo .extraPortalCenter {
            padding-top: 2px
        }


        /* Standalone final portal preview below the animation sandbox. Not part of the production scan flow yet. */
        .finalPortalPreview {
            overflow: hidden
        }

        .finalPortalPreview p {
            max-width: 720px
        }

        .finalPortalPreviewFrameShell {
            width: min(100%, 390px);
            aspect-ratio: 9/16;
            margin: 16px auto 0;
            border-radius: 30px;
            overflow: hidden;
            background: linear-gradient(180deg, #fff8ec, #f6f0e5 58%, #e8f2e6);
            border: 1px solid rgba(15, 23, 18, .10);
            box-shadow: 0 22px 55px rgba(15, 23, 18, .16)
        }

        .finalPortalPreviewFrame {
            display: block;
            width: 100%;
            height: 100%;
            border: 0;
            background: transparent
        }

        @media (max-width: 650px) {
            .finalPortalPreviewFrameShell {
                width: 100%;
                max-width: 390px
            }
        }