:root {
    --desk-cream: #F6E8C8;
    --graph-blue: #8DB9E8;
    --stamp-violet: #5E4B8B;
    --sticker-coral: #FF6F61;
    --highlighter-lime: #C8F45D;
    --plastic-glow: #D7FFF1;
    --graphite: #2F3136;
    --shadow-brown: #7A5536;
    --progress: 0;
    --scene: 0;
    --mx: 50%;
    --my: 50%;
}

/* Typeface intent: feel printed; IBM Plex Mono only for serial numbers. */

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    background: var(--desk-cream);
}

body {
    margin: 0;
    color: var(--graphite);
    font-family: "Atkinson Hyperlegible", sans-serif;
    background:
        radial-gradient(circle at 12% 14%, rgba(255, 111, 97, .16), transparent 20rem),
        radial-gradient(circle at 88% 70%, rgba(141, 185, 232, .28), transparent 24rem),
        var(--desk-cream);
    overflow-x: hidden;
}

.desk-noise {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 20;
    opacity: .32;
    background-image:
        radial-gradient(circle, rgba(47,49,54,.16) 0 1px, transparent 1.2px),
        linear-gradient(90deg, rgba(122,85,54,.08) 1px, transparent 1px),
        linear-gradient(rgba(122,85,54,.06) 1px, transparent 1px);
    background-size: 17px 19px, 72px 72px, 72px 72px;
    mix-blend-mode: multiply;
}

.edge-tabs {
    position: fixed;
    right: 0;
    top: 12vh;
    z-index: 30;
    display: grid;
    gap: .45rem;
    font-family: "Gabarito", sans-serif;
    font-weight: 900;
}

.edge-tabs a {
    color: var(--graphite);
    text-decoration: none;
    padding: .62rem .38rem .62rem .8rem;
    background: var(--plastic-glow);
    border: 2px solid rgba(47,49,54,.5);
    border-right: 0;
    border-radius: 14px 0 0 14px;
    box-shadow: -4px 5px 0 rgba(122,85,54,.18);
    writing-mode: vertical-rl;
    transform: translateX(9px) rotate(-1deg);
    transition: transform .25s ease, background .25s ease;
}

.edge-tabs a.is-active,
.edge-tabs a:hover {
    transform: translateX(0) rotate(1deg);
    background: var(--highlighter-lime);
}

.assembly-desk { position: relative; }

.scene {
    min-height: 100vh;
    position: relative;
    padding: clamp(4rem, 8vw, 7rem);
    isolation: isolate;
    overflow: hidden;
}

.scene:nth-child(odd) { background: rgba(215,255,241,.42); }

.fixed-craft {
    position: fixed;
    inset: 0;
    z-index: 8;
    pointer-events: none;
}

.badge-stage {
    position: absolute;
    left: calc(50% - 145px + (var(--scene) - 2.5) * 16px);
    top: calc(50% - 205px + sin(var(--progress) * 1deg) * 1px);
    width: 310px;
    height: 430px;
    transform:
        translate(calc((var(--scene) - 2) * 4vw), calc((var(--scene) - 2) * -1.2vh))
        rotate(calc(-8deg + var(--scene) * 2.7deg))
        scale(calc(.94 + min(var(--scene), 5) * .018));
    transition: transform .18s linear, left .18s linear;
}

.frosted-sleeve {
    position: absolute;
    inset: -18px -28px 4px -24px;
    border-radius: 34px;
    background: linear-gradient(135deg, rgba(215,255,241,.72), rgba(246,232,200,.26));
    border: 2px solid rgba(47,49,54,.18);
    box-shadow: 0 28px 45px rgba(122,85,54,.22), inset 0 0 38px rgba(255,255,255,.42);
    backdrop-filter: blur(4px);
    transform: translateX(calc(var(--progress) * -90px));
    opacity: calc(1 - min(var(--progress) * 1.35, .78));
}

.embossed-label {
    position: absolute;
    left: 42px;
    top: 38px;
    font-family: "Fraunces", serif;
    font-size: 2.35rem;
    font-weight: 800;
    letter-spacing: -.04em;
    color: rgba(47,49,54,.16);
    text-shadow: 1px 1px 1px rgba(255,255,255,.72), -1px -1px 1px rgba(122,85,54,.13);
}

