/* Owner preview only; the published site's source is untouched. */
.reveal { opacity: 1 !important; transform: none !important; }
.preview-header { height:60px; border-bottom:1px solid var(--border-subtle); background:var(--canvas); position:sticky; top:0; z-index:20; }
.preview-header .container { height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.preview-brand { display:flex; align-items:center; gap:9px; font-size:19px; font-weight:600; text-decoration:none; color:var(--text); }
.preview-brand img { width:24px; height:24px; }
.preview-nav { display:flex; align-items:center; gap:26px; }
.preview-nav a { color:var(--text-secondary); text-decoration:none; font-size:14px; }
.preview-nav .button { color:white; }
.prototype-hero { padding:72px 0 0; }
.prototype-hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.prototype-hero .eyebrow { margin:0 0 20px; }
.prototype-hero h1 { font-size:54px; line-height:1.14; letter-spacing:-.015em; margin:0 0 24px; }
.prototype-hero .lead { font-size:18px; line-height:1.7; margin:0 0 28px; max-width:490px; }
.prototype-hero .cta-row { margin:0; }
.prototype-small { color:var(--text-secondary); font-size:13px; line-height:1.7; margin:16px 0 0; max-width:440px; }
.demo-label { display:flex; align-items:center; gap:12px; font-size:13px; margin:0 0 16px; }
.demo-label strong { font-size:16px; font-weight:600; }
.demo-label .pill { margin:0; }
.reading-sample { margin:0; }
.reading-sample-frame { box-shadow:var(--shadow-frame); }
.prototype-read-hint { font-size:13px; color:var(--text-secondary); margin:0 0 12px; }
.reading-sample figcaption { font-size:12px; line-height:1.6; }
.prototype-section { margin-top:112px; }
.prototype-section h2 { font-size:36px; line-height:1.3; letter-spacing:-.015em; margin:0 0 16px; }
.prototype-section>.lead { font-size:18px; line-height:1.7; max-width:760px; margin:0 0 32px; }
.media-board { border:1px solid var(--border); border-radius:12px; background:white; }
.media-toolbar { display:flex; align-items:center; justify-content:space-between; min-height:59px; padding:10px 20px; gap:16px; border-bottom:1px solid var(--border-subtle); }
.media-tabs { display:flex; gap:4px; background:var(--surface); padding:3px; border-radius:8px; }
.media-tabs button { border:0; border-radius:6px; min-height:32px; padding:0 20px; color:var(--text-secondary); font:inherit; font-size:13px; cursor:pointer; background:transparent; }
.media-tabs button[aria-selected=true] { background:var(--text); color:white; }
.rotation-control { display:flex; gap:12px; align-items:center; font-size:12px; color:var(--text-muted); }
.rotation-control button { border:0; background:none; text-decoration:underline; color:var(--text-secondary); font:inherit; cursor:pointer; }
.media-panel { display:grid; grid-template-columns:1.08fr 1fr; min-height:343px; }
.media-left { padding:24px; border-right:1px solid var(--border-subtle); min-width:0; }
.media-left h3 { margin:0 0 4px; font-size:16px; font-weight:600; }
.media-source { font-size:12px; color:var(--text-secondary); margin:0 0 16px; }
.video-stage { position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:8px; background:var(--surface-active); }
.video-stage>button { display:block; position:absolute; inset:0; width:100%; height:100%; border:0; padding:0; cursor:pointer; }
/* Our own poster (no third-party still is hosted here); the publisher's player loads only on a tap. */
.video-poster { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; padding:22px 24px; text-align:left;
  background:linear-gradient(150deg,#2b2b2b 0%,#151515 100%); color:#fff; }
.video-poster-title { font-family:var(--font-reader); font-size:24px; line-height:1.2; max-width:70%; }
.video-poster-by { font-size:12px; color:rgba(255,255,255,.7); }
@media(max-width:480px){ .video-poster { gap:4px; padding:12px 14px; } .video-poster-title { font-size:16px; max-width:60%; } .video-poster-by { font-size:11px; } }
.video-play { position:absolute; inset:0; display:grid; place-content:center; }
.video-play span { display:flex; align-items:center; gap:8px; background:#fff; color:var(--text); border-radius:10px; padding:12px 18px; font-size:14px; }
.play-triangle { width:0; height:0; border-left:11px solid currentColor; border-top:7px solid transparent; border-bottom:7px solid transparent; display:inline-block; }
.video-stage iframe { width:100%; height:100%; border:0; position:absolute; inset:0; }
.video-loading { position:absolute; inset:0; display:grid; place-content:center; padding:24px; color:var(--text-secondary); }
.original-link { font-size:12px; color:var(--text-secondary); margin-top:12px; display:inline-block; }
.captions { padding:24px; min-width:0; }
.captions-head { display:flex; justify-content:space-between; margin-bottom:14px; font-size:11px; color:var(--text-muted); }
.cue-list { position:relative; max-height:238px; overflow:auto; scrollbar-width:thin; overscroll-behavior:contain; padding:0 4px; }
.cue { display:grid; grid-template-columns:43px 1fr; gap:10px; padding:10px 8px; border-radius:7px; margin-bottom:4px; position:relative; }
.cue.active { background:var(--surface-hover); }
.cue-time { align-self:start; font:11px/1.8 var(--font-mono); color:var(--text-secondary); padding:1px 0; background:transparent; border:0; cursor:pointer; text-decoration:underline; min-height:28px; }
.cue p { font-family:var(--font-reader); font-size:18px; line-height:1.75; margin:0; cursor:pointer; }
.gloss { font:inherit; color:var(--text); background:transparent; border:0; border-bottom:1px dotted var(--text-muted); padding:0; cursor:pointer; position:relative; }
.mini-gloss { font:0.77em var(--font-gloss); color:var(--text-secondary); margin-left:3px; }
.word-tip { position:absolute; z-index:8; left:54px; right:8px; top:calc(100% - 6px); border:1px solid var(--border); background:white; border-radius:8px; padding:13px 14px; font:13px/1.6 var(--font-ui); color:var(--text-secondary); box-shadow:var(--shadow-popover); }
.word-tip strong { display:block; font-size:14px; color:var(--text); margin-bottom:4px; }
.media-hint { font-size:12px; color:var(--text-secondary); margin:16px 0 0; }
.podcast-art { height:147px; background:var(--surface); border-radius:8px; display:flex; flex-direction:column; justify-content:center; padding:24px; }
.podcast-art .voa-name { font-size:24px; letter-spacing:-.015em; font-weight:600; }
.podcast-art .voa-sub { font-family:var(--font-reader); font-size:18px; color:var(--text-secondary); margin-top:4px; }
.audio-controls { display:flex; align-items:center; gap:14px; margin-top:16px; }
.audio-controls button { display:flex; align-items:center; gap:8px; justify-content:center; background:var(--text); color:white; width:44px; height:44px; border:0; border-radius:10px; cursor:pointer; }
.pause-bars { width:11px; height:14px; border-left:4px solid currentColor; border-right:4px solid currentColor; }
.audio-progress { flex:1; min-width:0; accent-color:var(--text); }
.audio-time { font:11px var(--font-mono); white-space:nowrap; color:var(--text-secondary); }
.prototype-speaking { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.prototype-speaking .lead { margin:0; font-size:18px; line-height:1.7; }
.circle-line { font-size:16px; margin:20px 0 0; }
.conversation { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:26px; }
.concept-label { font-size:11px; color:var(--text-muted); margin:0 0 20px; }
/* 「说」 concept (owner 11-03): a back-and-forth talk; the turn that is speaking moves its voice line like a wave. */
.talk-turn { max-width:86%; margin:0 0 14px; padding:12px 14px 10px; border:1px solid var(--border); border-radius:12px; background:var(--surface-raised, #fff); transition:border-color .3s, opacity .3s; }
.talk-turn:last-child { margin-bottom:0; }
.talk-turn.is-you { margin-left:auto; background:var(--text); color:#fff; border-color:var(--text); }
.talk-turn small { display:block; font:11px var(--font-ui); color:var(--text-secondary); margin-bottom:4px; }
.talk-turn.is-you small { color:rgba(255,255,255,.7); }
.talk-turn p { margin:0; font-family:var(--font-reader); font-size:17px; line-height:1.5; }
.voice-line { position:relative; display:block; height:20px; margin-top:8px; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
/* Waves are repeating mask tiles, so sliding them never paints outside the bubble. */
.voice-line::before { content:''; position:absolute; left:0; right:0; top:50%; height:1.2px; margin-top:-.6px; background:currentColor; opacity:.3; transition:opacity .5s ease; }
.wave { position:absolute; inset:0; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='20' viewBox='0 0 56 20'%3E%3Cpath d='M0 10.00L2 11.34L4 12.60L6 13.74L8 14.69L10 15.41L12 15.85L14 16.00L16 15.85L18 15.41L20 14.69L22 13.74L24 12.60L26 11.34L28 10.00L30 8.66L32 7.40L34 6.26L36 5.31L38 4.59L40 4.15L42 4.00L44 4.15L46 4.59L48 5.31L50 6.26L52 7.40L54 8.66L56 10.00' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x 0 50% / 56px 20px; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='20' viewBox='0 0 56 20'%3E%3Cpath d='M0 10.00L2 11.34L4 12.60L6 13.74L8 14.69L10 15.41L12 15.85L14 16.00L16 15.85L18 15.41L20 14.69L22 13.74L24 12.60L26 11.34L28 10.00L30 8.66L32 7.40L34 6.26L36 5.31L38 4.59L40 4.15L42 4.00L44 4.15L46 4.59L48 5.31L50 6.26L52 7.40L54 8.66L56 10.00' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x 0 50% / 56px 20px; opacity:0; transform:scaleY(.6); transition:opacity .5s ease; }
.wave-b { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='20' viewBox='0 0 84 20'%3E%3Cpath d='M0 10.00L2 10.51L4 11.00L6 11.48L8 11.92L10 12.31L12 12.66L14 12.94L16 13.16L18 13.31L20 13.39L22 13.39L24 13.31L26 13.16L28 12.94L30 12.66L32 12.31L34 11.92L36 11.48L38 11.00L40 10.51L42 10.00L44 9.49L46 9.00L48 8.52L50 8.08L52 7.69L54 7.34L56 7.06L58 6.84L60 6.69L62 6.61L64 6.61L66 6.69L68 6.84L70 7.06L72 7.34L74 7.69L76 8.08L78 8.52L80 9.00L82 9.49L84 10.00' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='20' viewBox='0 0 84 20'%3E%3Cpath d='M0 10.00L2 10.51L4 11.00L6 11.48L8 11.92L10 12.31L12 12.66L14 12.94L16 13.16L18 13.31L20 13.39L22 13.39L24 13.31L26 13.16L28 12.94L30 12.66L32 12.31L34 11.92L36 11.48L38 11.00L40 10.51L42 10.00L44 9.49L46 9.00L48 8.52L50 8.08L52 7.69L54 7.34L56 7.06L58 6.84L60 6.69L62 6.61L64 6.61L66 6.69L68 6.84L70 7.06L72 7.34L74 7.69L76 8.08L78 8.52L80 9.00L82 9.49L84 10.00' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E"); -webkit-mask-size:84px 20px; mask-size:84px 20px; }
.talk-turn.is-speaking .voice-line::before { opacity:0; }
.talk-turn.is-speaking .wave { opacity:.75; transform:scaleY(1); animation:wave-slide 1.6s linear infinite, wave-breathe 2.4s ease-in-out infinite alternate; }
.talk-turn.is-speaking .wave-b { opacity:.4; animation-duration:2.4s, 1.9s; }
.talk-turn.is-ai.is-speaking { border-color:var(--text-secondary); }
@keyframes wave-slide { from { -webkit-mask-position:0 50%; mask-position:0 50%; } to { -webkit-mask-position:-168px 50%; mask-position:-168px 50%; } }
@keyframes wave-breathe { from { transform:scaleY(.6); } to { transform:scaleY(1); } }
.extension-strip { border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:26px 0; display:flex; align-items:center; gap:20px; justify-content:space-between; }
.extension-strip p { margin:0; font-size:16px; }
.extension-strip a { font-size:14px; white-space:nowrap; color:var(--text); }
.prototype-end { padding:72px 24px; margin-top:72px; text-align:center; background:var(--surface); }
.prototype-end h2 { font-size:32px; margin:0 0 12px; }
.prototype-end p { color:var(--text-secondary); margin:0 0 24px; }
.prototype-footer { padding:32px 0; }
.footer-top { display:flex; justify-content:space-between; gap:20px; align-items:center; }
.footer-top p { margin:0; color:var(--text-secondary); font-size:13px; }
.footer-links { display:flex; flex-wrap:wrap; gap:16px; margin-top:24px; }
.footer-links a { font-size:12px; color:var(--text-secondary); }
.legal-line { margin:20px 0 0; color:var(--text-muted); font-size:11px; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:2px solid var(--focus); outline-offset:4px; }
@media(max-width:880px){
  .prototype-hero-grid { gap:32px; }
  .prototype-hero h1 { font-size:44px; }
  .preview-nav { gap:18px; }
  .preview-nav .nav-section { display:none; }
  .media-panel { grid-template-columns:1fr 1fr; }
}
@media(max-width:767px){
  .container { width:calc(100% - 40px); }
  .preview-nav { gap:14px; }
  .preview-nav .button { min-height:36px; height:36px; padding:0 12px; font-size:12px; }
  .preview-brand { font-size:17px; }
  .preview-header .container { gap:12px; }
  .prototype-hero { padding-top:40px; }
  .prototype-hero-grid { grid-template-columns:1fr; gap:36px; }
  .prototype-hero h1 { font-size:40px; line-height:1.22; }
  .prototype-hero .lead { font-size:17px; }
  .prototype-small { font-size:12px; }
  .prototype-section { margin-top:72px; }
  .prototype-section h2 { font-size:28px; }
  .prototype-section>.lead,.prototype-speaking .lead { font-size:17px; }
  .media-toolbar { padding:10px 12px; gap:8px; }
  .rotation-control { gap:6px; font-size:11px; }
  .rotation-control .rotation-status { display:none; }
  .media-tabs button { padding:0 18px; min-height:36px; }
  .media-panel { grid-template-columns:1fr; }
  .media-left { border-right:0; border-bottom:1px solid var(--border-subtle); padding:16px; }
  .captions { padding:18px 12px; }
  .cue-list { max-height:228px; }
  .cue p { font-size:17px; }
  .cue-time { min-height:36px; }
  .media-hint { padding:0 4px; }
  .prototype-speaking { grid-template-columns:1fr; gap:28px; }
  .conversation { padding:22px; }
  .talk-turn { max-width:92%; }
  .extension-strip { flex-direction:column; align-items:start; gap:12px; padding:24px 0; }
  .extension-strip p { font-size:15px; }
  .prototype-end { padding:48px 20px; }
  .prototype-end h2 { font-size:26px; }
  .prototype-end p { font-size:15px; }
  .footer-top { flex-direction:column; align-items:start; gap:10px; }
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
/* SITEPOS3: keep the existing neutral design and split the closing invitation. */
.title-variant-3 { display:none; }
html[data-home-title-variant="3"] .title-variant-2 { display:none; }
html[data-home-title-variant="3"] .title-variant-3 { display:inline; }
html[data-home-title-variant="3"] p.title-coming { display:block; margin:-8px 0 20px; }
/* Closing invitation: the call to act stays on the left; the long "where to start" note becomes a quiet
   card whose topics are tags, so neither width reads as a wall of text. */
.prototype-end { padding:96px 0; text-align:left; }
.end-grid { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:72px; align-items:center; }
.prototype-end .end-action h2 { font-size:clamp(28px,3.2vw,38px); line-height:1.25; letter-spacing:-0.015em; margin:0 0 14px; max-width:440px; }
.prototype-end .end-lead { font-size:18px; line-height:1.6; margin:0 0 28px; max-width:400px; }
.end-ideas { background:var(--surface-raised); border:1px solid var(--border); border-radius:var(--radius-card); padding:28px 32px; }
.end-ideas h3 { font-size:18px; line-height:1.4; font-weight:600; margin:0 0 6px; }
.prototype-end .end-ideas p { margin:0; }
.prototype-end .end-search { font-size:15px; line-height:1.6; color:var(--text-secondary); }
.topic-tags { display:flex; flex-wrap:wrap; gap:8px; padding:0; list-style:none; margin:16px 0; }
.topic-tags li { display:inline-flex; align-items:center; min-height:32px; padding:0 12px; border-radius:var(--radius-control); background:var(--surface); border:1px solid var(--border-subtle); color:var(--text); font-size:14px; line-height:1.4; }
.topic-tags li.topic-more { background:none; border-color:transparent; padding:0 2px; color:var(--text-muted); }
.prototype-end .end-formats { font-size:15px; line-height:1.6; color:var(--text-secondary); }
.prototype-end .end-ideas .end-closing { margin-top:16px; padding-top:16px; border-top:1px solid var(--border-subtle); font-size:17px; line-height:1.5; font-weight:600; color:var(--text); }
@media(max-width:767px) {
 .prototype-end { padding:56px 0; }
 .end-grid { grid-template-columns:1fr; gap:32px; }
 .prototype-end .end-action h2 { font-size:28px; max-width:none; }
 .prototype-end .end-lead { font-size:16px; margin-bottom:24px; }
 .end-button { width:100%; justify-content:center; }
 .end-ideas { padding:22px 20px; }
 .topic-tags li { min-height:30px; padding:0 10px; font-size:13px; }
}
.phrase { display:inline-block; }
@media(max-width:767px){ .prototype-hero h1 { font-size:34px; } }