/* cinema.css: the den's camera + light (CINEMA). Classes cam-*, html.cin-*, body[data-cam], vars --cam-*.
   Reads --tv-light / --tv-lum / --tv-on (SCREEN). Loaded after style.css + motion.css. */

/* -- the camera's layers scale about their own top-left (cinema.js does the maths) */
body[data-cam] .den, body[data-cam] .room, body[data-cam] .tree-layer, body[data-cam] .room-light { transform-origin: 0 0; }
@media (min-width: 821px) and (min-height: 501px) {
  /* the decor + light layers stay composited so a dolly never shows half-rasterized tiles; the den toggles its own */
  body[data-cam] .room, body[data-cam] .tree-layer, body[data-cam] .room-light, .cam-spill { will-change: transform; }
}
/* REACH-IN, needs the integrator's OK (not on CINEMA's list): the bench (lap + table) sits above the den at z 50,
   so in theater it would cover the bottom of the picture. It steps out while the camera is in the TV. */
body[data-cam] .bench { transition: opacity .35s var(--ease-light), visibility 0s linear .35s; }
body[data-cam="theater"] .bench { opacity: 0; visibility: hidden; transition: opacity .35s var(--ease-light), visibility 0s; }

/* -- injected layers */
.cam-night { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 80; pointer-events: none; }
.cam-spill { position: fixed; inset: 0; z-index: 52; pointer-events: none; transform-origin: 0 0; mix-blend-mode: screen;
  --cam-k: .26; opacity: calc(var(--tv-lum, 0) * var(--tv-on, 0) * var(--cam-k));
  transition: opacity 140ms linear; contain: layout style; }
/* The light is a soft radial falloff around the screen (never a big box-shadow, which Chrome rasterizes with hard
   tile edges), with the picture itself masked out so the film is never washed over. */