.sleeve-seam {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 45px;
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(94,75,139,.42), rgba(94,75,139,.42) 8px, transparent 8px, transparent 15px);
}

.badge {
    position: absolute;
    inset: 26px 16px 14px 16px;
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.74), rgba(246,232,200,.68)),
        repeating-linear-gradient(0deg, rgba(141,185,232,.16) 0 1px, transparent 1px 28px),
        repeating-linear-gradient(90deg, rgba(141,185,232,.16) 0 1px, transparent 1px 28px),
        var(--desk-cream);
    border: 3px solid var(--graphite);
    box-shadow: 0 20px 0 rgba(122,85,54,.17), 0 34px 45px rgba(122,85,54,.26);
    overflow: hidden;
}

.badge::before {
    content: "";
    position: absolute;
    inset: 10px;
    border: 2px dashed rgba(94,75,139,.36);
    border-radius: 22px;
}

.crop-marks {
    position: absolute;
    inset: 0;
    z-index: 4;
}

.crop-marks svg { width: 100%; height: 100%; }
.crop-path {
    fill: none;
    stroke: var(--stamp-violet);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 680;
    stroke-dashoffset: calc(680 - min(max((var(--progress) - .22) * 4, 0), 1) * 680);
}
.crop-path.late { stroke: var(--sticker-coral); stroke-width: 2; }

.badge-hole {
    position: absolute;
    top: 18px;
    left: 50%;
    width: 38px;
    height: 16px;
    border-radius: 99px;
    background: var(--graphite);
    transform: translateX(-50%) scale(calc(min(max((var(--progress) - .54) * 6, 0), 1)));
    box-shadow: 25px 6px 0 -9px rgba(122,85,54,.24), -22px 8px 0 -8px rgba(122,85,54,.18);
}

.pin-back {
    position: absolute;
    inset: auto 32px 32px auto;
    width: 92px;
    height: 24px;
    border: 3px solid rgba(47,49,54,.82);
    border-radius: 50%;
    transform: rotate(-12deg);
    opacity: calc(min(max((var(--progress) - .78) * 5, 0), 1));
}

.portrait-slot {
    position: absolute;
    top: 78px;
    left: 30px;
    width: 103px;
    height: 128px;
    border-radius: 18px 18px 25px 15px;
    border: 3px solid var(--graphite);
    background: var(--graph-blue);
    box-shadow: inset 8px -9px 0 rgba(94,75,139,.16);
    transform: translateY(calc((1 - min(max((var(--progress) - .15) * 5, 0), 1)) * 38px));
    opacity: calc(min(max((var(--progress) - .12) * 5, 0), 1));
    overflow: hidden;
}

.portrait-shape { position: absolute; }
.portrait-shape.head { width: 42px; height: 42px; border-radius: 50%; background: var(--sticker-coral); left: 31px; top: 25px; }
.portrait-shape.shoulder { width: 86px; height: 54px; border-radius: 50% 50% 0 0; background: var(--stamp-violet); left: 9px; bottom: -7px; }
.portrait-shape.moon { width: 40px; height: 40px; border-radius: 50%; background: var(--plastic-glow); right: -11px; top: -9px; }

.field, .domain-strip, .serial, .favorite-mark {
    position: absolute;
    z-index: 3;
}

.field {
    font-family: "Atkinson Hyperlegible", sans-serif;
    background: rgba(255,255,255,.72);
    border: 2px solid rgba(47,49,54,.72);
    padding: .35rem .55rem;
    border-radius: 9px;
}

.name-field {
    top: 92px;
    right: 24px;
    transform: rotate(1.8deg);
    opacity: calc(min(max((var(--progress) - .2) * 4, 0), 1));
}
.handle-field {
    top: 145px;
    right: 20px;
    background: var(--plastic-glow);
    transform: rotate(-2deg);
    opacity: calc(min(max((var(--progress) - .28) * 4, 0), 1));
}

.domain-strip {
    left: 28px;
    right: 28px;
    bottom: 74px;
    padding: .58rem .7rem;
    background: var(--graphite);
    color: var(--desk-cream);
    font-family: "Fraunces", serif;
    font-weight: 800;
    font-size: 1.45rem;
    border-radius: 14px;
    text-align: center;
    letter-spacing: -.035em;
}

