/* Colors, fonts and pieces match the Gut Feeling site (templates/site-updates/b.html) */
        :root {
            --ink: #0E0E0E; --cobalt: #2F4BFF; --tang: #FF7A1A; --bubble: #FF8FCF; --mint: #3DDC97; --lemon: #FFE14D;
            --gpink: #F8227B;
            --soft: rgba(14,14,14,.6);
            --line: rgba(14,14,14,.14);
            --display: "Bowlby One", "Arial Black", Impact, sans-serif;
            --sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
            --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            --marker: "Permanent Marker", "Comic Sans MS", "Chalkboard SE", cursive;
            --die: 0 0 0 1px rgba(14,14,14,.13), 0 7px 14px -9px rgba(14,14,14,.45);
            --spring: cubic-bezier(.3,1.7,.5,1);
            --g: clamp(16px, 2.4vw, 36px);
            color-scheme: light;
        }
        * { box-sizing: border-box; }
        html, body { margin: 0; }
        body { background: #fff; color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.45; -webkit-font-smoothing: antialiased; overflow-x: clip; }
        a { color: inherit; }
        button { font: inherit; color: inherit; }
        img { max-width: 100%; }
        [hidden] { display: none !important; }
        :focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; border-radius: 4px; }
        .mono { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; font-weight: 500; }
        .sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
        .page { max-width: 1280px; margin: 0 auto; padding-inline: var(--g); }

        /* nav */
        .brand { padding-top: clamp(14px, 2.2vw, 30px); }
        .hero > div:first-child { display: flex; flex-direction: column; }
        .hero > div:first-child .h1 { margin-top: auto; }
        .glogo { display: block; width: min(100%, 520px); max-width: 100%; height: auto; }
        .pill-ink { font-weight: 700; text-decoration: none; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 99px; white-space: nowrap; transition: rotate .3s, background .2s; }
        .pill-ink:hover { rotate: -3deg; background: var(--cobalt); }

        /* hero */
        .kicker { margin: 12px 0 clamp(20px, 2.6vw, 34px); display: flex; gap: 14px; flex-wrap: wrap; }
        .kicker span { white-space: nowrap; }
        .kicker span + span::before { content: "•"; margin-right: 14px; color: var(--tang); }
        @media (max-width: 520px) { .kicker { flex-wrap: nowrap; gap: 8px; font-size: 10px; letter-spacing: .02em; } .kicker span + span::before { margin-right: 8px; } }
        .hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px clamp(40px, 5vw, 80px); align-items: stretch; }
        .hero-side { display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; gap: 18px 0; padding-top: clamp(14px, 2.2vw, 30px); }
        .hero-side .lede { margin-top: 0; }
        .intro { background: var(--lemon); border: 2px solid var(--ink); border-radius: 18px; padding: clamp(16px, 1.8vw, 24px); box-shadow: var(--die); rotate: -1deg; }
        .hero-side .drop-wrap { margin-top: 38px; }
        .intro .chips { gap: 6px; margin-top: 14px; }
        .intro .chip { padding: 5px 9px; font-size: 11px; }
        @media (min-width: 821px) { .hero-side .drop-wrap { margin-left: calc(-1 * clamp(60px, 9vw, 160px)); } }
        .hero-side .pill-ink { align-self: flex-end; }
        h1.h1 { font: 400 clamp(32px, 5.2vw, 84px)/.92 var(--display); letter-spacing: -.015em; margin: 0; }
        .h1 > span { display: inline-block; position: relative; }
        .gif-fill { background: var(--ink) center / cover; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: .018em var(--ink); }
        .h1 > .peel { display: block; width: fit-content; }
        .h1.oneline > span:first-child { white-space: nowrap; }
        .h1.oneline > span:first-child br { display: none; }
        .peel .brk { display: none; }
        .peel.stack .brk { display: inline; }
        .peel { white-space: nowrap; font-size: 1.2em; margin-top: .08em; background: var(--bubble); padding: .02em .22em .08em; border-radius: .2em; box-shadow: 0 0 0 .07em #fff, var(--die); rotate: -1.5deg; z-index: 2; }
        .lede { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.35; margin: 16px 0 0; max-width: 42ch; font-weight: 500; }
        .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; position: relative; }
        .chip { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding: 6px 11px; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
        .scrawl { font-family: var(--marker); color: var(--cobalt); font-size: 20px; line-height: 1.1; rotate: -4deg; display: inline-block; position: relative; }
        .scrawl { z-index: 6; }
        .scrawl .arr { position: absolute; width: 58px; height: 48px; pointer-events: none; }
        .psst .arr { right: -30px; top: 55%; rotate: 20deg; }
        .wall-note .arr { left: -60px; top: 30%; rotate: 10deg; }

        /* the drop box and its states */
        .dropbox { position: relative; rotate: 1.5deg; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 2px var(--ink), var(--die); padding: clamp(24px, 2.6vw, 38px); min-height: clamp(230px, 22vw, 320px); align-content: center; display: grid; gap: 12px; justify-items: start; transition: background .2s, box-shadow .2s; }
        .reel { position: fixed; inset: 0; z-index: 2147481000; background: var(--ink) center / cover no-repeat; opacity: 0; pointer-events: none; transition: opacity .35s; }
        body.filedrag .reel, body.converting .reel { opacity: 1; }
        .dropbox.dragover, body.filedrag .dropbox { background: var(--lemon); box-shadow: inset 0 0 0 3px var(--ink), var(--die); }
        .drop-wrap { position: relative; z-index: 30; }
        body.filedrag .drop-wrap, body.converting .drop-wrap { z-index: 2147482000 !important; }
        .drop-wrap .psst { position: absolute; right: 10px; bottom: calc(100% + 18px); z-index: 3; white-space: nowrap; font-size: clamp(15px, 1.25vw, 18px); rotate: -2deg; }
        .dropbox b.title { font: 400 clamp(32px, 4vw, 60px)/1 var(--display); }
        .dropbox .note { font-family: var(--mono); font-size: 14px; color: var(--soft); }
        .pick-btn { display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--ink); background: var(--tang); color: var(--ink); font-weight: 700; font-size: clamp(18px, 1.6vw, 23px); padding: 13px 26px 13px 13px; border-radius: 99px; cursor: pointer; box-shadow: var(--die); white-space: nowrap; transition: rotate .3s; }
        .pick-btn:hover { rotate: -3deg; }
        .pick-btn .dot { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--tang); display: grid; place-items: center; font-size: 11px; }
        #fileInput { display: none; }
        .status { font: 400 clamp(22px, 2.2vw, 28px)/1 var(--display); }
        .hint { font-size: 14px; color: var(--soft); min-height: 1.2em; }
        .bar { width: 100%; height: 12px; border-radius: 99px; background: var(--line); overflow: hidden; }
        .bar i { display: block; height: 100%; width: 0; background: var(--tang); border-radius: 99px; transition: width .3s ease; }
        .error { width: 100%; background: var(--bubble); border-radius: 12px; padding: 10px 14px; font-weight: 600; }

        /* multi-image reorder */
        .reorder-thumbnails { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; }
        .reorder-thumb { position: relative; width: 72px; height: 72px; cursor: grab; }
        .reorder-thumb .thumb-img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 3px solid #fff; box-shadow: var(--die); display: block; pointer-events: none; }
        .reorder-thumb.dragging { opacity: .4; }
        .thumb-badge { position: absolute; top: -7px; left: -7px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font: 500 11px var(--mono); }
        .thumb-remove { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--ink); display: grid; place-items: center; font-weight: 700; cursor: pointer; line-height: 1; }
        .reorder-thumb.drag-insert-before::before, .reorder-thumb.drag-insert-after::after { content: ""; position: absolute; top: 0; bottom: 0; width: 4px; border-radius: 2px; background: var(--cobalt); }
        .reorder-thumb.drag-insert-before::before { left: -7px; }
        .reorder-thumb.drag-insert-after::after { right: -7px; }
        .reorder-add-thumb { width: 72px; height: 72px; border-radius: 8px; border: 2px dashed var(--ink); display: grid; place-items: center; font: 400 28px var(--display); cursor: pointer; }
        .speed { display: flex; align-items: center; gap: 10px; width: 100%; font-family: var(--mono); font-size: 12px; text-transform: uppercase; }
        .speed input { flex: 1; accent-color: var(--ink); }
        .go-btn { width: 100%; font: 400 20px/1 var(--display); padding: 16px 22px; background: var(--ink); color: #fff; border-radius: 99px; border: 0; box-shadow: 0 0 0 3px #fff, var(--die); cursor: pointer; transition: scale .3s var(--spring), background .2s; }
        .go-btn:hover { scale: 1.03; background: var(--cobalt); }
        .row { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 10px; }
        .link-btn { background: none; border: 0; padding: 0 0 2px; font-weight: 600; border-bottom: 3px solid var(--mint); cursor: pointer; }

        /* the wall */
        .wall-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 2px solid var(--ink); padding-top: 12px; margin-top: clamp(40px, 4.5vw, 64px); }
        .wall-head p { margin: 0; }
        .wall-zone::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; translate: -50% 0; background: var(--bubble); }
        .wall-zone { position: relative; margin-top: clamp(32px, 3.5vw, 48px); padding-top: 24px; }
        .wall-zone .wall-head { border-top: 0; margin-top: 0; padding-top: 0; }
        .wall-zone + .foot, main + .foot { border-top: 0; margin-top: 0; }
        .wall-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
        /* Tidy up is the Gut Feeling site's round "Trust your gut" stamp */
        .tidy { position: fixed; right: clamp(14px, 2vw, 28px); bottom: calc(clamp(14px, 2vw, 28px) + env(safe-area-inset-bottom, 0px)); z-index: 2147480000; width: 156px; height: 156px; border-radius: 50%; border: 0; padding: 0; background: var(--lemon); cursor: pointer; display: grid; place-items: center; box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(14,14,14,.18), 0 14px 26px -12px rgba(14,14,14,.55); transition: scale .3s var(--spring); }
        .tidy:hover { scale: 1.06; }
        .tidy:active { scale: .9; }
        .tidy .ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: tidySpin 16s linear infinite; }
        .tidy .ring text { font: 500 14.5px var(--mono); fill: var(--ink); text-transform: uppercase; letter-spacing: .02em; }
        .tidy .core { position: relative; width: 104px; height: 104px; border-radius: 50%; background: var(--ink); color: var(--lemon); display: grid; place-items: center; font: 400 19px/.95 var(--display); text-align: center; transition: rotate .5s var(--spring); }
        .tidy:hover .core { rotate: -8deg; }
        @keyframes tidySpin { to { rotate: 360deg; } }
        .wall-tools .clear { background: none; border: 0; padding: 0 0 2px; color: var(--ink); border-bottom: 2px solid currentColor; cursor: pointer; }
        .wall-tools .clear.sure { color: #c8102e; }
        .wall-tools .clear[hidden] { display: none; }
        .fine-only, .touch-only { display: inline; }
        @media (hover: none) { .fine-only { display: none; } }
        @media (hover: hover) { .touch-only { display: none; } }
        .wall { position: relative; margin-top: 12px; padding-bottom: 150px; }
        .tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
        @media (max-width: 820px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tiles > .tile.example:nth-child(n+5) { display: none; } }
        .tile { position: relative; margin: 0; border-radius: 12px; overflow: hidden; border: 3px solid #fff; box-shadow: var(--die); background: #fff; }
        .tile img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; background: #F2F2EF; pointer-events: none; }
        .tile figcaption { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 6px 8px; font: 500 11px var(--mono); text-transform: uppercase; }
        .tile figcaption span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .tile .save { border: 0; background: var(--ink); color: #fff; border-radius: 99px; padding: 4px 9px; font: 500 10.5px var(--mono); text-transform: uppercase; cursor: pointer; flex: none; }
        .tile .save:hover { background: var(--cobalt); }
        .tile .x { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: #fff; box-shadow: inset 0 0 0 2px var(--ink); font-weight: 700; cursor: pointer; line-height: 1; opacity: 0; transition: opacity .2s; }
        .tile:hover .x, .tile .x:focus-visible { opacity: 1; }
        .tile.new { overflow: visible; box-shadow: 0 0 0 3px var(--tang), var(--die); }
        .tile.new img { border-radius: 9px 9px 0 0; }
        .tile .tag-new { position: absolute; top: -12px; left: 10px; background: var(--tang); border-radius: 99px; padding: 4px 9px; font: 500 10.5px var(--mono); text-transform: uppercase; box-shadow: 0 0 0 2px #fff; rotate: -4deg; z-index: 1; }
        .tile.example figcaption { color: var(--soft); }

        /* stickers sit on top of the wall, tilted */
        .sticker { position: absolute; z-index: 5; }
        .s-tag { width: 128px; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: var(--die); border: 3px solid #fff; rotate: -6deg; }
        .s-tag .band { background: var(--gpink); color: #fff; text-align: center; padding: 8px 0 5px; }
        .s-tag .band b { display: block; font: 400 16px/1 var(--display); }
        .s-tag .band i { display: block; font: 500 9px var(--mono); font-style: normal; text-transform: uppercase; letter-spacing: .08em; margin-top: 3px; }
        .s-tag .nm { display: grid; place-items: center; height: 58px; padding: 0 8px; font: 400 16px/1.05 var(--marker); text-align: center; overflow-wrap: anywhere; }
        .s-circ { width: 104px; height: 104px; border-radius: 50%; background: var(--cobalt); color: #fff; display: grid; place-items: center; font: 400 15px/1 var(--display); text-align: center; border: 3px solid #fff; box-shadow: var(--die); rotate: 8deg; }
        .s-pill { background: var(--lemon); border-radius: 99px; padding: 12px 18px; font: 700 italic 19px/1 var(--sans); letter-spacing: -.03em; border: 3px solid #fff; box-shadow: var(--die); rotate: -3deg; white-space: nowrap; }
        .st1 { left: 14%; bottom: 20px; }
        .st2 { left: 44%; bottom: 36px; }
        .st3 { left: 62%; bottom: 44px; }

        /* dragging */
        [data-drag] { cursor: grab; transition: scale .25s var(--spring); -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
        [data-drag].lifted { cursor: grabbing; scale: 1.04; }
        .h1 > span, .glogo, .scrawl, .chips, .intro, .dropbox, .tile, .foot-gf, .pill-ink { position: relative; }
        .drop-wrap .psst { position: absolute; }


        /* footer */
        .foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 40px; padding-block: 12px 96px; border-top: 2px solid var(--ink); }
        .foot a { text-decoration: none; }
        .foot .mono { color: var(--soft); }
        @media (min-width: 821px) { .foot { padding-right: 170px; } } /* keep the footer clear of the Tidy up stamp */
        .foot-gf { height: 20px; width: auto; vertical-align: middle; margin-left: 6px; }

        /* sound button (same as the Gut Feeling site's) */
        .snd-float { position: fixed; left: clamp(14px, 2vw, 28px); bottom: calc(clamp(14px, 2vw, 28px) + env(safe-area-inset-bottom, 0px)); z-index: 2147480500; }
        .snd { display: inline-flex; align-items: center; gap: 5px; height: 52px; padding: 0 15px 0 13px; border-radius: 99px; border: 2px solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(14,14,14,.18), 0 14px 26px -12px rgba(14,14,14,.55); transition: background .2s, color .2s, translate .35s var(--spring); }
        .snd:hover { translate: 0 -1px; }
        .snd[aria-pressed="true"] { background: var(--ink); color: #fff; }
        .snd .spk { width: 20px; height: 20px; flex: none; }
        .snd .x { width: 12px; height: 12px; flex: none; transition: width .25s, opacity .2s; }
        .snd .bars { display: flex; align-items: flex-end; gap: 3px; height: 16px; width: 0; opacity: 0; overflow: hidden; transition: width .25s, opacity .2s; }
        .snd[aria-pressed="true"] .x { width: 0; opacity: 0; }
        .snd[aria-pressed="true"] .bars { width: 19px; opacity: 1; }
        .snd .bars i { flex: 1; height: 4px; border-radius: 2px; background: var(--cobalt); transform-origin: bottom; scale: 1 .25; transition: scale .4s ease; }
        .snd .bars i:nth-child(2) { background: var(--tang); } .snd .bars i:nth-child(3) { background: var(--bubble); } .snd .bars i:nth-child(4) { background: var(--mint); }
        .snd[aria-pressed="true"] .bars i { scale: 1 1; transition-duration: .6s; animation: eq 1.05s ease-in-out infinite; }
        .snd[aria-pressed="true"] .bars i:nth-child(2) { animation-delay: -.35s; } .snd[aria-pressed="true"] .bars i:nth-child(3) { animation-delay: -.7s; } .snd[aria-pressed="true"] .bars i:nth-child(4) { animation-delay: -.15s; }
        @keyframes eq { 0%, 100% { height: 4px; } 50% { height: 16px; } }

        /* GF logo cursor (same as the Gut Feeling site's) */
        .cursor { position: fixed; left: 0; top: 0; z-index: 2147483000; pointer-events: none; width: 0; height: 0; opacity: 0; transition: opacity .2s; --c: var(--ink); --tc: #fff; }
        .cursor.on { opacity: 1; }
        .c-logo { position: absolute; left: 0; top: 0; z-index: 2; width: 36px; translate: -50% -50%; transition: scale .3s var(--spring), rotate .3s var(--spring); }
        .c-logo img { display: block; width: 100%; height: auto; }
        .c-tag { position: absolute; left: 9px; top: 8px; z-index: 1; padding: 7px 11px 6px 15px; border-radius: 99px; background: var(--c); box-shadow: 0 0 0 2px #fff; scale: 0; transform-origin: 0 0; transition: scale .3s var(--spring); }
        .cursor span { display: block; font: 500 11px/1 var(--mono); color: var(--tc); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
        .cursor.word .c-tag { scale: 1; }
        .cursor.link .c-logo { scale: 1.28; rotate: -10deg; }
        .cursor.down .c-logo { scale: .88; }
        .cursor.w-drag { --c: var(--tang); --tc: var(--ink); }
        .cursor.w-drop { --c: var(--bubble); --tc: var(--ink); }
        .cursor.w-music { --c: var(--cobalt); }
        html.has-cursor, html.has-cursor * { cursor: none !important; }

        @media (max-width: 820px) {
            .hero { grid-template-columns: minmax(0, 1fr); }
            .hero-side { gap: 48px; padding-top: 0; }
            .hero { position: relative; }
            .brand { padding-top: 64px; }
            .hero-side .pill-ink { position: absolute; top: 12px; right: 0; padding: 9px 14px; font-size: 14px; }
            .pick-btn { white-space: normal; font-size: 16px; }
                .drop-wrap .psst { bottom: calc(100% + 18px); font-size: 17px; white-space: normal; max-width: 85%; text-align: right; }
            .psst .arr { right: -2px; top: 70%; width: 44px; height: 37px; }
            .wall-note .arr { display: none; }
            .wall { padding-bottom: 180px; }
            .st1 { left: 2%; bottom: 30px; } .st2 { left: 42%; bottom: 60px; } .st3 { left: 18%; bottom: 8px; }
            .snd-float { left: 16px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
            .tidy { right: 16px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); width: auto; height: 56px; padding: 0 22px; border-radius: 99px; background: var(--ink); }
            .tidy .ring { display: none; }
            .tidy .core { width: auto; height: auto; background: none; font-size: 20px; line-height: 1; white-space: nowrap; }
            .tidy .core br { display: none; }
            .snd { height: 56px; width: 64px; padding: 0; justify-content: center; }
        }
        @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }