@layer theme,base,components,utilities;@layer components{.cn-mark{--eo: cubic-bezier(.22, .61, .36, 1);--es: cubic-bezier(.34, 1.4, .64, 1);position:absolute;left:var(--cn-inset, 18px);top:var(--cn-inset, 18px);z-index:5;display:flex;align-items:center;gap:14px;min-height:44px;margin:-16px;padding:16px;border:0;background:none;cursor:pointer;color:var(--cn-ink, #fff);font-family:JetBrains Mono,monospace;font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}.cn-mark-dot{position:relative;display:block;width:9px;height:9px;flex:none;border:1px solid currentColor;border-radius:50%;transition:background-color .32s var(--eo),transform .32s var(--es)}.cn-mark-dot:after{content:"";position:absolute;inset:-7px;border:1px solid currentColor;border-radius:50%;opacity:0;transform:scale(.7);transition:opacity .48s var(--eo),transform .48s var(--eo)}.cn-mark:hover .cn-mark-dot,.cn-mark:focus-visible .cn-mark-dot{background:currentColor;transform:scale(1.12)}.cn-mark:hover .cn-mark-dot:after{opacity:.45;transform:scale(1)}.cn-mark:active .cn-mark-dot{transform:scale(.85);transition-duration:.12s}[data-in="1"] .cn-mark .cn-mark-dot:after{animation:cn-invite 1.72s var(--eo) 1.2s 1}@keyframes cn-invite{0%{opacity:0;transform:scale(.7)}30%{opacity:.6;transform:scale(1)}to{opacity:0;transform:scale(1.5)}}.cn-mark-label{opacity:0;transform:translate(-4px);transition:opacity .32s var(--eo),transform .32s var(--eo);white-space:nowrap}.cn-mark:hover .cn-mark-label,.cn-mark:focus-visible .cn-mark-label,.cn-mark[aria-expanded=true] .cn-mark-label{opacity:.85;transform:none}.cn-note{--eo: cubic-bezier(.22, .61, .36, 1);position:absolute;left:var(--cn-inset, 18px);top:calc(var(--cn-inset, 18px) + 44px);z-index:4;display:flex;align-items:flex-start;gap:10px;width:min(380px,calc(100% - 36px));max-width:100%;color:var(--cn-ink, #fff);pointer-events:none;opacity:0;transition:opacity .24s var(--eo)}.cn-note[data-open="1"]{opacity:1;pointer-events:auto}.cn-note-stem{position:absolute;left:4px;top:-38px;width:1px;height:0;background:currentColor;opacity:.6;transition:height .48s var(--eo)}.cn-note[data-open="1"] .cn-note-stem{height:46px}.cn-note-inner{display:flex;align-items:flex-start;gap:12px}.cn-note-rule{margin-top:7px;margin-left:4px;height:1px;width:0;flex:none;background:currentColor;opacity:.6;transition:width .48s var(--eo) .32s}.cn-note[data-open="1"] .cn-note-rule{width:22px}.cn-note-body{position:relative;min-width:0}.cn-note-body:before{content:"";position:absolute;inset:-16px -22px -14px -14px;z-index:-1;-webkit-backdrop-filter:blur(11px) saturate(.92);backdrop-filter:blur(11px) saturate(.92);-webkit-mask-image:radial-gradient(120% 130% at 12% 40%,#000 0 52%,rgba(0,0,0,.6) 72%,transparent 100%);mask-image:radial-gradient(120% 130% at 12% 40%,#000 0 52%,rgba(0,0,0,.6) 72%,transparent 100%);opacity:0;transition:opacity .4s var(--eo) .18s}.cn-note[data-open="1"] .cn-note-body:before{opacity:1}.cn-note-eyebrow{display:block;margin:0 0 10px;font-family:JetBrains Mono,monospace;font-size:11px;line-height:15px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;opacity:0;transform:translateY(4px);text-shadow:0 0 6px var(--cn-ground, #133ee3),0 0 2px var(--cn-ground, #133ee3);transition:opacity .32s var(--eo) .36s,transform .48s var(--eo) .36s}.cn-note[data-open="1"] .cn-note-eyebrow{opacity:.9;transform:none}.cn-note-text{margin:0;max-width:34ch;font-size:15px;line-height:1.5;text-wrap:pretty;opacity:0;transform:translateY(6px);text-shadow:0 0 6px var(--cn-ground, #133ee3),0 0 2px var(--cn-ground, #133ee3),0 0 1px var(--cn-ground, #133ee3);transition:opacity .48s var(--eo) .48s,transform .64s var(--eo) .48s}.cn-note[data-open="1"] .cn-note-text{opacity:1;transform:none}.cn-dark{--cn-ink: #0c0c0d;--cn-ground: #fff}.cn-note.cn-dark{width:min(260px,calc(92% - 20px))}.cn-note.cn-dark .cn-note-text{font-size:14px;max-width:30ch}.cn-dark .cn-note-text{text-shadow:0 0 6px #fff,0 0 2px #fff,0 0 1px #fff}@media(prefers-reduced-motion:reduce){.cn-note,.cn-note-rule{transition:none!important;animation:none!important;transform:none!important}.cn-note[data-open="1"] .cn-note-rule{width:24px}}}
