/* Momo Studio styles
   Editor UI first, frame templates below. 1rem = 16px. */

/* Tokens */
:root {
  /* backgrounds */
  --bg-app: #111114;
  --bg-panel: #18181c;
  --bg-panel-footer: #1c1c21;
  --bg-stage: #0d0d10;
  --bg-field: #141418;

  /* borders */
  --line: #26262c;
  --line-seg: #2a2a31;
  --line-field: #3f3f46;
  --line-hover: #52525b;

  /* text */
  --text: #e4e4e7;
  --text-strong: #fafafa;
  --text-soft: #d4d4d8;
  --text-muted: #a1a1aa;
  --text-dim: #71717a;
  --text-faint: #52525b;
  --text-sep: #3f3f46;

  /* accent */
  --gold: #d9bd84;
  --gold-hover: #e6cd96;
  --gold-light: #f3e7c9;
  --on-gold: #17140d;

  /* fonts */
  --font-ui: 'Noto Sans KR', 'Noto Sans JP', sans-serif;
  --font-mono: 'JetBrains Mono', 'Noto Sans KR', 'Noto Sans JP', monospace;
  --font-brand: 'Cinzel', serif;

  /* layout */
  --topbar-h: 3.25rem;
  --sidebar-w: 15.5rem;
  --panel-w: 18.75rem;
}

/* Base */
html,
body {
  margin: 0;
  height: 100%;
  background: var(--bg-app);
  color: var(--text);
  font-family: var(--font-ui);
  overflow: hidden;
}
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-light); }

.nowrap { white-space: nowrap; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Scrollbars */
::-webkit-scrollbar { width: 0.625rem; height: 0.625rem; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-field);
  border: 0.1875rem solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--gold); }
::-webkit-scrollbar-corner { background: transparent; }

/* Firefox only (Chrome would drop the custom thumb above if this applied there) */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--line-field) transparent; }
}

/* App grid */
.app {
  display: grid;
  grid-template-rows: var(--topbar-h) minmax(0, 1fr);
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--panel-w);
  height: 100vh;
  width: 100vw;
}

/* Top bar */
.topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem 0 1.25rem;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.brand-mark {
  width: 0.625rem;
  height: 0.625rem;
  background: var(--gold);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.brand-name {
  font: 600 0.9375rem/1 var(--font-brand);
  letter-spacing: 0.18em;
  color: var(--gold-light);
  white-space: nowrap;
}
.brand-sub {
  font: 400 0.75rem/1 var(--font-ui);
  color: var(--text-dim);
  white-space: nowrap;
}
.topbar-meta {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  font: 400 0.75rem/1 var(--font-mono);
  color: var(--text-muted);
}
.topbar-meta-current { color: var(--text); }
.topbar-meta-sep { color: var(--text-sep); }
.topbar-actions { display: flex; align-items: center; gap: 0.75rem; }

/* Ko-fi link */
.coffee-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 1.875rem;
  padding: 0 0.75rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  font: 500 0.75rem/1 var(--font-ui);
  color: var(--gold);
  white-space: nowrap;
}
.coffee-link:hover { background: var(--gold); color: var(--on-gold); }
.coffee-dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: currentColor;
}

/* Segmented controls (language, layout, ratio, format) */
.seg {
  display: grid;
  gap: 0.25rem;
  padding: 0.1875rem;
  background: var(--bg-field);
  border: 1px solid var(--line-seg);
  border-radius: 0.5rem;
}
.seg-2 { grid-template-columns: 1fr 1fr; }
.seg-4 { grid-template-columns: repeat(4, 1fr); }
.seg-lang { display: flex; gap: 0.125rem; border-radius: 0.4375rem; }

.seg-btn {
  height: 2rem;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  font: 500 0.8125rem/1 var(--font-ui);
}
.seg-btn--sm { height: 1.75rem; font: 500 0.75rem/1 var(--font-mono); }
.seg-btn--lang {
  height: 1.5rem;
  padding: 0 0.5625rem;
  border-radius: 0.3125rem;
  font: 500 0.75rem/1 var(--font-ui);
}

/* Ratio buttons */
.ratio-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.4375rem 0 0.375rem;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
}
.ratio-icon { border: 1.5px solid currentColor; border-radius: 2px; }
.ratio-label { font: 500 0.6875rem/1 var(--font-mono); }

/* Left: template list */
.sidebar {
  background: var(--bg-panel);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  padding: 1rem 0.875rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.sidebar > .section-label { padding: 0 0.25rem; }

.thumb {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  padding: 0.375rem 0.375rem 0.625rem;
  border-radius: 0.5rem;
  cursor: pointer;
  text-align: left;
}
.thumb-preview {
  overflow: hidden;
  border-radius: 0.25rem;
  position: relative;
  pointer-events: none;
  align-self: center;
}
.thumb-caption { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.125rem; }
.thumb-code { font: 500 0.6875rem/1 var(--font-mono); color: var(--gold); }
.thumb-name { font: 500 0.8125rem/1.2 var(--font-ui); color: var(--text); }

.sidebar-footer {
  margin-top: auto;
  padding: 0.75rem 0.25rem 0;
  font: 400 0.625rem/1.5 var(--font-ui);
  color: var(--text-faint);
}
.sidebar-footer a { color: var(--text-dim); }
.sidebar-footer a:hover { color: var(--gold); }

/* Center: canvas */
.stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg-stage);
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 1.25rem 1.25rem;
}
.stage-box { position: relative; box-shadow: 0 1.25rem 3.75rem rgba(0, 0, 0, 0.6); }
.scale-origin { transform-origin: 0 0; }