.serial {
    left: 31px;
    bottom: 42px;
    font-family: "IBM Plex Mono", monospace;
    font-weight: 700;
    color: var(--stamp-violet);
    font-size: .78rem;
}

.favorite-mark {
    top: 220px;
    left: 35px;
    font-family: "Gabarito", sans-serif;
    background: var(--highlighter-lime);
    padding: .38rem .55rem;
    border-radius: 99px;
    transform: rotate(-8deg) scale(calc(min(max((var(--progress) - .44) * 5, 0), 1)));
}

.stamp-ring {
    position: absolute;
    top: 206px;
    right: 25px;
    width: 96px;
    height: 96px;
    border: 7px double var(--stamp-violet);
    border-radius: 50%;
    color: var(--stamp-violet);
    display: grid;
    place-items: center;
    text-align: center;
    text-transform: uppercase;
    font-family: "IBM Plex Mono", monospace;
    font-size: .72rem;
    font-weight: 700;
    opacity: calc(min(max((var(--progress) - .34) * 6, 0), 1));
    transform: rotate(12deg) scale(calc(.4 + min(max((var(--progress) - .34) * 6, 0), 1) * .6));
    mix-blend-mode: multiply;
}

.mood-sticker, .lime-sticker {
    position: absolute;
    z-index: 6;
    display: grid;
    place-items: center;
    text-align: center;
    font-family: "Gabarito", sans-serif;
    font-weight: 900;
    line-height: .9;
    border: 2px solid var(--graphite);
    box-shadow: 4px 5px 0 rgba(47,49,54,.2);
}

.mood-sticker {
    width: 78px;
    height: 78px;
    right: 36px;
    top: 275px;
    background: var(--sticker-coral);
    border-radius: 36% 64% 45% 55% / 58% 35% 65% 42%;
    clip-path: polygon(0 0, 88% 0, 100% 20%, 100% 100%, 0 100%);
    transform: rotate(9deg) translateY(calc((1 - min(max((var(--progress) - .48) * 5, 0), 1)) * 90px));
}

.lime-sticker {
    width: 70px;
    height: 58px;
    left: 142px;
    top: 230px;
    background: var(--highlighter-lime);
    border-radius: 16px 19px 13px 21px;
    transform: rotate(-5deg) scale(calc(min(max((var(--progress) - .52) * 5, 0), 1)));
}

.cmyk-dots { position: absolute; top: 46px; right: 28px; display: flex; gap: 5px; }
.cmyk-dots i { width: 10px; height: 10px; border-radius: 50%; display: block; opacity: .78; }
.cmyk-dots i:nth-child(1) { background: var(--graph-blue); transform: translate(1px, -1px); }
.cmyk-dots i:nth-child(2) { background: var(--sticker-coral); }
.cmyk-dots i:nth-child(3) { background: var(--highlighter-lime); transform: translate(-2px, 1px); }
.cmyk-dots i:nth-child(4) { background: var(--stamp-violet); transform: translate(-3px, -1px); }

.air-bubbles {
    position: absolute;
    inset: 0;
    opacity: calc(min(max((var(--progress) - .66) * 5, 0), 1));
    z-index: 9;
}
.air-bubbles span {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.9);
    background: rgba(215,255,241,.24);
    transform: translate(calc((var(--mxn, 0) - .5) * 14px), calc((var(--myn, 0) - .5) * 14px));
}
.air-bubbles span:nth-child(1) { left: 55px; top: 65px; }
.air-bubbles span:nth-child(2) { right: 42px; top: 162px; width: 12px; height: 12px; }
.air-bubbles span:nth-child(3) { left: 128px; bottom: 100px; width: 24px; height: 24px; }
.air-bubbles span:nth-child(4) { right: 65px; bottom: 52px; width: 9px; height: 9px; }
.air-bubbles span:nth-child(5) { left: 36px; bottom: 180px; width: 13px; height: 13px; }

.laminate-sheen {
    position: absolute;
    inset: -20%;
    z-index: 10;
    background: linear-gradient(115deg, transparent 8%, rgba(255,255,255,.05) 25%, rgba(215,255,241,.7) 43%, rgba(255,255,255,.32) 49%, transparent 68%);
    transform: translateX(calc(-130% + min(max((var(--progress) - .66) * 3.5, 0), 1) * 245%)) rotate(0deg);
    mix-blend-mode: screen;
}

