@font-face {
  font-family: 'Keepze Cursive';
  src: url('/studio-v2/assets/fonts/dancing-script/DancingScript-variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

:host {
  display: block;
  min-width: 0;
  container-type: inline-size;
  color: #1e1c19;
  --paper: #f2f6f0;
  --stock-thickness: clamp(.65px, .22cqw, 1.1px);
  --fold-angle: 6deg;
  --camera-y: -3deg;
  --crease-alpha: .035;
  --crease-width: 18px;
  --light-direction: 110deg;
}
:host(.physical-card), :host([fit-height]) { container-type: size; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
.shell { width: 100%; min-width: 0; }
.giphy-credit { display: block; width: max-content; margin: 0 auto 4px; padding: 2px 4px; color: #244f40; font: 600 11px/1.3 system-ui, sans-serif; text-decoration: underline; }
.giphy-credit:focus-visible { outline: 3px solid #326d58; outline-offset: 2px; }
.stage {
  --face-width: min(48cqw, 390px);
  --face-height: calc(var(--face-width) * var(--card-ratio, 1.416));
  position: relative;
  width: 100%;
  min-height: calc(var(--face-height) + 46px);
  display: grid;
  place-items: center;
  padding: 22px 0;
  overflow: visible;
  isolation: isolate;
}
:host(.physical-card) .stage, :host([fit-height]) .stage { --face-width: min(48cqw, 390px, var(--fit-width, 390px)); }
.stage[data-view="inside"] {
  --face-width: min(43cqw, 360px);
  --fold-angle: 148deg;
  --camera-y: -16deg;
  --crease-alpha: .098;
  --crease-width: 34px;
  --light-direction: 80deg;
}
:host(.physical-card) .stage[data-view="inside"], :host([fit-height]) .stage[data-view="inside"] { --face-width: min(43cqw, 360px, var(--fit-width, 360px)); }
.stage:is([data-view="left"], [data-view="right"], [data-view="back"]) { --face-width: min(90cqw, 390px); }
:host(.physical-card) .stage:is([data-view="left"], [data-view="right"], [data-view="back"]),
:host([fit-height]) .stage:is([data-view="left"], [data-view="right"], [data-view="back"]) { --face-width: min(90cqw, 390px, var(--fit-width, 390px)); }
.scene {
  width: 100%;
  height: var(--face-height);
  display: grid;
  place-items: center;
  perspective: 1150px;
  perspective-origin: 50% 48%;
}
.book {
  position: relative;
  width: var(--face-width);
  height: var(--face-height);
  transform-style: preserve-3d;
  transform-origin: left bottom;
  transform: translateX(0) rotateX(-1deg) rotateY(var(--camera-y));
  transition: transform .8s cubic-bezier(.3,.1,.2,1);
}
.stage[data-view="inside"] .book { transform: translateX(calc(var(--face-width) * .5)) rotateX(-1deg) rotateY(var(--camera-y)); }
.leaf {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform-style: preserve-3d;
  transform: rotateY(calc(0deg - var(--fold-angle)));
  transition: transform .8s cubic-bezier(.3,.1,.2,1);
}
.face {
  position: relative;
  width: var(--face-width);
  height: var(--face-height);
  overflow: hidden;
  background-color: var(--paper);
  background-size: 128px;
  background-blend-mode: multiply;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  isolation: isolate;
  -webkit-mask-image: url('/studio-v2/paper-cut-mask.svg');
  mask-image: url('/studio-v2/paper-cut-mask.svg');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.face::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(var(--light-direction), #fff4, transparent 42%, #59462d14);
  mix-blend-mode: soft-light;
}
.face::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background-image: url('/studio-v2/cardstock-grain.svg');
  background-size: 128px;
  mix-blend-mode: soft-light;
  opacity: .24;
}
.book > .right, .leaf > .front, .leaf > .left { position: absolute; inset: 0; backface-visibility: hidden; }
.leaf > .front { transform: translateZ(calc(var(--stock-thickness) / 2)); }
.leaf > .left {
  transform: rotateY(180deg) translateZ(calc(var(--stock-thickness) / 2));
  -webkit-mask-image: url('/studio-v2/paper-cut-left-mask.svg');
  mask-image: url('/studio-v2/paper-cut-left-mask.svg');
}
.book > .right {
  -webkit-mask-image: url('/studio-v2/paper-cut-right-mask.svg');
  mask-image: url('/studio-v2/paper-cut-right-mask.svg');
}
.cover-image { display: block; width: 100%; height: 100%; object-fit: contain; filter: none; }
.cover-media-holder { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; }
.cover-media-holder > img, .cover-media-holder > video, .cover-media-holder .cover-media, .cover-media-holder .gif-media, .cover-media-holder .video-media { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }
.cover-media-holder .legacy-front { position: absolute; inset: 0; overflow: hidden; width: 100%; height: 100%; }
.cover-media-holder .gif-media, .cover-media-holder .video-media { position: relative; display: grid; place-items: center; }
.cover-media-holder .gif-media img, .cover-media-holder .video-media video { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }
.cover-media-holder button { position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%); z-index: 8; border: 1px solid #627c70; border-radius: 6px; padding: 5px 9px; color: #173b30; background: #fffdf5ec; font: 600 12px system-ui, sans-serif; cursor: pointer; }
.cover-words {
  position: absolute;
  z-index: 5;
  inset: 10%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 6%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  text-align: center;
  font: 400 calc(var(--face-width) * .077)/1.2 Georgia, serif;
}
.celebration-effect { position: absolute; inset: 0; z-index: 6; overflow: hidden; pointer-events: none; opacity: 0; }
.effect-on .front .celebration-effect { opacity: 1; }
.sparkle { position: absolute; left: calc(8% + (var(--i) * 7%)); top: calc(9% + (var(--i) * 5%)); color: #c99a36; font: 26px/1 Georgia, serif; opacity: 0; }
.sparkle:nth-child(1) { --i: 1; } .sparkle:nth-child(2) { --i: 2; } .sparkle:nth-child(3) { --i: 3; }
.sparkle:nth-child(4) { --i: 4; } .sparkle:nth-child(5) { --i: 5; } .sparkle:nth-child(6) { --i: 6; }
.sparkle:nth-child(7) { --i: 7; } .sparkle:nth-child(8) { --i: 8; } .sparkle:nth-child(9) { --i: 9; }
.sparkle:nth-child(10) { --i: 10; } .sparkle:nth-child(11) { --i: 11; } .sparkle:nth-child(12) { --i: 12; }
.effect-on .front .sparkle { animation: celebration-sparkle 3s ease-in-out infinite; animation-delay: calc(var(--i) * -.21s); }
@keyframes celebration-sparkle { 0%, 100% { transform: translateY(8px) scale(.6) rotate(-12deg); opacity: 0; } 45% { transform: translateY(-12px) scale(1.2) rotate(12deg); opacity: .9; } }
.effect-toggle { display: block; margin: 2px auto 10px; padding: 8px 12px; border: 1px solid #627c70; border-radius: 8px; background: #fffdf5; color: #173b30; cursor: pointer; font: 600 13px system-ui, sans-serif; }
.effect-toggle:focus-visible { outline: 3px solid #326d58; outline-offset: 3px; }
.face-content {
  position: relative;
  z-index: auto;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(5px, 2%, 12px);
  padding: 10%;
  overflow: hidden;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 400 calc(var(--face-width) * var(--text-size-factor, .0645))/1.45 Georgia, serif;
  text-align: var(--text-align, center);
}
.face-content[data-font="simple"] { font-family: Arial, Helvetica, sans-serif; }
.face-content[data-font="cursive"], .cover-words[data-font="cursive"], .typed-signature[data-font="cursive"] { font-family: 'Keepze Cursive', 'Segoe Script', cursive; font-weight: 600; }
.cover-words[data-font="simple"], .typed-signature[data-font="simple"] { font-family: Arial, Helvetica, sans-serif; }
.face-content p { margin: 0; flex: 0 0 auto; }
.entry-name { font-size: .78em; text-align: right; }
/* Keep live lettering sharp at reading size; grain belongs to the paper. */
.ink { color: #1e1c19; mix-blend-mode: normal; filter: none; text-shadow: none; }
.typed-signature { font-style: italic; }
.typed-signature[data-font="cursive"], .typed-signature[data-font="simple"] { font-style: normal; }
.drawn-signature { display: block; width: min(72%, 255px); height: auto; max-height: 18%; margin: 0 auto; overflow: visible; color: #1e1c19; }
.media-holder { position: relative; z-index: 6; flex: 0 1 auto; min-height: 0; }
.media-holder > .inside-media, .media-holder > .gif-media, .media-holder > .video-media { display: block; width: var(--media-width, 100%); max-width: 100%; max-height: calc(var(--face-height) * .5); margin: 0 auto; }
.media-holder .gif-media, .media-holder .video-media { position: relative; }
.media-holder img, .media-holder video { display: block; width: 100%; height: auto; max-width: 100%; max-height: calc(var(--face-height) * .5); margin: 0 auto; object-fit: contain; }
.media-holder button { display: block; margin: 4px auto 0; border: 1px solid #627c70; border-radius: 6px; padding: 5px 9px; color: #173b30; background: #fffdf5; font: 600 12px system-ui, sans-serif; cursor: pointer; }
.media-holder button:focus-visible, .cover-media-holder button:focus-visible { outline: 3px solid #326d58; outline-offset: 2px; }
.crease {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 5;
  width: var(--crease-width);
  opacity: var(--crease-alpha);
  pointer-events: none;
  transition: width .6s, opacity .6s;
}
.crease-left { right: 0; background: linear-gradient(90deg, transparent, rgba(66,53,34,.12) 35%, rgba(66,53,34,.5) 70%, rgb(66,53,34)); }
.crease-right { left: 0; background: linear-gradient(90deg, rgb(66,53,34), rgba(66,53,34,.5) 30%, rgba(66,53,34,.12) 65%, transparent); }
.solo, .focus, .all { display: none; }
.stage[data-view="back"] .scene, .stage[data-view="left"] .scene, .stage[data-view="right"] .scene, .stage[data-view="all"] .scene { display: none; }
.stage[data-view="back"] .solo, .stage[data-view="left"] .focus, .stage[data-view="right"] .focus { display: block; }
/* Back, Left and Right swap in with the same easing as the fold, instead of appearing instantly. */
.stage[data-view="back"] .solo, .stage[data-view="left"] .focus, .stage[data-view="right"] .focus { animation: face-turn .8s cubic-bezier(.3,.1,.2,1) both; }
.stage[data-view="front"] .scene, .stage[data-view="inside"] .scene { animation: face-fade .6s ease both; }
@keyframes face-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes face-turn { from { opacity: 0; transform: perspective(1400px) rotateY(-55deg) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .scene, .solo, .focus { animation: none !important; } }
.focus .crease { display: none; }
.stage[data-view="all"] .all {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: min(100%, 750px);
  justify-items: center;
}
.all-choice {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: 500 13px/1.3 system-ui, sans-serif;
}
.all-choice .face {
  --face-width: min(42cqw, 275px, calc(var(--preview-available-height, 800px) * .29));
  --face-height: calc(var(--face-width) * var(--card-ratio, 1.416));
  pointer-events: none;
}
:host(.physical-card) .all-choice .face, :host([fit-height]) .all-choice .face { --face-width: min(42cqw, 275px, var(--all-fit-width, 275px)); }
.all-choice .crease { display: none; }
.all-choice:focus-visible { outline: 3px solid #326d58; outline-offset: 6px; border-radius: 4px; }
.layout-warning {
  margin: 8px auto;
  padding: 10px 12px;
  width: min(100%, 650px);
  border-radius: 8px;
  background: #fff0d8;
  color: #523c19;
  font: 14px/1.45 system-ui, sans-serif;
}
.measure-layer { position: fixed; left: -10000px; top: 0; width: 310px; height: auto; visibility: hidden; pointer-events: none; z-index: -1; }
.measure-layer .face { position: relative; width: var(--face-width); height: var(--face-height); transform: none; }
.measure-layer .face-content { overflow: hidden; }
.read-full, .close-full { margin-left: 10px; border: 0; border-bottom: 1px solid currentColor; background: none; color: inherit; cursor: pointer; font: inherit; }
.small-face-read { display: block; margin: 2px auto 8px; padding: 7px 10px; border: 1px solid #627c70; border-radius: 8px; background: #fffdf5; color: #173b30; cursor: pointer; font: 600 13px system-ui, sans-serif; }
.full-text { width: min(92vw, 640px); max-height: 85vh; border: 0; border-radius: 12px; padding: 24px; color: #1e1c19; background: #fffdf8; font: 17px/1.55 Georgia, serif; }
.full-text::backdrop { background: #18221bcc; }
.full-text .close-full { float: right; font: 14px system-ui, sans-serif; }
.full-text h2 { font: 600 14px system-ui, sans-serif; margin: 22px 0 6px; }
.full-text p { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 650px) {
  .stage { --face-width: min(72cqw, 330px); }
  :host(.physical-card) .stage[data-view="front"], :host([fit-height]) .stage[data-view="front"] { --face-width: min(72cqw, 330px, var(--fit-width, 330px)); }
  .stage[data-view="inside"] { --face-width: min(45cqw, 280px); }
  .stage[data-view="all"] .all { gap: 12px; }
  .all-choice .face { --face-width: min(43cqw, 210px, calc(var(--preview-available-height, 800px) * .29)); }
}
@media (prefers-reduced-motion: reduce) {
  .book, .leaf, .crease { transition: none; }
  .celebration-effect, .sparkle { display: none !important; animation: none !important; }
}

/* Thin cut surfaces move with the sheets; no image filtering or cast shadows. */
.paper-edge { position:absolute; display:block; pointer-events:none; background:linear-gradient(90deg,#ece6d9,#c7beac 55%,#e8e0d0); backface-visibility:visible; }
.paper-edge-side { left:100%; top:0; width:var(--stock-thickness); height:100%; transform-origin:left center; transform:rotateY(90deg) translateX(calc(var(--stock-thickness) / -2)); }
.paper-edge-bottom { left:0; top:100%; width:100%; height:var(--stock-thickness); transform-origin:center top; transform:rotateX(90deg) translateY(calc(var(--stock-thickness) / -2)); }
.book > .right { transform:translateZ(calc(var(--stock-thickness) / 2)); }

/* The editor inspects one continuous open sheet by moving the camera. */
:host([pan-inside]) .stage { padding:6px 0; min-height:calc(var(--face-height) + 12px); }
:host([pan-inside]) .stage[data-view=front] { --face-width:min(88cqw,470px,var(--fit-width,470px)); }
:host([pan-inside]) .stage:is([data-view=left],[data-view=right]) { --face-width:min(86cqw,470px,var(--fit-width,470px)); --fold-angle:180deg; --camera-y:0deg; --crease-alpha:.04; }
:host([pan-inside]) .stage:is([data-view=left],[data-view=right]) .scene { display:grid; }
:host([pan-inside]) .stage:is([data-view=left],[data-view=right]) .focus { display:none; }
:host([pan-inside]) .stage[data-view=left] .book { transform:translateX(calc(var(--face-width) * .85)) rotateX(-1deg); }
:host([pan-inside]) .stage[data-view=right] .book { transform:translateX(calc(var(--face-width) * .15)) rotateX(-1deg); }
@media(max-width:650px){
:host([pan-inside]) .stage[data-view=inside] { --face-width:min(86cqw,470px,var(--fit-width,470px)); --fold-angle:180deg; --camera-y:0deg; --crease-alpha:.04; }
:host([pan-inside]) .stage[data-view=inside] .book { transform:translateX(calc(var(--face-width) * .85)) rotateX(-1deg); }
}

:host(.workspace-preview) .shell,:host(.presentation-preview) .shell{height:100%;min-height:0;display:flex;flex-direction:column;justify-content:center}
:host(.workspace-preview) .stage{padding:12px 0;min-height:calc(var(--face-height) + 24px)}
:host(.workspace-preview) .stage[data-view="front"]{--face-width:min(90cqw,390px,var(--fit-width,390px))}

:host(.presentation-preview) .stage{flex:none;padding:16px 0;min-height:calc(var(--face-height) + 32px)}

/* Cast shadows belong behind the sheets, outside the printed artwork.
   Separate planes preserve the fold's 3D transforms during opening. */
:host { --card-cast-shadow: 0 18px 32px rgba(48,38,29,.18), 0 4px 9px rgba(48,38,29,.07); }
.book::before, .leaf::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: var(--card-cast-shadow); transform: translateZ(-1px);
}
.solo, .focus { filter: drop-shadow(0 18px 20px rgba(48,38,29,.23)); }
.all-choice { position: relative; isolation: isolate; }
.all-choice::before {
  content: ''; position: absolute; top: 0; left: 50%; z-index: -1;
  width: min(42cqw,275px,calc(var(--preview-available-height,800px) * .29));
  aspect-ratio: 1 / var(--card-ratio,1.416); transform: translateX(-50%);
  box-shadow: var(--card-cast-shadow); pointer-events: none;
}
:host(.physical-card) .all-choice::before, :host([fit-height]) .all-choice::before {
  width: min(42cqw,275px,var(--all-fit-width,275px));
}
@media(max-width:650px){
.all-choice::before { width: min(43cqw,210px,calc(var(--preview-available-height,800px) * .29)); }
:host(.physical-card) .all-choice::before, :host([fit-height]) .all-choice::before { width: min(42cqw,275px,var(--all-fit-width,275px)); }
}

/* Several signed notes share the writing area; paper/fold geometry stays intact. */
.face-content.group-content{justify-content:flex-start;gap:calc(var(--face-width) * .035);white-space:normal}
.group-note{flex:0 0 auto;min-width:0;display:flex;flex-direction:column;gap:calc(var(--face-width) * .012)}
.group-note .message{white-space:pre-wrap;overflow-wrap:anywhere}
.group-note .entry-name{font-size:.85em;font-weight:600;white-space:pre-wrap}
.group-note .drawn-signature{height:calc(var(--face-width) * .1);width:auto;max-width:75%;max-height:none;margin:0 0 0 auto}
.group-note .media-holder{flex:none;height:calc(var(--face-width) * .25);min-height:0}
.group-note .media-holder img,.group-note .media-holder video,.group-note .media-holder>.gif-media,.group-note .media-holder>.video-media{height:100%;max-height:100%;object-fit:contain}