html { scrollbar-gutter: stable; }
html.mosaen-opening { overflow: hidden; }
.mosaen-intro {
  position: fixed; inset: 0; margin: 0; padding: 0;
  width: 100%; height: 100%; height: 100dvh;
  max-width: none; max-height: none; border: 0;
  overflow: hidden; background: var(--paper); color: var(--ink);
}
.mosaen-intro::backdrop { background: transparent; backdrop-filter: none; }
.mosaen-intro[open] {
  display: grid; place-items: center;
  animation: mosaen-intro-away .6s cubic-bezier(.7,0,.2,1) 2.15s both;
}
.mosaen-intro::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 43%, #fff9ee99, transparent 65%);
}
.opening-composition { position: relative; text-align: center; padding: 0 24px 22px; }
.opening-mark {
  display: grid; grid-template-columns: repeat(2, 82px); gap: 10px;
  width: max-content; margin: 0 auto 43px; transform: rotate(-12deg);
  perspective: 750px;
}
.opening-piece {
  display: block; width: 82px; height: 82px; position: relative;
  border-radius: 3px; border: 1px solid #97696b;
  background: linear-gradient(145deg, #805055, #66373e 50%, #54282f);
  box-shadow: 0 5px 0 #3b1c24, 2px 10px 13px #3d201e24, inset 1px 1px 0 #c8989780, inset -1px -1px 0 #32151d80;
  --from-x: -160px; --from-y: -95px; --turn: -26deg; --delay: 100ms;
  animation: mosaen-piece-in .95s cubic-bezier(.16,.8,.2,1) var(--delay) both;
}
.opening-piece:nth-child(2) { --from-x: 150px; --from-y: -110px; --turn: 35deg; --delay: 220ms; }
.opening-piece:nth-child(3) { --from-x: -170px; --from-y: 95px; --turn: -40deg; --delay: 340ms; }
.opening-piece:nth-child(4) { --from-x: 135px; --from-y: 140px; --turn: 28deg; --delay: 490ms; }
.opening-piece-coral {
  background: linear-gradient(145deg, #ff895d, #f56d43 50%, #e64c2c);
  border-color: #ffad87;
  box-shadow: 0 5px 0 #a33725, 2px 10px 13px #3d201e24, inset 1px 1px 0 #ffc4a4a0, inset -1px -1px 0 #ad3f2880;
}
.opening-piece svg { width: 100%; height: 100%; fill: none; stroke: #381b23; stroke-width: 1.6; filter: drop-shadow(0 1px .3px #c99492aa); }
.opening-piece-coral svg { stroke: #99341f; filter: drop-shadow(0 1px .3px #ffd5aea0); }
.opening-name { font: 400 clamp(64px, 8vw, 104px)/1 Georgia, serif; letter-spacing: -.06em; animation: mosaen-word-in .65s ease .72s both; }
.opening-caption { font: 14px/1.6 var(--mono); letter-spacing: 1.3px; margin: 20px 0 0; animation: mosaen-word-in .65s ease .95s both; }
.opening-edition, .opening-footnote { position: absolute; left: 36px; font: 12px/1.6 var(--mono); letter-spacing: 1.5px; color: var(--subtle); }
.opening-edition { top: 31px; }
.opening-footnote { bottom: 37px; }
.opening-skip { position: absolute; right: 24px; bottom: 24px; padding: 14px; min-height: 44px; font: 14px/1.5 var(--mono); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--line); }
.opening-skip:focus:not(:focus-visible) { outline: none; }
.footer-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
@keyframes mosaen-piece-in {
  from { opacity: 0; transform: translate3d(var(--from-x),var(--from-y),90px) rotate(var(--turn)) rotateX(28deg) scale(.85); }
  65% { opacity: 1; }
  to { opacity: 1; transform: translate3d(0,0,0) rotate(0) rotateX(0) scale(1); }
}
@keyframes mosaen-word-in { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mosaen-intro-away { to { transform: translateY(-102%); } }
@media (max-width: 600px) {
  .opening-mark { grid-template-columns: repeat(2, 65px); gap: 8px; margin-bottom: 34px; }
  .opening-piece { width: 65px; height: 65px; }
  .opening-name { font-size: 72px; }
  .opening-caption { font-size: 13px; letter-spacing: .5px; }
  .opening-edition { top: 22px; left: 22px; font-size: 12px; }
  .opening-footnote { display: none; }
  .opening-skip { bottom: 16px; right: 10px; }
  .footer-actions { gap: 22px; }
}
@media (max-height: 500px) {
  .opening-mark { grid-template-columns: repeat(2, 50px); gap: 7px; margin-bottom: 20px; }
  .opening-piece { width: 50px; height: 50px; }
  .opening-name { font-size: 62px; }
  .opening-caption { font-size: 12px; margin-top: 12px; letter-spacing: 0; }
  .opening-footnote { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mosaen-intro[open] { display: none; animation: none; } }