/* Right: settings panel */
.panel {
  background: var(--bg-panel);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.panel-scroll { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }

.panel-section {
  padding: 1.125rem 1.125rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-bottom: 1px solid var(--line);
}
.panel-section--roomy { gap: 0.875rem; }

/* Section labels */
.section-label {
  font: 600 0.6875rem/1 var(--font-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.section-head { display: flex; align-items: center; justify-content: space-between; }

/* Text buttons (reset) */
.link-btn {
  font: 500 0.75rem/1 var(--font-ui);
  background: none;
  color: var(--gold);
  border: none;
  cursor: pointer;
  padding: 0;
}

/* Help text */
.hint { font: 400 0.6875rem/1.4 var(--font-ui); color: var(--text-dim); }

/* Upload */
.upload {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.5rem;
  padding: 0 0.625rem;
  border: 1px dashed var(--line-field);
  border-radius: 0.5rem;
  font: 500 0.8125rem/1 var(--font-ui);
  color: var(--text);
  cursor: pointer;
  background: var(--bg-field);
  overflow: hidden;
}
.upload:hover { border-color: var(--gold); }
.upload input { display: none; }

/* Fields */
.field {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
  font: 500 0.75rem/1 var(--font-ui);
  color: var(--text-muted);
}
.field--tight { gap: 0.375rem; }
.field-group { display: flex; flex-direction: column; gap: 0.4375rem; }
.field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 500 0.75rem/1 var(--font-ui);
  color: var(--text-muted);
}
.field-split { display: flex; justify-content: space-between; }
.field-value { font-family: var(--font-mono); color: var(--text-soft); }

.input {
  font: 400 0.875rem var(--font-ui);
  background: var(--bg-field);
  color: var(--text-strong);
  border: 1px solid var(--line-field);
  border-radius: 0.375rem;
  padding: 0.5rem 0.625rem;
}
textarea.input { resize: vertical; line-height: 1.5; }

/* Show checkboxes */
.check { display: flex; align-items: center; gap: 0.3125rem; cursor: pointer; color: var(--text-soft); }
.check input { accent-color: var(--gold); margin: 0; }

/* Sliders */
.range { accent-color: var(--gold); margin: 0.25rem 0; }

/* Color swatches */
.swatches { display: flex; gap: 0.5rem; }
.swatch { width: 1.5rem; height: 1.5rem; border-radius: 50%; cursor: pointer; padding: 0; }

/* Export */
.export {
  padding: 1rem 1.125rem 1.125rem;
  border-top: 1px solid var(--line);
  background: var(--bg-panel-footer);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.export-btn {
  height: 2.625rem;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  font: 700 0.875rem/1 var(--font-ui);
  background: var(--gold);
  color: var(--on-gold);
}
.export-btn:hover { background: var(--gold-hover); }


/* Frame templates (Frame, Shot, Char)
   Sizes use cqmin/cqw so they scale with the frame.
   Anything computed at runtime (fonts, positions) stays inline in the HTML. */

/* Frame root */
.frame {
  position: relative;
  overflow: hidden;
  background: #0c0b10;
  container-type: size;
}

/* Shared */
.fill {
  position: absolute;
  inset: 0;
}

/* T1 Frame */
.t1-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 35%,#2b3048 0%,#161822 70%);
}
.t1-mat {
  position: absolute;
  inset: 7.4cqmin;
  padding: 2.6cqmin;
  background: #f3eee4;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}
.t1-photo {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(60,40,10,.18);
}
.t1-scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48%;
  background: linear-gradient(to top,rgba(10,10,22,.85),rgba(10,10,22,.5) 45%,rgba(10,10,22,0));
  pointer-events: none;
}
.t1-caption {
  position: absolute;
  left: 4cqmin;
  right: 4cqmin;
  bottom: 5.5cqmin;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.7cqmin;
  text-align: center;
  pointer-events: none;
}
.t1-title {
  font: 600 2.4cqmin/1 'Cinzel',serif;
  letter-spacing: .34em;
  color: #f3e7c9;
  padding-left: .34em;
}
.t1-name {
  font: italic 600 7.8cqmin/1 'Cormorant Garamond',serif;
  color: #fff;
}
.t1-ornament {
  display: flex;
  align-items: center;
  gap: 1.7cqmin;
}
.t1-ornament-line {
  width: 10cqmin;
  height: 1px;
  background: rgba(217,195,143,.8);
}
.t1-diamond {
  width: .85cqmin;
  height: .85cqmin;
  background: #d9c38f;
  transform: rotate(45deg);
}
.t1-meta {
  font: 500 2cqmin/1 'Cinzel',serif;
  letter-spacing: .3em;
  color: rgba(243,231,201,.9);
  text-transform: uppercase;
  padding-left: .3em;
}
.t1-titlebar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6.5cqmin;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.6cqmin;
  pointer-events: none;
}
.t1-ornament-sm {
  display: flex;
  align-items: center;
  gap: 1.3cqmin;
}
.t1-ornament-line-sm {
  width: min(11cqmin,5cqw);
  height: 1px;
  background: rgba(217,195,143,.8);
}
.t1-title-only {
  font: 600 min(5.4cqmin,3.6cqw)/1 'Cinzel',serif;
  letter-spacing: .24em;
  color: #f6ecd2;
  padding-left: .24em;
  white-space: nowrap;
}

/* T2 Blur + Glass */
.t2-bg {
  position: absolute;
  inset: 0;
  background: #1f2b5c;
}
.t2-blur {
  position: absolute;
  inset: -8cqmin;
  filter: blur(44px) saturate(1.25);
}
.t2-tint {
  position: absolute;
  inset: 0;
  background: rgba(12,14,30,.28);
}
.t2-card-area {
  position: absolute;
  top: 8.9cqmin;
  bottom: 8.9cqmin;
  left: 10cqmin;
  right: 10cqmin;
}
.t2-card {
  position: absolute;
  inset: 0;
  border-radius: 2.6cqmin;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.18);
}
.t2-glass {
  position: absolute;
  left: 4.4cqmin;
  bottom: -3.5cqmin;
  max-width: calc(100% - 8.8cqmin);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1.3cqmin;
  padding: 2.8cqmin 3.7cqmin 3cqmin;
  border-radius: 2cqmin;
  background: rgba(22,24,44,.32);
  backdrop-filter: blur(26px) saturate(1.4);
  -webkit-backdrop-filter: blur(26px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.3);
  box-shadow: 0 20px 50px rgba(0,0,0,.3);
}
.t2-title {
  font: 600 1.7cqmin/1 'Cinzel',serif;
  letter-spacing: .32em;
  color: rgba(255,255,255,.92);
}
.t2-name {
  font: 600 5.4cqmin/1 'Josefin Sans',sans-serif;
  color: #fff;
  padding-top: .5cqmin;
}
.t2-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1cqmin 2cqmin;
  padding-top: .4cqmin;
}
.t2-meta-item {
  display: flex;
  align-items: baseline;
  gap: .9cqmin;
}
.t2-meta-label {
  font: 600 1.3cqmin/1 'Josefin Sans',sans-serif;
  letter-spacing: .18em;
  color: rgba(255,255,255,.65);
}
.t2-meta-value {
  font: 400 2.4cqmin/1 'Josefin Sans',sans-serif;
  color: #fff;
}
.t2-meta-divider {
  width: 1px;
  height: 2.2cqmin;
  background: rgba(255,255,255,.35);
}
.t2-glass-title {
  position: absolute;
  left: 4.4cqmin;
  bottom: -2.8cqmin;
  display: flex;
  align-items: center;
  gap: 1.7cqmin;
  padding: 2.4cqmin 3.7cqmin;
  border-radius: 2cqmin;
  background: rgba(22,24,44,.32);
  backdrop-filter: blur(26px) saturate(1.4);
  -webkit-backdrop-filter: blur(26px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.3);
  box-shadow: 0 20px 50px rgba(0,0,0,.3);
}
.t2-diamond {
  width: .75cqmin;
  height: .75cqmin;
  background: #fff;
  transform: rotate(45deg);
  opacity: .85;
}
.t2-title-only {
  font: 600 min(3.1cqmin,2.6cqw)/1 'Cinzel',serif;
  letter-spacing: .26em;
  color: #fff;
  white-space: nowrap;
}

