.creator-grid .story-panel{--frame:url("/assets/links/story-crystal-v1/wings-frame.webp");--slice:260;--frame-width:78px;grid-column:1/-1;position:relative;isolation:isolate;display:flex;flex-direction:column;gap:24px;padding:45px 53px 43px;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;scroll-margin-top:116px;transition:filter .2s}
.story-panel[data-panel-style=wings]{--frame:url("/assets/links/story-crystal-v1/wings-frame.webp");--slice:340;--frame-width:104px}
.story-panel:before,.story-panel:after{display:none!important}
.story-panel .panel-surface{position:absolute;inset:24px;z-index:0;pointer-events:none;border-radius:16px;background:radial-gradient(ellipse at 5% 0,#123448aa,transparent 65%),linear-gradient(125deg,#051322,#020912);box-shadow:inset 0 0 45px #009adb0c}
.story-panel .panel-frame{position:absolute;inset:0;z-index:3;pointer-events:none;border:solid transparent;border-width:var(--frame-width);border-image-source:var(--frame);border-image-slice:var(--slice);border-image-width:var(--frame-width);border-image-repeat:stretch;transition:filter .22s}
.story-panel .panel-light{position:absolute;inset:32px;z-index:1;pointer-events:none;border-radius:12px;background:radial-gradient(ellipse at var(--px,50%) var(--py,0%),#3dcaff14,transparent 60%);opacity:.5;transition:opacity .2s}
.story-panel .panel-heading{position:relative;z-index:4;display:flex;align-items:center;gap:22px;min-width:0}
.panel-avatar{width:84px;height:84px;flex:0 0 84px;border:1px solid #76dff0aa;padding:3px;border-radius:18px;background:linear-gradient(135deg,#a9efff,#09273b 52%,#246481);box-shadow:0 0 18px #2fcaff22}
.panel-avatar img{display:block;width:100%;height:100%;border-radius:14px;object-fit:cover}
.panel-copy{min-width:0;flex:1}
.panel-label{display:block;font-size:10px;letter-spacing:.13em;color:#62d8f8;font-weight:800;margin-bottom:8px}
.panel-copy h3{font-size:clamp(23px,2.6vw,30px);line-height:1.13;letter-spacing:-.035em;color:#edf7ff;margin:0}
.panel-copy p{font-size:13px;line-height:1.55;color:#a3bbcc;margin:9px 0 0;max-width:680px}
.panel-badge{align-self:center;text-align:right;font-weight:800;font-size:23px;letter-spacing:.06em;color:#73bfd56b}
.panel-badge span{display:block;margin-top:4px;font-size:7px;letter-spacing:.18em;color:#7599ac}
.story-panel .panel-actions{position:relative;z-index:4;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin:0;padding-top:20px;border-top:1px solid #348cad40}
.panel-actions .platform-link{grid-template-columns:39px minmax(0,1fr) 18px;gap:12px;min-height:66px;padding:10px 18px;border:1px solid #2c7a9d80;border-radius:9px;background:linear-gradient(120deg,#092337,#031321);box-shadow:inset 0 1px #b0efff15;transition:transform .14s,box-shadow .16s,background .16s,border-color .16s}
.panel-actions .platform-icon{width:39px;height:39px}
.panel-actions .platform-link strong{font-size:14px}
.panel-actions .platform-link small{font-size:10px}
.panel-actions .link-arrow{color:#7cddf8}
.panel-actions .platform-link:hover{transform:translateY(-2px);background:linear-gradient(120deg,#10415a,#07273c);border-color:#8ce7ff;box-shadow:0 6px 20px #2dcfff25}
.panel-actions .platform-link:active,.panel-actions .platform-link.is-down{transform:translateY(1px) scale(.98);background:#154963;box-shadow:0 0 18px #73edff60;border-color:#c8f8ff}
.panel-actions .platform-link:focus-visible{outline:2px solid #c3f5ff;outline-offset:3px}
.story-panel:hover .panel-frame,.story-panel:focus-within .panel-frame{filter:brightness(1.2) drop-shadow(0 0 5px #1faee622)}
.story-panel:hover .panel-light{opacity:1}
@media (max-width:900px){.panel-badge{display:none}
.creator-grid .story-panel{padding:42px 43px 40px}
.panel-heading{gap:18px}
.panel-copy h3{font-size:27px}}
@media (max-width:600px){.creator-grid .story-panel{--frame-width:59px;gap:20px;padding:36px 29px 35px;scroll-margin-top:104px}
.story-panel[data-panel-style=wings]{--frame-width:76px}
.story-panel .panel-surface{inset:17px;border-radius:10px}
.story-panel .panel-light{inset:24px}
.story-panel .panel-heading{gap:13px;align-items:flex-start;flex-wrap:wrap}
.panel-avatar{width:66px;height:66px;flex-basis:66px;border-radius:15px}
.panel-avatar img{border-radius:11px}
.panel-copy{flex:1;min-width:170px}
.panel-label{font-size:8px;letter-spacing:.08em;margin:3px 0 7px}
.panel-copy h3{font-size:24px}
.panel-copy p{font-size:12px;line-height:1.6;margin-top:12px}
.story-panel .panel-actions{padding-top:17px;gap:9px;grid-template-columns:1fr}
.panel-actions .platform-link{min-height:59px;padding:9px 14px;grid-template-columns:33px minmax(0,1fr) 14px;gap:12px}
.panel-actions .platform-icon{width:33px;height:33px}
.panel-actions .platform-link strong{font-size:13px}
.panel-actions .platform-link small{font-size:10px}}
@media (max-width:600px){.story-panel .panel-heading{display:grid;grid-template-columns:60px minmax(0,1fr);gap:5px 14px;align-items:center}
.panel-avatar{grid-column:1;grid-row:1/3;width:60px;height:60px;align-self:center}
.panel-copy{display:contents}
.panel-label{grid-column:2;grid-row:1;align-self:end;margin:0 0 2px}
.panel-copy h3{grid-column:2;grid-row:2;align-self:start;font-size:23px;line-height:1.15}
.panel-copy p{grid-column:1/-1;grid-row:3;margin-top:12px}}
@media (prefers-reduced-motion:reduce){.story-panel,.story-panel *{animation:none!important;transition:none!important}
.panel-actions .platform-link:hover,.panel-actions .platform-link:active,.panel-actions .platform-link.is-down{transform:none}}
.panel-copy .panel-description{margin-top:13px;max-width:750px}
.panel-description strong{display:block;font-size:15px;font-weight:650;line-height:1.5;letter-spacing:-.01em;color:#d2effa}
.panel-description>span{display:block;margin-top:5px;color:#9fbccd;font-size:13px;line-height:1.6}
.creator-grid .story-panel{gap:23px}
.panel-badge{font-size:19px}
.story-panel .panel-actions{gap:17px;padding-top:22px}
.story-panel .panel-actions .platform-link{--button-frame:url("/assets/links/story-crystal-v1/youtube-button.webp");--button-accent:#ff5578;--button-glow:#ff375526;position:relative;isolation:isolate;display:grid;grid-template-columns:44px minmax(0,1fr) 28px;gap:14px;min-height:94px;margin:0;padding:21px 30px;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;transition:transform .15s ease,filter .2s ease}
.story-panel .panel-actions [data-platform=tiktok]{--button-frame:url("/assets/links/story-crystal-v1/tiktok-button.webp");--button-accent:#68f3eb;--button-glow:#24f2ee22}
.panel-actions .platform-link:before{inset:10px 16px;opacity:1;border:1px solid #49798966;border-radius:8px;background:radial-gradient(ellipse at 8% 50%,var(--button-glow),transparent 65%),linear-gradient(110deg,#0d2335,#041322);z-index:0;transition:background .2s,box-shadow .2s}
.panel-actions .platform-link .button-art{position:absolute;inset:0;z-index:2;pointer-events:none;border:solid transparent;border-width:28px 60px;border-image:var(--button-frame) 110 220 / 28px 60px / 0 stretch;transition:filter .18s}
.panel-actions .platform-link .button-glint{position:absolute;inset:12px 18px;overflow:hidden;z-index:1;pointer-events:none;border-radius:7px}
.button-glint:after{content:"";position:absolute;inset:-60% -20%;background:linear-gradient(115deg,transparent 43%,#d5faff2e 50%,transparent 57%);transform:translateX(-130%);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.story-panel .panel-actions .platform-icon{position:relative;z-index:3;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #ff85954d;border-radius:12px;background:linear-gradient(145deg,#8e153a,#350c25);color:#fff;box-shadow:inset 0 1px #ffb6c855,0 3px 10px #0008;transition:transform .18s,box-shadow .18s}
.story-panel .panel-actions .platform-icon svg{width:24px;height:24px;fill:currentColor}
.story-panel .panel-actions [data-platform=tiktok] .platform-icon{border-color:#7be3e855;background:linear-gradient(145deg,#123947,#061a2b);color:#fff;box-shadow:inset 0 1px #abfaff55,0 3px 10px #0008}
.panel-actions [data-platform=tiktok] .platform-icon svg{filter:drop-shadow(-1px -1px 0 #25f4ee) drop-shadow(1px 1px 0 #fe2c55)}
.story-panel .panel-actions .button-copy{position:relative;z-index:3;display:flex;min-width:0;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px}
.story-panel .panel-actions .button-copy strong{width:auto;max-width:100%;font-size:17px;line-height:1.2;letter-spacing:-.02em;text-align:left;overflow-wrap:normal;color:#f1f8ff}
.story-panel .panel-actions .button-copy small{width:auto;max-width:100%;font-size:10px;text-align:left;line-height:1.2;color:#9ebed2;overflow-wrap:normal}
.story-panel .panel-actions .button-arrow{position:relative;z-index:3;display:grid;place-items:center;width:28px;height:28px;border:1px solid #9ce5fa3d;border-radius:50%;color:#b7ecf8;background:#06132077;transition:transform .18s,color .18s,border-color .18s}
.button-arrow svg{width:13px;height:13px;fill:currentColor}
.story-panel .panel-actions .platform-link:hover{transform:translateY(-2px);background:none;border:0;box-shadow:none}
.panel-actions .platform-link:hover .button-art,.panel-actions .platform-link:focus-visible .button-art{filter:brightness(1.28) drop-shadow(0 0 5px var(--button-glow))}
.panel-actions .platform-link:hover .button-glint:after{transform:translateX(130%)}
.panel-actions .platform-link:hover .button-arrow{transform:translateX(3px);color:#fff;border-color:var(--button-accent)}
.panel-actions .platform-link:hover .platform-icon{box-shadow:inset 0 1px #ffffff77,0 0 15px var(--button-glow)}
.story-panel .panel-actions .platform-link.is-down,.story-panel .panel-actions .platform-link:active{transform:translateY(1px) scale(.978);background:none;box-shadow:none}
.panel-actions .platform-link.is-down .button-art,.panel-actions .platform-link:active .button-art{filter:brightness(1.55)}
.panel-actions .platform-link.is-down:before,.panel-actions .platform-link:active:before{background:radial-gradient(ellipse at 50% 50%,var(--button-glow),#123247);box-shadow:inset 0 0 25px var(--button-glow)}
.story-panel .panel-actions .platform-link:focus-visible{outline:2px solid #baf4ff;outline-offset:3px;border-radius:9px}
.panel-actions .tap-ripple{display:none}
@media (max-width:900px){.story-panel .panel-actions .platform-link{padding:20px 24px;grid-template-columns:38px minmax(0,1fr) 23px;gap:11px}
.story-panel .panel-actions .platform-icon{width:38px;height:38px;border-radius:10px}
.story-panel .panel-actions .button-copy strong{font-size:15px}
.story-panel .panel-actions .button-arrow{width:23px;height:23px}}
@media (max-width:600px){.panel-copy .panel-description{margin-top:12px}
.panel-description strong{font-size:14px;line-height:1.5}
.panel-description>span{font-size:12px;line-height:1.65;margin-top:7px}
.story-panel .panel-actions{gap:12px;padding-top:18px}
.story-panel .panel-actions .platform-link{min-height:85px;padding:20px 24px;grid-template-columns:36px minmax(0,1fr) 20px;gap:10px}
.story-panel .panel-actions .button-copy strong{font-size:14px}
.story-panel .panel-actions .button-copy small{font-size:9px}
.story-panel .panel-actions .platform-icon{width:36px;height:36px}
.story-panel .panel-actions .platform-icon svg{width:21px;height:21px}
.story-panel .panel-actions .button-arrow{width:20px;height:20px}
.button-arrow svg{width:11px;height:11px}
.panel-actions .platform-link .button-art{border-image-width:24px 48px}
.panel-actions .platform-link:before{inset:9px 13px}
.panel-actions .platform-link .button-glint{inset:12px 16px}}
@media (max-width:360px){.story-panel .panel-actions .platform-link{padding:20px;gap:9px;grid-template-columns:32px minmax(0,1fr) 15px}
.story-panel .panel-actions .platform-icon{width:32px;height:32px;border-radius:9px}
.story-panel .panel-actions .button-copy strong{font-size:12px}
.story-panel .panel-actions .button-arrow{width:15px;height:15px;border:0}
.story-panel .panel-actions .button-copy small{font-size:9px}
.panel-copy h3{font-size:22px}}
.panel-actions .platform-link .button-art{display:grid;grid-template-columns:80px minmax(0,1fr) 80px;border:0;border-image:none;clip-path:inset(5px 0 round 12px)}
.button-art i{display:block;height:100%;background-image:var(--button-frame);background-size:auto 185%;background-position:left 50%;background-repeat:no-repeat}
.button-art i:nth-child(2){background-size:190% 185%;background-position:center 50%}
.button-art i:nth-child(3){background-position:right 50%}
.panel-actions .platform-link:before{inset:10px 15px;background:#051321;border:0}
.story-panel .panel-actions .platform-link{padding-left:44px;padding-right:39px}
.story-panel .panel-actions .button-copy strong{font-size:16px}
@media (max-width:900px){.story-panel .panel-actions .platform-link{padding-left:35px;padding-right:29px}
.story-panel .panel-actions .button-copy strong{font-size:14px}
.panel-actions .platform-link .button-art{grid-template-columns:69px minmax(0,1fr) 69px}}
@media (max-width:600px){.story-panel .panel-actions .platform-link{padding-left:33px;padding-right:29px}
.story-panel .panel-actions .button-copy strong{font-size:14px}
.panel-actions .platform-link .button-art{grid-template-columns:64px minmax(0,1fr) 64px}}
@media (max-width:360px){.story-panel .panel-actions .platform-link{padding-left:26px;padding-right:23px}
.story-panel .panel-actions .button-copy strong{font-size:12px}
.panel-actions .platform-link .button-art{grid-template-columns:60px minmax(0,1fr) 60px}}
.panel-actions [data-platform=tiktok] .button-art i{background-size:auto 165%}
.panel-actions [data-platform=tiktok] .button-art i:nth-child(2){background-size:190% 165%}
.panel-actions .platform-link .button-art{clip-path:inset(0 round 12px)}
@media (prefers-reduced-motion:reduce){.story-panel *,.story-panel *:before,.story-panel *:after{animation:none!important;transition:none!important}
.story-panel .panel-actions .platform-link:hover,.story-panel .panel-actions .platform-link.is-down,.story-panel .panel-actions .platform-link:active,.panel-actions .platform-link:hover .button-arrow{transform:none}
.button-glint{display:none}}
.story-panel [data-platform=youtube] .button-art i{background-position-y:42%}
.story-panel [data-platform=tiktok] .button-art i{background-position-y:43.7%}
.story-panel .panel-actions .platform-link{display:grid;grid-template-columns:minmax(0,1fr);place-items:center;gap:0;padding:21px 37px;transition:transform 100ms ease-out,filter 180ms ease}
.story-panel .panel-actions .button-core{position:relative;z-index:5;display:flex;align-items:center;justify-content:center;gap:13px;min-width:0;max-width:100%;width:max-content}
.story-panel .panel-actions .button-core .platform-icon{flex-shrink:0}
.story-panel .panel-actions .button-copy{align-items:center;gap:5px;flex:0 1 auto}
.story-panel .panel-actions .button-copy strong,.story-panel .panel-actions .button-copy small{text-align:center}
.story-panel .panel-actions .button-copy strong{white-space:nowrap}
.story-panel .panel-actions .button-arrow{position:absolute;right:28px;top:50%;transform:translateY(-50%);z-index:5;width:23px;height:23px}
.story-panel .panel-actions .platform-link:hover .button-arrow{transform:translate(3px,-50%)}
.story-panel .panel-vfx{position:absolute;inset:25px 25px 29px;z-index:3;pointer-events:none;color:#8ceaff;border-radius:14px}
.story-panel .button-vfx{position:absolute;inset:0;z-index:4;pointer-events:none;color:var(--button-accent);overflow:hidden;border-radius:14px}
.vfx-stars{position:absolute;inset:0;pointer-events:none;display:none}
.vfx-star{position:absolute;left:var(--x);top:var(--y);width:5px;height:5px;margin:-2.5px;border-radius:50%;background:#e7fcff;box-shadow:0 0 7px 2px currentColor;opacity:0}
.vfx-star:before,.vfx-star:after{content:"";position:absolute;background:linear-gradient(90deg,transparent,#ddfcff,transparent);left:-5px;top:2px;width:15px;height:1px}
.vfx-star:after{transform:rotate(90deg)}
.press-feedback{position:absolute;inset:13px 24px;border:1px solid currentColor;border-radius:60px;box-shadow:inset 0 0 25px var(--button-glow),0 0 12px var(--button-glow);opacity:0;transition:opacity 100ms ease-out}
.is-down .press-feedback{opacity:.8}
.story-panel .button-glint{z-index:3;opacity:.65}
.story-panel .button-glint:after{transition-duration:600ms}
.story-panel[data-vfx=stars] .vfx-stars{display:block}
.story-panel[data-vfx=stars] .vfx-star{animation:vfx-twinkle var(--period) ease-in-out var(--delay) infinite}
.story-panel[data-vfx=stars] .platform-link:hover .vfx-star,.story-panel[data-vfx=stars] .platform-link:focus-visible .vfx-star{animation-duration:2.8s}
.button-vfx .vfx-star{width:3px;height:3px;margin:-1.5px}
.button-vfx .vfx-star:before,.button-vfx .vfx-star:after{left:-4px;top:1px;width:11px}
.button-vfx .vfx-star{box-shadow:0 0 5px 1px currentColor}
@keyframes vfx-twinkle{0%,48%,100%{opacity:.08;transform:scale(.45) rotate(0deg)}66%{opacity:.95;transform:scale(1) rotate(35deg)}81%{opacity:.3;transform:scale(.65) rotate(65deg)}}
.story-panel[data-motion=paused] *,.story-panel[data-motion=paused] *:before,.story-panel[data-motion=paused] *:after{animation-play-state:paused!important}
@media (max-width:900px){.story-panel .panel-actions .platform-link{padding:20px 35px}
.story-panel .panel-actions .button-core{gap:11px}
.story-panel .panel-actions .button-arrow{right:19px;width:19px;height:19px}
.story-panel .panel-actions .button-copy strong{font-size:14px}}
@media (max-width:600px){.story-panel .panel-actions .platform-link{padding:20px 28px}
.story-panel .panel-actions .button-core{gap:10px}
.story-panel .panel-actions .button-copy strong{font-size:14px}
.story-panel .panel-actions .button-arrow{display:none}
.story-panel .panel-vfx{inset:19px 19px 25px}
.panel-vfx .vfx-star:nth-child(3n){display:none}}
@media (max-width:360px){.story-panel .panel-actions .platform-link{padding:20px 24px}
.story-panel .panel-actions .button-core{gap:8px}
.story-panel .panel-actions .button-copy strong{font-size:12px}
.story-panel .panel-actions .button-copy small{font-size:9px}}
@media (prefers-reduced-motion:reduce){.story-panel *,.story-panel *:before,.story-panel *:after{animation:none!important;transition:none!important}
.story-panel .panel-vfx,.story-panel .button-vfx>.vfx-stars{display:none!important}
.story-panel .panel-actions .platform-link:hover,.story-panel .panel-actions .platform-link.is-down,.story-panel .panel-actions .platform-link:active{transform:none}
.story-panel .panel-actions .platform-link:hover .button-arrow{transform:translateY(-50%)}}
.creator-grid .story-panel{opacity:1!important;transform:none!important}
.story-panel .panel-surface{outline:1px solid #3d718e55}
.story-panel[data-motion=reduced] .panel-vfx,.story-panel[data-motion=reduced] .button-vfx>.vfx-stars{display:none!important}
.story-motion-toggle{font:inherit;font-size:11px;color:#91b9cc;background:transparent;border:1px solid #34566a;border-radius:7px;min-height:44px;padding:8px 12px;cursor:pointer;max-width:100%;white-space:normal}
.story-motion-toggle:hover{color:#d5f5ff;border-color:#75cade}.story-motion-toggle:focus-visible{outline:2px solid #b6efff;outline-offset:3px}.story-motion-toggle[hidden]{display:none}.footer-meta{flex-wrap:wrap}
