/* Free tools: app-specific styles. Loads after site.css + landing.css, which
   supply tokens, nav, type, FAQ, cards and footer. */

.tl-head{ padding:56px 0 20px; }
.tl-head .ld-h1{ font-size:clamp(32px,4.6vw,56px);max-width:20ch; }
.tl-head .ld-lede{ margin-bottom:18px; }

.tl-app{
  border:1px solid var(--rule);border-radius:calc(var(--radius) + 6px);background:var(--card);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 20px 50px -36px rgba(15,23,42,.35);
  padding:24px;position:relative;overflow:hidden;
}
.tl-app::before{ content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--mode); }
.tl-grid{ display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px; }
.tl-grid-eq{ grid-template-columns:1fr 1fr; }
.tl-stack{ display:flex;flex-direction:column;gap:14px; }
.tl-row{ display:flex;gap:10px;flex-wrap:wrap;align-items:center; }
.tl-row-between{ justify-content:space-between; }
.tl-label{ font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:6px; }
.tl-help{ font-size:13.5px;color:var(--ink-4);margin:6px 0 0; }

/* controls */
.tl-input, .tl-textarea, .tl-select{
  width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--bg-2);
  border:1px solid var(--rule);border-radius:calc(var(--radius) - 2px);padding:11px 13px;outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.tl-input:focus, .tl-textarea:focus, .tl-select:focus{ border-color:var(--mode);box-shadow:0 0 0 3px color-mix(in oklab, var(--mode) 18%, transparent);background:var(--card); }
