:root{
  /* Colors & shape */
  --tc-bg:#000;
  --tc-text:#e6e8ea;
  --tc-muted:#b9bcc0;
  --tc-card:#0b0b0c;
  --tc-shadow:0 12px 44px rgba(0,0,0,.55);
  --tc-rad:18px;

  /* Layout & 3D */
  --tc-max:1100px;
  --tc-gap:56px;
  --tc-depth:140px;
  --tc-side-scale:.88;
  --tc-side-opacity:.42;
  --tc-side-blur:1.5px;

  /* Typography & spacing */
  --tc-q-size:1.12rem;
  --tc-q-line:1.85;
  --tc-pad-x:64px;
  --tc-pad-y:64px;
  --tc-quote-max:62ch;

  /* Controls & dots */
  --tc-speed:3000ms;
  --tc-btn:46px;
  --tc-btn-edge:2px;
  --tc-glyph:68px;
  --tc-dots-b:25px;

  /* Motion */
  --tc-dur:360ms;

  /* Height locks (set by JS) */
  --tc-card-h:auto;
  --tc-body-h:auto;
  --tc-meta-h:auto;

  /* Media layout (photo + text) */
  --tc-body-gap:25px;
  --tc-avatar-size: clamp(140px, 16vw, 220px);
  --tc-avatar-radius:12px;        /* 0 = square, 12px = rounded, 50% = circle */
  --tc-avatar-pos-x:50%;
  --tc-avatar-pos-y:40%;
  --tc-image-fit:fill;            /* cover | contain | fill */
}

/* Canvas */
body{
  margin:0;
  background:var(--tc-bg);
  color:var(--tc-text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
}
.tc-wrap{position:relative;width:100%;background:var(--tc-bg);color:var(--tc-text)}
.tc{width:100%;margin:0 auto;perspective:1200px;transition:height .28s ease;will-change:height;position:relative}
.tc-inner{max-width:var(--tc-max);margin:0 auto;position:relative;height:100%}

/* Slides */
.tc-track{position:relative}
.tc-item{
  position:absolute;top:0;left:50%;width:100%;
  transform:translateX(-50%);
  transition:transform var(--tc-dur) ease,opacity var(--tc-dur) ease,filter var(--tc-dur) ease;
  will-change:transform,opacity,filter;
  opacity:0;filter:saturate(.9);pointer-events:none;
}
.tc-card{
  position:relative;background:var(--tc-card);
  border-radius:var(--tc-rad);box-shadow:var(--tc-shadow);overflow:hidden;
  min-height:var(--tc-card-h);
}
.tc-content{padding:var(--tc-pad-y) var(--tc-pad-x)}

/* Left photo + right text */
.tc-body{
  display:grid;
  grid-template-columns: var(--tc-avatar-size) 1fr;
  align-items:center;                    /* centers image & text vertically */
  gap:var(--tc-body-gap);
  min-height:var(--tc-body-h);
}
.tc-portrait{
  width:var(--tc-avatar-size); height:var(--tc-avatar-size);
  border-radius:var(--tc-avatar-radius);
  object-fit:var(--tc-image-fit);
  object-position: var(--tc-avatar-pos-x) var(--tc-avatar-pos-y);
  align-self:center;
  box-shadow:0 0 0 2px rgba(255,255,255,.08);
}

/* Quote block (center both ways in right column) */
.tc-quote{
  display:flex; align-items:center; justify-content:center;
  text-align:center; max-width:var(--tc-quote-max);
  margin:0 auto;
  font-size:var(--tc-q-size); line-height:var(--tc-q-line);
}

/* Author line */
.tc-meta{
  display:flex; align-items:center; gap:12px;
  padding:0 var(--tc-pad-x) var(--tc-pad-y) var(--tc-pad-x);
  color:var(--tc-muted); font-weight:500;
  min-height:var(--tc-meta-h);
}

/* Positions */
.is-center{opacity:1;transform:translateX(-50%) translateZ(var(--tc-depth));filter:none;pointer-events:auto;z-index:3}
.is-left{opacity:var(--tc-side-opacity);transform:translateX(calc(-50% - var(--tc-gap))) translateZ(calc(var(--tc-depth)*.35)) scale(var(--tc-side-scale)) rotateY(12deg);filter:blur(var(--tc-side-blur));z-index:2}
.is-right{opacity:var(--tc-side-opacity);transform:translateX(calc(-50% + var(--tc-gap))) translateZ(calc(var(--tc-depth)*.35)) scale(var(--tc-side-scale)) rotateY(-12deg);filter:blur(var(--tc-side-blur));z-index:2}
.is-elsewhere{opacity:0;transform:translateX(-50%) translateZ(0) scale(.9);z-index:1}

/* Controls */
.tc-controls{position:absolute;left:50%;top:0;height:100%;width:min(100%,var(--tc-max));transform:translateX(-50%);pointer-events:none;z-index:5}
.tc-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:var(--tc-btn);height:var(--tc-btn);
  display:inline-grid;place-items:center;
  cursor:pointer;pointer-events:auto;
  background:transparent;border:none;box-shadow:none;margin:0;padding:0;appearance:none;-webkit-appearance:none;
  text-align:center;line-height:1;letter-spacing:0;color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.5);
  font-family:ui-serif,Georgia,Cambria,"Times New Roman",serif;
  font-weight:500;font-size:var(--tc-glyph);
  transition:transform .2s ease;
}
.tc-btn:hover{transform:translateY(-50%) scale(1.06)}
.tc-btn:active{transform:translateY(-50%) scale(.96)}
.tc-btn.tprev{left:var(--tc-btn-edge)}
.tc-btn.tnext{right:var(--tc-btn-edge)}
.tc-glyph{display:block;line-height:1;margin-top:-15px;user-select:none;pointer-events:none}

/* Dots */
.tc-dots{position:absolute;left:50%;bottom:var(--tc-dots-b);transform:translateX(-50%);width:min(100%,var(--tc-max));display:flex;justify-content:center;gap:10px;z-index:6;pointer-events:none}
.tc-dot{pointer-events:auto;width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.38);border:0;padding:0;cursor:pointer;box-shadow:0 0 0 2px rgba(0,0,0,.18)}
.tc-dot[aria-current="true"]{background:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.25)}

/* Responsive */
@media (max-width:900px){
  :root{--tc-max:820px;--tc-gap:42px;--tc-depth:110px;--tc-shadow:0 10px 36px rgba(0,0,0,.55)}
}
@media (max-width:700px){
  :root{ --tc-avatar-size: 88px; }
}
@media (max-width:600px){
  :root{--tc-max:92vw;--tc-gap:28px;--tc-depth:90px;--tc-q-size:1.06rem;--tc-q-line:1.72;--tc-shadow:0 8px 28px rgba(0,0,0,.55);--tc-side-blur:1px;--tc-side-opacity:.38;--tc-dots-b:10px}
}