:root {
  color-scheme: dark;
  --space: #130b27;
  --space-ink: #fcf6ff;
  --muted: #d1bfe7;
  --ink: #261447;
  --paper: #fdf2e1;
  --acid: #e7ff61;
  --violet: #a990ff;
  --pink: #ff9ac8;
  --orange: #ffb478;
  --mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --display: "Arial Black", "Arial Bold", Arial, sans-serif;
  --hand: "Comic Sans MS", "Bradley Hand", cursive;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font-family: Arial, sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
a { color: inherit; }
:focus-visible { outline: 3px solid #7754d9; outline-offset: 4px; }
.space > :not(main) :focus-visible, .book-nav :focus-visible, .space .skip:focus-visible {
  outline-color: var(--acid);
}

.space {
  min-height: 100vh;
  color: var(--space-ink);
  background-color: var(--space);
  background-image: url("/static/stars.svg"),
    radial-gradient(ellipse at 50% 40%, #38205e 0%, #1c1036 58%, #10091f 100%);
  background-size: 280px 250px, 100% 100%;
  background-attachment: fixed;
}
.shell { width: min(1140px, calc(100% - 88px)); margin-inline: auto; }
.skip {
  position: fixed;
  inset: 12px auto auto 12px;
  z-index: 20;
  padding: .7rem 1rem;
  background: var(--acid);
  color: var(--ink);
  transform: translateY(-150%);
}
.skip:focus { transform: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.masthead {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding-block: 20px 17px; border-bottom: 1px solid #a78dc550;
}
.wordmark {
  display: inline-flex; align-items: center; gap: .65rem;
  color: var(--space-ink); text-decoration: none; font: 900 .94rem/.96 var(--display);
  letter-spacing: -.045em; min-width: 0;
}
.wordmark img { flex: none; transform: rotate(-8deg); }
.wordmark-dot, .site-footer b { color: var(--acid); }
.signal, .book-meta, .site-footer, .cover-serial, .inventory-kicker, .inventory-foot,
.eyebrow, .page-state, .flight-stamp, .folio {
  font-family: var(--mono); font-weight: 700; letter-spacing: .1em; font-size: .69rem;
}
.signal { color: var(--muted); display: flex; gap: .6rem; align-items: center; }
.signal span { width: .5rem; height: .5rem; background: var(--acid); border-radius: 50%; box-shadow: 0 0 13px #dbff62a0; }
.utility { display: flex; gap: 1.35rem; align-items: center; }
.quiet {
  min-height: 42px; padding: .2rem .1rem; color: inherit; background: none; border: 0;
  font-weight: 700; font-size: .83rem; text-underline-offset: .27em;
}
.quiet:hover { text-decoration: underline; }
.quiet:disabled { opacity: .7; }
.control {
  display: inline-flex; justify-content: center; align-items: center; gap: .5rem;
  min-height: 44px; padding: .55rem .85rem; color: var(--ink); background: var(--acid);
  border: 1.5px solid var(--ink); border-radius: .43rem;
  font-size: .83rem; line-height: 1.2; font-weight: 800;
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.control:not(:disabled):hover { transform: translate(-1px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.control:not(:disabled):active { transform: translate(1px, 1px); box-shadow: none; }
.control:disabled { opacity: .55; box-shadow: none; }
.personal { background: var(--pink); box-shadow: 2px 2px 0 #e8b9ff44; }
.personal span { font-size: 1rem; }
.control.secondary { background: #f3e9ff; }
.control.danger { background: #ffadbc; }
.control.icon-btn { min-width: 42px; min-height: 42px; padding: 0; font-size: 1.55rem; background: var(--pink); }

.station { position: relative; isolation: isolate; }
.book-meta {
  display: flex; align-items: center; gap: .85rem;
  padding-block: 23px 14px; color: var(--muted);
}
.book-meta b { color: var(--acid); font-size: .87rem; }
.meta-line { height: 1px; flex: 1; background: #a78dc541; }
.book { position: relative; display: grid; grid-template-columns: 1fr 1fr; isolation: isolate; }
.notebook-size-probe, .notebook-size-probe * { animation: none !important; transition: none !important; }
.book::before {
  content: ""; position: absolute; z-index: -1; inset: 9px -8px -12px;
  background: repeating-linear-gradient(to bottom, #d1b9ee 0 2px, #ab85d2 2px 3px);
  border: 2px solid #271141; border-radius: 15px 18px 22px 18px;
  box-shadow: 0 5px 0 #9c72d0, 0 12px 0 #4c306e, 0 21px 40px #0a041a;
}
.paper { position: relative; min-width: 0; min-height: 541px; color: var(--ink); }
.cover {
  overflow: hidden; display: flex; flex-direction: column; align-items: flex-start;
  border-radius: 13px 2px 6px 13px;
  padding: 2.2rem 2.25rem 4.4rem;
  background:
    linear-gradient(to right, transparent 94%, #7d4aa832 99%, #46245c54 100%),
    linear-gradient(147deg, #e9d9ff 1%, #f3e7ff 47%, #dec0ff 100%);
}
.cover-grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .52;
  background:
    url("/static/paper.svg"),
    linear-gradient(#906abb36 1px, transparent 1px),
    linear-gradient(90deg, #906abb36 1px, transparent 1px);
  background-size: 150px 150px, 22px 22px, 22px 22px;
}
.cover-serial {
  position: relative; z-index: 1; display: flex; align-items: center; flex-wrap: wrap; gap: .4rem;
  background: #f8edff; border: 1px solid #5e4177; box-shadow: 2px 2px 0 #7556967a;
  padding: .35rem .6rem; transform: rotate(-2deg);
}
.pixel-cross { color: #6734a5; font-size: .93rem; }
.serial-divider { color: #7752a2; }
.cover-title { position: relative; z-index: 1; margin: 2.1rem 0 1.05rem -.15rem; }
.cover-title h1 {
  font: 1000 clamp(3.1rem, 6.35vw, 6.65rem)/.86 var(--display);
  letter-spacing: -.093em; margin: 0;
  transform: rotate(-5deg); text-shadow: .045em .045em 0 #a883ef, .08em .075em 0 #fff1ff;
}
#title-first { white-space: nowrap; }
#title-second { color: #2d1456; white-space: nowrap; }
.title-dot { color: #7728ad; }
.cover-star {
  position: absolute; bottom: -.19em; left: 60%;
  font-size: clamp(2.4rem, 5.3vw, 5.9rem); color: var(--acid);
  -webkit-text-stroke: 1.5px var(--ink);
  text-shadow: .04em .055em 0 var(--ink);
  transform: rotate(14deg); pointer-events: none;
}
.cover-copy { position: relative; z-index: 2; margin-top: 1.25rem; max-width: 56%; }
.subtitle-strip {
  display: inline-block; max-width: 100%;
  padding: .43rem .66rem; background: var(--acid); color: var(--ink); border: 1.5px solid var(--ink);
  box-shadow: 2px 3px 0 var(--ink); transform: rotate(-3deg);
  font: 900 .69rem/1.25 var(--mono); letter-spacing: .07em;
}
.cover-copy p {
  max-width: 15.5rem; margin: 1.25rem 0 0; padding: .25rem .2rem;
  font-size: 1.06rem; font-weight: 600; line-height: 1.48;
}
.cat {
  position: absolute; width: min(59%, 324px); height: auto; right: -.05rem; bottom: 1.05rem;
  transform: translate(var(--dx, 0), var(--dy, 0)) rotate(-6deg);
  pointer-events: none; filter: drop-shadow(3px 5px 0 #38245c4b);
}
.cover-note {
  position: absolute; z-index: 1; right: 1.7rem; bottom: 1.1rem;
  color: #45206b; font: 700 .92rem var(--hand); transform: rotate(-7deg);
}
.cover-note span { font-size: 1.25em; }
.folio { font-size: .74rem; color: #513477; }
.space:not(.admin-space) .folio,
.space:not(.admin-space) #page-count { display: none; }
.cover-folio { position: absolute; left: 2.15rem; bottom: 1.22rem; }
.pencil-stars { position: absolute; left: 2.55rem; bottom: 3.5rem; color: #7948a3; font-size: 1.4rem; letter-spacing: .4em; }

.binding {
  position: absolute; z-index: 5; pointer-events: none;
  inset: 10.5% auto 9% 50%; width: 24px; transform: translateX(-50%);
  display: flex; flex-direction: column; justify-content: space-between;
}
.binding i {
  position: relative; height: 10px; border-radius: 100%;
  border-top: 3px solid #583d69; border-bottom: 2px solid #7e6287;
  background: linear-gradient(180deg, #e3d0df 5%, #99819a 55%, #4d354f 100%);
  box-shadow: 0 2px 3px #24123f66;
}
.binding i::before, .binding i::after {
  position: absolute; z-index: -1; content: ""; width: 7px; height: 11px; top: -3px;
  background: #4c335e; border-radius: 50%;
}
.binding i::before { left: -2px; }
.binding i::after { right: -2px; }

.inventory {
  display: flex; flex-direction: column; align-items: stretch;
  border-radius: 2px 13px 13px 3px;
  padding: 2rem 2.25rem .94rem 2.3rem;
  background:
    linear-gradient(90deg, #7e465459 0%, transparent 6%),
    url("/static/paper.svg"),
    repeating-linear-gradient(to bottom, transparent 0 26px, #ba708118 26px 27px),
    linear-gradient(160deg, #fff6e9 0%, #ffecde 84%);
}
.inventory-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.inventory-kicker { margin: .08rem 0 .36rem; color: #673e83; }
.inventory h2 {
  margin: 0; font: 900 clamp(1.75rem, 3.1vw, 3.2rem)/1.04 var(--display); letter-spacing: -.075em;
  scroll-margin-top: 1rem;
}
.flight-stamp {
  flex: none; margin: .16rem 0 .3rem .1rem; text-align: center;
  color: #793c83; background: #fbd2f0; border: 1px dashed #793c83; outline: 1px solid #b177b5; outline-offset: 2px;
  line-height: 1.35; padding: .35rem .32rem; transform: rotate(8deg); font-size: .58rem;
}
.flight-stamp b { font-size: .72rem; }
.demo-note, .owner-note { font-size: .75rem; color: #624864; margin: .47rem 0 0; line-height: 1.35; }
.owner-note { font-weight: 700; }
.gift-list { display: grid; align-content: start; gap: .94rem; margin: .9rem 0 .65rem; }
.notebook-doodle-row {
  display: flex; align-items: center; height: 42px; padding-inline: .5rem;
  margin-block: -.45rem; pointer-events: none; user-select: none;
}
.notebook-doodle-row.doodle-right { justify-content: flex-end; }
.notebook-doodle-row.doodle-left { justify-content: flex-start; }
.notebook-doodle-row.doodle-ticket { height: 64px; }
.notebook-doodle-row svg {
  display: block; width: 44px; height: 44px; overflow: visible; opacity: .88;
  filter: drop-shadow(1px 1px 0 #39144018);
  transform-origin: 50% 80%;
  animation: notebook-doodle-wiggle 5.2s ease-in-out var(--doodle-delay) infinite;
}
@keyframes notebook-doodle-wiggle {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50% { transform: translateY(-1.3px) rotate(1.5deg); }
}
.notebook-doodle-row svg.notebook-doodle--ticket-spider { width: 68px; height: 68px; }
.ticket-legs { transform-origin: 50% 50%; transform-box: view-box; animation: ticket-scuttle .65s ease-in-out infinite alternate; }
.ticket-legs-b { animation-delay: -.65s; }
@keyframes ticket-scuttle {
  from { transform: rotate(-4deg) translateY(-.8px); }
  to { transform: rotate(4deg) translateY(.8px); }
}
.gift {
  --card: #e9dbff;
  --accent: #e7ff61;
  --art: #c4aafa;
  display: grid; grid-template-columns: minmax(105px, .78fr) minmax(0, 1.45fr); gap: .8rem;
  align-items: center; padding: .48rem .75rem .48rem .6rem;
  background: var(--card); border: 1.5px solid var(--ink); border-radius: .64rem;
  box-shadow: 3px 3px 0 var(--ink); position: relative;
}
.gift[data-tone="pink"] { --card: #ffdbea; --accent: #ffadcb; --art: #f7a5c5; }
.gift-art {
  position: relative; min-width: 0; min-height: 128px; align-self: stretch;
  padding: .16rem .12rem .25rem .04rem; display: grid;
}
.gift-picture {
  align-self: center; position: relative; min-height: 108px;
  height: 100%; max-height: 155px; display: grid; place-items: center;
  border: 1px solid #472e5b; background: var(--art);
  transform: rotate(-5deg); border-radius: .23rem; overflow: hidden;
  box-shadow: 2px 3px 0 #2b163f59;
}
.gift[data-tone="pink"] .gift-picture { transform: rotate(4deg); }
.gift-picture img {
  opacity: 0; position: absolute; width: 100%; height: 100%; inset: 0;
  object-fit: contain; object-position: center;
}
.gift-picture.has-image img { opacity: 1; }
.gift-picture.has-image .image-placeholder { display: none; }
.image-placeholder { font-size: 2.8rem; color: #3e2265; }
.gift-index {
  position: absolute; bottom: -.05rem; left: .02rem; padding: .2rem .35rem; color: var(--ink);
  border: 1px solid var(--ink); background: #fff2be; border-radius: 3px;
  font: 800 .64rem/1 var(--mono); transform: rotate(-7deg);
}
.gift-copy { min-width: 0; padding: .05rem 0; }
.gift-demo {
  display: inline-block; padding: .16rem .28rem; background: var(--ink);
  color: #fff6ff; border-radius: 2px; font: 700 .56rem/1 var(--mono); letter-spacing: .09em;
  vertical-align: middle;
}
.gift h3 { overflow-wrap: anywhere; font: 900 clamp(1.25rem, 2vw, 1.9rem)/1.01 var(--display); letter-spacing: -.045em; margin: .28rem 0 .28rem; }
.gift-description { overflow-wrap: anywhere; }
.price { display: inline; margin: 0 .37rem 0 0; font: 900 .96rem var(--mono); background: linear-gradient(transparent 46%, #f6ff82 46%); }
.price[hidden] { display: none; }
.note { display: inline; color: #4b345f; margin: 0; font-size: .78rem; line-height: 1.3; }
.gift-alternative { margin: .3rem 0 0; color: #4b345f; font-size: .68rem; line-height: 1.3; }
.gift-actions { display: flex; align-items: center; gap: .35rem .58rem; flex-wrap: wrap; margin-top: .4rem; }
.shop-link { display: inline-flex; align-items: center; min-height: 39px; font-size: .69rem; font-weight: 800; text-underline-offset: .2em; }
.shop-link:hover { color: #6731a3; }
.reserve { min-height: 42px; padding-inline: .52rem; background: var(--accent); font-size: .73rem; }
.gift-status {
  display: inline-block; padding: .42rem .49rem; color: #682242; border: 2px solid #983658;
  background: #ffe9ef; border-radius: .25rem; transform: rotate(-6deg);
  font: 900 .76rem var(--mono); letter-spacing: .07em;
}
.empty { margin: 1rem 0; font-size: 1.02rem; }
.inventory-foot {
  margin-top: auto; padding-top: .45rem; color: #5c4375;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  border-top: 1px solid #b991a99e; font-size: .61rem;
}

.book[data-spread="1"] .cover {
  background: linear-gradient(90deg, transparent 93%, #26686745), linear-gradient(145deg, #bff3dc, #d8f9b5 62%, #a6e3d7);
}
.book[data-spread="1"] .cover-title h1 { text-shadow: .045em .045em 0 #68bc9e, .08em .075em 0 #fffbd3; }
.book[data-spread="1"] .cover-star { left: 84%; color: #ffa6d8; }
.book[data-spread="1"] .inventory { background-color: #f5ffda; background-blend-mode: normal, multiply, normal, multiply; }
.book[data-spread="1"] .gift[data-slot="0"] {
  border-radius: .25rem .8rem .4rem .4rem; --card: #e6f5be; --art: #b6e1b5; --accent: #ffd285;
}
.book[data-spread="1"] .gift[data-slot="1"] { --card: #ffe6bd; --art: #ffca8d; --accent: #d2fbae; }
.book[data-spread="2"] .cover {
  background: linear-gradient(90deg, transparent 93%, #88435a45), linear-gradient(147deg, #ffc9e2, #ffe2ed 48%, #f1ace7);
}
.book[data-spread="2"] .cover-title h1 { text-shadow: .045em .045em 0 #e585c6, .08em .075em 0 #fff3ff; }
.book[data-spread="2"] .cover-star { left: 83%; color: #a5dcff; }
.book[data-spread="2"] .inventory { background-color: #ffe9fc; background-blend-mode: normal, multiply, normal, multiply; }
.book[data-spread="2"] .gift[data-slot="0"] {
  border-style: dashed; --card: #d9eeff; --art: #9eccf4; --accent: #f9b9ed;
}
.book[data-spread="2"] .gift[data-slot="1"] { --card: #f8dfff; --art: #e9b8eb; --accent: #afdefd; }
.book[data-spread]:not([data-spread="0"]) .cover-title h1 { font-size: clamp(2.55rem, 5.7vw, 5.9rem); }

.book-nav {
  display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 30px auto 17px;
}
.book-nav .control { min-width: 112px; min-height: 45px; padding-inline: .95rem; }
.book-nav .control span[aria-hidden] { font-size: 1.17rem; }
.book-nav .prev { background: #f0e3ff; }
.book-nav .next { background: var(--acid); }
.page-state { text-align: center; min-width: 145px; color: var(--space-ink); font-size: .65rem; }
.page-dots { display: flex; justify-content: center; gap: .13rem; }
.page-dot {
  width: 25px; height: 24px; padding: 0; border: 0; color: var(--muted); background: transparent;
  display: grid; place-items: center;
}
.page-dot::before { content: ""; width: .47rem; height: .47rem; border-radius: 50%; background: currentColor; }
.page-dot[aria-current] { color: var(--acid); }
.page-dot[aria-current]::before { box-shadow: 0 0 8px #d9fd74ab; }
.site-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border-top: 1px solid #a78dc550; color: var(--muted); font-size: .61rem; padding: 3px 0 10px;
}
.site-footer .quiet { font-size: .7rem; font-family: Arial, sans-serif; }
.site-footer .quiet[aria-pressed="true"] { color: var(--acid); }
.noscript { padding: 1rem; background: var(--space); }

.orbit-decoration { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.orbit-decoration img, .space-spark { position: absolute; }
.comet { top: 40px; right: -1.95rem; width: 117px; transform: rotate(-10deg); opacity: .9; }
.rocket { bottom: -1.2rem; left: -3.4rem; width: 113px; transform: rotate(-5deg); }
.space-spark { color: var(--acid); font-size: 1.4rem; }
.spark-a { left: -1.8rem; top: 13%; }
.spark-b { right: -1.75rem; top: 61%; color: #c99cff; }
.spark-c { left: 17%; bottom: .1rem; color: #ff9ac8; font-size: .9rem; }
.spark-d { right: 14%; bottom: .85rem; color: #e6ff68; }
.turn-forward .inventory { transform-origin: left; animation: page-in .48s cubic-bezier(.2,.55,.3,1) both; }
.turn-back .cover { transform-origin: right; animation: page-in .48s cubic-bezier(.2,.55,.3,1) both; }
.turn-forward .gift, .turn-back .gift { animation: paste-in .39s .1s both; }
.turn-forward .gift[data-slot="1"], .turn-back .gift[data-slot="1"] { animation-delay: .19s; }
@keyframes page-in {
  from { transform: perspective(1100px) rotateY(-15deg); filter: brightness(.85); }
  to { transform: none; filter: none; }
}
@keyframes paste-in {
  from { opacity: .3; transform: translateY(-11px) rotate(-2deg); }
  to { opacity: 1; transform: none; }
}

dialog {
  width: min(490px, calc(100% - 34px)); max-height: calc(100dvh - 34px);
  color: var(--ink); background: #fff0f9 url("/static/paper.svg");
  border: 2px solid var(--ink); border-radius: .9rem; box-shadow: 6px 6px 0 var(--violet);
  padding: 1.55rem; overflow: auto;
}
dialog::backdrop { background: #100822bf; }
dialog .eyebrow, .admin-panel .eyebrow { color: #613582; margin: 0 0 .65rem; }
dialog h2 { font: 900 1.85rem/1.04 var(--display); letter-spacing: -.06em; margin: 0 0 .7rem; overflow-wrap: anywhere; }
#dialog h2 { padding-right: 2.2rem; }
dialog p, .help-steps { font-size: .96rem; line-height: 1.42; }
.dialog-close { position: absolute; top: .75rem; right: .75rem; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: .62rem; margin-top: .85rem; }
.dialog-message { overflow-wrap: anywhere; }
.inline-status { margin: .7rem 0 0; color: #74284f; font-weight: 700; }
.inline-status:empty { margin: 0; }
.copy-label { display: block; font-size: .78rem; font-weight: 800; }
.copy-input, .admin-form input:not([type="checkbox"]) {
  width: 100%; display: block; padding: .65rem .7rem; margin-top: .3rem;
  color: var(--ink); background: #fffafc; border: 1px solid #77558a; border-radius: .35rem;
}
.copy-input { font: .76rem var(--mono); }
.help-steps { padding-inline-start: 1.2rem; }
.help-steps li + li { margin-top: .6rem; }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti span {
  position: absolute; top: 50%; left: 50%; color: #7e3dbb;
  font-size: 1.5rem; opacity: 0; animation: confetti .8s ease-out both;
}
.confetti span:nth-child(3n) { color: #b52a79; }
.confetti span:nth-child(3n + 1) { color: #708520; }
@keyframes confetti {
  from { opacity: 1; transform: scale(.5); }
  to { opacity: 0; transform: translate(var(--x), var(--y)) rotate(150deg); }
}
.reduced *, .reduced *::before, .reduced *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.admin-shell { width: min(980px, calc(100% - 40px)); margin: 2.25rem auto; }
.admin-panel {
  background: #fff0f9 url("/static/paper.svg"); color: var(--ink);
  border: 2px solid var(--ink); border-radius: .85rem; box-shadow: 5px 5px 0 var(--violet);
  padding: clamp(1rem, 4vw, 2.4rem);
}
#login-panel { width: min(100%, 490px); margin-inline: auto; }
.admin-panel h1 {
  margin: 0; font: 900 clamp(1.95rem, 5vw, 3.1rem)/1 var(--display); letter-spacing: -.07em;
  overflow-wrap: anywhere;
}
.admin-panel h2 { font: 900 1.4rem/1.15 var(--display); margin: 0 0 1rem; letter-spacing: -.04em; }
.admin-panel p { line-height: 1.5; }
.admin-columns { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 4vw, 2.5rem); margin-top: 1.85rem; }
.admin-columns section { min-width: 0; }
.admin-form { display: grid; gap: .9rem; justify-items: start; }
.admin-form label { width: 100%; font-size: .87rem; font-weight: 800; }
.admin-form small { color: #5d4273; font-weight: 400; margin-left: .2rem; }
.admin-form .checkbox { display: flex; align-items: center; gap: .45rem; min-height: 36px; }
.admin-form .checkbox input { width: 1.15rem; height: 1.15rem; accent-color: #6734a5; }
.admin-gifts { margin: 0; padding: 0; list-style: none; }
.admin-item {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem .75rem;
  padding: .6rem .7rem; border: 1px solid #a480ba; border-radius: .45rem; background: #faf0ff;
}
.admin-item + .admin-item { margin-top: .6rem; }
.admin-item h3 { font-size: .98rem; margin: 0 0 .25rem; overflow-wrap: anywhere; }
.admin-item h3 .gift-demo { margin-left: .35rem; }
.admin-item p { margin: 0; font-size: .79rem; }
.admin-actions { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }
.admin-item .control { font-size: .73rem; padding-inline: .48rem; }
.admin-status { color: var(--space-ink); text-align: center; font-weight: 700; }
.admin-status.error { color: #ffc1dd; }

@media (max-width: 1050px) {
  .cover { padding-inline: 1.5rem; }
  .inventory { padding-inline: 1.65rem 1.35rem; }
  .cover-title h1 { font-size: 7.6vw; }
  .book[data-spread]:not([data-spread="0"]) .cover-title h1 { font-size: 6.75vw; }
  .cover-copy { max-width: 65%; }
  .cat { width: 65%; bottom: 1.7rem; }
  .cover-folio { left: 1.5rem; }
}
@media (max-width: 850px) {
  .shell { width: calc(100% - 50px); }
  .gift { grid-template-columns: minmax(74px, .63fr) minmax(0, 1.37fr); gap: .57rem; }
  .gift-art { min-height: 111px; }
  .gift-picture { min-height: 98px; }
  .rocket { left: -1.65rem; width: 75px; }
  .comet { top: 29px; right: -.95rem; width: 67px; }
  .spark-a { left: -1rem; }
  .spark-b { right: -1rem; }
}
@media (max-width: 750px) {
  .shell { width: min(570px, calc(100% - 38px)); }
  .masthead { gap: .6rem; padding-block: .83rem; }
  .utility { gap: .65rem; }
  .utility .quiet { font-size: .75rem; }
  .signal { display: none; }
  .book-meta { padding-block: 1.05rem .65rem; }
  .book { grid-template-columns: 1fr; }
  .book::before { inset: 4px -5px -7px; border-radius: 16px; }
  .cover { min-height: 390px; border-radius: 12px 12px 2px 2px; padding: 1.5rem 1.45rem 3rem; }
  .cover-title { margin-top: 1.5rem; }
  .cover-title h1 { font-size: clamp(3.05rem, 11.5vw, 5.7rem); }
  .book[data-spread]:not([data-spread="0"]) .cover-title h1 { font-size: clamp(2.55rem, 10vw, 5rem); }
  .cover-copy { margin-top: .73rem; max-width: 53%; }
  .cover-copy p { font-size: .92rem; margin-top: .6rem; }
  .cover-star { font-size: 3.2rem; }
  .cat { width: min(53%, 243px); right: -.05rem; bottom: 1.4rem; }
  .cover-note { right: 1rem; bottom: .85rem; font-size: .72rem; }
  .cover-folio { bottom: .65rem; }
  .pencil-stars { display: none; }
  .binding {
    position: relative; grid-row: 2; inset: auto; width: auto; height: 0; margin-inline: 7%;
    transform: none; flex-direction: row;
  }
  .binding i { flex: none; top: -6px; width: 24px; transform: rotate(90deg); }
  .inventory { min-height: 0; padding: 1.45rem 1.15rem .8rem; border-radius: 1px 1px 12px 12px; }
  .gift-list { margin-block: .8rem; }
  .gift { grid-template-columns: minmax(90px, .73fr) minmax(0, 1.3fr); }
  .gift h3 { font-size: 1.38rem; }
  .gift-actions { margin-top: .25rem; }
  .reserve { min-height: 44px; }
  .shop-link { min-height: 44px; }
  .inventory-foot { margin-top: .35rem; }
  .book-nav { gap: .55rem; margin-top: 1.5rem; }
  .book-nav .control { min-width: 79px; padding-inline: .5rem; }
  .page-state { min-width: 0; }
  .page-dot { width: 32px; height: 28px; }
  .site-footer { gap: .35rem; }
  .rocket { display: none; }
  .spark-c { display: none; }
}
@media (max-width: 390px) {
  .wordmark { font-size: .81rem; gap: .35rem; }
  .wordmark img { width: 28px; height: 28px; }
  .utility { gap: .4rem; }
  .utility .quiet { font-size: .7rem; }
  .personal { font-size: .73rem; padding-inline: .42rem; }
  .personal span { display: none; }
  .cover { padding-inline: 1rem; }
  .cover-folio { left: 1rem; }
  .cover-copy { max-width: 55%; }
  .cover-title h1 { font-size: 12vw; }
  .inventory { padding-inline: .8rem; }
  .gift { grid-template-columns: minmax(64px, .6fr) minmax(0, 1.4fr); gap: .45rem; }
  .gift-art { min-height: 95px; }
  .gift-picture { min-height: 82px; }
  .gift-actions { gap: .12rem .4rem; }
  .gift h3 { font-size: 1.16rem; }
  .turn-label { font-size: .72rem; }
  .site-footer span { font-size: .52rem; letter-spacing: .035em; }
}
@media (max-width: 640px) {
  .admin-columns { grid-template-columns: 1fr; }
}

.book[data-spread="1"] .gift[data-slot="0"] {
  grid-template-columns: minmax(0, 1.45fr) minmax(64px, .78fr);
}
.book[data-spread="1"] .gift[data-slot="0"] .gift-art { grid-column: 2; grid-row: 1; }
.book[data-spread="1"] .gift[data-slot="0"] .gift-copy { grid-column: 1; grid-row: 1; }
.book[data-spread="2"] .gift[data-slot="0"] .gift-picture { border: 4px solid #fff9ed; border-bottom-width: 9px; }

/* Keep the notebook on a plain white page without exterior decorations. */
.space:not(.admin-space) {
  color: var(--ink);
  background: #fff;
}
.space:not(.admin-space) .masthead {
  justify-content: flex-end;
  border-bottom: 0;
}
.space:not(.admin-space) .wordmark,
.space:not(.admin-space) .signal,
.space:not(.admin-space) .book-meta,
.space:not(.admin-space) .orbit-decoration,
.space:not(.admin-space) .site-footer {
  display: none;
}
.space:not(.admin-space) .station {
  padding-top: 12px;
  padding-bottom: 32px;
}
.space:not(.admin-space) .page-state {
  color: var(--ink);
}
.space:not(.admin-space) .page-dot[aria-current] {
  color: #7754d9;
}
.space:not(.admin-space) .page-dot[aria-current]::before {
  box-shadow: none;
}
.space:not(.admin-space) :focus-visible {
  outline-color: #7754d9;
}

.space:not(.admin-space) .cat {
  width: min(70%, 400px);
  bottom: 1.8rem;
  right: -.25rem;
  transform: translate(var(--dx, 0), var(--dy, 0)) rotate(-3deg);
  filter: none;
}
.space:not(.admin-space) .cover-copy p {
  max-width: 12rem;
  font-size: .9rem;
  line-height: 1.4;
}
.space:not(.admin-space) .cover-title h1 {
  font-size: clamp(2rem, 2.9vw, 3rem);
}
.space:not(.admin-space) .cover-copy {
  max-width: 34%;
}
.space:not(.admin-space) .subtitle-strip {
  font-size: .58rem;
  padding: .35rem .45rem;
}
.space:not(.admin-space) .cover-note {
  right: 2rem;
  bottom: 1rem;
  padding: .15rem .45rem;
  background: #fffdf4;
  border: 1.5px solid var(--ink);
  transform: rotate(3deg);
  font: 700 .83rem/1.2 var(--mono);
}
.space:not(.admin-space) .cover-note span,
.space:not(.admin-space) .cover-star,
.space:not(.admin-space) .pencil-stars {
  display: none;
}
@media (max-width: 750px) {
  .space:not(.admin-space) .cover-copy p {
    max-width: 8rem;
    font-size: .78rem;
  }
  .space:not(.admin-space) .cover-title h1 {
    font-size: clamp(2.25rem, 9vw, 4.2rem);
  }
  .space:not(.admin-space) .cat {
    width: 64%;
    bottom: 1.6rem;
    right: 0;
  }
  .space:not(.admin-space) .cover-note {
    right: 1rem;
    bottom: .65rem;
    font-size: .65rem;
  }
}

/* Wishlist-only spreads */
.wish-left { border-radius: 13px 2px 6px 13px; }
.wish-left .inventory-foot { flex-direction: row; }
.book.wish-spread .inventory .flight-stamp { display: none; }
.turn-back .wish-left { transform-origin: right; animation: page-in .48s cubic-bezier(.2,.55,.3,1) both; }
.turn-forward .wish-left { transform-origin: right; animation: page-in .48s cubic-bezier(.2,.55,.3,1) both; }
.book[data-spread="1"] .wish-left { background-color: #f5ffda; }
.book[data-spread="2"] .wish-left { background-color: #ffe9fc; }

/* Crawling sock: lives on the notebook pages, only the sock catches clicks */
.sock-layer { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; border-radius: 13px; }
.sock {
  position: absolute; left: 0; top: 0; width: 220px; height: 144px; padding: 0; pointer-events: auto;
  opacity: 1; transition: opacity .28s ease;
  background: none; border: 0; transform-origin: 50% 100%; will-change: transform;
}
.sock img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; filter: drop-shadow(2px 3px 0 #38245c33); }
.sock:focus-visible { outline-offset: 2px; border-radius: 8px; }
.scoot .sock img { animation: sock-jolt .35s ease-out; }
@keyframes sock-jolt { 0% { transform: translateY(-14px) rotate(-12deg); } 100% { transform: none; } }
.space:not(.admin-space) .cover-note { display: none; }
.gift-refusal { display: block; margin: 20px auto 0; max-width: calc(100% - 32px); padding: 10px 14px; border: 0; border-bottom: 1px dashed currentColor; background: transparent; color: var(--ink); font: 700 .8rem/1.5 var(--mono); cursor: pointer; }
.gift-refusal:hover { background: #f2e7fc; }
.gift-refusal:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.studio-credit { margin: 18px auto 28px; padding: 0 20px; color: #776d80; text-align: center; font: 400 10px/1.5 Arial, sans-serif; letter-spacing: .02em; }
.studio-credit p { margin: 0; }
.gift[tabindex="-1"]:focus { outline: 4px solid var(--ink); outline-offset: 5px; }
.book-nav { margin-top: 18px; }
@media (max-width: 750px) {
  .wish-left { min-height: 0; padding: 1.45rem 1.15rem .8rem; border-radius: 12px 12px 1px 1px; }
  .sock { width: 166px; height: 110px; }
}

/* Small, stationary pocket on the cover; bills stay inside that page. */
.money-sky { --pocket-x: 42%; --pocket-y: 4%; position: absolute; inset: 0; overflow: hidden; pointer-events: none; user-select: none; z-index: 4; }
.money-pocket { position: absolute; left: var(--pocket-x); top: var(--pocket-y); width: 48px; height: 32px; z-index: 2; padding: 0; border: 0; background: transparent; pointer-events: none; }
.money-pocket svg { display: block; position: absolute; left: 0; top: 0; width: 48px; height: 31px; }
.space:not(.admin-space) .utility { position: relative; z-index: 5; background: transparent; }

/* Strange little door on the front cover; the hand waves out of a true void. */
.invitation-door {
  position: absolute;
  z-index: 0;
  top: 7%;
  left: 59%;
  width: 34%;
  pointer-events: none;
}
.invitation-door svg { display: block; width: 100%; height: auto; overflow: visible; }
.invitation-wave {
  transform-box: fill-box;
  transform-origin: 100% 50%;
  animation: invitation-wave 2.8s ease-in-out infinite;
}
.space:not(.admin-space) .invitation-door { top: 7%; }
.space:not(.admin-space) .cat { z-index: 2; }
@keyframes invitation-wave {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(-4deg); }
}
@media (max-width: 750px) {
  .invitation-door { top: 6%; left: 58%; width: 35%; }
}
@media (max-width: 390px) {
  .invitation-door { width: 35%; }
}
@media (prefers-reduced-motion: reduce) {
  .invitation-wave { animation: none; }
}
.reduced .invitation-wave { animation: none; }
.flying-money { position: absolute; left: 0; top: 0; z-index: 1; font: var(--flight-size)/1 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; animation: money-flight var(--flight-time) linear var(--flight-delay) infinite !important; will-change: transform; }
@keyframes money-flight {
  0% { transform: translate(var(--money-start-x), var(--money-start-y)) rotate(-12deg) scale(.85); opacity: 0; }
  8% { opacity: .85; }
  55% { transform: translate(var(--money-mid-x), var(--money-mid-y)) rotate(9deg); opacity: .85; }
  87% { transform: translate(calc(var(--pocket-x) + 15px), calc(var(--pocket-y) - 5px)) rotate(-5deg) scale(.8); opacity: .75; }
  98%, 100% { transform: translate(calc(var(--pocket-x) + 16px), calc(var(--pocket-y) + 8px)) rotate(4deg) scale(.38); opacity: 0; }
}
.reduced .flying-money { animation: money-flight var(--flight-time) linear var(--flight-delay) infinite !important; }

/* Living illustration: camera and books on the cover */
.cat-live { aspect-ratio: 1; z-index: 3; }
.cat-live .cat-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.live-camera { transform-box: view-box; transition: transform .8s cubic-bezier(.3,1.4,.5,1); }
.live-books { transform-box: view-box; animation: books-sway 3.4s ease-in-out infinite; }
.live-coffee, .live-cucumber, .live-moped, .live-flowers, .live-furniture { transform-box: view-box; }
.live-coffee { animation: coffee-steps 3.8s ease-in-out -.8s infinite; }
.live-cucumber { animation: cucumber-shuffle 4.3s ease-in-out -1.6s infinite; }
.live-moped { animation: moped-bounce 2.1s ease-in-out -.4s infinite; }
.live-flowers { animation: flower-nod 3.1s ease-in-out -1.2s infinite; }
.live-furniture { animation: furniture-rock 4.8s ease-in-out -2s infinite; }
@keyframes coffee-steps { 0%,100% { transform: rotate(-1deg); } 50% { transform: rotate(1.6deg) translateY(-.35px); } }
@keyframes cucumber-shuffle { 0%,100% { transform: translateX(-.35px) rotate(-1deg); } 50% { transform: translateX(.35px) rotate(1.3deg); } }
@keyframes moped-bounce { 0%,100% { transform: translateY(0) rotate(-.5deg); } 40% { transform: translateY(-.8px) rotate(1deg); } 65% { transform: translateY(.25px); } }
@keyframes flower-nod { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(3deg) translateY(-.2px); } }
@keyframes furniture-rock { 0%,100% { transform: rotate(-.6deg); } 50% { transform: rotate(.9deg) translateY(-.2px); } }
@keyframes books-sway { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-1.6deg) translateY(-.3px); } }
.live-glint { opacity: 0; }
.live-glint.pop { animation: glint .45s ease-out; }
@keyframes glint { 0% { opacity: .95; } 100% { opacity: 0; } }
.live-frame { opacity: 0; transition: opacity .3s; }
.live-frame.on { opacity: .85; }
.live-frame path { transform-box: fill-box; transform-origin: center; }
.live-flash { opacity: 0; }
.live-flash.pop { animation: flash .5s ease-out; }
@keyframes flash { 0% { opacity: .55; } 100% { opacity: 0; } }
.live-reader { animation: reader-bob 2.6s ease-in-out infinite; }
@keyframes reader-bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -.35px; } }
.live-reading-eye { animation: reading-lines 3.2s linear infinite; }
@keyframes reading-lines {
  0%, 25%, 50%, 75%, 100% { translate: 0 0; }
  20%, 45%, 70%, 95% { translate: calc(var(--eye-direction) * 1.1px) 1px; }
}
.live-leaf { transform-box: view-box; }
.live-leaf.flip { animation: leaf-turn .9s ease-in-out; }
@keyframes leaf-turn { 0% { transform: scaleX(1); } 50% { transform: scaleX(0); } 51% { transform: scaleX(-.05); } 100% { transform: scaleX(-1); } }
.cat-live.idle .live-books, .cat-live.idle .live-reader, .cat-live.idle .live-reading-eye { animation-play-state: paused; }
.cat-live.idle .live-coffee, .cat-live.idle .live-cucumber, .cat-live.idle .live-moped, .cat-live.idle .live-flowers, .cat-live.idle .live-furniture { animation-play-state: paused; }
.live-hit {
  position: absolute; pointer-events: auto; padding: 0; background: transparent;
  border: 1.5px dashed transparent; border-radius: 6px; cursor: pointer;
}
.live-hit:hover, .live-hit:focus-visible { border-color: #391440; }
.live-hit-camera { left: 15%; top: 58%; width: 21%; height: 20%; }
.live-hit-books { left: 61%; top: 55%; width: 30%; height: 27%; }

/* Kiss floor lamp warming every character */
.live-lamp-glow { mix-blend-mode: multiply; pointer-events: none; animation: lamp-glow 5.2s ease-in-out infinite; }
.live-lamp { transform-box: view-box; animation: lamp-sway 5.2s ease-in-out infinite; }
.live-lamp-lips { transform-box: view-box; animation: lamp-pucker 5.2s ease-in-out infinite; }
@keyframes lamp-sway { 0%,100% { transform: rotate(-.8deg); } 50% { transform: rotate(.8deg); } }
@keyframes lamp-pucker { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06, .95); } }
@keyframes lamp-glow { 0%,100% { opacity: .85; } 50% { opacity: 1; } }
.cat-live.idle .live-lamp, .cat-live.idle .live-lamp-lips, .cat-live.idle .live-lamp-glow { animation-play-state: paused; }

/* Winged crocodile-toothed boots */
.live-boots { transform-box: fill-box; transform-origin: 50% 60%; animation: boots-fly 3.6s ease-in-out infinite; }
.live-boot-wing { transform-box: fill-box; transform-origin: 100% 70%; animation: boot-flap .42s ease-in-out infinite alternate; }
@keyframes boots-fly { 0%,100% { transform: translate(0,0) rotate(-4deg); } 50% { transform: translate(2px,-2.5px) rotate(3deg); } }
@keyframes boot-flap { from { transform: rotate(-14deg) scaleY(1); } to { transform: rotate(16deg) scaleY(.7); } }
.cat-live.idle .live-boots, .cat-live.idle .live-boot-wing { animation-play-state: paused; }

/* Feast cluster: lower-left of the cover, Olivier drinks olive oil */
.feast { position: absolute; z-index: 1; left: .6rem; bottom: .5rem; width: min(40%, 250px); pointer-events: none; }
.feast-svg { display: block; width: 100%; height: auto; overflow: visible; }
.feast-sway { transform-box: fill-box; transform-origin: 50% 100%; animation: feast-sway 3.6s ease-in-out infinite; }
.feast-bob { transform-box: fill-box; transform-origin: 50% 100%; animation: feast-bob 2.8s ease-in-out infinite; }
.feast-steam { animation: feast-steam 2.4s ease-in-out infinite; }
.olivier-body { transform-box: fill-box; transform-origin: 50% 100%; animation: olivier-tilt 4.8s ease-in-out infinite; }
.olivier-arm { animation: olivier-drink 4.8s ease-in-out infinite; }
.olivier-stream { animation: olivier-pour 4.8s ease-in-out infinite; }
.olivier-drop { animation: olivier-drop 4.8s ease-in infinite; opacity: 0; }
@keyframes feast-sway { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes feast-bob { 0%,100% { transform: none; } 50% { transform: translateY(-1.5px) scaleY(1.03); } }
@keyframes feast-steam { 0%,100% { opacity: .2; transform: translateY(1px); } 50% { opacity: .9; transform: translateY(-2px); } }
@keyframes olivier-tilt { 0%,25%,85%,100% { transform: none; } 40%,70% { transform: rotate(-4deg); } }
@keyframes olivier-drink { 0%,20%,90%,100% { transform: rotate(18deg); } 38%,72% { transform: rotate(0deg); } 55% { transform: rotate(-4deg); } }
@keyframes olivier-pour { 0%,36%,76%,100% { opacity: 0; } 42%,70% { opacity: 1; } }
@keyframes olivier-drop { 0%,40% { opacity: 0; transform: none; } 50% { opacity: 1; } 70% { opacity: 0; transform: translateY(4px); } 100% { opacity: 0; } }
.feast.idle * { animation-play-state: paused !important; }
.feast.idle .olivier-stream { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .olivier-stream { opacity: 1; } .olivier-arm { transform: none; } }
.reduced .olivier-stream { opacity: 1; }
.space:not(.admin-space) .cover { min-height: 560px; }
@media (max-width: 750px) {
  .feast { width: 43%; left: .5rem; bottom: .4rem; }
  .space:not(.admin-space) .cover { min-height: 450px; }
}

.space:not(.admin-space) .flight-stamp { display: none; }
.my-reservation { padding-block: .85rem; border-bottom: 1px solid #7754d94d; }
.my-reservation:last-child { border-bottom: 0; }
.my-reservation h3 { margin: 0 0 .65rem; font-size: 1.05rem; line-height: 1.3; }

/* On phones the notebook continues downwards, joined every two wishes. */
.mobile-page-binding { display: none; }
@media (max-width: 750px) {
  .scroll-notebook .mobile-page-binding {
    display: flex; position: relative; justify-content: space-between;
    align-items: center; height: 32px; margin: .75rem -1.15rem;
    padding-inline: 7%; isolation: isolate;
  }
  .mobile-page-binding::before {
    content: ""; position: absolute; z-index: -1; inset: 4px 0;
    background: linear-gradient(#fff6e9, #c8afc5 42%, #6e4c77 49%, #f3e5ed 53%, #fff6e9);
    box-shadow: 0 -2px 0 #fff9ef, 0 2px 0 #b997b955;
  }
  .mobile-page-binding i {
    position: relative; width: 9px; height: 29px;
    border: 2px solid #51314e; border-radius: 5px;
    background: linear-gradient(90deg, #725777, #f5e5ee 42%, #a48aa7 65%, #58395e);
    box-shadow: 2px 1px 1px #39214055;
  }
  .mobile-page-binding i:nth-child(2n) { transform: rotate(9deg); }
  .mobile-page-binding i:nth-child(3n) { transform: rotate(-7deg); height: 32px; }
  .scroll-notebook .inventory { overflow: visible; }
  .scroll-notebook .inventory-foot { margin-top: 1.5rem; }
}

.notebook-final-page > h2 { margin-bottom: 1.2rem; }
.notebook-final-page .finale-turn { margin-top: 1.25rem; background: #e7ff61; }
.finale-stage.in-trash, .finale-stage.finale-sequencing { visibility: hidden; pointer-events: none; }
.finale-scene { position: fixed; inset: 0; z-index: 10; overflow: hidden; pointer-events: none; }
.finale-piece { position: absolute; transform-origin: 50% 50%; pointer-events: none; will-change: transform, opacity; }
.finale-piece * { animation: none !important; transition: none !important; }
.finale-paper { overflow: hidden; filter: drop-shadow(3px 8px 5px #27114130); }
.finale-paper-creases { position: absolute; inset: 0; opacity: 0; mix-blend-mode: multiply; }
.finale-paper-creases svg { display: block; width: 100%; height: 100%; opacity: .65; }
.finale-spring { filter: drop-shadow(3px 4px 2px #27114138); }
.finale-spring svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sock-layer.finale-keep {
  position: fixed; inset: auto; left: var(--sock-keep-left); top: var(--sock-keep-top);
  width: var(--sock-keep-width); height: var(--sock-keep-height);
  z-index: 10001; overflow: visible; border-radius: 0;
}
.finale-bin {
  position: fixed; z-index: 9; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom));
  width: 64px; height: 75px;
  display: grid; place-items: center; padding: 0; border: 0; background: transparent;
  opacity: 0; transform: translateY(10px) scale(.82); filter: drop-shadow(2px 5px 0 #35204d59);
  cursor: pointer; transition: opacity .22s ease, transform .32s cubic-bezier(.2,.8,.2,1);
}
.finale-bin[hidden] { display: none; }
.finale-bin.is-visible { opacity: 1; transform: none; }
.finale-bin-art { display: block; width: 100%; height: 100%; overflow: visible; }
.finale-bin-body { fill: #cbb1f1; stroke: #271141; stroke-width: 5; stroke-linejoin: round; }
.finale-bin-rim, .finale-bin-handle, .finale-bin-ridge {
  fill: none; stroke: #271141; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round;
}
.finale-bin-lid {
  fill: #ff9bce; stroke: #271141; stroke-width: 5; stroke-linejoin: round;
  transform-box: fill-box; transform-origin: 78% 100%; transition: transform .25s ease;
}
.finale-bin.is-open .finale-bin-lid { transform: translate(-4px,-7px) rotate(-25deg); }
.finale-bin.is-ready::after {
  content: "↶"; position: absolute; top: -7px; right: -2px; color: var(--acid);
  font: 900 1.8rem/1 var(--display); -webkit-text-stroke: 1px var(--ink);
  text-shadow: 2px 2px 0 var(--ink); animation: finale-return-hint 1.15s ease-in-out infinite;
}
.finale-bin:focus-visible { outline: 3px solid var(--acid); outline-offset: 4px; border-radius: 12px; }

@keyframes finale-return-hint {
  0%,100% { transform: rotate(-8deg) translateY(0); }
  50% { transform: rotate(7deg) translateY(-4px); }
}
@media (max-width: 750px) {
  .finale-bin { width: 54px; height: 63px; }
}
@media (prefers-reduced-motion: reduce) {
  .finale-bin { transition: none; }
  .finale-bin.is-ready::after { animation: none; }
}