:root {
  /* typography tokens: JetBrains Mono sparingly for notification timestamps; Playfair Display** Display* Displa for indulgent diary fragments */
  --black: #0B0A10;
  --pink: #FF4FB8;
  --silver: #D9E2F1;
  --periwinkle: #8A7CFF;
  --lime: #C7FF2E;
  --champagne: #F6D7A7;
  --cherry: #B1123A;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --sans: "DM Sans", Inter, system-ui, sans-serif;
  --display: Monoton, Impact, fantasy;
  --serif: "Playfair Display", Georgia, serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--black); color: var(--silver); font-family: var(--sans); }
body { cursor: default; }
button { font: inherit; color: inherit; }

.chrome-noise { position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(circle at 20% 10%, rgba(255,79,184,.28), transparent 25%), radial-gradient(circle at 80% 75%, rgba(138,124,255,.26), transparent 28%), linear-gradient(125deg, #0B0A10 0%, #191722 36%, #08070b 62%, #24202b 100%); }
.chrome-noise::after { content: ""; position: absolute; inset: 0; opacity: .34; background-image: linear-gradient(90deg, transparent 0 9px, rgba(217,226,241,.08) 10px, transparent 11px), repeating-linear-gradient(-12deg, rgba(255,255,255,.04) 0 1px, transparent 1px 7px); mix-blend-mode: screen; }
.cursor-gloss { position: fixed; width: 190px; height: 190px; border-radius: 50%; pointer-events: none; z-index: 2; opacity: .45; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(217,226,241,.3), rgba(255,79,184,.11) 35%, transparent 67%); filter: blur(8px); }

.planner-tabs { position: fixed; top: 22px; left: 50%; transform: translateX(-50%) rotate(-2deg); display: flex; gap: 5px; z-index: 20; }
.tab { border: 1px solid rgba(217,226,241,.65); border-bottom: 0; background: linear-gradient(#f6d7a7, #ff4fb8); color: var(--black); padding: 10px 18px 16px; border-radius: 14px 14px 4px 4px; box-shadow: inset 0 1px rgba(255,255,255,.8), 0 12px 26px rgba(0,0,0,.35); font-family: var(--mono); font-size: 12px; letter-spacing: .05em; transition: transform .35s, background .35s; }
.tab:nth-child(even) { background: linear-gradient(#d9e2f1, #8a7cff); }
.tab.active { transform: translateY(11px); background: linear-gradient(#c7ff2e, #ff4fb8); }

.purse-chain { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 18; display: grid; gap: 12px; }
.link { width: 18px; height: 28px; border: 3px solid var(--silver); border-radius: 50%; display: block; box-shadow: inset 0 0 8px rgba(255,255,255,.7), 0 0 12px rgba(217,226,241,.45); opacity: .38; transition: .4s; }
.link.active { border-color: var(--lime); opacity: 1; transform: rotate(28deg) scale(1.14); box-shadow: 0 0 18px var(--lime); }

.story-shell { position: relative; z-index: 5; width: 100vw; height: 100vh; perspective: 1100px; }
.scene { position: absolute; inset: 0; min-height: 100vh; padding: 8vh 8vw; overflow: hidden; opacity: 0; transform: translateX(80vw) rotateZ(7deg) scale(.9); transition: transform .9s cubic-bezier(.2,.9,.16,1), opacity .65s; }
.scene.active { opacity: 1; transform: translateX(0) rotateZ(0) scale(1); }
.scene.prev { transform: translateX(-70vw) rotateZ(-8deg) scale(.92); }
.scene::before { content: ""; position: absolute; inset: 9vh 6vw; border: 1px solid rgba(217,226,241,.24); transform: rotate(-5deg); background: linear-gradient(100deg, rgba(217,226,241,.08), rgba(255,79,184,.06), transparent); border-radius: 32px; box-shadow: inset 0 0 60px rgba(217,226,241,.08); }
.micro, .mono { font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; }

.compact { position: relative; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #fff 0 3%, #D9E2F1 4% 9%, #7b8294 28%, #12111a 57%, #D9E2F1 73%, #6b6d7d 100%); box-shadow: inset -22px -22px 60px rgba(0,0,0,.82), inset 12px 8px 32px rgba(255,255,255,.82), 0 32px 90px rgba(0,0,0,.65), 0 0 70px rgba(138,124,255,.28); }
.compact-main { width: min(68vh, 620px); height: min(68vh, 620px); margin: 10vh auto 0; transform: rotate(-7deg); }
.mirror-flare { position: absolute; inset: 11%; border-radius: 50%; background: linear-gradient(120deg, transparent 24%, rgba(255,255,255,.92) 31%, transparent 38%, transparent 58%, rgba(255,79,184,.38) 63%, transparent 69%); animation: shimmer 4.5s infinite; }
h1, h2, .time-stamp { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
h1 { position: relative; z-index: 1; margin: 0; color: var(--pink); font-size: clamp(48px, 10vw, 135px); line-height: .72; text-align: center; text-shadow: 0 0 8px var(--pink), 0 0 24px var(--periwinkle), 7px 7px 0 var(--black); }
h2 { margin: .2em 0; color: var(--pink); font-size: clamp(32px, 5vw, 76px); line-height: .88; text-shadow: 0 0 12px rgba(255,79,184,.7); }
p { font-size: clamp(16px, 1.8vw, 24px); line-height: 1.35; }
.lipstick-start, .reset-night, .reveal-sticker, .sticker { border: 1px solid rgba(217,226,241,.6); border-radius: 999px; background: rgba(255,79,184,.82); color: var(--black); padding: 12px 18px; box-shadow: 0 12px 30px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.8); }
.lipstick-start { position: absolute; bottom: 14%; z-index: 3; font-family: var(--mono); text-transform: uppercase; }
.lipstick-mark { width: 0; height: 10px; display: inline-block; border-radius: 9px; background: var(--cherry); margin-right: 8px; transform: rotate(-13deg); transition: width .55s; }
.lipstick-start.checked .lipstick-mark { width: 52px; }
.alert-stack { position: absolute; right: 9vw; top: 20vh; display: grid; gap: 16px; transform: rotate(6deg); }
.notif { display: block; background: linear-gradient(135deg, rgba(217,226,241,.92), rgba(138,124,255,.88)); color: var(--black); animation: pop 2.8s infinite; }
.notif.delay { animation-delay: .45s; background: linear-gradient(135deg, var(--pink), var(--champagne)); }
.notif.late { animation-delay: .9s; background: linear-gradient(135deg, var(--lime), var(--silver)); }
.receipt { position: absolute; width: 280px; padding: 26px; background: linear-gradient(#F6D7A7, #e9bd82); color: var(--black); box-shadow: 0 28px 54px rgba(0,0,0,.45); font-family: var(--serif); }
.receipt::after { content: ""; position: absolute; left: 0; right: 0; bottom: -14px; height: 14px; background: repeating-linear-gradient(135deg, #e9bd82 0 12px, transparent 12px 24px); }
.receipt-left { left: 9vw; bottom: 12vh; transform: rotate(8deg); }
.receipt strong, .receipt em { display: block; margin-top: 12px; }
.drink-ring { position: absolute; border: 14px solid rgba(217,226,241,.18); border-radius: 50%; width: 210px; height: 210px; }
.ring-a { left: 18vw; top: 17vh; transform: rotate(24deg); }
.phone-prop { position: absolute; right: 18vw; bottom: 13vh; width: 110px; height: 170px; border-radius: 24px; background: linear-gradient(135deg, #D9E2F1, #5d6070); color: var(--black); display: grid; place-items: center; font-size: 54px; transform: rotate(-15deg); animation: buzz 1.8s infinite; }
.phone-prop span { position: absolute; bottom: 16px; font: 10px var(--mono); text-transform: uppercase; }

.time-stamp { position: absolute; top: 12vh; left: 7vw; font-size: clamp(76px, 17vw, 210px); color: transparent; -webkit-text-stroke: 2px var(--silver); text-shadow: 0 0 26px rgba(138,124,255,.58); transform: rotate(-8deg); }
.planner-scrap { position: relative; z-index: 2; max-width: 620px; margin: 32vh 0 0 8vw; padding: 34px; color: var(--black); border-radius: 24px; transform: rotate(-4deg); box-shadow: 0 30px 70px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.75); }
.pink-scrap { background: linear-gradient(135deg, rgba(255,79,184,.95), rgba(217,226,241,.88)); }
.lime-scrap { background: linear-gradient(135deg, var(--lime), var(--champagne)); }
.side-compact { position: absolute; right: 12vw; top: 22vh; width: 340px; height: 340px; transform: rotate(11deg); color: var(--pink); font: 46px var(--display); }
.nails { position: absolute; display: flex; gap: 10px; }
.nails-one { right: 18vw; bottom: 14vh; transform: rotate(-10deg); }
.nails i { width: 28px; height: 110px; border-radius: 20px 20px 48px 48px; background: linear-gradient(var(--pink), var(--cherry)); box-shadow: inset 0 2px rgba(255,255,255,.7); animation: tap 1.5s infinite alternate; }
.nails i:nth-child(2) { animation-delay: .15s; } .nails i:nth-child(3) { animation-delay: .3s; } .nails i:nth-child(4) { animation-delay: .45s; }
.chrome-chain { position: absolute; left: 46vw; bottom: 10vh; width: 42vw; height: 80px; border-radius: 50%; border-top: 12px dotted var(--silver); filter: drop-shadow(0 0 12px var(--silver)); transform: rotate(-13deg); }
.folder-tab { position: absolute; right: 5vw; top: 55vh; background: var(--periwinkle); color: var(--black); padding: 14px 30px; border-radius: 18px 18px 0 0; transform: rotate(86deg); font-family: var(--mono); }

.inbox-receipt { left: 11vw; top: 25vh; width: 420px; transform: rotate(-5deg); }
.receipt-list { font-family: var(--mono); list-style: none; padding: 0; line-height: 1.9; }
.martini { position: absolute; right: 16vw; top: 23vh; width: 330px; height: 440px; filter: drop-shadow(0 35px 45px rgba(0,0,0,.6)); }
.glass-bowl { width: 330px; height: 190px; clip-path: polygon(0 0,100% 0,58% 100%,42% 100%); background: linear-gradient(135deg, rgba(217,226,241,.74), rgba(255,79,184,.24)); border: 3px solid var(--silver); }
.glass-stem { width: 14px; height: 190px; background: var(--silver); margin: -2px auto 0; box-shadow: 0 0 22px var(--silver); }
.olive { position: absolute; width: 34px; height: 34px; border-radius: 50%; background: var(--lime); border: 6px solid var(--cherry); top: 72px; animation: float 3s infinite; }
.olive.one { left: 112px; } .olive.two { left: 166px; animation-delay: .6s; }
.bubble-row { position: absolute; right: 12vw; bottom: 17vh; display: grid; gap: 14px; transform: rotate(4deg); }
.chat-bubble { background: var(--silver); color: var(--black); }
.tape-two { position: absolute; left: 0; right: 0; bottom: 16vh; height: 18px; background: linear-gradient(90deg, transparent, var(--silver), var(--pink), var(--silver), transparent); transform: rotate(-7deg); box-shadow: 0 0 26px var(--pink); }

.dance-grid { position: absolute; inset: 18vh 9vw; transform: rotate(-7deg); background-image: linear-gradient(rgba(217,226,241,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(217,226,241,.14) 1px, transparent 1px); background-size: 90px 90px; }
.dance-grid span { position: absolute; width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle, var(--pink), transparent 68%); animation: disco 2.2s infinite; }
.dance-grid span:nth-child(1){left:12%;top:16%;}.dance-grid span:nth-child(2){left:74%;top:9%;animation-delay:.3s}.dance-grid span:nth-child(3){left:54%;top:50%;animation-delay:.6s}.dance-grid span:nth-child(4){left:26%;top:72%;animation-delay:.9s}.dance-grid span:nth-child(5){left:85%;top:70%;animation-delay:1.2s}.dance-grid span:nth-child(6){left:45%;top:22%;animation-delay:1.5s}
.handbag { position: absolute; right: 15vw; bottom: 13vh; width: 230px; height: 155px; border-radius: 45px 45px 22px 22px; background: linear-gradient(135deg, var(--cherry), var(--pink)); box-shadow: inset 0 2px rgba(255,255,255,.55), 0 28px 58px rgba(0,0,0,.55); animation: swing 2.7s infinite ease-in-out; }
.handbag span { position: absolute; left: 48px; right: 48px; top: -70px; height: 90px; border: 10px solid var(--silver); border-bottom: 0; border-radius: 80px 80px 0 0; }
.lip-print { position: absolute; left: 52vw; top: 58vh; background: var(--cherry); color: white; transform: rotate(14deg); }
.rhinestones { position: absolute; left: 13vw; bottom: 16vh; display: flex; gap: 20px; }
.rhinestones i { width: 18px; height: 18px; background: var(--silver); transform: rotate(45deg); box-shadow: 0 0 16px var(--silver); animation: twinkle 1.4s infinite alternate; }

.done-list { position: relative; z-index: 2; margin: 22vh auto 0; max-width: 720px; padding: 42px; color: var(--black); background: linear-gradient(135deg, var(--champagne), var(--silver)); border-radius: 28px; transform: rotate(3deg); box-shadow: 0 32px 80px rgba(0,0,0,.55); }
.diary { font-family: var(--serif); font-size: clamp(25px, 4vw, 46px); color: var(--cherry); }
.checks { display: grid; grid-template-columns: 1fr 70px; gap: 14px; font-family: var(--mono); text-transform: uppercase; }
.checks b { height: 12px; background: var(--lime); border-radius: 999px; transform: rotate(-10deg); box-shadow: 0 0 14px var(--lime); }
.final-compact { position: absolute; right: 6vw; top: 16vh; width: 230px; height: 230px; color: var(--lime); font: 38px var(--display); }
.reset-night { position: absolute; left: 50%; bottom: 8vh; transform: translateX(-50%); background: var(--lime); color: var(--black); font-family: var(--mono); text-transform: uppercase; }

.appointment-tape { position: absolute; inset: 0; pointer-events: none; }
.appointment-tape svg { position: absolute; width: 100%; height: 45vh; top: 31vh; transform: rotate(-7deg); }
.appointment-tape path { fill: none; stroke: url(#none); stroke: var(--silver); stroke-width: 12; stroke-linecap: round; filter: drop-shadow(0 0 16px var(--pink)); stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: drawTape 2.4s .4s forwards; }
.note-drawer { position: fixed; left: 24px; bottom: 24px; z-index: 30; max-width: 360px; padding: 18px 22px; background: rgba(11,10,16,.86); border: 1px solid var(--pink); color: var(--silver); border-radius: 18px; box-shadow: 0 0 30px rgba(255,79,184,.35); transform: translateY(140%); transition: transform .45s; }
.note-drawer.show { transform: translateY(0); }
.note-drawer p { margin: 6px 0 0; font-family: var(--serif); }

@keyframes shimmer { 0%,100%{transform:translateX(-25%) rotate(0); opacity:.45} 50%{transform:translateX(25%) rotate(18deg); opacity:.9} }
@keyframes pop { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-10px) scale(1.04)} }
@keyframes buzz { 0%,100%{transform:rotate(-15deg) translate(0)} 20%{transform:rotate(-13deg) translate(2px,-1px)} 40%{transform:rotate(-17deg) translate(-2px,1px)} }
@keyframes tap { to { transform: translateY(18px) rotate(3deg); } }
@keyframes float { 50% { transform: translateY(-24px) rotate(24deg); } }
@keyframes disco { 50% { transform: scale(1.8); opacity: .25; } }
@keyframes swing { 50% { transform: rotate(7deg) translateY(-18px); } }
@keyframes twinkle { to { transform: rotate(90deg) scale(1.45); opacity: .45; } }
@keyframes drawTape { to { stroke-dashoffset: 0; } }

@media (max-width: 760px) {
  .planner-tabs { top: 8px; gap: 2px; }
  .tab { padding: 8px 9px 13px; font-size: 10px; }
  .scene { padding: 9vh 5vw; }
  .compact-main { width: 86vw; height: 86vw; margin-top: 17vh; }
  .alert-stack, .phone-prop, .side-compact, .chrome-chain, .folder-tab, .martini, .final-compact { opacity: .55; transform: scale(.75); }
  .planner-scrap, .done-list, .inbox-receipt { margin-left: 0; width: auto; max-width: 92vw; }
  .time-stamp { font-size: 72px; top: 12vh; }
}