.cam-spill::before, .cam-spill.cam-wash::before { content: ''; position: absolute;
  --hole: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Crect width='100' height='100' rx='9' ry='11'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(#000 0 0), var(--hole); mask-image: linear-gradient(#000 0 0), var(--hole);
  -webkit-mask-size: 100% 100%, var(--cam-w, 0) var(--cam-h, 0); mask-size: 100% 100%, var(--cam-w, 0) var(--cam-h, 0);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-composite: xor; mask-composite: exclude; }
.cam-spill::before {
  left: calc(var(--cam-x, -9999px) - var(--cam-w, 0px) * 1.3); top: calc(var(--cam-y, 0px) - var(--cam-h, 0px) * 1.2);
  width: calc(var(--cam-w, 0px) * 3.6); height: calc(var(--cam-h, 0px) * 4.2);
  -webkit-mask-position: 0 0, calc(var(--cam-w, 0px) * 1.3) calc(var(--cam-h, 0px) * 1.2); mask-position: 0 0, calc(var(--cam-w, 0px) * 1.3) calc(var(--cam-h, 0px) * 1.2);
  background:
    radial-gradient(ellipse 50% 34% at 50% 40.5%, rgb(var(--tv-light, 0 0 0) / .5) 0%, rgb(var(--tv-light, 0 0 0) / .4) 26%, rgb(var(--tv-light, 0 0 0) / .18) 56%, rgb(var(--tv-light, 0 0 0) / .05) 80%, transparent 100%),
    radial-gradient(ellipse 40% 20% at 50% 70%, rgb(var(--tv-light, 0 0 0) / .35), transparent); }
/* the wide, soft wash that turns the wood and the shelves the colour of the picture */
.cam-spill.cam-wash { z-index: 51; mix-blend-mode: soft-light; --cam-k: .5; }
.cam-spill.cam-wash::before {
  left: calc(var(--cam-x, -9999px) - var(--cam-w, 0px) * 2.2); top: calc(var(--cam-y, 0px) - var(--cam-h, 0px) * 1.6);
  width: calc(var(--cam-w, 0px) * 5.4); height: calc(var(--cam-h, 0px) * 5.2);
  -webkit-mask-position: 0 0, calc(var(--cam-w, 0px) * 2.2) calc(var(--cam-h, 0px) * 1.6); mask-position: 0 0, calc(var(--cam-w, 0px) * 2.2) calc(var(--cam-h, 0px) * 1.6);
  background: radial-gradient(ellipse 50% 42% at 50% 40.4%, rgb(var(--tv-light, 0 0 0) / .75) 0%, rgb(var(--tv-light, 0 0 0) / .55) 30%, rgb(var(--tv-light, 0 0 0) / .2) 66%, transparent 100%); }
html.cin-movie .cam-spill { --cam-k: .58; }
html.cin-movie .cam-spill.cam-wash { --cam-k: .95; }
/* the theater: the picture is the only light in the room. A hot lip of film-coloured light on the bezel, a wide throw
   that colours the wall, the garland and the tree, both riding the film's brightness (--tv-lum flickers with it) */
:is(html.cin-movie body[data-cam="theater"], html.cin-fromtheater body) .cam-spill { --cam-k: 1; transition: opacity 90ms linear; }
:is(html.cin-movie body[data-cam="theater"], html.cin-fromtheater body) .cam-spill:not(.cam-wash)::before {
  left: calc(var(--cam-x, -9999px) - var(--cam-w, 0px) * 2); top: calc(var(--cam-y, 0px) - var(--cam-h, 0px) * 2);
  width: calc(var(--cam-w, 0px) * 5); height: calc(var(--cam-h, 0px) * 5);
  -webkit-mask-position: 0 0, calc(var(--cam-w, 0px) * 2) calc(var(--cam-h, 0px) * 2); mask-position: 0 0, calc(var(--cam-w, 0px) * 2) calc(var(--cam-h, 0px) * 2);
  background:
    radial-gradient(ellipse 12.5% 13.5% at 50% 50%, rgb(var(--tv-light, 0 0 0) / .5) 68%, rgb(var(--tv-light, 0 0 0) / .2) 82%, transparent 100%),
    radial-gradient(ellipse 50% 50% at 50% 50%, rgb(var(--tv-light, 0 0 0) / .34) 0%, rgb(var(--tv-light, 0 0 0) / .24) 22%, rgb(var(--tv-light, 0 0 0) / .12) 42%, rgb(var(--tv-light, 0 0 0) / .04) 70%, transparent 100%),
    radial-gradient(ellipse 34% 10% at 50% 66%, rgb(var(--tv-light, 0 0 0) / .18), transparent); }
:is(html.cin-movie body[data-cam="theater"], html.cin-fromtheater body) .cam-spill.cam-wash { --cam-k: 1; mix-blend-mode: overlay; }
:is(html.cin-movie body[data-cam="theater"], html.cin-fromtheater body) .cam-spill.cam-wash::before { background: radial-gradient(ellipse 50% 46% at 50% 40.4%, rgb(var(--tv-light, 0 0 0) / .6) 0%, rgb(var(--tv-light, 0 0 0) / .42) 30%, rgb(var(--tv-light, 0 0 0) / .16) 62%, transparent 100%); }

/* Leaving the theater (STOP, EJECT, the remote, a click outside): the camera flips to "room" on the first frame of
   the pull-back, which used to swap the tube's light in that one frame (overlay -> soft-light, a different throw, the
   room strength, and 30 ms later the blue screen's saturated colour): the whole den flashed. cinema.js holds the
   theater's light (cin-fromtheater) and fades it out over the move, then fades the room's own light in (cin-settle). */
html.cin-fromtheater body[data-cam] .cam-spill.cam-spill { opacity: 0; transition: opacity .5s cubic-bezier(.3,0,.4,1); }
html.cin-settle body[data-cam] .cam-spill.cam-spill { transition: opacity .9s ease-in-out; }

/* the dark around the picture: the theater frame (follows the dolly) + movie-mode corners */
.cam-vig { position: fixed; inset: 0; z-index: 72; pointer-events: none;
  --cam-cx: calc(var(--cam-x, 0px) + var(--cam-w, 0px) / 2); --cam-cy: calc(var(--cam-y, 0px) + var(--cam-h, 0px) / 2); }
.cam-vig::before, .cam-vig::after { content: ''; position: absolute; inset: 0; }
.cam-vig::before { opacity: var(--cam-c, 0);
  background: radial-gradient(ellipse calc(var(--cam-w, 100px) * 1.25) calc(var(--cam-h, 100px) * 1.3) at var(--cam-cx) var(--cam-cy), transparent 41%, rgba(3, 2, 6, .38) 56%, rgba(3, 2, 6, .7) 80%, rgba(2, 1, 4, .88) 100%); }
.cam-vig::after { opacity: 0; transition: opacity var(--t-light) var(--ease-light);
  background: radial-gradient(ellipse calc(var(--cam-w, 100px) * 2.6) calc(var(--cam-h, 100px) * 2.6) at var(--cam-cx) var(--cam-cy), transparent 30%, rgba(4, 3, 8, .5) 75%, rgba(3, 2, 6, .78)); }
html.cin-movie body[data-cam="room"] .cam-vig::after { opacity: 1; }

.cam-esc { position: fixed; z-index: 90; left: calc(18px + env(safe-area-inset-left, 0px)); top: calc(14px + env(safe-area-inset-top, 0px));
  font: 20px/1 VT323, monospace; letter-spacing: .08em; color: #eef3ff; pointer-events: none;
  text-shadow: 1px 0 rgba(255, 60, 60, .45), -1px 0 rgba(60, 160, 255, .45), 0 0 8px rgba(160, 200, 255, .5);
  opacity: 0; transform: translateY(-4px); transition: opacity .35s var(--ease-light), transform .35s var(--ease-light); }
.cam-esc.on { opacity: .82; transform: none; }
/* touch: a real button back to the room (phone landscape theater has no 'outside' to tap) */
.cam-esc.cam-btn { pointer-events: auto; cursor: pointer; padding: 8px 14px 7px; margin: -8px 0 0 -10px; border-radius: 8px; font-size: 22px;
  background: rgba(8, 10, 20, .55); box-shadow: inset 0 0 0 1px rgba(170, 200, 255, .28); -webkit-tap-highlight-color: transparent; }
.cam-esc.cam-btn.on { opacity: .9; }
.cam-esc:not(.on) { pointer-events: none; }
/* theater: no room chrome over the bezel */
.switches { transition: opacity .35s var(--ease-light); }
body[data-cam="theater"] .switches { opacity: 0; pointer-events: none; }
.cam-cut { position: fixed; inset: 0; z-index: 95; background: #000; opacity: 0; pointer-events: none; transition: opacity 125ms linear; }
.cam-cut.on { opacity: 1; }

/* -- the dark den (before + during the opening) */
html.cin-dark::after { content: ''; position: fixed; inset: 0; z-index: 79; pointer-events: none;
  background: radial-gradient(ellipse 20% 30% at 92% 34%, rgba(4, 6, 15, .42), rgba(4, 6, 15, .9)); }
html.cin-dark.cin-canvas::after { display: none; }
html.cin-dark:not(.cin-canvas)::after { animation: cam-failsafe .6s ease 6s forwards; }   /* if cinema.js never arrives, never leave the room dark */
@keyframes cam-failsafe { to { opacity: 0; } }

html.cin-dark:not(.cin-lamp) .lamp .shade { background: linear-gradient(180deg, #5d5648, #3a342b); box-shadow: none; filter: none; }
html.cin-dark:not(.cin-lamp) .unit::after,
html.cin-dark:not(.cin-lamp) .room-light .wash-lamp,
html.cin-dark:not(.cin-tree) .room-light .wash-tree { opacity: 0; }
html.cin-dark:not(.cin-fire) .room-light .wash-fire { opacity: .2; }
html.cin-dark:not(.cin-fire) .hearth .flame { filter: blur(1px) brightness(.3) saturate(.7); }
html.cin-dark:not(.cin-garland) .garland { filter: brightness(.4) saturate(.55) drop-shadow(0 4px 4px rgba(0, 0, 0, .5)); }
html.cin-dark:not(.cin-garland) .garland::after { animation: none; opacity: 0; }
html.cin-dark:not(.cin-vfd) .vfd > * { opacity: 0; }
html.cin-dark .tree-svg .halo { animation: none; opacity: 0; }
html.cin-dark .tree-svg .bulb { opacity: .38; }
html.cin-dark .tree-svg .bulb .hot { animation: none; opacity: 0; }

/* the sequence (html.cin-go), timed by --cam-sp (1 first visit, .6 return) */
html.cin-go .unit::after, html.cin-go .room-light .wash-lamp { transition: opacity calc(900ms * var(--cam-sp, 1)) var(--ease-light); }
html.cin-go .room-light .wash-fire { transition: opacity calc(1200ms * var(--cam-sp, 1)) var(--ease-light); }
html.cin-go .room-light .wash-tree { transition: opacity calc(1600ms * var(--cam-sp, 1)) var(--ease-light); }
html.cin-go .hearth .flame { transition: filter calc(1200ms * var(--cam-sp, 1)) var(--ease-light); }
html.cin-go .garland { transition: filter calc(1000ms * var(--cam-sp, 1)) linear; }
html.cin-lamp .lamp .shade { animation: cam-filament calc(700ms * var(--cam-sp, 1)) linear both; }
html.cin-tree .tree-svg .halo { animation: cam-halo calc(760ms * var(--cam-sp, 1)) var(--ease-light) calc(var(--cam-d, 0ms) * var(--cam-sp, 1)) both; }
html.cin-tree .tree-svg .bulb { animation: cam-bulb calc(600ms * var(--cam-sp, 1)) linear calc(var(--cam-d, 0ms) * var(--cam-sp, 1)) both; }
html.cin-tree .tree-svg .bulb .hot { animation: cam-hot calc(600ms * var(--cam-sp, 1)) ease-out calc(var(--cam-d, 0ms) * var(--cam-sp, 1)) both; }
html.cin-vfd .vfd > * { animation: cam-vfd calc(420ms * var(--cam-sp, 1)) steps(1) both; }

@keyframes cam-filament {
  0%, 4% { filter: brightness(.35); }
  4.5%, 11% { filter: brightness(1.15) drop-shadow(0 0 10px color-mix(in srgb, var(--lamp-light) 70%, transparent)); }
  11.5%, 16.5% { filter: brightness(.55); }
  17%, 24% { filter: brightness(1.5) drop-shadow(0 0 22px color-mix(in srgb, var(--lamp-light) 90%, transparent)); }
  24.5%, 28% { filter: brightness(.75) drop-shadow(0 0 8px color-mix(in srgb, var(--lamp-light) 60%, transparent)); }
  40% { filter: brightness(1.3) drop-shadow(0 0 24px color-mix(in srgb, var(--lamp-light) 95%, transparent)); }
  100% { filter: brightness(1) drop-shadow(0 0 16px color-mix(in srgb, var(--lamp-light) 80%, transparent)); }
}
@keyframes cam-halo { 0% { opacity: 0; transform: scale(.3); } 16% { opacity: 1; transform: scale(1.55); } 100% { opacity: .85; transform: scale(1); } }
@keyframes cam-bulb { 0% { opacity: .38; } 8%, 100% { opacity: 1; } }
@keyframes cam-hot { 0% { opacity: 0; } 14% { opacity: 1; } 100% { opacity: .55; } }
@keyframes cam-vfd { 0% { opacity: 0; } 16% { opacity: 1; } 33% { opacity: .15; } 50% { opacity: 1; } 66% { opacity: .45; } 83%, 100% { opacity: 1; } }

/* -- the gate: a paper tag on the lamp's pull chain */
.cam-gate { position: fixed; inset: 0; z-index: 85; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.cam-pull { position: absolute; width: 0; height: 0; opacity: 0; transform: translateY(-14px);
  transition: opacity .9s var(--ease-light), transform .9s var(--ease-hand); }
.cam-gate.in .cam-pull { opacity: 1; transform: none; }
.cam-pull > * { position: absolute; display: block; }
.cam-chain { left: -1.5px; top: 0; width: 3px; height: 46px; transform-origin: 50% 0;
  background: radial-gradient(circle at 50% 50%, #d8c18a 0 1.05px, transparent 1.35px) 0 0 / 3px 3.6px repeat-y; opacity: .85; }
.cam-bead { left: -4px; top: 44px; width: 8px; height: 10px; border-radius: 45% 45% 50% 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c8, #b8913a 55%, #4a3410); box-shadow: 0 0 6px rgba(170, 200, 255, .35); }
.cam-long .cam-chain { height: 74px; } .cam-long .cam-bead { top: 72px; } .cam-long .cam-tag { top: 84px; }
.cam-tag { left: -62px; top: 56px; width: 124px; transform-origin: 50% -6px; transform: rotate(-5deg);
  animation: cam-sway 3.6s ease-in-out infinite alternate;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .55)) drop-shadow(0 0 18px rgba(150, 180, 255, .28)); }
.cam-tag span { display: block; padding: 18px 10px 12px; text-align: center; font: 15px/1.08 'Permanent Marker', cursive; color: #2a2119;
  clip-path: polygon(16% 0, 84% 0, 100% 16%, 100% 100%, 0 100%, 0 16%);
  background:
    radial-gradient(circle 4px at 50% 9px, #0b0d16 0 3px, rgba(0, 0, 0, .25) 3.6px, transparent 4.2px),
    linear-gradient(135deg, transparent 0 78%, rgba(60, 50, 40, .28) 86%, #b7ad99 86.5%, #d9d1bf 100%),
    linear-gradient(170deg, #f1ecdf, #ddd5c2 70%, #cfc6b0); }
.cam-tag::before { content: ''; position: absolute; left: 50%; top: -6px; width: 1px; height: 13px; background: #c9b27a; }
.cam-gate.pulled .cam-pull { animation: cam-tug 300ms var(--ease-snap); }
.cam-gate.out .cam-pull { opacity: 0; transition: opacity .5s ease; }
.cam-gate:focus-visible .cam-tag span { outline: 2px solid #ffd27a; outline-offset: 3px; }
@keyframes cam-sway { from { transform: rotate(-6deg); } to { transform: rotate(3deg); } }
@keyframes cam-tug { 0% { transform: none; } 35% { transform: translateY(12px); } 100% { transform: none; } }

/* -- lit den: fire light on the cabinet's right third */
html.cin-on .unit::after {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--lamp-light) 16%, transparent), transparent 22%),
    linear-gradient(90deg, color-mix(in srgb, var(--tree-light) 18%, transparent), transparent 30%),
    radial-gradient(ellipse 38% 70% at 106% 78%, var(--fire-light), transparent 72%); }

/* -- movie mode: lights low, the TV takes over */
body[data-cam] .room-light::after { content: ''; position: absolute; pointer-events: none; opacity: 0;
  left: calc(var(--cam-x, -9999px) - var(--cam-w, 0px) * 2.5); top: calc(var(--cam-y, 0px) - var(--cam-h, 0px) * 2.5);
  width: calc(var(--cam-w, 0px) * 6); height: calc(var(--cam-h, 0px) * 6);
  /* lights down, but still a family room at Christmas: a warm, near-neutral dark (the blue-black read as cold grey) */
  background: radial-gradient(ellipse 50% 50% at 50% 50%, transparent 15%, rgba(12, 7, 4, .3) 24%, rgba(12, 7, 4, .56) 36%, rgba(12, 7, 4, .7) 52%);
  box-shadow: 0 0 0 160vmax rgba(12, 7, 4, .7);
  transition: opacity var(--t-light) var(--ease-light); }
html.cin-movie body[data-cam] .room-light::after { opacity: 1; }
/* lights going down / coming back up (cin-unmovie lingers for the fade back so style.css's own transitions are untouched otherwise) */
:is(html.cin-movie, html.cin-unmovie) body[data-cam] :is(.shelves, .lamp .shade, .tree-layer, .room-light .wash-lamp, .room-light .wash-fire),
:is(html.cin-movie, html.cin-unmovie) body[data-cam] .unit::after {
  transition: filter var(--t-light) var(--ease-light), opacity var(--t-light) var(--ease-light), box-shadow var(--t-light) var(--ease-light); }
html.cin-movie body[data-cam] .shelves { filter: brightness(.55); }
html.cin-movie body[data-cam] .unit::after { opacity: .3; }
html.cin-movie body[data-cam] .lamp .shade { box-shadow: 0 0 30px 8px color-mix(in srgb, var(--lamp-light) 25%, transparent);
  filter: brightness(.6) drop-shadow(0 0 5px color-mix(in srgb, var(--lamp-light) 25%, transparent)); }
html.cin-movie body[data-cam] .room-light .wash-lamp { opacity: .2; }
html.cin-movie body[data-cam] .room-light .wash-fire { opacity: .6; }

/* phones: the tree sits above the den, so it dims itself; theater slides it out of frame (cinema.js) */
@media (max-width: 820px), (max-height: 500px) {
  html.cin-movie body[data-cam] .tree-layer { filter: brightness(.6); }
  html.cin-movie body[data-cam] .room-light .wash-fire { opacity: .36; }
  html.cin-on.cin-touch body[data-cam="room"] .room { animation: cam-breathe 14s ease-in-out infinite; transform-origin: 50% 40%; }
  .cam-tag span { font-size: 14px; }
}
@keyframes cam-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.004); } }

@media (prefers-reduced-motion: reduce) {
  .cam-tag, .cam-gate.pulled .cam-pull, html.cin-on.cin-touch body[data-cam] .room { animation: none !important; }
  .cam-spill { transition: none; }
}

/* the Solara in the dark: a warm rim from the lamp along its top and right edges, so it stays a real object */
html.cin-movie body[data-cam] .tv-body { transition: box-shadow var(--t-light) var(--ease-light);
  box-shadow: 0 2.4cqw 3.2cqw rgba(0,0,0,.7), inset 0 0 0 .25cqw rgba(0,0,0,.6), inset 0 .3cqw .2cqw rgba(255,214,160,.34),
    inset -.35cqw 0 .5cqw rgba(255,170,96,.16), 0 -.15cqw .4cqw rgba(255,190,120,.16); }
html.cin-movie body[data-cam] .bezel { box-shadow: inset 0 0 0 .25cqw #4a4038, inset 0 .6cqw 1.2cqw rgba(0,0,0,.85), 0 .14cqw 0 rgba(255,214,170,.18); }

/* phone held upright: the whole den rides the camera (cinema.js). The TV's own strip of wall gives way to the room's
   wall behind it, the VCR sinks into the dark below the picture, and the light is free to climb the wall */
@media (max-width: 820px) and (orientation: portrait), (max-width: 820px) and (min-height: 501px) {
  html.cin-movie body[data-cam="theater"] .av { background: transparent; box-shadow: none; }
  body[data-cam] .vcr-cubby { transition: filter var(--t-light) var(--ease-light); }
  html.cin-movie body[data-cam="theater"] .vcr-cubby { filter: brightness(.5) saturate(.8); }
  .cam-vig::before { background: radial-gradient(ellipse calc(var(--cam-w, 100px) * 1.2) calc(var(--cam-h, 100px) * 2.3) at var(--cam-cx) var(--cam-cy), transparent 30%, rgba(3, 2, 6, .32) 52%, rgba(3, 2, 6, .66) 80%, rgba(2, 1, 4, .86) 100%); }
}

/* Mom's note: the first screen. An index card taped up over the lit den. */
.ot-note { display: grid; place-items: center; padding: 16px; background: rgba(14, 9, 5, .58); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .35s ease; z-index: 1400; cursor: default; }
.ot-note.in { opacity: 1; } .ot-note.out { opacity: 0; pointer-events: none; }
.otn-card { position: relative; width: min(350px, 100%); padding: 30px 24px 20px 50px; color: #26201a; transform: rotate(-1.6deg) translateY(10px);
  transition: transform .45s var(--ease-snap, cubic-bezier(.2,.9,.3,1.2));
  background: linear-gradient(90deg, transparent 34px, #d8686a 34px, #d8686a 36px, transparent 36px),
    repeating-linear-gradient(180deg, transparent 0 33px, #a9c2dc 33px 34px) 0 62px / 100% calc(100% - 62px) no-repeat, #f7f1de;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 2px 0 rgba(255, 255, 255, .5) inset; border-radius: 3px; }
.ot-note.in .otn-card { transform: rotate(-1.6deg); }
.otn-tape { position: absolute; top: -13px; left: 50%; width: 110px; height: 28px; transform: translateX(-50%) rotate(2.5deg);
  background: rgba(232, 220, 182, .88); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); clip-path: polygon(2% 0, 98% 6%, 100% 94%, 0 100%); }
.otn-card h2 { margin: 0 0 6px; font: 400 25px/1.15 'Permanent Marker', cursive; color: #b3262b; text-wrap: balance; }
.otn-card ol { margin: 0; padding-left: 22px; font: 400 18px/34px 'Permanent Marker', cursive; }
.otn-card li::marker { color: #b3262b; }
.otn-sig { margin: 4px 0 16px; font: 400 17px/34px 'Permanent Marker', cursive; color: #3c4f8f; text-align: right; transform: rotate(-2deg); }
.otn-ok { display: block; width: 100%; min-height: 50px; border: 0; border-radius: 6px; cursor: pointer; background: #1d1712; color: #f3e2bf;
  font: 400 18px/1 'Archivo Black', 'Archivo', system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 4px 0 #000, 0 6px 14px rgba(0, 0, 0, .35); }
.otn-ok:active { transform: translateY(3px); box-shadow: 0 1px 0 #000; }
.otn-ok:focus-visible { outline: 3px solid #e7b545; outline-offset: 3px; }
.otn-sound { margin: 12px 0 0; text-align: center; font: 600 12px/1.2 Archivo, system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #6b5d4b; }
@media (prefers-reduced-motion: reduce) { .ot-note, .otn-card { transition: none; } }