.ruler {
    position: absolute;
    left: -7vw;
    top: 9vh;
    width: 48vw;
    height: 54px;
    transform: rotate(-13deg);
    background: rgba(141,185,232,.72);
    border: 3px solid rgba(47,49,54,.7);
    box-shadow: 9px 13px 0 rgba(122,85,54,.15);
}
.ruler span { display: inline-block; width: 14%; height: 27px; border-right: 2px solid var(--graphite); }

.ink-pad {
    position: absolute;
    right: -55px;
    top: 20vh;
    width: 180px;
    height: 126px;
    border-radius: 24px;
    background: var(--stamp-violet);
    color: rgba(246,232,200,.85);
    display: grid;
    place-items: center;
    font-family: "IBM Plex Mono", monospace;
    font-weight: 700;
    transform: rotate(10deg);
    box-shadow: inset 0 0 0 12px rgba(47,49,54,.18), 10px 15px 0 rgba(122,85,54,.2);
}

.lanyard {
    position: absolute;
    left: 7vw;
    bottom: -14vh;
    width: 56vw;
    height: 180px;
    border: 18px solid transparent;
    border-top-color: var(--sticker-coral);
    border-radius: 50%;
    transform: rotate(8deg);
    filter: drop-shadow(7px 8px 0 rgba(122,85,54,.16));
}
.lanyard::after {
    content: "";
    position: absolute;
    inset: -18px;
    border: 6px dashed rgba(246,232,200,.7);
    border-bottom: 0;
    border-radius: 50%;
}

.thumb-smudge {
    position: absolute;
    left: 11vw;
    top: 62vh;
    width: 90px;
    height: 138px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(122,85,54,.16), transparent 70%);
    transform: rotate(28deg);
}

.stamp-tool {
    position: absolute;
    left: calc(50% + 145px);
    top: calc(50% - 310px + min(max((var(--progress) - .34) * 8, 0), 1) * 100px - min(max((var(--progress) - .42) * 8, 0), 1) * 100px);
    width: 110px;
    height: 78px;
    border-radius: 18px 18px 8px 8px;
    background: var(--shadow-brown);
    color: var(--desk-cream);
    display: grid;
    place-items: center;
    font-family: "IBM Plex Mono", monospace;
    font-weight: 700;
    transform: rotate(10deg);
    box-shadow: 0 14px 0 rgba(47,49,54,.35);
    opacity: calc(min(max((var(--progress) - .28) * 6, 0), 1) * (1 - min(max((var(--progress) - .53) * 5, 0), 1)));
}

.laminate-film {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 410px;
    height: 520px;
    border-radius: 26px;
    background: linear-gradient(110deg, rgba(215,255,241,.12), rgba(215,255,241,.62), rgba(255,255,255,.2));
    border: 2px solid rgba(255,255,255,.62);
    transform: translate(calc(-50% - 360px + min(max((var(--progress) - .63) * 3, 0), 1) * 720px), -50%) rotate(-4deg);
    opacity: calc(min(max((var(--progress) - .62) * 5, 0), 1) * (1 - min(max((var(--progress) - .86) * 5, 0), 1)));
}

h1, h2 {
    font-family: "Fraunces", serif;
    font-weight: 800;
    line-height: .9;
    letter-spacing: -.06em;
    max-width: 760px;
    margin: 0;
}
h1 { font-size: clamp(3rem, 8vw, 7.8rem); }
h2 { font-size: clamp(3rem, 7vw, 7rem); }
p { font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.45; }
.mono { font-family: "IBM Plex Mono", monospace; font-weight: 700; letter-spacing: .04em; }

.paper-layer {
    position: absolute;
    inset: 8vh auto auto 8vw;
    width: 36vw;
    height: 52vh;
    background: var(--plastic-glow);
    border: 2px solid rgba(47,49,54,.32);
    transform: rotate(-7deg);
    box-shadow: 10px 13px 0 rgba(122,85,54,.12);
}
.graph-paper {
    background-image: repeating-linear-gradient(0deg, rgba(141,185,232,.42) 0 1px, transparent 1px 32px), repeating-linear-gradient(90deg, rgba(141,185,232,.42) 0 1px, transparent 1px 32px);
}

