:root { --ink:#10221a; --accent:#208362; --canvas:#f0f4f2; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:var(--canvas); color:var(--ink); font-family:Manrope,Arial,sans-serif; }
.canvas { min-height:100svh; display:grid; place-items:center; padding:32px 18px; background:radial-gradient(circle at 50% 12%,#fff 0 8%,transparent 45%); }
.story-card { width:min(100%,516px); padding:34px 28px 27px; border-radius:28px; background:#fff; box-shadow:0 19px 45px rgba(22,52,40,.13); text-align:center; }
.identity { display:flex; flex-direction:column; align-items:center; gap:9px; margin-bottom:14px; font-size:13px; font-weight:800; }
.identity img { width:68px; height:68px; border-radius:50%; object-fit:cover; box-shadow:0 7px 18px rgba(24,58,43,.16); }
.rubric { display:inline-block; margin:0 0 14px; padding:7px 11px; border-radius:999px; background:#e6f3ed; color:var(--accent); font-size:10px; font-weight:800; letter-spacing:.1em; }
h1 { margin:0; font-size:clamp(34px,6.9vw,47px); line-height:1.02; letter-spacing:-.058em; font-weight:800; }
.summary { max-width:410px; margin:16px auto 20px; font-size:14px; line-height:1.55; font-weight:600; color:#46544d; }
.frame { position:relative; margin:0; overflow:hidden; border-radius:14px; aspect-ratio:1.45/1; background:#dfe6e2; }
.frame::after { position:absolute; inset:0; content:''; background:linear-gradient(90deg,rgba(8,20,14,.16),transparent 60%); }
.frame img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.play { position:absolute; z-index:1; top:50%; left:50%; width:64px; height:64px; transform:translate(-50%,-50%); border:2px solid #fff; border-radius:50%; background:rgba(10,29,20,.24); box-shadow:0 3px 15px rgba(0,0,0,.23); }
.play::after { position:absolute; top:19px; left:25px; content:''; border-top:11px solid transparent; border-bottom:11px solid transparent; border-left:17px solid #fff; }
.cta { display:flex; align-items:center; justify-content:space-between; min-height:57px; margin-top:16px; padding:0 20px; border-radius:10px; background:#229ed9; color:white; text-align:left; text-decoration:none; font-size:14px; font-weight:800; transition:transform .18s ease,background .18s ease; }
.cta:hover { transform:translateY(-2px); background:#1686bd; }.cta__label { display:flex; align-items:center; gap:10px; }.cta svg { width:19px; height:19px; fill:currentColor; }.cta b { font-size:22px; font-weight:500; }
@media (max-width:480px) { .canvas { padding:15px; place-items:start center; }.story-card { padding:26px 17px 20px; border-radius:20px; }.identity img { width:60px; height:60px; }.frame { aspect-ratio:1.2/1; } }