.s3{--s3:#2563eb;--rx:0deg;--ry:0deg;perspective:1300px;min-width:0;margin:0;padding:30px 22px 36px;position:relative}.s3[data-tone=violet],.s3-note[data-tone=violet]{--s3:#7c3aed}.s3[data-tone=emerald],.s3-note[data-tone=emerald]{--s3:#059669}.s3[data-tone=amber],.s3-note[data-tone=amber]{--s3:#d97706}.s3[data-tone=rose],.s3-note[data-tone=rose]{--s3:#e11d48}.s3[data-tone=cyan],.s3-note[data-tone=cyan]{--s3:#0891b2}.s3-note[data-tone=blue]{--s3:#2563eb}.dark .s3,.dark .s3-note[data-tone=blue]{--s3:#60a5fa}.dark .s3[data-tone=violet],.dark .s3-note[data-tone=violet]{--s3:#a78bfa}.dark .s3[data-tone=emerald],.dark .s3-note[data-tone=emerald]{--s3:#34d399}.dark .s3[data-tone=amber],.dark .s3-note[data-tone=amber]{--s3:#fbbf24}.dark .s3[data-tone=rose],.dark .s3-note[data-tone=rose]{--s3:#fb7185}.dark .s3[data-tone=cyan],.dark .s3-note[data-tone=cyan]{--s3:#22d3ee}.s3-stage{transform-style:preserve-3d;transform:rotateX(calc(9deg + var(--rx))) rotateY(calc(-11deg + var(--ry)));transition:transform .5s cubic-bezier(.22,1,.36,1);animation:.9s cubic-bezier(.16,1,.3,1) both s3-in;position:relative}@keyframes s3-in{0%{opacity:0;transform:rotateX(24deg)rotateY(-22deg)translateY(26px)}}.s3-floor{background:radial-gradient(closest-side, color-mix(in srgb, var(--s3) 26%, transparent), transparent);border-radius:50%;position:absolute;inset:62% -12% -14%;transform:translateZ(-90px)rotateX(70deg)}.s3-sheet{aspect-ratio:8/5;border:1px solid color-mix(in srgb, var(--s3) 22%, hsl(var(--border)));background-color:hsl(var(--card));box-shadow:0 30px 60px -28px color-mix(in srgb, var(--s3) 55%, transparent), 0 10px 0 -5px color-mix(in srgb, var(--s3) 18%, hsl(var(--card)));transform-style:preserve-3d;background-image:linear-gradient(#94a3b833 1px,#0000 1px),linear-gradient(90deg,#94a3b833 1px,#0000 1px);background-size:28px 28px;border-radius:22px;position:relative}.s3-art{width:100%;height:100%;position:absolute;inset:0}.s3-axis{stroke:hsl(var(--muted-foreground) / .45);stroke-width:1.4px}.s3-line{fill:none;stroke:var(--s3);stroke-width:3.4px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1px;animation:1.4s cubic-bezier(.45,0,.2,1) .35s forwards s3-draw}.s3-line[data-second]{stroke:#d97706;animation-delay:1s}.dark .s3-line[data-second]{stroke:#fbbf24}.s3-fill{fill:color-mix(in srgb, var(--s3) 18%, transparent);stroke:none;opacity:0;animation:.6s 1.2s forwards s3-show}.s3-shape{fill:color-mix(in srgb, var(--s3) 14%, transparent);stroke:var(--s3);stroke-width:2.6px;stroke-linejoin:round}.s3-dot{fill:var(--s3);opacity:0;animation:.3s 1.3s forwards s3-show}.s3-text{fill:hsl(var(--foreground));opacity:0;font-size:12px;font-weight:750;animation:.4s 1.2s forwards s3-show}@keyframes s3-draw{to{stroke-dashoffset:0}}@keyframes s3-show{to{opacity:1}}.s3-note{z-index:2;border:1px solid color-mix(in srgb, var(--s3) 24%, hsl(var(--border)));background:hsl(var(--card));max-width:58%;color:hsl(var(--muted-foreground));animation:.6s cubic-bezier(.16,1,.3,1) both s3-note;animation-delay:calc(.7s + var(--i) * .22s);border-radius:13px;gap:1px;padding:9px 12px;font-size:12px;font-weight:600;line-height:1.35;display:grid;position:absolute;transform:translateZ(56px);box-shadow:0 16px 28px -16px #0f172a66}@keyframes s3-note{0%{opacity:0;transform:translateZ(10px)translateY(14px)}}.s3-note b{color:var(--s3);align-items:center;gap:5px;font-size:13px;font-weight:800;display:inline-flex}.s3-note b svg{width:15px;height:15px}.s3-note[data-at=tl]{top:-14px;left:-16px}.s3-note[data-at=tr]{top:-16px;right:-14px}.s3-note[data-at=bl]{bottom:-18px;left:-12px}.s3-note[data-at=br]{bottom:-16px;right:-16px}.s3-stamp{z-index:3;color:#fff;background:#059669;border-radius:11px;align-items:center;gap:6px;padding:6px 12px;font-size:13px;font-weight:800;animation:.5s cubic-bezier(.34,1.56,.64,1) 1.6s both s3-stamp;display:inline-flex;position:absolute;top:44%;right:16px;transform:translateZ(90px)rotate(-5deg);box-shadow:0 5px #045a42,0 16px 24px -12px #047857b3}.s3-stamp svg{width:15px;height:15px}@keyframes s3-stamp{0%{opacity:0;transform:translateZ(140px)rotate(-14deg)scale(1.3)}}.s3-glyph{z-index:1;color:#fff;background:linear-gradient(145deg, color-mix(in srgb, var(--s3) 82%, white), var(--s3));width:50px;height:50px;box-shadow:0 6px 0 color-mix(in srgb, var(--s3) 62%, black), 0 18px 24px -14px var(--s3);transform:translateZ(var(--z)) rotate(calc((var(--i) - 2) * 5deg));animation:.7s cubic-bezier(.16,1,.3,1) both s3-glyph;animation-delay:calc(.5s + var(--i) * .1s);border-radius:15px;place-items:center;font-size:22px;font-weight:800;display:grid;position:absolute}@keyframes s3-glyph{0%{opacity:0;transform:translateZ(0)scale(.6)}}@media (max-width:639px){.s3{padding:22px 10px 28px}.s3-glyph{border-radius:12px;width:40px;height:40px;font-size:18px}.s3-glyph:nth-of-type(n+4){display:none}.s3-note{max-width:62%;padding:7px 9px;font-size:11px}.s3-note b{font-size:12px}}@media (prefers-reduced-motion:reduce){.s3-stage,.s3-note,.s3-stamp,.s3-glyph,.s3-fill,.s3-dot,.s3-text{opacity:1;animation:none}.s3-line{stroke-dashoffset:0;animation:none}.s3-stage{transition:none}}