.receipt-note {
    background: rgba(255,255,255,.62);
    border: 2px solid rgba(47,49,54,.5);
    box-shadow: 6px 8px 0 rgba(122,85,54,.13);
    padding: 1rem 1.1rem;
    max-width: 320px;
    position: relative;
}
.receipt-note::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 12px;
    background: linear-gradient(135deg, transparent 8px, rgba(255,255,255,.62) 0) 0 0/16px 12px;
}
.receipt-note strong { display: block; font-family: "Fraunces", serif; font-size: 2rem; margin: .35rem 0; }
.note-one { position: absolute; left: 10vw; bottom: 12vh; transform: rotate(3deg); }
.slide-tab {
    position: absolute;
    left: calc(50% + 95px);
    top: calc(50% + 175px);
    border: 2px solid var(--graphite);
    background: var(--highlighter-lime);
    border-radius: 999px;
    padding: .85rem 1.2rem;
    font-family: "Gabarito", sans-serif;
    font-weight: 900;
    font-size: 1rem;
    color: var(--graphite);
    box-shadow: 4px 5px 0 rgba(47,49,54,.24);
    cursor: pointer;
    transform: rotate(-4deg);
    pointer-events: auto;
}
.binder-moons { position: absolute; right: 16vw; bottom: 15vh; display: grid; gap: 22px; }
.binder-moons span { width: 54px; height: 54px; border-radius: 50%; background: var(--desk-cream); box-shadow: inset 8px 5px 0 rgba(122,85,54,.18); border: 2px solid rgba(47,49,54,.25); }

.scene-photo { padding-top: 16vh; }
.scene-photo h1 { margin-left: 4vw; transform: rotate(-2deg); color: var(--stamp-violet); }
.tape-label {
    display: inline-block;
    padding: .7rem 1.4rem;
    background: rgba(255,111,97,.78);
    font-family: "Gabarito", sans-serif;
    font-weight: 900;
    transform: rotate(-5deg);
    margin-bottom: 2rem;
    box-shadow: 6px 8px 0 rgba(122,85,54,.16);
}
.margin-note {
    max-width: 300px;
    background: var(--plastic-glow);
    padding: 1rem;
    border-left: 8px solid var(--graph-blue);
    box-shadow: 7px 8px 0 rgba(122,85,54,.13);
}
.scene-photo .margin-note { margin-left: auto; margin-right: 7vw; transform: rotate(4deg); }
.scribble-arrow { position: absolute; width: 250px; left: 20vw; bottom: 18vh; }
.scribble-arrow path { fill: none; stroke: var(--sticker-coral); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 400; stroke-dashoffset: calc(400 - min(max((var(--progress) - .18) * 4, 0), 1) * 400); }

.scene-stamp { background: linear-gradient(120deg, rgba(246,232,200,.9), rgba(141,185,232,.34)); }
.scene-stamp h2 { color: var(--graphite); margin-left: 48vw; padding-top: 12vh; transform: rotate(3deg); }
.stamp-copy { margin-left: 8vw; margin-top: 12vh; max-width: 340px; background: rgba(246,232,200,.78); padding: 1.2rem; border: 2px solid rgba(47,49,54,.42); transform: rotate(-4deg); }
.ticket-edge { position: absolute; left: -30px; top: 15vh; width: 230px; height: 62vh; background: var(--sticker-coral); opacity: .85; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 95%, 8% 92%, 0 89%, 0 82%, 8% 79%, 0 76%, 0 69%, 8% 66%, 0 63%, 0 56%, 8% 53%, 0 50%, 0 43%, 8% 40%, 0 37%, 0 30%, 8% 27%, 0 24%, 0 17%, 8% 14%, 0 11%); }
.rail { position: absolute; right: 7vw; bottom: 12vh; display: flex; gap: 1rem; transform: rotate(-2deg); }
.rail span { font-family: "Gabarito", sans-serif; background: var(--plastic-glow); border: 2px solid var(--graphite); border-radius: 999px; padding: .7rem 1rem; }

