/* The Octolantis story card in the hero: a soft, kawaii manga panel in candy pink and lavender,
   sitting quietly under the hero's buttons on the dark page. */
@font-face{font-family:'Quicksand';src:url('fonts/quicksand/Quicksand-Regular.woff2') format('woff2');font-weight:400 600;font-display:swap}
@font-face{font-family:'Quicksand';src:url('fonts/quicksand/Quicksand-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
.octo-story{--candy:#ffb3d4;--candy-deep:#ff7fb6;--lilac:#cdb8ff;--mint:#a8ecdf;position:relative;z-index:3;max-width:780px;margin:46px auto 0;padding:28px 34px 28px 28px;display:grid;grid-template-columns:128px 1fr;gap:24px;align-items:center;text-align:left;border-radius:34px;font-family:'Quicksand',var(--font,'Segoe UI'),system-ui,sans-serif;color:#efe7f6;background:radial-gradient(120% 140% at 0% 0%,rgba(255,179,212,.16),transparent 55%),radial-gradient(120% 140% at 100% 100%,rgba(205,184,255,.14),transparent 55%),rgba(24,16,36,.62);border:1.5px solid rgba(255,190,222,.38);box-shadow:0 0 0 6px rgba(255,170,212,.06),0 22px 60px rgba(8,4,18,.45),inset 0 1px 0 rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* manga screentone in the top-right corner */
.octo-story::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle,rgba(255,205,228,.22) 1.1px,transparent 1.6px) 0 0/11px 11px;-webkit-mask-image:radial-gradient(70% 90% at 100% 0%,#000,transparent 70%);mask-image:radial-gradient(70% 90% at 100% 0%,#000,transparent 70%)}
.octo-story-avatar{position:relative;width:128px;height:128px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 38%,#ffe3f0 0%,#ffc4de 46%,#d9c6ff 100%);box-shadow:0 0 0 4px rgba(255,255,255,.12),0 0 0 9px rgba(255,179,212,.12),0 10px 28px rgba(255,127,182,.28)}
.octo-story-avatar img{width:108px;height:auto;display:block;margin-top:6px;filter:drop-shadow(0 4px 6px rgba(120,40,80,.25))}
.octo-story-avatar::after{content:"♡";position:absolute;right:-2px;top:6px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 16px/1 'Quicksand',sans-serif;color:#fff;background:linear-gradient(135deg,var(--candy-deep),#ff9fc8);box-shadow:0 3px 10px rgba(255,90,160,.45);font-variant-emoji:text}
.octo-story-title{margin:0 0 10px;font-size:27px;line-height:1.2;font-weight:700;letter-spacing:-.005em;color:#fff3f9;text-wrap:balance}
.octo-story p{margin:0 0 9px;font-size:16.5px;line-height:1.7;font-weight:500;color:#e6ddef;text-wrap:pretty}
.octo-name{font-weight:700;background:linear-gradient(90deg,#ffb3d4,#ff8cc0 55%,#cdb8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.octo-story .octo-story-bubble{position:relative;display:inline-block;margin:8px 0 0;padding:10px 18px 9px;border-radius:20px;font-weight:700;font-size:15.5px;line-height:1.5;color:#b8336e;background:#fff0f7;border:2.5px solid #ffc2dc;box-shadow:0 4px 0 rgba(255,194,220,.35),0 10px 26px rgba(255,120,180,.18)}
.octo-story-bubble::before{content:"";position:absolute;left:22px;top:-12px;border:solid transparent;border-width:0 7px 12px 12px;border-bottom-color:#ffc2dc}
.octo-story-bubble::after{content:"";position:absolute;left:25px;top:-7px;border:solid transparent;border-width:0 5px 8px 8px;border-bottom-color:#fff0f7}
.octo-story-bubble .octo-name{background:none;color:#e0457f}
/* sparkles and stars */
.octo-spark{position:absolute;pointer-events:none;font-style:normal;line-height:1;font-family:'Segoe UI Symbol',sans-serif;font-variant-emoji:text;animation:octo-twinkle 3.2s ease-in-out infinite}
.octo-spark.s1{top:-13px;left:118px;font-size:24px;color:#ffd0e5}
.octo-spark.s2{top:16px;right:22px;font-size:14px;color:var(--lilac);animation-delay:-1.1s}
.octo-spark.s3{bottom:-11px;right:96px;font-size:20px;color:var(--mint);animation-delay:-2s}
.octo-spark.s4{bottom:22px;left:14px;font-size:12px;color:var(--candy);animation-delay:-.5s}
.octo-spark.s5{top:44%;right:-9px;font-size:16px;color:#ffe9a8;animation-delay:-1.6s}
@keyframes octo-twinkle{0%,100%{opacity:.95;transform:scale(1) rotate(0)}50%{opacity:.35;transform:scale(.72) rotate(18deg)}}
@media (prefers-reduced-motion:reduce){.octo-spark{animation:none}}
.octo-story:lang(ru){font-family:var(--font,'Segoe UI'),system-ui,sans-serif}
.octo-story:lang(ja){font-family:'Yu Gothic UI','Yu Gothic','Meiryo',var(--font,'Segoe UI'),sans-serif}
.octo-story:lang(ko){font-family:'Malgun Gothic',var(--font,'Segoe UI'),sans-serif}
.octo-story:lang(zh){font-family:'Microsoft YaHei',var(--font,'Segoe UI'),sans-serif}
.octo-story:is(:lang(ja),:lang(ko),:lang(zh)) p{line-height:1.8}
@media (max-width:640px){
 .octo-story{grid-template-columns:1fr;gap:4px;margin:76px auto 0;padding:58px 20px 22px;border-radius:28px}
 .octo-story-avatar{position:absolute;top:-44px;left:50%;width:92px;height:92px;margin-left:-46px}
 .octo-story-avatar img{width:78px;margin-top:4px}
 .octo-story-avatar::after{width:24px;height:24px;font-size:13px;right:-4px;top:2px}
 .octo-story-body{text-align:center}
 .octo-story-title{font-size:22px}
 .octo-story p{font-size:15.5px;line-height:1.65}
 .octo-story .octo-story-bubble{font-size:14.5px;padding:9px 15px 8px}
 .octo-story-bubble::before{left:50%;margin-left:-9px}
 .octo-story-bubble::after{left:50%;margin-left:-6px}
 .octo-spark.s1{left:24px;top:8px}
 .octo-spark.s3{right:30px}
}
/* the site styles h2/p by itself; the card keeps its own rounded type */
.reference-hero .octo-story :is(.octo-story-title,p){font-family:inherit}
.octo-story:lang(ja){word-break:auto-phrase}
.octo-story:is(:lang(ru),:lang(ja),:lang(ko),:lang(zh)) p:not(.octo-story-bubble){font-weight:400}