.hero-morph{text-align:left;max-width:1040px;margin:32px auto 0}.morph-frame{background:#f6f7f9;border:1px solid #e1e5eb;border-radius:14px;padding:0 15px;overflow:hidden;box-shadow:0 16px 50px -26px #18305330}.morph-toolbar{justify-content:space-between;align-items:center;gap:15px;height:48px;padding:0 5px;display:flex}.morph-filename{color:#626e7c;align-items:center;gap:7px;font-size:11px;display:flex}.morph-filename svg{color:#b57661}.morph-state{color:#66768c;align-items:center;gap:6px;font-size:11px;font-weight:500;display:flex}.morph-state i{background:#8d99aa;border-radius:50%;width:5px;height:5px}.morph-state-preparing,.morph-state-transforming{color:#3159f6}.morph-state-preparing i,.morph-state-transforming i{background:#3159f6;box-shadow:0 0 0 3px #3159f611}.morph-state-polished{color:#3a7258}.morph-stage{aspect-ratio:16/9;isolation:isolate;background:#e7e7e7;border-radius:6px;position:relative;overflow:hidden;box-shadow:0 2px 12px #17202109}.morph-layer{pointer-events:none;position:absolute;inset:0}.morph-layer>.rf-slide{width:100%;height:100%}.morph-original{z-index:2;opacity:1}.morph-polished{z-index:1;opacity:0}.morph-stage[data-view=polished] .morph-original{opacity:0}.morph-stage[data-view=polished] .morph-polished,.morph-stage[data-view=transforming] .morph-polished{opacity:1}.morph-controls{justify-content:space-between;align-items:center;gap:12px;min-height:58px;padding:8px 2px;display:flex}.morph-view-options{background:#eef0f4;border:1px solid #e0e4eb;border-radius:7px;gap:3px;padding:3px;display:flex}.morph-view-options button{color:#626e7c;background:0 0;border:0;border-radius:4px;min-height:30px;padding:3px 15px;font-size:11px}.morph-view-options button[aria-pressed=true]{color:#283547;background:#fff;box-shadow:0 1px 4px #1b2b4110}.morph-summary{color:#626e7c;font-size:11px}.morph-replay{color:#425778;background:0 0;border:0;border-radius:6px;align-items:center;gap:6px;min-height:38px;padding:5px 10px;font-size:11px;font-weight:500;display:flex}.morph-replay:hover{color:#3159f6;background:#e9edf7}.morph-caption{color:#626e7c;justify-content:space-between;gap:12px;margin:13px 2px 0;font-size:12px;display:flex}.morph-caption>span:last-child{color:#626e7c;font-size:10px}@media (max-width:760px){.hero-morph{margin-top:25px}.morph-frame{border-radius:10px;padding:0 9px}.morph-toolbar{gap:6px;height:40px;padding:0 1px}.morph-filename{gap:4px;font-size:9px}.morph-filename svg{width:12px;height:12px}.morph-state{gap:4px;font-size:9px}.morph-state svg{width:11px;height:11px}.morph-stage{border-radius:4px}.morph-controls{gap:7px;min-height:52px;padding:5px 0}.morph-summary{display:none}.morph-view-options{gap:1px;padding:2px}.morph-view-options button{min-height:34px;padding:3px 11px;font-size:10px}.morph-replay{gap:5px;min-height:40px;padding:5px 3px;font-size:10px}.morph-caption{flex-wrap:wrap;gap:4px;margin-top:10px;font-size:10px}.morph-caption>span:last-child{font-size:9px}.hero:has(.hero-morph) .hero-subtitle{max-width:345px}}@media (max-width:360px){.morph-filename,.morph-state{font-size:8px}.morph-replay{font-size:9px}.morph-view-options button{padding:3px 8px}}@media (prefers-reduced-motion:reduce){.morph-stage .morph-original{opacity:0}.morph-stage .morph-polished,.morph-stage[data-view=original] .morph-original{opacity:1}.morph-stage[data-view=original] .morph-polished{opacity:0}}@media (min-width:1060px){.hero:has(.hero-morph){-moz-column-gap:40px;text-align:left;grid-template-columns:minmax(0,.84fr) minmax(0,1.25fr);align-items:center;column-gap:40px;padding-top:65px;padding-bottom:52px;display:grid}.hero:has(.hero-morph) .hero-intro{min-width:0;padding-bottom:28px}.hero:has(.hero-morph) h1{letter-spacing:-.06em;margin:23px 0 20px;font-size:clamp(46px,4.45vw,57px);line-height:1.05}.hero:has(.hero-morph) .hero-subtitle{max-width:385px;font-size:16px;line-height:1.7}.hero:has(.hero-morph) .hero-actions{justify-content:flex-start;gap:10px;margin-top:25px}.hero:has(.hero-morph) .hero-actions .button{padding:0 20px;font-size:13px}.hero:has(.hero-morph) .hero-note{margin-top:12px;font-size:10px}.hero:has(.hero-morph) .beta-pill{font-size:10px}.hero:has(.hero-morph) .hero-morph{width:100%;min-width:0;margin:0}.hero:has(.hero-morph) .morph-frame{padding:0 11px}.hero:has(.hero-morph) .morph-summary{display:none}.hero:has(.hero-morph) .morph-caption{font-size:10px}.hero:has(.hero-morph) .morph-caption>span:last-child{font-size:9px}}