/* T3 Character (sky, crystal, stars) */
.t3-sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,#eeb2b6 0%,#f4bdb3 18%,#f7c3a8 36%,#f6b691 52%,#f0ab98 64%,#dba3b0 76%,#c4a2c6 88%,#b4a0cc 100%);
}
.t3-cloud-1 {
  position: absolute;
  left: -10%;
  top: 6%;
  width: 70%;
  height: 7%;
  border-radius: 50%;
  background: rgba(255,225,220,.45);
  filter: blur(22px);
}
.t3-cloud-2 {
  position: absolute;
  left: 30%;
  top: 14%;
  width: 80%;
  height: 5%;
  border-radius: 50%;
  background: rgba(255,215,205,.4);
  filter: blur(18px);
}
.t3-cloud-3 {
  position: absolute;
  left: -5%;
  top: 27%;
  width: 60%;
  height: 6%;
  border-radius: 50%;
  background: rgba(255,230,215,.5);
  filter: blur(20px);
}
.t3-cloud-4 {
  position: absolute;
  left: 45%;
  top: 34%;
  width: 65%;
  height: 4%;
  border-radius: 50%;
  background: rgba(255,205,190,.45);
  filter: blur(16px);
}
.t3-cloud-5 {
  position: absolute;
  left: 5%;
  top: 46%;
  width: 55%;
  height: 4%;
  border-radius: 50%;
  background: rgba(255,220,200,.35);
  filter: blur(14px);
}
.t3-mist-1 {
  position: absolute;
  left: 4%;
  top: 70%;
  width: 16%;
  height: 2.2%;
  border-radius: 50%;
  background: rgba(150,130,175,.55);
  filter: blur(4px);
}
.t3-mist-2 {
  position: absolute;
  left: 82%;
  top: 64%;
  width: 20%;
  height: 2.4%;
  border-radius: 50%;
  background: rgba(150,130,175,.5);
  filter: blur(4px);
}
.t3-mist-3 {
  position: absolute;
  left: 68%;
  top: 67%;
  width: 12%;
  height: 1.6%;
  border-radius: 50%;
  background: rgba(160,140,185,.45);
  filter: blur(3px);
}
.t3-hill-back {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22%;
  background: #a596c2;
  opacity: .75;
  clip-path: polygon(0 45%,7% 30%,14% 42%,22% 26%,31% 40%,40% 22%,50% 38%,58% 28%,67% 44%,76% 24%,86% 36%,94% 28%,100% 34%,100% 100%,0 100%);
}
.t3-hill-front {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 14%;
  background: #9384b4;
  opacity: .85;
  clip-path: polygon(0 40%,10% 22%,20% 46%,30% 30%,42% 50%,54% 26%,66% 44%,78% 20%,90% 40%,100% 26%,100% 100%,0 100%);
}
.t3-haze {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8%;
  height: 14%;
  background: linear-gradient(180deg,rgba(220,190,215,0),rgba(220,190,215,.35),rgba(220,190,215,0));
}
.t3-crystal-glow {
  position: absolute;
  width: 83.3cqmin;
  height: 83.3cqmin;
  background: radial-gradient(closest-side,rgba(140,220,255,.4),rgba(140,220,255,0));
}
.t3-crystal-main {
  position: absolute;
  width: 22.2cqmin;
  height: 66.7cqmin;
  clip-path: polygon(50% 0,100% 30%,70% 100%,30% 100%,0 30%);
  background: linear-gradient(160deg,rgba(225,248,255,.85),rgba(110,190,240,.45) 50%,rgba(40,90,170,.2));
}
.t3-crystal-left {
  position: absolute;
  width: 12cqmin;
  height: 38.9cqmin;
  clip-path: polygon(50% 0,100% 35%,65% 100%,35% 100%,0 35%);
  background: linear-gradient(160deg,rgba(200,240,255,.6),rgba(70,140,210,.2));
}
.t3-crystal-right {
  position: absolute;
  width: 13.9cqmin;
  height: 46.3cqmin;
  clip-path: polygon(50% 0,100% 35%,65% 100%,35% 100%,0 35%);
  background: linear-gradient(160deg,rgba(200,240,255,.55),rgba(70,140,210,.18));
}
.t3-shard-1 {
  position: absolute;
  width: 5.2cqmin;
  height: 13.9cqmin;
  clip-path: polygon(50% 0,100% 40%,50% 100%,0 40%);
  background: rgba(190,235,255,.4);
}
.t3-shard-2 {
  position: absolute;
  width: 3.7cqmin;
  height: 10.2cqmin;
  clip-path: polygon(50% 0,100% 40%,50% 100%,0 40%);
  background: rgba(190,235,255,.3);
}
.t3-sparkles {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(2px 2px at 12% 20%,rgba(200,240,255,.9),transparent),radial-gradient(2px 2px at 30% 70%,rgba(200,240,255,.7),transparent),radial-gradient(3px 3px at 48% 34%,rgba(200,240,255,.8),transparent),radial-gradient(2px 2px at 60% 82%,rgba(200,240,255,.6),transparent),radial-gradient(2px 2px at 88% 14%,rgba(200,240,255,.8),transparent),radial-gradient(3px 3px at 92% 64%,rgba(200,240,255,.7),transparent),radial-gradient(2px 2px at 22% 48%,rgba(200,240,255,.6),transparent);
}
.t3-night {
  position: absolute;
  inset: 0;
  background: linear-gradient(170deg,#0a0d26 0%,#1a1844 55%,#2e2052 100%);
}
.t3-stars {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(2px 2px at 8% 12%,#fff,transparent),radial-gradient(1.5px 1.5px at 18% 40%,#fff,transparent),radial-gradient(2px 2px at 26% 18%,#ffe9c4,transparent),radial-gradient(1.5px 1.5px at 36% 62%,#fff,transparent),radial-gradient(2.5px 2.5px at 44% 10%,#fff,transparent),radial-gradient(1.5px 1.5px at 52% 30%,#ffe9c4,transparent),radial-gradient(2px 2px at 58% 76%,#fff,transparent),radial-gradient(1.5px 1.5px at 66% 8%,#fff,transparent),radial-gradient(2px 2px at 78% 22%,#ffe9c4,transparent),radial-gradient(1.5px 1.5px at 86% 48%,#fff,transparent),radial-gradient(2.5px 2.5px at 94% 14%,#fff,transparent),radial-gradient(1.5px 1.5px at 12% 74%,#fff,transparent),radial-gradient(2px 2px at 70% 90%,#ffe9c4,transparent),radial-gradient(1.5px 1.5px at 96% 82%,#fff,transparent),radial-gradient(1.5px 1.5px at 4% 52%,#fff,transparent);
}
.t3-ring-outer {
  position: absolute;
  width: 92.6cqmin;
  height: 92.6cqmin;
  border-radius: 50%;
  border: 1px solid rgba(255,220,160,.28);
}
.t3-ring-dashed {
  position: absolute;
  width: 76cqmin;
  height: 76cqmin;
  border-radius: 50%;
  border: 2px dashed rgba(255,220,160,.22);
}
.t3-ring-inner {
  position: absolute;
  width: 55.6cqmin;
  height: 55.6cqmin;
  border-radius: 50%;
  border: 1px solid rgba(255,220,160,.2);
  background: radial-gradient(closest-side,rgba(255,210,150,.16),rgba(255,210,150,0));
}
.t3-star-mark {
  position: absolute;
  width: 1.1cqmin;
  height: 1.1cqmin;
  background: #ffdca0;
  transform: rotate(45deg);
}
.t3-sky-shade {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 60%;
  background: linear-gradient(90deg,rgba(80,50,105,.42),rgba(80,50,105,0));
  pointer-events: none;
}
.t3-crystal-shade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  background: linear-gradient(0deg,rgba(4,8,20,.75),rgba(4,8,20,0));
  pointer-events: none;
}
.t3-text {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 2.6cqmin;
  pointer-events: none;
}
.t3-title {
  font: 600 2.2cqmin/1 'Cinzel',serif;
  letter-spacing: .42em;
}
.t3-name {
  font: 700 12.6cqmin/.98 'Cinzel Decorative',serif;
  max-width: min(89cqmin,84cqw);
  text-wrap: balance;
}
.t3-meta-row {
  display: flex;
  align-items: center;
  gap: 1.85cqmin;
}
.t3-meta-line {
  width: 5.2cqmin;
  height: 2px;
}
.t3-meta {
  font: 500 2cqmin/1 'Cinzel',serif;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.t3-title-big {
  font: 700 11.9cqmin/.98 'Cinzel Decorative',serif;
}
.t3-xiv {
  font: 600 3.7cqmin/1 'Cinzel',serif;
  letter-spacing: .4em;
}

/* T4 Info Panel */
.t4-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%,#1f1b26 0%,#0c0b10 75%);
}
.t4-photo {
  position: absolute;
  inset: 6.3cqmin;
  overflow: hidden;
}
.t4-border {
  position: absolute;
  inset: 4.6cqmin;
  border: 1px solid rgba(201,168,106,.6);
  pointer-events: none;
}
.t4-corner-tl {
  position: absolute;
  left: -.65cqmin;
  top: -.65cqmin;
  width: 5.6cqmin;
  height: 5.6cqmin;
  border-top: 2px solid #c9a86a;
  border-left: 2px solid #c9a86a;
}
.t4-corner-tr {
  position: absolute;
  right: -.65cqmin;
  top: -.65cqmin;
  width: 5.6cqmin;
  height: 5.6cqmin;
  border-top: 2px solid #c9a86a;
  border-right: 2px solid #c9a86a;
}
.t4-corner-bl {
  position: absolute;
  left: -.65cqmin;
  bottom: -.65cqmin;
  width: 5.6cqmin;
  height: 5.6cqmin;
  border-bottom: 2px solid #c9a86a;
  border-left: 2px solid #c9a86a;
}
.t4-corner-br {
  position: absolute;
  right: -.65cqmin;
  bottom: -.65cqmin;
  width: 5.6cqmin;
  height: 5.6cqmin;
  border-bottom: 2px solid #c9a86a;
  border-right: 2px solid #c9a86a;
}
.t4-gem-tl {
  position: absolute;
  left: -1.2cqmin;
  top: -1.2cqmin;
  width: 1.1cqmin;
  height: 1.1cqmin;
  background: #c9a86a;
  transform: rotate(45deg);
}
.t4-gem-tr {
  position: absolute;
  right: -1.2cqmin;
  top: -1.2cqmin;
  width: 1.1cqmin;
  height: 1.1cqmin;
  background: #c9a86a;
  transform: rotate(45deg);
}
.t4-gem-bl {
  position: absolute;
  left: -1.2cqmin;
  bottom: -1.2cqmin;
  width: 1.1cqmin;
  height: 1.1cqmin;
  background: #c9a86a;
  transform: rotate(45deg);
}
.t4-gem-br {
  position: absolute;
  right: -1.2cqmin;
  bottom: -1.2cqmin;
  width: 1.1cqmin;
  height: 1.1cqmin;
  background: #c9a86a;
  transform: rotate(45deg);
}
.t4-gem-top {
  position: absolute;
  left: calc(50% - .45cqmin);
  top: -.55cqmin;
  width: .9cqmin;
  height: .9cqmin;
  background: #c9a86a;
  transform: rotate(45deg);
}
.t4-gem-bottom {
  position: absolute;
  left: calc(50% - .45cqmin);
  bottom: -.55cqmin;
  width: .9cqmin;
  height: .9cqmin;
  background: #c9a86a;
  transform: rotate(45deg);
}
.t4-panel {
  position: absolute;
  right: 10.4cqmin;
  bottom: 10.7cqmin;
  width: min(50cqmin,calc(100% - 20.8cqmin));
  box-sizing: border-box;
  padding: 3.1cqmin 3.7cqmin 3.3cqmin;
  display: flex;
  flex-direction: column;
  gap: 1.7cqmin;
  background: rgba(13,12,20,.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(201,168,106,.7);
  box-shadow: inset 0 0 0 6px rgba(13,12,20,.8),inset 0 0 0 7px rgba(201,168,106,.25),0 20px 60px rgba(0,0,0,.5);
}
.t4-panel-gem-tl {
  position: absolute;
  left: -.55cqmin;
  top: -.55cqmin;
  width: .9cqmin;
  height: .9cqmin;
  background: #c9a86a;
  transform: rotate(45deg);
}
.t4-panel-gem-tr {
  position: absolute;
  right: -.55cqmin;
  top: -.55cqmin;
  width: .9cqmin;
  height: .9cqmin;
  background: #c9a86a;
  transform: rotate(45deg);
}
.t4-panel-gem-bl {
  position: absolute;
  left: -.55cqmin;
  bottom: -.55cqmin;
  width: .9cqmin;
  height: .9cqmin;
  background: #c9a86a;
  transform: rotate(45deg);
}
.t4-panel-gem-br {
  position: absolute;
  right: -.55cqmin;
  bottom: -.55cqmin;
  width: .9cqmin;
  height: .9cqmin;
  background: #c9a86a;
  transform: rotate(45deg);
}
.t4-title {
  font: 600 1.6cqmin/1 'Cinzel',serif;
  letter-spacing: .34em;
  color: #d9bd84;
}
.t4-divider {
  display: flex;
  align-items: center;
  gap: .9cqmin;
}
.t4-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,rgba(201,168,106,.8),rgba(201,168,106,.1));
}
.t4-divider-gem {
  width: .65cqmin;
  height: .65cqmin;
  border: 1px solid #c9a86a;
  transform: rotate(45deg);
}
.t4-name {
  font: 700 5.2cqmin/1.05 'Cormorant Garamond',serif;
  color: #f4ecdb;
}
.t4-meta {
  display: flex;
  flex-direction: column;
}
.t4-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 1.1cqmin 0;
  border-top: 1px dotted rgba(201,168,106,.35);
}
.t4-meta-label {
  font: 400 1.4cqmin/1 'Marcellus',serif;
  letter-spacing: .16em;
  color: #a89a7c;
  text-transform: uppercase;
}
.t4-meta-value {
  font: 400 2.4cqmin/1 'Marcellus',serif;
  color: #efe6d2;
}
.t4-panel-title {
  position: absolute;
  right: 10.4cqmin;
  bottom: 10.7cqmin;
  padding: 2.4cqmin 3.7cqmin;
  display: flex;
  align-items: center;
  gap: 1.85cqmin;
  background: rgba(13,12,20,.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(201,168,106,.7);
  box-shadow: inset 0 0 0 6px rgba(13,12,20,.8),inset 0 0 0 7px rgba(201,168,106,.25),0 20px 60px rgba(0,0,0,.5);
}
.t4-gem-outline {
  width: .75cqmin;
  height: .75cqmin;
  border: 1px solid #c9a86a;
  transform: rotate(45deg);
}
.t4-title-only {
  font: 600 min(3.1cqmin,2.5cqw)/1 'Cinzel',serif;
  letter-spacing: .26em;
  color: #e6cd96;
  white-space: nowrap;
}

/* T5 Cinema Letterbox */
.t5-bg {
  position: absolute;
  inset: 0;
  background: #000;
}
.t5-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 55%,rgba(0,0,0,.4) 100%);
  pointer-events: none;
}
.t5-bar-top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 12.2cqmin;
  background: #050505;
}
.t5-name {
  position: absolute;
  left: 6cqmin;
  right: 6cqmin;
  bottom: 16.7cqmin;
  text-align: center;
  font: 400 7cqmin/1.05 'Italiana',serif;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.75),0 0 2px rgba(0,0,0,.6);
  pointer-events: none;
}
.t5-bar-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12.2cqmin;
  background: #050505;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  gap: 1.4cqmin 3.7cqmin;
  padding: 0 8.9cqmin;
  box-sizing: border-box;
}
.t5-title {
  font: 700 1.85cqmin/1 'Syncopate',sans-serif;
  letter-spacing: .55em;
  color: #ededed;
}
.t5-meta {
  font: 400 1.4cqmin/1 'Syncopate',sans-serif;
  letter-spacing: .4em;
  color: #a3a3a3;
  text-transform: uppercase;
}
.t5-bar-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12.2cqmin;
  background: #050505;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4cqmin;
  box-sizing: border-box;
}
.t5-title-only {
  font: 700 min(2.8cqmin,2.2cqw)/1 'Syncopate',sans-serif;
  letter-spacing: .7em;
  padding-left: .7em;
  color: #ededed;
  white-space: nowrap;
}

