/* The design tokens of the app, as plain CSS: the site has no Tailwind. */
:root{--paper:#EEE9E4;--ink:#2A2727;--ink-soft:#6F6764;--ink-mute:#7A706C;--rose:#B5767B;--rose-deep:#7A3E44;--blush:#D9A6A9;--blush-light:#F3E3E2;--cream:#FBF8F7;--line:#CDBFBC;--line-soft:#E6D6D4}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Jost',system-ui,sans-serif;font-size:15px;line-height:1.5}
a{color:var(--ink)}a:hover{color:var(--rose)}
h1,h2,h3{font-family:'Playfair Display',serif;font-weight:400;margin:0}
h1{font-size:54px;line-height:1.06}h2{font-size:40px;line-height:1.1}h3{font-size:24px}
h1 em,h2 em{font-style:italic;color:var(--rose)}
h1 .line{display:block}
p{margin:0;color:var(--ink-soft)}
.small{color:var(--ink-mute);font-size:13px}
.lab{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-mute);font-weight:500}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 24px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:#fff;font:inherit;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;font-weight:500;cursor:pointer;text-decoration:none;transition:background .2s,border-color .2s,color .2s}
.btn:hover{background:var(--rose);border-color:var(--rose);color:#fff}
.btn.quiet{background:transparent;color:var(--ink)}.btn.quiet:hover{background:var(--ink);color:#fff}
.card{background:#fff;border:1px solid var(--line-soft);border-radius:2px}
.f{min-height:46px;padding:0 14px;border:1px solid var(--line);border-radius:2px;font:inherit;font-size:16px;background:#fff;width:100%;box-sizing:border-box;transition:border-color .15s}
.f:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--blush-light)}
textarea.f{padding:12px 14px;resize:vertical}
.wrap{width:100%;max-width:1184px;margin:0 auto;padding:0 48px;box-sizing:border-box;min-height:100vh;display:flex;flex-direction:column}

.nav{display:flex;flex-wrap:wrap;align-items:center;gap:28px;padding:26px 0}
.nav a{font-size:12px;letter-spacing:0.12em;text-transform:uppercase;text-decoration:none;font-weight:500;color:var(--ink-mute)}
.nav a:hover{color:var(--rose)}
.nav .logo{display:inline-flex}.nav .logo img{display:block;height:30px;width:auto}
.langs{display:inline-flex;gap:10px;margin-left:auto}
.langs a{font-size:14px;text-transform:none}.langs a[aria-current]{color:var(--ink);border-bottom:1px solid var(--ink)}
.nav .sign-in{font-size:14px}

.hero{display:grid;grid-template-columns:minmax(0,1fr) 440px;grid-template-areas:"lab piece" "h1 piece" "p piece" "btn piece" "note piece";column-gap:40px;row-gap:18px;align-items:start;padding:56px;background:var(--cream);border:1px solid var(--line-soft)}
.hero .lead{max-width:520px;font-size:17px}
.hero .note{color:var(--ink-mute);font-size:13px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}
.hero>.piece{grid-area:piece;align-self:center;position:relative}
.piece svg.pc{display:block;width:100%;height:auto;user-select:none}
.piece .hit{touch-action:none}
.piece .rose{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s cubic-bezier(.4,0,.2,1)}
.piece.drawn .rose{stroke-dashoffset:0}
.piece .co{transition:opacity .3s}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.piece:has(.sr input:focus-visible){outline:2px solid var(--rose);outline-offset:6px;border-radius:2px}
.demo-key{display:flex;flex-wrap:wrap;gap:18px;font-size:13px;color:var(--ink-soft);padding:0 10px 6px}
.demo-key span{display:inline-flex;align-items:center;gap:8px}
.demo-key span::before{content:'';width:22px;border-top:2px solid var(--rose)}
.demo-key .original::before{border-color:#8E827D;border-top-style:dashed}
.hint{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;color:var(--ink-mute);letter-spacing:0.04em;padding:0 10px}
.hint button{font:inherit;background:none;border:0;padding:0;color:var(--rose);cursor:pointer;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;flex-shrink:0}

section{padding:72px 0 8px;display:flex;flex-direction:column;gap:28px}
.head{display:flex;flex-direction:column;gap:10px}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.cols article{display:flex;flex-direction:column;gap:10px}
.ill{display:flex;align-items:center;height:120px;margin-bottom:8px}.ill svg{display:block;width:152px;height:120px}
.problem h3{font-size:22px;line-height:1.25}
.how{border-top:1px solid var(--line-soft);padding-bottom:24px}
.how .ill{height:148px}.how .ill svg{width:176px;height:148px}
.num{font-family:'DM Mono',monospace;font-size:13px;color:var(--rose-deep)}
.aside{max-width:620px}
#how,#invite{scroll-margin-top:24px}

.band{margin-top:56px;padding:56px;background:var(--blush);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:32px;align-items:center}
.band-text{display:flex;flex-direction:column;gap:14px}
.band h2{font-size:36px;line-height:1.12}.band h2 em{color:var(--rose-deep)}
.band p{color:#4A3B3C;max-width:520px}
.band .table{width:100%;max-width:360px;height:auto;justify-self:end}

.invite-grid{padding:72px 0;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:32px;align-items:flex-start}
.invite-text{display:flex;flex-direction:column;gap:12px;max-width:460px}
.invite{padding:32px 36px 36px;display:flex;flex-direction:column;gap:18px;box-sizing:border-box;position:relative}
.invite .field{display:flex;flex-direction:column;gap:8px}
.invite .lab{font-size:14px;letter-spacing:0;text-transform:none;color:var(--ink)}
.invite .opt{font-weight:400;color:var(--ink-mute)}
.invite .actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.invite .error{color:var(--rose-deep);font-size:13px;flex-basis:100%}
.invite .trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.invite.sent .fields,.invite.invited .fields{display:none}
.invite .done,.invite .invited{display:none;flex-direction:column;gap:10px;justify-content:center;flex:1}
.invite.sent .done,.invite.invited .invited{display:flex}
.invite .done h3,.invite .invited h3{font-size:26px}
.invite .invited .btn{align-self:flex-start;margin-top:6px}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.invite.sent .done path{animation:draw .35s ease-out .15s both}

footer{margin-top:auto;padding:24px 0 32px;border-top:1px solid var(--line-soft);display:flex;flex-wrap:wrap;align-items:center;gap:24px}
footer img{display:block;height:20px;width:auto}
footer .sign-in{margin-left:auto;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;text-decoration:none;color:var(--ink-mute)}

@media (prefers-reduced-motion: reduce){.piece .rose{transition:none}.invite.sent .done path{animation:none}}
@media (max-width:860px){.hero{grid-template-columns:1fr;grid-template-areas:"lab" "h1" "p" "btn" "piece" "note";padding:28px 20px}.hero h1{font-size:34px}.hero>.piece{width:100%;max-width:420px;justify-self:center}}
@media (max-width:700px){
.wrap{padding:0 16px}
.hide{display:none}
h2{font-size:32px}
section{padding-top:48px}
.cols{grid-template-columns:1fr;gap:28px}
.problem .cols>article{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:16px;row-gap:6px}
.problem .ill{grid-row:1 / span 2;margin:0;height:auto;align-items:flex-start}.problem .ill svg{width:72px;height:80px}
.problem h3,.problem p{grid-column:2}
.band,.invite-grid{grid-template-columns:1fr;gap:24px}
.band{padding:36px 20px}.band .table{max-width:280px;justify-self:center}
.invite{padding:28px 20px}.invite button[type=submit]{width:100%}
}