/* Final finish for the public demo: gilded hero card, calmer type, and a studio that fits every screen. */
:root{--demo-gold:#c9a86a;--demo-gold-soft:#e9d7b3;--demo-plum-deep:#3b2733}

/* Hero · the finished Floral Romance card is the opening image. */
.cinema-invitation{perspective:1400px}
.cinema-invitation:before{content:'';position:absolute;inset:8% 10% 14%;background:radial-gradient(ellipse at 50% 45%,#fff3dd66 0%,#f1d9b422 40%,transparent 70%);filter:blur(18px);pointer-events:none}
#cinema-finished-card{border:1px solid #f4e7cf;outline:1px solid #c9a86a55;outline-offset:-5px;border-radius:3px;box-shadow:0 2px 0 #fff8ee inset,0 18px 30px -12px #1c101d99,0 48px 90px -20px #1c101dbb;cursor:pointer;transition:transform .9s cubic-bezier(.22,1,.36,1),box-shadow .9s}
#cinema-finished-card:hover{transform:rotate(-3deg) translateY(-6px) scale(1.015)}
.cinema-envelope{border:1px solid #d6c3a0;box-shadow:0 1px 0 #fff8 inset,0 26px 50px #1c101d66}
.cinema-envelope:after{content:'';position:absolute;inset:0;border-radius:5px;background:linear-gradient(120deg,transparent 30%,#ffffff2e 48%,transparent 60%);pointer-events:none}
.ov-card .ov-kicker{display:inline-flex;align-items:center;gap:12px;color:var(--demo-gold-soft)}
.ov-card .ov-kicker:before,.ov-card .ov-kicker:after{content:'';width:26px;height:1px;background:currentColor;opacity:.7}
.ov-card h2{text-shadow:0 2px 24px #1c101d55}
.ov-card .ov-summary{color:#f3e6ea;opacity:.9}
#overview-card .cinema-try{position:relative;gap:10px;border:1px solid #efddb9;background:linear-gradient(180deg,#fffaf0,#f5e9d6);color:#5a3f4f;box-shadow:0 1px 0 #fff inset,0 12px 30px #1c101d55;letter-spacing:.02em;transition:transform .25s,box-shadow .25s}
#overview-card .cinema-try:hover{transform:translateY(-2px);box-shadow:0 1px 0 #fff inset,0 18px 36px #1c101d66;border-color:var(--demo-gold)}
#overview-card .cinema-try:after{content:'→';font-weight:400;transition:translate .25s}
#overview-card .cinema-try:hover:after{translate:3px 0}
.cinema-hint{margin:10px 0 0;font-size:12px;letter-spacing:.08em;color:#e9d7b3;opacity:.8}

/* Hero gallery · four finished samples fanned like cards on a table; the front one rotates gently. */
.cinema-gallery{position:relative;display:grid;place-items:center;min-height:560px;width:100%;perspective:1600px}
.cinema-gallery-card{position:absolute;left:50%;top:50%;width:min(58%,300px);padding:0;border:0;background:none;border-radius:4px;
  --pos:0;--spread:calc(var(--pos) - 1.5);
  transform:translate(calc(-50% + var(--spread) * 22%),calc(-50% + var(--spread) * var(--spread) * 14px)) rotate(calc(var(--spread) * 7deg)) scale(.92);
  z-index:calc(10 - var(--pos));transition:transform .9s cubic-bezier(.22,1,.36,1),filter .9s;filter:brightness(.92) saturate(.95)}
.cinema-gallery-card img{display:block;width:100%;height:auto;aspect-ratio:397/559;object-fit:cover;border-radius:3px;border:1px solid #f4e7cf;outline:1px solid #c9a86a55;outline-offset:-5px;box-shadow:0 2px 0 #fff8ee inset,0 18px 30px -12px #1c101d99,0 48px 90px -20px #1c101dbb;background:#fbf7ed}
.cinema-gallery-card span{position:absolute;left:50%;bottom:-34px;translate:-50% 0;white-space:nowrap;font:600 11px/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#ead5b4;opacity:0;transition:opacity .4s}
.cinema-gallery-card.is-front{transform:translate(-50%,calc(-50% - 14px)) rotate(-2deg) scale(1.04);z-index:20;filter:none}
.cinema-gallery-card.is-front span{opacity:.9}
.cinema-gallery-card:not(.is-rendered) img{filter:saturate(.9)}

/* Catalogue shelf · a slow drift of the wider collection beneath the fan. */
.cinema-strip{grid-column:1/-1;grid-row:2;position:relative;z-index:3;margin-top:clamp(6px,2vw,22px);overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.cinema-strip-caption{margin:0 0 14px;text-align:center;color:#ead5b4}
.cinema-strip-caption b{display:block;font:400 clamp(20px,2.4vw,28px)/1.2 Georgia,serif;letter-spacing:-.01em;color:#fff6e6}
.cinema-strip-caption span{display:block;margin-top:4px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.8}
html[lang=th] .cinema-strip-caption span{letter-spacing:.04em;text-transform:none;font-size:13px}
.cinema-strip-track{display:flex;gap:12px;width:max-content;padding:6px 0 14px;animation:cinema-shelf 70s linear infinite}
.cinema-strip:hover .cinema-strip-track,.cinema-strip:focus-within .cinema-strip-track{animation-play-state:paused}
.cinema-strip-card{flex:none;width:clamp(72px,8vw,104px);border-radius:3px;filter:brightness(.94)}
.cinema-strip-card img{display:block;width:100%;height:auto;aspect-ratio:397/559;object-fit:cover;border-radius:3px;border:1px solid #f4e7cf99;box-shadow:0 10px 22px -8px #1c101daa;background:#fbf7ed}
@keyframes cinema-shelf{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.cinema-strip-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}.cinema-strip{mask:none;-webkit-mask:none}}

/* Template library · the whole catalogue, filtered by collection. */
#studio-templates{display:block;padding:0;max-height:min(520px,60vh)}
.studio-template-filter{position:sticky;top:0;z-index:2;display:flex;flex-wrap:wrap;gap:5px;padding:10px 10px 8px;background:#fffdf9f0;backdrop-filter:blur(6px);border-bottom:1px solid #eee2d6}
.studio-template-filter button{min-height:26px;padding:3px 9px;border:1px solid #e3d4c4;border-radius:50px;background:#fffaf4;color:#8a6a4a;font:500 10px/1.2 system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.studio-template-filter button[aria-pressed=true]{background:#704d60;border-color:#704d60;color:#fff8f1}
.studio-template-count{margin:8px 12px 2px;font-size:10px;letter-spacing:.04em;color:#a68b72}
.studio-template-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:8px 12px 14px;align-content:start}
.studio-template{content-visibility:auto;contain-intrinsic-size:150px 220px}

/* Live demo · the studio plays inline beneath the shelf, always running, clearly marked, watch-only. */
.cinema-live{grid-column:1/-1;grid-row:3;position:relative;z-index:3;width:min(100%,1000px);margin:clamp(18px,3vw,36px) auto 0;border:1px solid #d9c4ab;border-radius:20px;background:linear-gradient(160deg,#fffdf9,#f3e8de);box-shadow:0 1px 0 #fff inset,0 0 0 1px #c9a86a33,0 40px 90px #1c101d66;overflow:hidden}
.cinema-live-bar{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid #e9dccd;background:#fffdf9}
.studio-popout-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:50px;background:#704d60;color:#fff8f1;font:700 10px/1.4 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;flex:none}
.studio-popout-badge i{width:7px;height:7px;border-radius:50%;background:#f4c6a5;box-shadow:0 0 0 0 #f4c6a5aa;animation:popout-pulse 1.8s ease-out infinite}
@keyframes popout-pulse{to{box-shadow:0 0 0 7px #f4c6a500}}
.cinema-live-title{flex:1;min-width:0;font:600 12px/1.3 system-ui,sans-serif;color:#6b4a5c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cinema-live-note{font-size:11px;color:#8a7266;white-space:nowrap}
.cinema-live-view{position:relative;overflow:hidden;background:#efe4db}
.cinema-live-scale{transform-origin:0 0;pointer-events:none;user-select:none}
.cinema-live-scale .studio-demo{width:100%;margin:0;padding:10px}
.cinema-live-scale .studio-heading{margin:4px 0 12px}
.cinema-live-scale .studio-note{display:none}
.cinema-live-scale .studio-stage{box-shadow:none;animation:none}
.cinema-live-scale .studio-steps{font-size:13px}
.cinema-live-scale .studio-steps li[aria-current=step] b{color:#4d3543}
@media(max-width:1000px){.cinema-live{grid-row:4;margin-top:14px}}
@media(max-width:760px){.cinema-live{border-radius:16px}.cinema-live-note{display:none}.cinema-live-scale .studio-demo{padding:6px}}
@media(prefers-reduced-motion:reduce){.studio-popout-badge i{animation:none}}

/* Libraries · real artwork and real portraits, shown as what they are. */
.studio-elements{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:10px}
.studio-elements button{display:grid;gap:6px;justify-items:center;min-height:0;padding:8px 6px;font:inherit;border:1px solid #e7d9c9;border-radius:10px;background:#fffdf9;color:#8a6a4a;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s}
.studio-elements button:hover{transform:translateY(-2px);border-color:#c9a86a;box-shadow:0 10px 20px #4d35431a}
.studio-elements img{width:100%;height:74px;object-fit:contain;filter:drop-shadow(0 2px 2px #3a2a2622)}
.studio-elements span{font-size:10px;line-height:1.3;text-align:center;color:#8a6a4a}
.studio-portraits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:10px}
.studio-portraits button{display:grid;gap:5px;min-height:0;padding:5px;border:1px solid #e7d9c9;border-radius:10px;background:#fffdf9;color:#8a6a4a;cursor:pointer;font:inherit;transition:transform .2s,box-shadow .2s}
.studio-portraits button:hover{transform:translateY(-2px);box-shadow:0 10px 20px #4d35431a}
.studio-portraits button[aria-pressed=true]{border-color:#a1788b;box-shadow:0 0 0 1px #a1788b;background:#fcf5f6}
.studio-portraits img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:6px}
.studio-portraits span{font-size:10px;text-align:center}

/* Header stays legible as content slides beneath it. */
.demo-header.is-scrolled{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:linear-gradient(180deg,#1c121a2e,#1c121a12)}

/* Section kickers across the tour pick up the same gilded rule. */
.ov-section:not(.ov-card) .ov-kicker{display:inline-flex;align-items:center;gap:12px}
.ov-section:not(.ov-card) .ov-kicker:before{content:'';width:26px;height:1px;background:currentColor;opacity:.6}

/* Studio frame · one quiet gilded border instead of several competing ones. */
.ov-live-studio{border-color:#dcc6a8;background:linear-gradient(160deg,#fffdf9e6,#efe1d6cc);box-shadow:0 1px 0 #fff inset,0 0 0 1px #c9a86a33,0 40px 90px #2a182340}
.studio-steps li span{box-shadow:0 1px 0 #fff inset}
.studio-steps li[aria-current=step] span{box-shadow:0 0 0 4px #704d6022}
.studio-steps li[aria-current=step] b{color:#4d3543}
.studio-frame-caption{background:linear-gradient(180deg,#f7ecea,#f3e6e5)}
#studio-action{font-family:Georgia,'Noto Serif Thai',serif;font-size:14px;font-style:italic;color:#7a5a6a}
html[lang=th] #studio-action{font-family:system-ui,sans-serif;font-style:normal}
.studio-worktop{background:radial-gradient(ellipse at 50% 30%,#faf8f3,#efebe3 75%)}
.studio-worktop canvas{box-shadow:0 1px 0 #fff inset,0 12px 22px -10px #3a2a2666,0 30px 50px -22px #3a2a2655}
#studio-preview{background:linear-gradient(180deg,#7d586d,#6a4a5c);color:#fff8f1;border-color:#5e4252;box-shadow:0 1px 0 #ffffff33 inset,0 8px 18px #4d354318}
#studio-preview:hover{filter:brightness(1.06)}
#studio-preview:disabled{opacity:.6;cursor:progress}
.studio-template{transition:transform .2s,box-shadow .2s}
.studio-template:hover{transform:translateY(-2px);box-shadow:0 10px 20px #4d35431a}
.studio-note{letter-spacing:.06em;text-transform:uppercase}

/* Envelope and reply steps · readable names, one consistent toolbar. */
#studio-envelope-host .pn-envelope-intro h2{color:#5b4350;text-shadow:0 1px 0 #fffaf3}
#studio-envelope .studio-toolbar,#studio-rsvp .studio-toolbar{background:#fffdf8}
#studio-envelope .studio-toolbar .demo-button,#studio-rsvp .studio-toolbar .demo-button{min-height:40px;font-size:13px;border-radius:9px;color:#704d60;border-color:#cbb5bc}
#studio-envelope .studio-toolbar .demo-button:before,#studio-rsvp .studio-toolbar .demo-button:before{content:'← ';font-weight:400}
.studio-response label{background:#fffdf8;transition:border-color .2s,background .2s}
.studio-response label:has(input:checked){border-color:#a1788b;background:#f8eef2}
.studio-response .demo-primary{width:100%;background:linear-gradient(180deg,#7d586d,#6a4a5c);border-color:#5e4252}
#studio-result{border:1px solid #efe2cf;outline:1px solid #c9a86a44;outline-offset:-4px}

/* Tablets and phones · sections take the height of their content, not of the screen. */
@media(max-width:1000px){
  html{scroll-snap-type:none!important}
  .ov-hero,.ov-section,#overview-card{min-height:0;scroll-snap-align:none}
  .ov-section{padding:88px clamp(20px,5vw,48px) 44px;gap:28px;grid-template-columns:1fr;align-content:start}
  .ov-section .ov-copy,.ov-section:nth-of-type(odd) .ov-copy{grid-column:1;grid-row:1;text-align:center}
  .ov-section .ov-visual{grid-column:1;grid-row:2;max-width:560px;width:100%;margin:auto}
  .ov-section h2{font-size:clamp(34px,6.5vw,56px);margin:10px 0}
  .ov-summary{margin:0 auto;max-width:36ch;font-size:15px}
  #overview-card .cinema-try{margin-top:16px}
  .cinema-gallery{min-height:0;height:clamp(360px,62vw,480px)}
  .cinema-gallery-card{width:min(50%,250px)}
  .ov-section .ov-visual{margin-top:-6px}
  .cinema-strip{grid-row:3;margin-top:4px}
  .cinema-word{font-size:34vw;top:60%}
  .ov-guest-devices{display:grid;grid-template-columns:1fr;gap:18px;padding-bottom:0}
  .ov-guest-devices .ov-tablet{width:100%;transform:rotate(-1.5deg)}
  .ov-guest-devices .ov-mini-phone{position:static;width:min(100%,320px);justify-self:center;transform:rotate(1.5deg);border-width:6px}
  .ov-list{font-size:13px;padding:10px 12px 12px}.ov-list>div{padding:6px 0;display:flex;justify-content:space-between;gap:10px}
  .ov-device-bar{font-size:13px;padding:9px 12px}
  .ov-game{min-height:200px}.ov-vendors img{height:90px}
}
/* Phones and small tablets · the card always fits its frame. */
@media(max-width:760px){
  .ov-section{padding-top:84px}
  .cinema-gallery{height:clamp(300px,78vw,400px)}.cinema-gallery-card{width:min(56%,230px)}.cinema-gallery-card span{display:none}
  .studio-template-grid{grid-template-columns:1fr;gap:8px;padding:6px}
  .studio-template-filter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:6px;gap:4px}.studio-template-filter button{font-size:9px;padding:2px 7px;min-height:24px}.studio-template-count{display:none}
  .studio-elements,.studio-portraits{grid-template-columns:1fr;gap:6px;padding:6px}
  .studio-elements button{padding:6px 4px;gap:4px}.studio-elements img{height:52px}.studio-elements span,.studio-portraits span{font-size:8px}
  .studio-portraits button{padding:4px}
  .studio-canvas-wrap{width:calc(min(100%,300px) * var(--studio-zoom,1));margin:auto}
  .studio-ruler{width:min(100%,300px)}
  .studio-worktop{max-height:none;overflow:visible;padding:14px 12px 18px 24px}
  .studio-steps{gap:14px}.studio-steps li{font-size:12px}
  #overview-card .cinema-try{width:min(100%,320px);justify-content:center;padding:14px 24px}
  .cinema-hint{text-align:center}
}
@media(max-width:480px){
  .studio-workspace{grid-template-columns:minmax(0,1fr)}
  .studio-templates{border-right:0;border-bottom:1px solid #e5d6c8}
  #studio-templates{max-height:300px}
  .studio-template-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:6px 8px 10px}
  .studio-template-filter{padding:8px}.studio-template-filter button{font-size:9px;padding:2px 7px;min-height:24px}.studio-template-count{margin:6px 10px 0}
  .studio-template{min-height:0;padding:4px;contain-intrinsic-size:80px 110px}.studio-template img{height:64px}.studio-template span{font-size:8px}
  .cinema-strip-card{width:64px}
  .studio-portraits,.studio-elements{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:6px 8px}
  .studio-portraits img{aspect-ratio:4/5}.studio-elements img{height:46px}.studio-portraits span,.studio-elements span{font-size:8px}
  .studio-tool-tabs{grid-template-columns:repeat(4,1fr)}.studio-tool-tabs button{min-height:44px}
  .library-closed .studio-workspace,.tools-closed .studio-workspace{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){#cinema-finished-card,.studio-template,#overview-card .cinema-try{transition:none}}