/* T6 Postcard */
.t6-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 40% 45%,#f5eedf 0%,#e9dec9 100%);
}
.t6-photo-card {
  position: absolute;
  left: 5.7cqmin;
  top: 9.6cqmin;
  bottom: 9.6cqmin;
  right: 15.1cqw;
  padding: 1.85cqmin;
  background: #fbf8f1;
  box-shadow: 0 18px 40px rgba(60,40,20,.28);
  transform: rotate(-1.2deg);
}
.t6-photo {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.t6-shade {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 75%;
  height: 48%;
  background: radial-gradient(ellipse at 0% 100%,rgba(0,0,0,.55),rgba(0,0,0,0) 70%);
  pointer-events: none;
}
.t6-caption {
  position: absolute;
  left: 5.9cqmin;
  bottom: 5.5cqmin;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .4cqmin;
  transform: rotate(-3deg);
  transform-origin: 0 100%;
  pointer-events: none;
}
.t6-title {
  font: 700 2.8cqmin/1 'Courier Prime',monospace;
  letter-spacing: .32em;
  color: #fffaf0;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
  padding-left: .6cqmin;
}
.t6-name {
  font: 700 11.9cqmin/1 'Caveat',cursive;
  color: #fffaf0;
  text-shadow: 0 3px 16px rgba(0,0,0,.55);
}
.t6-title-only {
  position: absolute;
  left: 5.9cqmin;
  bottom: 5.9cqmin;
  transform: rotate(-3deg);
  transform-origin: 0 100%;
  font: 700 min(5.9cqmin,4.6cqw)/1 'Courier Prime',monospace;
  letter-spacing: .18em;
  color: #fffaf0;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
  white-space: nowrap;
  pointer-events: none;
}
.t6-stamp {
  position: absolute;
  right: 2cqw;
  top: 7.8cqmin;
  width: 21.3cqmin;
  height: 26.3cqmin;
  box-sizing: border-box;
  padding: 2.2cqmin;
  background: #fbf8f1;
  border: .83cqmin dotted #ece2cf;
  transform: rotate(5deg);
  box-shadow: 0 6px 16px rgba(60,40,20,.2);
  display: flex;
  flex-direction: column;
  gap: 1.1cqmin;
}
.t6-stamp-art {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: radial-gradient(circle at 50% 55%,#fdf3e6 0%,#f4dcc8 100%);
  box-shadow: inset 0 0 0 1px rgba(138,59,42,.18);
}
.t6-stamp-img {
  position: absolute;
  left: 8%;
  top: 6%;
  width: 84%;
  height: 88%;
  object-fit: contain;
  display: block;
}
.t6-stamp-label {
  text-align: center;
  font: 600 2cqmin/1 'Cinzel',serif;
  letter-spacing: .2em;
  color: #8a3b2a;
}
.t6-postmark-ring {
  position: absolute;
  right: 7.8cqw;
  top: 24.3cqmin;
  width: 27.8cqmin;
  height: 27.8cqmin;
  transform: rotate(-14deg);
  overflow: visible;
  pointer-events: none;
}
.t6-postmark {
  position: absolute;
  right: 7.8cqw;
  top: 24.3cqmin;
  width: 27.8cqmin;
  height: 27.8cqmin;
  transform: rotate(-14deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75cqmin;
  color: #24345f;
  opacity: .9;
  text-align: center;
  pointer-events: none;
}
.t6-postmark-text {
  font: 700 2.4cqmin/1 'Courier Prime',monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.t6-postmark-line {
  width: 8.3cqmin;
  height: 2px;
  background: #24345f;
}
.t6-postmark-xiv {
  font: 700 5.2cqmin/1 'Courier Prime',monospace;
}

/* T7, T8, T10 Close-up Blur */
.closeup-bg {
  position: absolute;
  inset: 0;
  background: #1a1d33;
}
.closeup-blur {
  position: absolute;
  inset: -13cqmin;
  filter: blur(80px) saturate(1.35) brightness(.82);
}
.closeup-photo {
  position: absolute;
  overflow: hidden;
}
.closeup-text {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 2.4cqmin;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,.4);
  pointer-events: none;
}
.closeup-title {
  font: 400 2cqmin/1 'Tenor Sans',sans-serif;
  letter-spacing: .45em;
  color: rgba(255,255,255,.9);
}
.closeup-name {
  font: italic 600 12.2cqmin/.95 'Bodoni Moda',serif;
  text-wrap: balance;
}
.closeup-meta-row {
  display: flex;
  align-items: center;
  gap: 1.7cqmin;
}
.closeup-meta-line {
  width: 5.9cqmin;
  height: 1px;
  background: rgba(255,255,255,.8);
}
.closeup-meta {
  font: 400 1.85cqmin/1 'Tenor Sans',sans-serif;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
}
.closeup-title-big {
  font: italic 600 13.9cqmin/.92 'Bodoni Moda',serif;
}
.closeup-xiv {
  font: 400 3.7cqmin/1 'Tenor Sans',sans-serif;
  letter-spacing: .5em;
  padding-left: .5em;
}

/* T9 Magazine Cover */
.t9-bg {
  position: absolute;
  inset: 0;
  background: #111;
}
.t9-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,rgba(8,8,12,.6) 0%,rgba(8,8,12,0) 32%,rgba(8,8,12,0) 55%,rgba(8,8,12,.75) 100%);
  pointer-events: none;
}
.t9-masthead {
  position: absolute;
  left: 4cqw;
  right: 4cqw;
  top: 4.5cqmin;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4cqmin;
  pointer-events: none;
}
.t9-masthead-rule {
  width: 100%;
  height: 2px;
  background: rgba(255,255,255,.85);
}
.t9-title {
  font: 400 8.6cqw/1 'DM Serif Display',serif;
  letter-spacing: -.01em;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 2px 20px rgba(0,0,0,.35);
}
.t9-caption {
  position: absolute;
  left: 5cqw;
  right: 5cqw;
  bottom: 6cqmin;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6cqmin;
  pointer-events: none;
}
.t9-meta {
  font: 800 2cqmin/1 'Big Shoulders Display',sans-serif;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #fff;
  background: #c8333a;
  padding: .9cqmin 1.4cqmin .8cqmin 1.6cqmin;
}
.t9-name {
  font: 800 12cqmin/.88 'Big Shoulders Display',sans-serif;
  text-transform: uppercase;
  color: #fff;
  max-width: 100%;
  text-wrap: balance;
  text-shadow: 0 3px 24px rgba(0,0,0,.4);
}

/* Shot (screenshot + empty placeholder) */
.shot {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #1f2b5c;
  touch-action: none;
  user-select: none;
}
.shot-ph-sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,#1f2b5c 0%,#46508f 30%,#b9788a 55%,#f0b07f 68%,#f6d6a4 76%);
}
.shot-ph-cloud-1 {
  position: absolute;
  left: 8%;
  top: 16%;
  width: 40%;
  height: 7%;
  border-radius: 50%;
  background: rgba(255,215,225,.22);
  filter: blur(14px);
}
.shot-ph-cloud-2 {
  position: absolute;
  left: 44%;
  top: 30%;
  width: 34%;
  height: 6%;
  border-radius: 50%;
  background: rgba(255,215,215,.2);
  filter: blur(16px);
}
.shot-ph-cloud-3 {
  position: absolute;
  left: 14%;
  top: 40%;
  width: 26%;
  height: 4%;
  border-radius: 50%;
  background: rgba(255,225,200,.22);
  filter: blur(10px);
}
.shot-ph-sun {
  position: absolute;
  left: 30%;
  top: 42%;
  width: 44%;
  height: 44%;
  background: radial-gradient(closest-side,rgba(255,238,200,.95),rgba(255,200,150,.35) 45%,rgba(255,200,150,0));
}
.shot-ph-crystal-glow {
  position: absolute;
  left: 64%;
  top: 14%;
  width: 10%;
  height: 56%;
  background: radial-gradient(closest-side,rgba(170,215,255,.55),rgba(170,215,255,0));
}
.shot-ph-crystal {
  position: absolute;
  left: 68%;
  top: 22%;
  width: 2.2%;
  height: 44%;
  clip-path: polygon(50% 0,100% 28%,72% 100%,28% 100%,0 28%);
  background: linear-gradient(180deg,#f2fbff,#8cc2ff 45%,#3a4f9c);
}
.shot-ph-hill-back {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24%;
  height: 30%;
  background: #7b6a9a;
  opacity: .8;
  clip-path: polygon(0 70%,8% 45%,16% 60%,26% 30%,36% 55%,46% 40%,58% 62%,70% 35%,82% 58%,92% 42%,100% 55%,100% 100%,0 100%);
}
.shot-ph-hill-front {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22%;
  height: 22%;
  background: #3f3a6b;
  clip-path: polygon(0 50%,12% 30%,22% 55%,38% 25%,50% 60%,64% 40%,76% 62%,90% 28%,100% 45%,100% 100%,0 100%);
}
.shot-ph-lake {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24%;
  background: linear-gradient(180deg,#e2ad8c 0%,#7a6290 30%,#2a2853 75%,#1a1b38 100%);
}
.shot-ph-shine {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16%;
  height: 12%;
  background: linear-gradient(180deg,rgba(255,220,200,0),rgba(255,220,200,.22),rgba(255,220,200,0));
}
.shot-ph-cliff-left {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34%;
  height: 30%;
  background: #14152d;
  clip-path: polygon(0 10%,30% 30%,60% 62%,100% 100%,0 100%);
}
.shot-ph-cliff-right {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 30%;
  height: 26%;
  background: #14152d;
  clip-path: polygon(100% 0,64% 34%,30% 70%,0 100%,100% 100%);
}

/* Char (arched character window) */
.char {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 400px 400px 0 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.char-ph {
  position: absolute;
  inset: 0;
  border-radius: 400px 400px 0 0;
  border: 2px dashed rgba(255,255,255,.4);
  border-bottom: none;
  background: repeating-linear-gradient(45deg,rgba(255,255,255,.09) 0 14px,rgba(255,255,255,0) 14px 28px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.char-ph-label {
  font: 500 22px/1.5 'JetBrains Mono',monospace;
  color: rgba(255,255,255,.8);
  letter-spacing: .08em;
  text-align: center;
}