/* NextG Design — home page ("The Lens"). Builds on assets/site.css.
   Rule: every element's resting CSS state is its *final* state; animations
   only play from a start state, so no-JS and reduced-motion users see a
   complete, static page. */

/* ---------- Hero ---------- */
.hero { padding: clamp(36px, 6vw, 72px) 0 clamp(56px, 8vw, 96px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.hero-title { font-size: clamp(2.6rem, 6vw, 5.1rem); font-weight: 700; margin: 18px 0 22px; }
.hero-title .w { display: inline-block; animation: wordIn 0.9s var(--ease-out) both; animation-delay: calc(var(--i) * 70ms + 80ms); }
.hero-title .scan {
  background: linear-gradient(100deg, #8b5cf6 0%, #ec4899 30%, #f59e0b 45%, #ec4899 60%, #8b5cf6 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: wordIn 0.9s var(--ease-out) both, shimmer 7s linear 1.4s infinite;
  animation-delay: calc(var(--i) * 70ms + 80ms), 1.4s;
}
@keyframes wordIn { from { opacity: 0; transform: translateY(0.55em) rotate(3deg); } }
@keyframes shimmer { to { background-position: -250% 0; } }
.hero-in { animation: fadeUp 0.9s var(--ease-out) both; animation-delay: calc(var(--i) * 70ms + 120ms); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } }
.hero-sub { color: var(--muted); font-size: clamp(1.05rem, 1.4vw, 1.2rem); max-width: 52ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 26px; }
.hero-facts { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--muted); font-size: 0.92rem; }
.hero-facts li { display: inline-flex; align-items: center; gap: 8px; }
.hero-facts .ico { width: 18px; height: 18px; color: var(--primary); }

/* ---------- The Lens ---------- */
.lens-stage { position: relative; margin: 0; }
.lens-svg {
  display: block; width: 100%; height: auto; border-radius: 26px;
  box-shadow: 0 50px 90px -40px rgba(124, 58, 237, 0.65), 0 0 0 1px var(--line);
  touch-action: pan-y; cursor: crosshair; user-select: none;
}
.layer-edited .v { display: none; }
.layer-edited[data-mode="erase"] .v-erase,
.layer-edited[data-mode="bg"] .v-bg,
.layer-edited[data-mode="blur"] .v-blur,
.layer-edited[data-mode="grade"] .v-grade { display: inline; }
.lens-dash { transform-box: fill-box; transform-origin: center; animation: spin 22s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.lens-ui.switch > circle:first-child { animation: lensPulse 0.55s var(--ease-spring); transform-box: fill-box; transform-origin: center; }
@keyframes lensPulse { 40% { transform: scale(1.06); } }
.sparkle { animation: twinkle 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes twinkle { 0%, 100% { opacity: 0.2; transform: translate(530px, 420px) scale(0.5); } 50% { opacity: 1; transform: translate(530px, 420px) scale(1); } }

.lens-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.lens-hint { color: var(--muted); font-size: 0.88rem; }
.lens-modes { display: flex; flex-wrap: wrap; gap: 6px; }
.lens-modes button {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 15px;
  border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
  font: 600 0.88rem/1 var(--font-body); cursor: pointer; transition: background 0.25s, border-color 0.25s, transform 0.3s var(--ease-spring);
}
.lens-modes button .ico { width: 17px; height: 17px; }
.lens-modes button:hover { border-color: var(--primary); }
.lens-modes button:active { transform: scale(0.95); }
.lens-modes button[aria-pressed="true"] { background: var(--grad); border-color: transparent; color: #fff; }

.float-tag {
  position: absolute; z-index: 2; pointer-events: none;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap;
  padding: 7px 12px; border-radius: 999px; color: var(--text);
  background: color-mix(in srgb, var(--bg-2) 82%, transparent); border: 1px solid var(--line-strong);
  backdrop-filter: blur(10px); box-shadow: var(--shadow);
  animation: bob 6s ease-in-out infinite;
}
.float-tag::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; background: var(--c, #34d399); vertical-align: 1px; }
.float-tag.t1 { top: 7%; left: -5%; --c: #22d3ee; }
.float-tag.t2 { top: 44%; right: -4%; --c: #ec4899; animation-delay: -2s; }
.float-tag.t3 { bottom: 22%; left: -3%; --c: #f59e0b; animation-delay: -4s; }
@keyframes bob { 50% { transform: translateY(-10px); } }

/* ---------- Privacy proof ---------- */
.proof-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.proof-grid .section-head { margin-bottom: 0; }
.proof-diagram { padding: clamp(14px, 2.5vw, 28px); color: var(--text); }
.proof-diagram svg { display: block; width: 100%; height: auto; font-family: var(--font-body); }
.p-dot { transform: translate(110px, 200px); }
.p-x { transform: translate(320px, 104px); }
.p-cloud { opacity: 0.45; transform: translate(320px, 46px); }
.playing .p-flow { stroke-dasharray: 420; animation: draw 1.1s var(--ease-out) both; }
.playing .p-cloud-line { animation: fadeIn 0.6s ease 0.9s both; }
.playing .p-x { animation: popX 0.5s var(--ease-spring) 1.6s both; }
.playing .p-cloud { animation: dimCloud 0.6s ease 1.6s both; }
.playing .p-dot { animation: travel 2.6s var(--ease-out) 1.2s infinite; }
@keyframes draw { from { stroke-dashoffset: 420; } to { stroke-dashoffset: 0; } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes popX { from { transform: translate(320px, 104px) scale(0); } }
@keyframes dimCloud { from { opacity: 1; } }
@keyframes travel { 0% { transform: translate(110px, 200px); opacity: 0; } 10% { opacity: 1; } 45% { transform: translate(320px, 200px); } 90% { opacity: 1; } 100% { transform: translate(530px, 200px); opacity: 0; } }

/* ---------- Bento ---------- */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
a.card.bento-item { display: flex; flex-direction: column; }
.b-erase { grid-column: span 7; grid-row: span 2; }
.b-bg, .b-blur { grid-column: span 5; }
.b-face, .b-enhance, .b-filters { grid-column: span 4; }
.b-visual { position: relative; margin: 10px 10px 0; border-radius: 16px; overflow: hidden; aspect-ratio: 400 / 220; background: var(--bg-2); }
.b-erase .b-visual { flex: 1; aspect-ratio: auto; min-height: 220px; }
.b-visual svg { display: block; width: 100%; height: 100%; }
.b-erase .b-visual svg { position: absolute; inset: 0; }
.b-text { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.b-text h3 { font-size: 1.25rem; display: flex; align-items: center; gap: 9px; }
.b-text h3 .ico { color: var(--primary); }
.b-erase .b-text h3 { font-size: 1.6rem; }
.b-text p { color: var(--muted); font-size: 0.95rem; }
.b-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.92rem; margin-top: 4px; }
.b-link .ico { width: 18px; height: 18px; transition: transform 0.3s var(--ease-spring); }
.bento-item:hover .b-link .ico, .bento-item:focus-visible .b-link .ico { transform: translateX(4px); }

/* micro-animations: hover/focus shows the "edited" state; first reveal plays a demo once */
.b-stroke { stroke-dasharray: 220; stroke-dashoffset: 220; transition: stroke-dashoffset 0.7s var(--ease-out), opacity 0.4s ease 0.8s; }
.b-object { transition: opacity 0.4s ease 0.55s; }
.b-erase:hover .b-stroke, .b-erase:focus-visible .b-stroke { stroke-dashoffset: 0; opacity: 0; }
.b-erase:hover .b-object, .b-erase:focus-visible .b-object { opacity: 0; }
.b-erase.in .b-stroke { animation: demoStroke 2.8s var(--ease-out) 0.6s; }
.b-erase.in .b-object { animation: demoObject 2.8s ease 0.6s; }
@keyframes demoStroke { 0% { stroke-dashoffset: 220; opacity: 1; } 30% { stroke-dashoffset: 0; opacity: 1; } 45%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes demoObject { 0%, 28% { opacity: 1; } 42%, 80% { opacity: 0; } 100% { opacity: 1; } }

.b-wipe { clip-path: inset(0 0 0 0); transition: clip-path 0.8s var(--ease-out); }
.b-bg:hover .b-wipe, .b-bg:focus-visible .b-wipe { clip-path: inset(0 0 0 100%); }
.b-bg.in .b-wipe { animation: demoWipe 2.6s var(--ease-out) 0.8s; }
@keyframes demoWipe { 35%, 70% { clip-path: inset(0 0 0 100%); } }

.b-defocus { transition: filter 0.6s var(--ease-out); }
.b-blur:hover .b-defocus, .b-blur:focus-visible .b-defocus { filter: blur(5px); }
.b-blur.in .b-defocus { animation: demoBlur 2.6s ease 1s; }
@keyframes demoBlur { 35%, 70% { filter: blur(5px); } }

.b-shine { transition: transform 0.9s var(--ease-out); }
.b-face:hover .b-shine, .b-face:focus-visible .b-shine { transform: translateX(560px) skewX(-18deg); }
.b-face.in .b-shine { animation: demoShine 1.4s var(--ease-out) 1.2s; }
@keyframes demoShine { to { transform: translateX(560px) skewX(-18deg); } }

.b-bars { display: flex; align-items: flex-end; gap: 6%; padding: 14% 9% 0; background: linear-gradient(180deg, var(--bg-2), color-mix(in srgb, var(--primary) 18%, var(--bg-2))); }
.b-bars i { flex: 1; height: var(--h); border-radius: 6px 6px 0 0; background: var(--grad-cool); transition: height 0.6s var(--ease-spring); }
.b-bars i:nth-child(2n) { transition-delay: 0.05s; }
.b-bars i:nth-child(3n) { transition-delay: 0.1s; }
.b-enhance:hover .b-bars i, .b-enhance:focus-visible .b-bars i { height: 64%; }

.b-strip { display: flex; gap: 10px; padding: 18px; align-items: center; background: var(--bg-2); }
.b-strip i { flex: 0 0 34%; height: 76%; border-radius: 12px; background: linear-gradient(160deg, var(--c), color-mix(in srgb, var(--c) 35%, #0b0816)); transition: transform 0.9s var(--ease-out); }
.b-filters:hover .b-strip i, .b-filters:focus-visible .b-strip i { transform: translateX(-150%); }

.also { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.also li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-size: 0.9rem; }
.also .ico { width: 18px; height: 18px; color: var(--primary); }
.center { text-align: center; margin-top: 40px; }

/* ---------- Tools ---------- */
.tool-group + .tool-group { margin-top: 34px; }
.tool-group > h3 { font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-family: var(--font-body); margin-bottom: 14px; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.tool-card { padding: 18px; display: grid !important; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: start; }
.tool-ico { grid-row: span 2; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: var(--grad); box-shadow: 0 10px 20px -12px rgba(139, 92, 246, 0.9); transition: transform 0.4s var(--ease-spring); }
.tool-card:nth-child(3n+2) .tool-ico { background: var(--grad-cool); }
.tool-card:nth-child(3n) .tool-ico { background: linear-gradient(120deg, #ec4899, #f59e0b); }
.tool-card:hover .tool-ico { transform: rotate(-8deg) scale(1.08); }
.tool-card h4 { font-size: 1.02rem; letter-spacing: -0.01em; }
.tool-card p { color: var(--muted); font-size: 0.88rem; line-height: 1.5; }

/* ---------- Steps ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; position: relative; }
.steps::before { content: ""; position: absolute; top: 24px; left: 24px; right: 24px; height: 2px; background: var(--grad); transform-origin: left; }
.steps.playing::before { animation: lineGrow 1.6s var(--ease-out) both; }
@keyframes lineGrow { from { transform: scaleX(0); } }
.steps li { position: relative; }
.step-n { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; font: 700 1.15rem var(--font-display); color: #fff; background: var(--bg); border: 2px solid transparent; background-image: linear-gradient(var(--bg), var(--bg)), var(--grad); background-origin: border-box; background-clip: padding-box, border-box; margin-bottom: 18px; position: relative; }
.steps h3 { font-size: 1.2rem; margin-bottom: 8px; }
.steps p { color: var(--muted); font-size: 0.95rem; }
:root[data-theme="light"] .step-n { color: var(--text); }

/* ---------- Offers + guides ---------- */
.offers-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.prose h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: 18px; }
.prose p { color: var(--muted); margin-bottom: 16px; max-width: 68ch; }
.prose a { color: var(--text); text-decoration-color: var(--primary); text-underline-offset: 3px; }
.guides-teaser { display: grid; gap: 10px; }
.guides-teaser h3 { font-size: 1.5rem; margin: 6px 0 8px; }
.guides-teaser .eyebrow .ico { width: 16px; height: 16px; }
.guide-link { padding: 16px 18px; display: grid !important; gap: 4px; }
.guide-link strong { font-weight: 600; }
.guide-link span { font-size: 0.8rem; color: var(--muted); }
.see-all { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; margin-top: 6px; }
.see-all .ico { width: 18px; height: 18px; }

/* ---------- FAQ ---------- */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font: 600 1.12rem/1.35 var(--font-display); letter-spacing: -0.01em; min-height: 44px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .ico { transition: transform 0.35s var(--ease-spring); color: var(--primary); }
.faq-item[open] summary .ico { transform: rotate(180deg); }
.faq-item p { color: var(--muted); padding: 0 0 22px; max-width: 70ch; }
.faq-item[open] p { animation: fadeUp 0.45s var(--ease-out); }
.faq-item a { color: var(--text); }

/* ---------- CTA ---------- */
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.cta-card {
  text-align: center; padding: clamp(44px, 7vw, 88px) 24px; border-radius: 32px;
  border: 2px solid transparent;
  background: linear-gradient(var(--bg-2), var(--bg-2)) padding-box, conic-gradient(from var(--angle), #8b5cf6, #ec4899, #f59e0b, #22d3ee, #8b5cf6) border-box;
  animation: rotateBorder 8s linear infinite;
}
@keyframes rotateBorder { to { --angle: 360deg; } }
.cta-card h2 { font-size: clamp(2rem, 5vw, 3.6rem); margin-bottom: 14px; }
.cta-card p { color: var(--muted); margin-bottom: 28px; font-size: 1.1rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .float-tag.t1 { left: 2%; } .float-tag.t2 { right: 2%; } .float-tag.t3 { left: 2%; }
}
@media (max-width: 980px) {
  .hero-grid, .proof-grid, .offers-grid, .faq-wrap { grid-template-columns: 1fr; }
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .b-erase { grid-column: span 6; grid-row: auto; }
  .b-erase .b-visual { min-height: 0; aspect-ratio: 400 / 220; flex: none; }
  .b-bg, .b-blur, .b-face, .b-enhance, .b-filters { grid-column: span 3; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps::before { display: none; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; }
  .b-erase, .b-bg, .b-blur, .b-face, .b-enhance, .b-filters { grid-column: auto; }
  .steps { grid-template-columns: 1fr; }
  .float-tag { display: none; }
  .lens-hint { display: none; }
  .hero-ctas .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title .scan { animation: none; background-position: 0 0; }
  .float-tag, .lens-dash, .sparkle, .cta-card { animation: none; }
}
.layer-edited[data-mode="face"] .v-face { display: inline; }

/* ---------- Cinematic scene polish ---------- */
.hero { position: relative; isolation: isolate; }
.hero::before {
  content: ""; position: absolute; inset: -40px 0 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1.5px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 65% 60% at 68% 42%, #000 20%, transparent 72%);
  mask-image: radial-gradient(ellipse 65% 60% at 68% 42%, #000 20%, transparent 72%);
}
:root[data-theme="light"] .hero::before { background-image: radial-gradient(rgba(76, 29, 149, 0.14) 1px, transparent 1.5px); }
.lens-svg {
  --rx: 0deg; --ry: 0deg;
  transform: perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s;
  box-shadow: 0 60px 100px -45px rgba(255, 120, 110, 0.5), 0 30px 60px -30px rgba(76, 29, 149, 0.8), 0 0 0 1px var(--line);
}
.stars circle { animation: starTwinkle 3.6s ease-in-out infinite; }
.stars circle:nth-child(2n) { animation-delay: -1.2s; animation-duration: 4.4s; }
.stars circle:nth-child(3n) { animation-delay: -2.5s; animation-duration: 2.9s; }
@keyframes starTwinkle { 50% { opacity: 0.15; } }
.shimmer path { transform-box: fill-box; transform-origin: center; animation: shimmerWave 3.2s ease-in-out infinite alternate; }
.shimmer path:nth-child(2n) { animation-delay: -1.6s; }
@keyframes shimmerWave { from { transform: scaleX(0.72); } to { transform: scaleX(1.08); } }
@media (prefers-reduced-motion: reduce) {
  .stars circle, .shimmer path { animation: none; }
  .lens-svg { transform: none; }
}

/* Lens "before" looks for the Colorize and Restore pages */
.old-scratches { display: none; }
.lens-stage[data-base="bw"] .layer-original { filter: url(#fx-gray); }
.lens-stage[data-base="old"] .layer-original { filter: url(#fx-old); }
.lens-stage[data-base="old"] .old-scratches { display: inline; }
.layer-edited[data-mode="color"] .v-color,
.layer-edited[data-mode="restore"] .v-restore { display: inline; }

/* New AI cards: Colorize and Restore */
.b-color, .b-restore { grid-column: span 6; }
.b-colorwipe, .b-restorewipe { clip-path: inset(0 0 0 50%); transition: clip-path 0.9s var(--ease-out); }
.b-color:hover .b-colorwipe, .b-color:focus-visible .b-colorwipe,
.b-restore:hover .b-restorewipe, .b-restore:focus-visible .b-restorewipe { clip-path: inset(0 0 0 0); }
.b-color.in .b-colorwipe, .b-restore.in .b-restorewipe { animation: demoReveal 3s var(--ease-out) 0.8s; }
@keyframes demoReveal { 0% { clip-path: inset(0 0 0 100%); } 45%, 70% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 50%); } }
@media (max-width: 980px) { .b-color, .b-restore { grid-column: span 3; } }
@media (max-width: 640px) { .b-color, .b-restore { grid-column: auto; } }

/* New AI tools grid on the home page */
.ai-new { margin: 40px 0 28px; }
.ai-new-title { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 1.35rem; margin: 0 0 6px; }
.ai-new-sub { margin: 0 0 16px; opacity: .8; }

/* ---- Video tutorial ---- */
.tut-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.tut-grid .section-head { margin-bottom: 0; }
.tut-chapters { list-style: none; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: 1fr; gap: 2px 14px; }
@media (min-width: 1240px) { .tut-chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tut-ch { display: flex; gap: 10px; align-items: baseline; width: 100%; padding: 7px 10px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; font-size: .95rem; text-align: left; cursor: pointer; }
.tut-ch:hover, .tut-ch:focus-visible { background: var(--surface-2); }
.tut-ch-t { font-variant-numeric: tabular-nums; color: var(--primary); font-weight: 700; min-width: 2.6em; }
.tut-player { position: sticky; top: 90px; }
.tut-poster, .tut-frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); background: #0b0a14; }
.tut-poster { padding: 0; cursor: pointer; }
.tut-poster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-out); }
.tut-poster:hover img { transform: scale(1.03); }
.tut-play { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); box-shadow: 0 14px 40px -10px rgba(236, 72, 153, .8); transition: transform .3s var(--ease-spring); }
.tut-play svg { width: 36px; height: 36px; fill: #fff; margin-left: 5px; }
.tut-poster:hover .tut-play, .tut-poster:focus-visible .tut-play { transform: scale(1.1); }
.tut-len { position: absolute; right: 14px; bottom: 14px; padding: 3px 10px; border-radius: 8px; background: rgba(0, 0, 0, .72); color: #fff; font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tut-frame video, .tut-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.tut-note { margin: 10px 2px 0; color: var(--muted); font-size: .9rem; }
.tut-transcript { margin-top: clamp(28px, 4vw, 44px); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.tut-transcript summary { cursor: pointer; padding: 14px 18px; font-weight: 700; }
.tut-transcript-body { padding: 0 18px 10px; columns: 2 320px; column-gap: 32px; }
.tut-transcript-body h3 { font-size: 1rem; margin: 14px 0 4px; break-after: avoid; }
.tut-transcript-body p { margin: 0 0 8px; color: var(--muted); font-size: .95rem; break-inside: avoid; }
.tut-hero-link .ico { width: 14px; height: 14px; vertical-align: -1px; }
@media (max-width: 900px) {
  .tut-grid { grid-template-columns: 1fr; }
  .tut-player { position: static; order: -1; }
}
@media (min-width: 560px) and (max-width: 900px) { .tut-chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }