/* זוכרים אותך — visual system. Minimal v7.6.1 anatomy (radius, double soft shadow, hairline borders, tabular nums)
   in a warm family voice. Logical properties only; RTL comes from dir="rtl". Themes via [data-theme] on <html>. */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600;700;800;900&display=swap');

:root{
  /* default theme "kit": the brand kit's Instagram preset, light surface. Values 1:1 from the kit; tints are mixes of them. */
  --k-bar0:#962FBF; --k-bar1:#FEDA75; --k-chisel:#2B0B2E; --k-h1:#4F5BD5; --k-h2:#D62976; --k-h3:#FA7E1E;
  --k-surface-dark:#1A0B1F; --k-surface:#FAFAFA;
  --c-primary:var(--k-bar0); --c-primary-dark:color-mix(in oklab,var(--c-primary) 78%,var(--k-chisel)); --c-primary-ink:#FFFFFF;
  --c-primary-soft:color-mix(in oklab,var(--c-primary) 9%,var(--k-surface));
  --c-bg:var(--k-surface); --c-surface:#FFFFFF; --c-surface-2:color-mix(in oklab,var(--k-bar0) 4%,var(--k-surface));
  --c-text:var(--k-chisel); --c-muted:color-mix(in oklab,var(--k-chisel) 70%,var(--k-surface)); --c-faint:color-mix(in oklab,var(--k-chisel) 48%,var(--k-surface));
  --c-border:color-mix(in oklab,var(--k-chisel) 10%,transparent); --c-border-2:color-mix(in oklab,var(--k-chisel) 18%,transparent);
  --c-success:var(--c-primary); --c-success-soft:var(--c-primary-soft); --c-error:color-mix(in oklab,var(--k-h2) 58%,var(--k-chisel)); --c-error-soft:color-mix(in oklab,var(--k-h2) 10%,#fff);
  --c-accent-grad:linear-gradient(45deg,var(--k-bar0),var(--k-bar1));
  --c-soft-grad:linear-gradient(160deg,color-mix(in oklab,var(--k-h1) 18%,#fff),color-mix(in oklab,var(--k-h2) 14%,#fff) 55%,color-mix(in oklab,var(--k-h3) 18%,#fff));
  --radius:20px; --radius-sm:12px; --radius-full:999px;
  --shadow:0 1px 2px color-mix(in oklab,var(--k-chisel) 5%,transparent),0 0 0 1px var(--c-border);
  --shadow-lg:0 0 0 1px var(--c-border),0 24px 48px -12px color-mix(in oklab,var(--k-chisel) 18%,transparent);
  --shadow-primary:none;
  --font:'Heebo',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --ease:cubic-bezier(.32,.72,0,1); --spring:cubic-bezier(.34,1.56,.64,1);
  color-scheme:light;
}
/* the 8 kit presets (light surface). Legacy ids render as their nearest preset. All other tokens derive from these in :root. */
html[data-theme="kit"]{--k-bar0:#962FBF;--k-bar1:#FEDA75;--k-chisel:#2B0B2E;--k-h1:#4F5BD5;--k-h2:#D62976;--k-h3:#FA7E1E;--k-surface:#FAFAFA;--k-surface-dark:#1A0B1F;--c-primary:#962FBF;--c-text:#2B0B2E}
html[data-theme="neon"],html[data-theme="sky"]{--k-bar0:#0E9AA7;--k-bar1:#25F4EE;--k-chisel:#010101;--k-h1:#FE2C55;--k-h2:#25F4EE;--k-h3:#FE2C55;--k-surface:#FFFFFF;--k-surface-dark:#010101;--c-primary:color-mix(in oklab,#0E9AA7 75%,#010101);--c-text:#010101}
html[data-theme="fuchsia"],html[data-theme="rose"]{--k-bar0:#620856;--k-bar1:#ED01EE;--k-chisel:#2A0624;--k-h1:#E5C0FF;--k-h2:#F2ADF3;--k-h3:#ED01EE;--k-surface:#F9F3EF;--k-surface-dark:#2A0624;--c-primary:#620856;--c-text:#2A0624}
html[data-theme="turquoise"],html[data-theme="garden"]{--k-bar0:#0E9AA7;--k-bar1:#25F4EE;--k-chisel:#010101;--k-h1:#4F5BD5;--k-h2:#D62976;--k-h3:#FA7E1E;--k-surface:#FAFAFA;--k-surface-dark:#010101;--c-primary:color-mix(in oklab,#0E9AA7 75%,#010101);--c-text:#010101}
html[data-theme="night"]{--k-bar0:#620856;--k-bar1:#ED01EE;--k-chisel:#2A0624;--k-h1:#25F4EE;--k-h2:#FE2C55;--k-h3:#25F4EE;--k-surface:#F9F3EF;--k-surface-dark:#2A0624;--c-primary:#620856;--c-text:#2A0624}
html[data-theme="bordeaux"]{--k-bar0:#620856;--k-bar1:#ED01EE;--k-chisel:#2A0624;--k-h1:#4F5BD5;--k-h2:#D62976;--k-h3:#FA7E1E;--k-surface:#F9F3EF;--k-surface-dark:#2A0624;--c-primary:#620856;--c-text:#2A0624}
html[data-theme="rainbow"]{--k-bar0:#962FBF;--k-bar1:#FEDA75;--k-chisel:#2A0624;--k-h1:#25F4EE;--k-h2:#ED01EE;--k-h3:#FE2C55;--k-surface:#F9F3EF;--k-surface-dark:#0B0B0D;--c-primary:#962FBF;--c-text:#2A0624}
html[data-theme="copper"],html[data-theme="gold"]{--k-bar0:#B03500;--k-bar1:#FF7A2B;--k-chisel:#310403;--k-h1:#FF54A5;--k-h2:#FE5E82;--k-h3:#FF6367;--k-surface:#F9F3F0;--k-surface-dark:#0D0D0C;--c-primary:#B03500;--c-text:#310403}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);background:var(--c-bg);color:var(--c-text);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100dvh}
button{font:inherit;color:inherit;cursor:pointer}
img{max-width:100%;display:block}
.tnum{font-variant-numeric:tabular-nums}
[hidden]{display:none!important}

.wrap{max-inline-size:560px;margin-inline:auto;padding-inline:16px;padding-block:20px 40px}
.h1{font-size:clamp(26px,7vw,34px);font-weight:900;line-height:1.15;letter-spacing:-.01em;margin:0;text-wrap:balance}
.h2{font-size:20px;font-weight:800;margin:0;text-wrap:balance}
.lead{color:var(--c-muted);font-size:16px;margin:0;text-wrap:pretty}
.caption{color:var(--c-faint);font-size:13px}

.card{background:var(--c-surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
.mkw{display:inline-block;line-height:0;vertical-align:middle}
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;gap:12px;align-items:center}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-block-size:52px;padding-inline:26px;border:0;border-radius:var(--radius-full);
  background:var(--c-primary);color:var(--c-primary-ink);font-weight:700;font-size:17px;box-shadow:none;transition:transform .15s var(--ease),background .2s,opacity .2s;text-decoration:none}
.btn:active{transform:scale(.98)}
.btn:hover{background:var(--c-primary-dark)}
.btn.block{inline-size:100%}
.btn.ghost{background:var(--c-primary-soft);color:var(--c-primary-dark);border:0;box-shadow:none;font-weight:700}
.btn.ghost:hover{background:color-mix(in oklab,var(--c-primary) 14%,var(--c-bg))}
.btn.plain{background:transparent;color:var(--c-muted);font-weight:600}
.btn.soft{background:var(--c-primary-soft);color:var(--c-primary-dark);box-shadow:none}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn svg{inline-size:20px;block-size:20px}

.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:14px;font-weight:700;color:var(--c-muted)}
.input{inline-size:100%;min-block-size:52px;padding-inline:14px;border:.5px solid var(--c-border-2);border-radius:var(--radius-sm);background:var(--c-surface);
  font:500 16px var(--font);color:var(--c-text)}
.input:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px var(--c-primary-soft)}
textarea.input{min-block-size:96px;padding-block:12px;resize:vertical}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:.5px solid var(--c-border-2);background:var(--c-surface);border-radius:var(--radius-full);padding:8px 14px;font-size:15px;font-weight:600;min-block-size:40px}
.chip[aria-pressed="true"]{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-primary-ink)}

.progress{display:flex;gap:6px}
.progress i{flex:1;block-size:4px;border-radius:4px;background:var(--c-border)}
.progress i.on{background:var(--c-primary)}

.label{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:800;border-radius:6px;padding:2px 8px;background:var(--c-primary-soft);color:var(--c-primary-dark)}

.toast{position:fixed;inset-inline:16px;inset-block-end:calc(16px + env(safe-area-inset-bottom,0px));z-index:50;background:var(--c-text);color:#fff;border-radius:12px;
  padding:14px 16px;font-weight:600;box-shadow:var(--shadow-lg);transform:translateY(140%);transition:transform .35s var(--ease)}
.toast:not(.on){opacity:0;pointer-events:none;visibility:hidden;transition:transform .35s var(--ease),opacity .2s,visibility 0s .35s}
.toast.on{transform:none;opacity:1;visibility:visible}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px}