.tl-textarea{ min-height:260px;resize:vertical;line-height:1.55; }
.tl-textarea.tl-tall{ min-height:360px; }
.tl-input.tl-mono, .tl-textarea.tl-mono{ font-family:"JetBrains Mono",ui-monospace,monospace;font-size:13.5px; }
.tl-input-sm{ width:auto;min-width:0;padding:8px 10px;font-size:14px; }
.tl-num{ width:92px; }
.tl-color{ width:44px;height:38px;padding:3px;border:1px solid var(--rule);border-radius:8px;background:var(--card);cursor:pointer; }
.tl-check{ display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2);cursor:pointer;user-select:none; }
.tl-check input{ width:16px;height:16px;accent-color:var(--mode); }
.tl-seg{ display:inline-flex;border:1px solid var(--rule);border-radius:9px;overflow:hidden;background:var(--bg-2); }
.tl-seg button{ font:inherit;font-size:13.5px;font-weight:520;padding:8px 13px;border:none;background:transparent;color:var(--ink-2);cursor:pointer; }
.tl-seg button+button{ border-left:1px solid var(--rule-2); }
.tl-seg button[aria-pressed="true"]{ background:var(--ink);color:var(--bg-2); }
.qn-btn-mode{ background:var(--mode);color:#fff;border-color:var(--mode); }
.qn-btn-mode:hover{ filter:brightness(.92); }
.qn-btn-outline{ background:transparent;color:var(--ink);border-color:var(--rule); }
.qn-btn-outline:hover{ background:var(--bg-2); }
.qn-btn-danger{ color:#b3261e;border-color:color-mix(in oklab,#b3261e 35%,transparent);background:transparent; }
.qn-btn-danger:hover{ background:color-mix(in oklab,#b3261e 8%,transparent); }
.qn-btn[disabled]{ opacity:.5;cursor:not-allowed; }
.tl-chip{ display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:13px;border:1px solid var(--rule);background:var(--card);color:var(--ink-2);cursor:pointer; }
.tl-chip:hover{ border-color:var(--mode); }
.tl-chip[aria-pressed="true"]{ background:color-mix(in oklab, var(--mode) 12%, var(--card));border-color:var(--mode);color:var(--ink); }

/* stats */
.tl-stats{ display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px; }
.tl-stat{ border:1px solid var(--rule-2);border-radius:10px;background:var(--bg-2);padding:12px 14px; }
.tl-stat b{ display:block;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:24px;font-weight:500;letter-spacing:-.02em;color:var(--ink);line-height:1.1; }
.tl-stat span{ display:block;font-size:12px;color:var(--ink-4);margin-top:4px; }
.tl-bar{ height:8px;border-radius:99px;background:var(--rule-2);overflow:hidden; }
.tl-bar i{ display:block;height:100%;background:var(--mode);width:var(--w,0%);transition:width .2s; }
.tl-bar.over i{ background:#b3261e; }
.tl-table{ width:100%;border-collapse:collapse;font-size:14px; }
.tl-table th, .tl-table td{ text-align:left;padding:8px 6px;border-bottom:1px solid var(--rule-2); }
.tl-table th{ font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4); }
.tl-table td.n{ font-family:"JetBrains Mono",ui-monospace,monospace;text-align:right; }

/* word cloud */
.tl-cloud{ width:100%;aspect-ratio:16/10;border:1px solid var(--rule-2);border-radius:10px;background:var(--bg-2);display:block; }
.tl-cloud text{ cursor:default; }
.tl-legend{ display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:10px;font-size:13px;color:var(--ink-2); }
.tl-legend i{ display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px; }
.tl-empty{ color:var(--ink-4);font-size:14px;padding:30px;text-align:center; }

/* qr */
.tl-qr-preview{ display:grid;place-items:center;border:1px solid var(--rule-2);border-radius:12px;background:var(--bg-2);padding:22px;min-height:300px; }
.tl-qr-preview canvas{ max-width:100%;height:auto;border-radius:6px; }
.tl-tabs{ display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px; }

/* diff */
.tl-diff{ border:1px solid var(--rule-2);border-radius:10px;background:var(--bg-2);padding:16px;font-size:15px;line-height:1.7;white-space:pre-wrap;word-wrap:break-word;max-height:520px;overflow:auto; }
.tl-diff ins{ background:#d9f5e3;color:#0b5d2a;text-decoration:none;border-radius:3px;padding:0 1px; }
.tl-diff del{ background:#fde2e1;color:#8f1d16;text-decoration:line-through;border-radius:3px;padding:0 1px; }
.tl-diff-side{ display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:10px;overflow:hidden;max-height:520px;overflow-y:auto;font-size:14px;line-height:1.6; }
.tl-diff-side>div{ background:var(--card);padding:4px 10px;white-space:pre-wrap;word-wrap:break-word;min-height:1.6em; }
.tl-diff-side>div.rm{ background:#fde2e1; }
.tl-diff-side>div.ad{ background:#d9f5e3; }
.tl-diff-side>div.gap{ background:var(--bg-2); }
.tl-diff-side>div.hd{ background:var(--bg-2);font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);padding:8px 10px; }

/* timer */
.tl-timer{ text-align:center;padding:12px 0 4px; }
.tl-ring{ width:min(340px,80vw);height:auto;display:block;margin:0 auto; }
.tl-ring .track{ stroke:var(--rule);fill:none; }
.tl-ring .prog{ stroke:var(--mode);fill:none;stroke-linecap:round;transition:stroke-dashoffset .4s linear; }
.tl-time{ font-family:"JetBrains Mono",ui-monospace,monospace;font-size:clamp(56px,12vw,104px);font-weight:500;letter-spacing:-.04em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums; }
.tl-time.over{ color:#b3261e; }
.tl-time-title{ font-size:18px;color:var(--ink-3);margin:8px 0 0;min-height:1.4em; }
.tl-agenda{ list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px; }
.tl-agenda li{ display:grid;grid-template-columns:1fr 70px auto;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--rule-2);border-radius:8px;background:var(--bg-2); }
.tl-agenda li.now{ border-color:var(--mode);background:color-mix(in oklab, var(--mode) 8%, var(--card)); }
.tl-agenda li.done{ opacity:.5; }
body.tl-flash{ animation:tl-flash .5s steps(2) 6; }
@keyframes tl-flash{ 50%{ background:#fde2e1; } }
:fullscreen .tl-app{ border:none;border-radius:0;box-shadow:none;min-height:100vh;display:grid;place-items:center; }
:fullscreen .tl-time{ font-size:clamp(80px,22vw,260px); }
:fullscreen .tl-hide-fs{ display:none !important; }

/* live tools: gate, share, people */
.tl-gate{ display:grid;grid-template-columns:1fr 1fr;gap:16px; }
.tl-gate-card{ border:1px solid var(--rule);border-radius:12px;padding:22px;background:var(--bg-2); }
.tl-gate-card h3{ margin:0 0 6px;font-size:18px;font-weight:540;letter-spacing:-.015em; }
.tl-gate-card p{ margin:0 0 14px;font-size:14.5px;color:var(--ink-3); }
.tl-code{ font-family:"JetBrains Mono",ui-monospace,monospace;font-size:28px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink); }
.tl-share{ display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;border:1px solid var(--rule-2);border-radius:12px;background:var(--bg-2);padding:14px 16px; }
.tl-share img{ width:132px;height:132px;border-radius:8px;border:1px solid var(--rule-2);background:#fff; }
.tl-share .tl-link{ font-family:"JetBrains Mono",ui-monospace,monospace;font-size:13px;color:var(--ink-2);word-break:break-all; }
.tl-people{ display:flex;flex-wrap:wrap;gap:8px; }
.tl-person{ display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;font-size:13.5px;font-weight:520;border:1.5px solid var(--pc);color:var(--ink);background:color-mix(in oklab, var(--pc) 10%, #fff); }
.tl-person.away{ opacity:.45;border-style:dashed; }
.tl-person.you::after{ content:"you";font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4); }
.tl-person button{ border:none;background:transparent;color:var(--ink-4);cursor:pointer;font-size:14px;padding:0 0 0 2px;line-height:1; }
.tl-person button:hover{ color:#b3261e; }
.tl-status{ font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4); }
.tl-status.live::before{ content:"";display:inline-block;width:7px;height:7px;border-radius:99px;background:#2f7d5b;margin-right:7px;box-shadow:0 0 0 3px color-mix(in oklab,#2f7d5b 20%,transparent); }
.tl-toast{ position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0;background:var(--ink);color:var(--bg-2);padding:10px 16px;border-radius:9px;font-size:14px;z-index:100;transition:all .2s;pointer-events:none; }
.tl-toast.show{ opacity:1;transform:translateX(-50%) translateY(0); }
.tl-modal{ position:fixed;inset:0;background:rgba(15,22,26,.45);display:grid;place-items:center;z-index:90;padding:20px; }
.tl-modal-card{ background:var(--card);border-radius:14px;padding:26px;max-width:420px;width:100%;box-shadow:0 30px 60px -30px rgba(0,0,0,.5); }
.tl-modal-card h3{ margin:0 0 6px;font-size:20px;font-weight:540;letter-spacing:-.015em; }
.tl-modal-card p{ margin:0 0 14px;color:var(--ink-3);font-size:14.5px; }

/* teams */
.tl-teams{ display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px; }
.tl-team{ border:1px solid var(--rule);border-top:4px solid var(--tc);border-radius:12px;background:var(--card);padding:14px;animation:tl-pop .35s ease both; }
.tl-team h4{ margin:0 0 8px;font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--tc); }
.tl-team ul{ list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px; }
.tl-team li{ font-size:14.5px;display:flex;align-items:center;gap:8px; }
.tl-team li i{ width:9px;height:9px;border-radius:99px;background:var(--pc);flex:none; }
.tl-team li.you{ font-weight:600; }
.tl-team.mine{ box-shadow:0 0 0 3px color-mix(in oklab, var(--tc) 25%, transparent); }
@keyframes tl-pop{ from{ transform:scale(.96);opacity:0; } to{ transform:none;opacity:1; } }

/* wheel */
.tl-wheel-wrap{ position:relative;width:min(420px,88vw);margin:0 auto; }
.tl-wheel-wrap canvas{ width:100%;height:auto;display:block;border-radius:50%;box-shadow:0 20px 50px -30px rgba(0,0,0,.4); }
.tl-wheel-pin{ position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-top:26px solid var(--ink);filter:drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.tl-winner{ text-align:center;margin-top:18px;min-height:64px; }
.tl-winner b{ display:inline-block;font-size:clamp(26px,5vw,44px);font-weight:560;letter-spacing:-.03em;color:var(--wc,var(--ink));animation:tl-pop .4s ease both; }
.tl-winner span{ display:block;font-size:13px;color:var(--ink-4);margin-top:4px; }
.tl-history{ list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px; }
.tl-history li{ display:flex;gap:8px;align-items:center;padding:6px 10px;border:1px solid var(--rule-2);border-radius:8px; }
.tl-history li i{ width:9px;height:9px;border-radius:99px;background:var(--pc); }
.tl-history li small{ margin-left:auto;color:var(--ink-4);font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px; }

/* checklist */
.tl-items{ list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px; }
.tl-item{ display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--rule-2);border-radius:10px;background:var(--card);transition:background .15s; }
.tl-item.done{ background:var(--bg-2); }
.tl-item.done .tl-item-text{ text-decoration:line-through;color:var(--ink-4); }
.tl-item input[type=checkbox]{ width:20px;height:20px;accent-color:var(--mode);cursor:pointer; }
.tl-item-text{ font-size:15.5px;color:var(--ink); }
.tl-item-by{ font-size:12px;color:var(--by,var(--ink-4));white-space:nowrap; }
.tl-progress{ display:flex;align-items:center;gap:12px;font-size:14px;color:var(--ink-3); }
.tl-progress .tl-bar{ flex:1; }
.tl-editor{ display:none; }
.tl-editing .tl-editor{ display:block; }
.tl-editing .tl-items-view{ display:none; }

/* friend */
.tl-person-name{ font-family:"EB Garamond",Garamond,Georgia,serif;font-size:clamp(28px,4.4vw,46px);font-weight:500;color:var(--mode);letter-spacing:-.01em;line-height:1.05; }
.tl-cards{ columns:2;column-gap:12px; }
.tl-card-msg{ break-inside:avoid;border:1px solid var(--rule);border-left:4px solid var(--mc,var(--ink-4));border-radius:12px;background:var(--card);padding:14px 16px;margin:0 0 12px;animation:tl-pop .4s ease both;position:relative; }
.tl-card-msg p{ margin:0 0 8px;font-size:16px;line-height:1.5;color:var(--ink); }
.tl-card-msg .sig{ font-size:13px;color:var(--mc,var(--ink-4));font-weight:600; }
.tl-card-msg .acts{ position:absolute;top:8px;right:8px;display:flex;gap:4px; }
.tl-card-msg .acts button{ border:1px solid var(--rule-2);background:var(--card);border-radius:6px;font-size:12px;padding:3px 7px;cursor:pointer;color:var(--ink-3); }
.tl-card-msg .acts button:hover{ border-color:var(--mode);color:var(--ink); }
.tl-card-msg.speaking{ box-shadow:0 0 0 3px color-mix(in oklab, var(--mode) 30%, transparent); }
.tl-card-msg.hidden-card{ background:var(--bg-2);border-style:dashed;text-align:center;color:var(--ink-4);font-size:14px;padding:18px; }
.tl-hidden-count{ border:1px dashed var(--rule);border-radius:12px;padding:16px;text-align:center;color:var(--ink-3);font-size:14.5px; }

/* friend wall: a bubble board like the classroom, plus celebrations */
.fw-top{ display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:12px; }
.fw-for{ font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3); }
.fw-name{ font-family:"EB Garamond",Garamond,Georgia,serif;font-size:clamp(34px,5.2vw,60px);font-weight:500;letter-spacing:-.015em;line-height:1;color:var(--ink);margin:2px 0 0; }
.fw-name em{ font-style:normal;color:var(--mode); }
.fw-board{
  position:relative;min-height:380px;border:1px solid var(--rule);border-radius:16px;overflow:hidden;
  background:linear-gradient(160deg,#eaf4ff 0%,#fdf1f7 55%,#fff9e8 100%);
  display:flex;flex-flow:row wrap;align-content:flex-start;justify-content:center;gap:16px 14px;padding:26px 18px 34px;
}
.fw-empty{ flex-basis:100%;text-align:center;color:var(--ink-3);font-size:15px;padding:60px 20px; }
.fw-bubble{
  position:relative;max-width:min(360px,80%);padding:12px 18px 10px;border:2px solid var(--mc,var(--ink-4));border-radius:22px;
  background:color-mix(in oklab,var(--mc,var(--ink-4)) 10%,#fff);color:var(--ink);
  box-shadow:0 10px 18px -12px color-mix(in oklab,var(--mc,var(--ink-4)) 70%,transparent);
  animation:fw-float var(--dur,3.6s) ease-in-out var(--dly,0s) infinite alternate;
}
.fw-bubble.fw-new{ animation:fw-pop .6s cubic-bezier(.34,1.56,.64,1), fw-float var(--dur,3.6s) ease-in-out .6s infinite alternate; }
.fw-bubble p{ margin:0 0 4px;font-size:16.5px;line-height:1.4;text-wrap:pretty; }
.fw-bubble .sig{ font-size:12.5px;font-weight:700;color:var(--mc,var(--ink-4)); }
.fw-bubble .acts{ position:absolute;top:-10px;right:8px;display:flex;gap:4px;opacity:0;transition:opacity .15s; }
.fw-bubble:hover .acts, .fw-bubble:focus-within .acts{ opacity:1; }
.fw-bubble .acts button{ border:1px solid var(--rule);background:#fff;border-radius:999px;font-size:11.5px;padding:3px 8px;cursor:pointer;color:var(--ink-2);box-shadow:0 2px 6px rgba(0,0,0,.08); }
.fw-bubble .acts button:hover{ border-color:var(--mode);color:var(--ink); }
.fw-bubble.speaking{ box-shadow:0 0 0 4px color-mix(in oklab, var(--mode) 35%, transparent), 0 10px 18px -12px rgba(0,0,0,.3); }
.fw-bubble.mystery{ border-style:dashed;background:rgba(255,255,255,.6);color:var(--ink-3);font-size:22px;padding:10px 16px;cursor:default; }
.fw-bubble.mystery small{ display:block;font-size:11px;font-family:"JetBrains Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);margin-top:2px; }
.fw-bubble.mine{ outline:3px solid color-mix(in oklab,var(--mc) 35%,transparent);outline-offset:2px; }
@keyframes fw-float{ from{ transform:translateY(2px) rotate(var(--tilt,0deg)); } to{ transform:translateY(-7px) rotate(calc(var(--tilt,0deg) * -1)); } }
@keyframes fw-pop{ 0%{ opacity:0;transform:scale(.2) rotate(var(--tilt,0deg)); } 65%{ opacity:1;transform:scale(1.12) rotate(var(--tilt,0deg)); } 100%{ transform:scale(1) rotate(var(--tilt,0deg)); } }
.fw-fsqr{ display:none; }
:fullscreen .fw-wrap{ min-height:100vh;display:flex;flex-direction:column;padding:24px 32px;background:#fff; }
:fullscreen .fw-board{ flex:1;gap:22px 18px;padding:36px 28px; }
:fullscreen .fw-bubble{ max-width:min(520px,70%);padding:16px 24px 13px;border-width:3px;border-radius:28px; }
:fullscreen .fw-bubble p{ font-size:clamp(20px,2.2vw,30px); }
:fullscreen .fw-bubble .sig{ font-size:15px; }
:fullscreen .fw-name{ font-size:clamp(44px,6vw,84px); }
:fullscreen .fw-fsqr{ display:flex;align-items:center;gap:12px;position:absolute;right:22px;bottom:18px;background:#fff;border:1px solid var(--rule);border-radius:12px;padding:10px 12px;box-shadow:0 10px 30px -18px rgba(0,0,0,.35); }
:fullscreen .fw-fsqr img{ width:120px;height:120px; }
:fullscreen .fw-fsqr .tl-code{ font-size:22px; }
:fullscreen .fw-fsqr small{ display:block;font-size:11px;color:var(--ink-4);margin-top:2px; }
.fw-cheer{ font-size:18px;padding:10px 16px; }

/* celebration layer: balloons rise, confetti falls, streamers drop */
.cele{ position:fixed;inset:0;pointer-events:none;z-index:85;overflow:hidden; }
.cele-balloon{ position:absolute;left:var(--x);bottom:-140px;width:var(--s,56px);height:calc(var(--s,56px) * 1.22);animation:cele-rise var(--d,4s) ease-in var(--dl,0s) forwards;opacity:0; }
.cele-balloon::before{ content:"";position:absolute;inset:0;border-radius:50% 50% 50% 50% / 45% 45% 55% 55%;background:radial-gradient(circle at 35% 28%, rgba(255,255,255,.55), transparent 42%), var(--c);box-shadow:inset -6px -10px 0 rgba(0,0,0,.08), 0 10px 20px -14px rgba(0,0,0,.4); }
.cele-balloon::after{ content:"";position:absolute;left:50%;top:99%;width:2px;height:calc(var(--s,56px) * 1.3);background:linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.05));transform:translateX(-50%); }
.cele-balloon i{ position:absolute;left:50%;top:97%;width:8px;height:8px;background:var(--c);transform:translateX(-50%) rotate(45deg);filter:brightness(.85); }
@keyframes cele-rise{ 0%{ transform:translateY(0) translateX(0) rotate(-5deg);opacity:0; } 8%{ opacity:1; } 50%{ transform:translateY(-60vh) translateX(var(--sway,18px)) rotate(5deg); } 100%{ transform:translateY(-125vh) translateX(calc(var(--sway,18px) * -1)) rotate(-5deg);opacity:1; } }
.cele-conf{ position:absolute;top:-24px;left:var(--x);width:var(--w,9px);height:calc(var(--w,9px) * 1.7);background:var(--c);border-radius:2px;opacity:.95;animation:cele-fall var(--d,3.4s) linear var(--dl,0s) forwards;transform-origin:center; }
@keyframes cele-fall{ 0%{ transform:translateY(0) translateX(0) rotate(0) rotateX(0);opacity:1; } 60%{ transform:translateY(60vh) translateX(var(--sway,14px)) rotate(calc(var(--r,540deg) * .6)) rotateX(180deg); } 100%{ transform:translateY(112vh) translateX(0) rotate(var(--r,540deg)) rotateX(360deg);opacity:.9; } }
.cele-streamer{ position:absolute;top:-30vh;left:var(--x);width:6px;height:28vh;border-radius:6px;background:repeating-linear-gradient(180deg,var(--c) 0 14px,color-mix(in oklab,var(--c) 70%,#fff) 14px 28px);animation:cele-stream var(--d,3.2s) ease-in var(--dl,0s) forwards;transform-origin:top center; }
@keyframes cele-stream{ 0%{ transform:translateY(0) rotate(-6deg);opacity:0; } 10%{ opacity:1; } 50%{ transform:translateY(60vh) rotate(8deg); } 100%{ transform:translateY(135vh) rotate(-8deg);opacity:.9; } }
.cele-note{ position:absolute;left:50%;top:14%;transform:translateX(-50%) scale(.6);background:#fff;border:2px solid var(--c);color:var(--ink);padding:10px 18px;border-radius:999px;font-weight:600;font-size:17px;box-shadow:0 20px 40px -24px rgba(0,0,0,.4);animation:cele-note 2.8s ease forwards;white-space:nowrap;max-width:90vw;overflow:hidden;text-overflow:ellipsis; }
@keyframes cele-note{ 0%{ opacity:0;transform:translateX(-50%) scale(.6); } 12%{ opacity:1;transform:translateX(-50%) scale(1.05); } 20%{ transform:translateX(-50%) scale(1); } 80%{ opacity:1; } 100%{ opacity:0;transform:translateX(-50%) translateY(-12px); } }
@media (prefers-reduced-motion:reduce){
  .fw-bubble, .fw-bubble.fw-new{ animation:none; }
  .cele-balloon, .cele-conf, .cele-streamer{ animation-duration:.01s;opacity:0; }
}

/* keepsake (print / pdf) */
.keepsake{ display:none; }
@media print{
  @page{ size:A4;margin:12mm; }
  body *{ visibility:hidden; }
  .keepsake, .keepsake *{ visibility:visible; }
  .keepsake{ display:block;position:absolute;left:0;top:0;width:100%; }
  body{ -webkit-print-color-adjust:exact;print-color-adjust:exact;background:#fff; }
}
.keepsake.preview{ display:block;position:static;visibility:visible;border:1px solid var(--rule);border-radius:12px;overflow:hidden;margin-top:20px; }
.ks-page{ position:relative;padding:34px 36px 30px;background:#fffdf8;overflow:hidden;font-family:"Inter Tight",system-ui,sans-serif;color:#15161a; }
.ks-bg{ position:absolute;inset:0;pointer-events:none; }
.ks-bg span{ position:absolute;border-radius:50%;filter:blur(2px);opacity:.55; }
.ks-bg .b1{ width:360px;height:360px;left:-120px;top:-140px;background:radial-gradient(circle at 30% 30%, #ffd6a5, #ff9e6d); }
.ks-bg .b2{ width:300px;height:300px;right:-100px;top:60px;background:radial-gradient(circle at 30% 30%, #cdb4ff, #8b5cf6); }
.ks-bg .b3{ width:280px;height:280px;left:40%;bottom:-160px;background:radial-gradient(circle at 30% 30%, #a7f3d0, #34d399); }
.ks-confetti{ position:absolute;inset:0;pointer-events:none; }
.ks-confetti i{ position:absolute;width:8px;height:14px;border-radius:2px;opacity:.85;transform:rotate(var(--r,0deg)); }
.ks-head{ position:relative;text-align:center;padding:26px 0 18px; }
.ks-kicker{ font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#585c66; }
.ks-name{ font-family:"EB Garamond",Garamond,Georgia,serif;font-size:64px;font-weight:500;letter-spacing:-.015em;line-height:1;margin:10px 0 8px;color:#15161a; }
.ks-sub{ font-size:15px;color:#585c66;margin:0; }
.ks-count{ display:inline-block;margin-top:12px;padding:6px 14px;border-radius:999px;background:#15161a;color:#fff;font-size:12.5px;font-weight:520; }
.ks-cards{ position:relative;columns:2;column-gap:14px;margin-top:18px; }
.ks-card{ break-inside:avoid;background:#fff;border-radius:14px;padding:16px 18px;margin:0 0 14px;box-shadow:0 10px 30px -22px rgba(0,0,0,.35);border-left:5px solid var(--mc,#868a94);position:relative; }
.ks-card::before{ content:"\201C";position:absolute;right:14px;top:-4px;font-family:"EB Garamond",Georgia,serif;font-size:56px;color:var(--mc,#868a94);opacity:.25;line-height:1; }
.ks-card p{ margin:0 0 10px;font-size:15px;line-height:1.5;color:#15161a; }
.ks-card .sig{ font-size:12.5px;font-weight:600;color:var(--mc,#585c66); }
.ks-foot{ position:relative;text-align:center;margin-top:16px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#868a94; }

/* seo body under the app */
.tl-copy{ padding-top:56px; }
.tl-copy h2{ font-weight:520;font-size:clamp(22px,2.6vw,32px);letter-spacing:-.025em;line-height:1.1;margin:0 0 12px; }
.tl-copy p, .tl-copy li{ font-size:15.5px;line-height:1.65;color:var(--ink-2);max-width:70ch; }
.tl-copy ol, .tl-copy ul{ padding-left:22px;margin:0 0 18px; }
.tl-copy section+section{ margin-top:40px; }

@media (max-width:900px){
  .tl-grid, .tl-grid-eq, .tl-gate{ grid-template-columns:1fr; }
  .tl-cards{ columns:1; }
}
@media (max-width:640px){
  .tl-app{ padding:16px; }
  .tl-share{ grid-template-columns:1fr; }
  .tl-diff-side{ font-size:13px; }
  .ks-page{ padding:24px 20px; }
  .ks-name{ font-size:42px; }
  .ks-cards{ columns:1; }
}