/* BASIC RESET */ * { box-sizing: border-box; } body { min-height: 100vh; margin: 0;

display: grid; place-items: center;

padding: 20px;

background: radial-gradient( circle at 20% 10%, rgba(255, 255, 255, 0.08), transparent 35% ), #18171b;

font-family: "Comic Sans MS", "Bradley Hand", "Segoe Print", cursive; }

.kik-note { width: min(100%, 390px); padding: 26px;

color: #201b20;

background: repeating-linear-gradient( to bottom, transparent 0, transparent 29px, rgba(68, 108, 151, 0.15) 30px ), #f4edda;

border: 1px solid rgba(0, 0, 0, 0.24); border-radius: 5px;

box-shadow: 8px 10px 0 rgba(0, 0, 0, 0.24), 0 18px 45px rgba(0, 0, 0, 0.35), inset 0 0 35px rgba(76, 53, 30, 0.08);

overflow: hidden; transform: rotate(-0.6deg); }

.kik-note h2 { margin: 0 0 18px;

font-size: clamp(1.35rem, 6vw, 1.75rem); line-height: 1.1; letter-spacing: 0.025em;

transform: rotate(-1deg); }

.kik-note p { margin: 0 0 16px;

font-size: 1rem; line-height: 1.65; }

.chaos-list { margin: 0 0 18px; padding-left: 25px; }

.chaos-list li { margin-bottom: 9px; line-height: 1.5; }

.signature { margin-bottom: 0; font-size: 1.12rem; font-weight: 700;

transform: rotate(-2deg); }

.draw-text { position: relative;

width: fit-content; max-width: 100%;

opacity: 0;

clip-path: inset(0 100% 0 0);

animation: draw-text 1.35s steps(28, end) forwards, ink-shake 150ms steps(2, end) 8; }

.draw-text::after { content: "";

position: absolute; z-index: 5;

top: 52%; left: 0;

width: 18px; height: 10px;

pointer-events: none;

background: radial-gradient( ellipse at center, rgba(30, 25, 29, 0.95) 0 10%, rgba(30, 25, 29, 0.5) 12% 28%, transparent 32% );

filter: blur(0.25px);

opacity: 0;

transform: translate(-50%, -50%) rotate(-15deg);

animation: move-pen 1.35s steps(28, end) forwards; }

.delay-1, .delay-1::after { animation-delay: 0.2s; }

.delay-2, .delay-2::after { animation-delay: 1.35s; }

.delay-3, .delay-3::after { animation-delay: 2.7s; }

.delay-4, .delay-4::after { animation-delay: 4.15s; }

.delay-5, .delay-5::after { animation-delay: 5.55s; }

.delay-6, .delay-6::after { animation-delay: 6.3s; }

.delay-7, .delay-7::after { animation-delay: 7.05s; }

.delay-8, .delay-8::after { animation-delay: 8.15s; }

@keyframes draw-text { 0% { opacity: 0.2; clip-path: inset(0 100% 0 0);

text-shadow: none; }

8% { opacity: 1; }

48% { clip-path: polygon( 0 0, 49% 1%, 47% 43%, 51% 66%, 48% 100%, 0 100% ); }

100% { opacity: 1;

clip-path: polygon( 0 0, 102% 0, 100% 42%, 102% 68%, 100% 100%, 0 100% );

text-shadow: 0.25px 0 currentColor, -0.2px 0.25px rgba(32, 27, 32, 0.75); } }

@keyframes move-pen { 0% { left: 0;

opacity: 0;

transform: translate(-50%, -50%) rotate(-18deg) scale(0.7); }

8% { opacity: 0.85; }

35% { transform: translate(-50%, -60%) rotate(-7deg) scale(1); }

68% { transform: translate(-50%, -43%) rotate(-19deg) scale(0.9); }

92% { opacity: 0.8; }

100% { left: 100%;

opacity: 0;

transform: translate(-50%, -50%) rotate(-10deg) scale(0.55); } }

@keyframes ink-shake { 0% { transform: translate(0, 0) rotate(0deg); }

50% { transform: translate(0.2px, -0.3px) rotate(-0.1deg); }

100% { transform: translate(-0.15px, 0.2px) rotate(0.08deg); } }

@media (prefers-reduced-motion: reduce) { .draw-text, .draw-text::after { animation: none; }

.draw-text { opacity: 1; clip-path: none; }

.draw-text::after { display: none; } }