.caption-scene { position:relative; width:100%; height:100%; display:grid; place-items:center; background:#faf8f2; color:#252b28; font-family:'Ref_notosansjp',sans-serif; font-synthesis:none; }
.caption-guide,.caption-phase { position:absolute; left:0; right:0; text-align:center; font-size:9px; color:#7b8278; letter-spacing:.04em; }
.caption-guide { top:25%; } .caption-phase { bottom:15%; }
.caption-line { position:relative; display:flex; align-items:center; justify-content:center; gap:2px; font-size:clamp(14px,1.55vw,22px); font-weight:700; line-height:1.6; isolation:isolate; }
.caption-unit { position:relative; display:inline-block; transform-origin:center; perspective:300px; white-space:nowrap; }
.caption-unit b { font-weight:inherit; position:relative; z-index:1; }
.caption-band { position:absolute; inset:-5px -8px; background:#252b28; z-index:-1; display:none; transform-origin:left; }
.caption-cursor { position:absolute; display:none; left:0; top:.1em; height:1.3em; width:2px; background:#687269; }
.caption-underline { display:none; position:absolute; left:0; right:0; height:3px; bottom:-4px; background:#bca465; transform-origin:left; }
.cap-tile-pop .caption-unit,.cap-tile-wipe .caption-unit,.cap-tile-drop .caption-unit { background:#252b28; color:white; padding:2px 4px; border-radius:2px; }
.cap-tile-wipe .caption-line { gap:1px; }
.cap-tile-wipe .caption-unit { padding:3px 3px; border-radius:0; will-change:transform,clip-path,opacity; }
.telop-grid .motion-text { font-family:'Ref_notosansjp',sans-serif; font-size:clamp(18px,1.6vw,23px); letter-spacing:0; }
.dialog-preview .motion-text { font-size:clamp(24px,3vw,34px); letter-spacing:0; }
.table-preview .motion-text { font-size:10px; letter-spacing:0; }
.table-preview .caption-line { font-size:9px; gap:0; }
.table-preview .caption-guide,.table-preview .caption-phase { display:none; }
.cap-phrase-pop .caption-line,.cap-word-pop .caption-line,.cap-word-highlight .caption-line,.cap-word-underline .caption-line { gap:5px; font-size:clamp(12px,1.35vw,19px); }
.cap-phrase-pop .caption-unit { background:#252b28; color:white; padding:4px; border-radius:2px; }
.cap-word-highlight .caption-unit { color:#687269; padding:4px; border-radius:3px; }
.cap-word-replace .caption-line { display:grid; min-width:130px; font-size:30px; }
.cap-word-replace .caption-unit { grid-area:1/1; text-align:center; }
.cap-word-replace .caption-unit:not(:last-of-type) { opacity:0; }
.cap-typing-cursor .caption-cursor { display:block; }
.cap-typing-band .caption-band,.cap-band-then-chars .caption-band { display:block; }
.cap-typing-band .caption-unit,.cap-band-then-chars .caption-unit { color:white; }
.cap-word-underline .caption-underline { display:block; }
.telop-grid { grid-template-columns:repeat(auto-fill,minmax(245px,1fr)); }
.telop-grid .motion-card { aspect-ratio:auto; }
.telop-grid .preview { height:170px; }
.telop-grid .card-info { min-height:95px; height:auto; }
.telop-grid .card-info small { display:block; color:#6a7466; margin-top:5px; font-size:10px; line-height:1.5; }
.dialog-preview .caption-line { font-size:26px; }
.dialog-preview .cap-word-replace .caption-line { font-size:40px; }
.dialog-preview .cap-phrase-pop .caption-line,.dialog-preview .cap-word-highlight .caption-line,.dialog-preview .cap-word-underline .caption-line { font-size:22px; }
.motion-reference { margin:16px 0; font-size:11px; line-height:1.8; color:#5c6954; }
.motion-reference a { color:#40543b; }
.detail-dialog:not(.type-dialog) .dialog-preview-wrap { align-self:start; position:sticky; top:0; min-height:0; }
.detail-dialog:not(.type-dialog) .dialog-preview { height:auto; aspect-ratio:1; flex:none; margin:0 auto; }
.type-dialog .dialog-preview { margin:0 auto; flex:none; }
@media(max-width:900px){ .detail-dialog .dialog-preview-wrap { position:static; } }
.telop-intro { padding:15px 0; font-size:12px; line-height:1.8; color:#56664d; }