.scene-stickers { background: rgba(246,232,200,.96); }
.scene-stickers h2 { color: var(--sticker-coral); padding-top: 7vh; margin-left: 7vw; transform: rotate(-3deg); }
.sticker-note { position: absolute; right: 10vw; top: 16vh; transform: rotate(5deg); }
.sticker-scrap {
    position: absolute;
    pointer-events: auto;
    cursor: grab;
    font-family: "Gabarito", sans-serif;
    font-weight: 900;
    border: 2px solid var(--graphite);
    box-shadow: 7px 9px 0 rgba(47,49,54,.2);
    padding: 1rem 1.2rem;
    transition: transform .2s ease;
}
.sticker-scrap.is-nudged { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1.03); }
.coral { background: var(--sticker-coral); }
.lime { background: var(--highlighter-lime); }
.blue { background: var(--graph-blue); }
.scrap-one { left: 12vw; bottom: 19vh; border-radius: 32px 18px 28px 22px; transform: rotate(8deg); }
.scrap-two { right: 18vw; bottom: 12vh; border-radius: 50%; width: 150px; height: 150px; display: grid; place-items: center; text-align: center; transform: rotate(-10deg); }
.scrap-three { left: 22vw; top: 24vh; border-radius: 12px; transform: rotate(-7deg); }
.peel-corner { position: absolute; right: 30vw; top: 45vh; width: 116px; height: 92px; background: var(--plastic-glow); border: 2px solid var(--graphite); clip-path: polygon(0 0, calc(100% - min(max((var(--progress) - .48) * 2.6, 0), 1) * 54%) 0, 100% 50%, 100% 100%, 0 100%); transform: rotate(14deg); box-shadow: 8px 9px 0 rgba(122,85,54,.15); }

.scene-laminate { background: linear-gradient(100deg, rgba(215,255,241,.88), rgba(246,232,200,.82)); }
.scene-laminate h2 { margin-left: 9vw; padding-top: 9vh; color: var(--stamp-violet); }
.laminator-mouth { position: absolute; right: -4vw; top: 21vh; width: 38vw; min-width: 360px; height: 120px; background: var(--graphite); color: var(--desk-cream); display: grid; place-items: center; font-family: "IBM Plex Mono", monospace; font-weight: 700; border-radius: 26px 0 0 26px; box-shadow: -13px 15px 0 rgba(122,85,54,.18); }
.scene-laminate .margin-note { position: absolute; left: 12vw; bottom: 13vh; transform: rotate(-4deg); }
.temperature { position: absolute; right: 16vw; bottom: 18vh; background: var(--highlighter-lime); padding: .8rem 1rem; border: 2px solid var(--graphite); transform: rotate(3deg); }

.scene-mirror { min-height: 110vh; background: radial-gradient(circle at 72% 48%, rgba(215,255,241,.92), rgba(141,185,232,.28) 34%, transparent 35%), var(--desk-cream); }
.pocket-mirror { position: absolute; left: 50%; top: 48%; width: 420px; height: 520px; border-radius: 48% 50% 44% 52%; background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.9), rgba(215,255,241,.52) 28%, rgba(141,185,232,.42) 62%, rgba(47,49,54,.18)); border: 12px solid rgba(94,75,139,.72); box-shadow: inset 0 0 35px rgba(255,255,255,.68), 18px 22px 0 rgba(122,85,54,.18); transform: translate(-40%, -45%) rotate(7deg); }
.final-note { position: absolute; left: 8vw; bottom: 16vh; max-width: 410px; background: rgba(255,255,255,.68); border: 2px solid var(--graphite); padding: 1.4rem; transform: rotate(-3deg); box-shadow: 8px 10px 0 rgba(122,85,54,.16); }
.final-note h2 { font-size: clamp(2.8rem, 5vw, 5rem); color: var(--graphite); margin: .4rem 0; }

@media (max-width: 760px) {
    .edge-tabs { display: none; }
    .scene { padding: 3rem 1.2rem; }
    .badge-stage { left: calc(50% - 155px); top: 43vh; transform: rotate(calc(-6deg + var(--scene) * 2deg)) scale(.82); }
    .scene-photo h1, .scene-stamp h2, .scene-stickers h2, .scene-laminate h2 { margin-left: 0; padding-top: 3vh; }
    .sticker-note, .laminator-mouth, .rail { display: none; }
    .note-one { left: 1rem; bottom: 8vh; }
    .pocket-mirror { width: 310px; height: 390px; left: 58%; }
}