/* KNOW ME, THE ATELIER — a room of the sky (Aunt Tea, 10 October 2026).
   The same ground, the same lettering (set 8), her faces apart then together.
   Writing happens on white, like the pages; the Atelier speaks on the sky.
   Every word in the room is Aunt Tea's draft, waiting for Paige. */
.km-on .ground .skyl{background:linear-gradient(180deg,#0A3CA8 0%,#1355C9 48%,#1F6FE0 80%,#3486EE 100%)}
.km{position:relative;z-index:1;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;color:#FFFFFF;font-family:var(--fb)}
.km *{box-sizing:border-box}
.km button{font:inherit;cursor:pointer}
.km-bar{display:flex;justify-content:space-between;align-items:center;padding:14px 16px 0;gap:12px}
.km-bar .km-home{font-family:var(--fdisp);font-weight:800;font-size:21px;letter-spacing:-.03em;color:#FFFFFF;text-decoration:none}
.km-bar .exit{border:0;background:none;color:#FFFFFF;font-family:var(--fb);font-size:13px;font-weight:400;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.6)}
.km-main{flex:1 1 auto;width:100%;max-width:520px;margin:0 auto;padding:18px 16px 48px}
.km-s{animation:kmin .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes kmin{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
.km .eyebrow{margin:6px 0 0;font-family:var(--fe);font-size:18px;letter-spacing:.02em;line-height:1.2;color:#FFFFFF;opacity:.9}
.km h1,.km h2{margin:6px 0 0;font-family:var(--fdisp);font-weight:800;font-optical-sizing:auto;letter-spacing:-.03em;line-height:1.04;color:#FFFFFF}
.km h1{font-size:min(40px,10.6vw)}
.km h2{font-size:min(30px,8.4vw)}
.km .lede{margin:14px 0 0;font-family:var(--fe);font-size:min(24px,6.4vw);line-height:1.28;color:#FFFFFF}
.km .soft{margin:12px 0 0;font-size:15px;line-height:1.55;font-weight:300;color:#FFFFFF;text-shadow:0 1px 10px rgba(10,30,90,.35)}

/* her faces, apart, then together */
.km .faces{position:relative;left:auto;margin:20px auto 0;--w:min(150px,36vw)}
.km .faces .half{transition:transform 1.8s cubic-bezier(.4,0,.2,1)}
.km .faces .half.l{transform:translate3d(-30px,0,0)}.km .faces .half.r{transform:translate3d(30px,0,0)}
.km .faces .gap{opacity:.35;transition:opacity 1.8s ease}
.km .faces .bloom{opacity:0;transform:translate(-50%,-50%) scale(.6);transition:opacity 2s ease,transform 2s ease}
.km .faces.met .half{transform:none}
.km .faces.met .gap{opacity:1}
.km .faces.met .bloom{opacity:.85;transform:translate(-50%,-50%) scale(1)}
.km .faces.small{--w:74px;margin:4px auto 0}
.km .faces.small .bloom{display:none}
.km .faces.breathe .gap{animation:kmbreathe 2.4s ease-in-out infinite}
@keyframes kmbreathe{0%,100%{opacity:.45;transform:scaleY(.8)}50%{opacity:1;transform:scaleY(1)}}

/* buttons: one solid colour each, never a gradient */
.km .go{display:inline-block;margin-top:22px;border:0;border-radius:0;background:#FFFFFF;color:#0A2A6E;padding:16px 30px;font-family:var(--fb);font-size:15px;font-weight:500;letter-spacing:.01em;text-decoration:none;text-align:center}
.km .go.wide{display:block;width:100%}
.km .go.deep{background:#0A3CA8;color:#FFFFFF}
.km .go[disabled]{opacity:.55;cursor:default}
.km .link{border:0;background:none;padding:6px 0;color:inherit;font-family:var(--fe);font-size:18px;border-bottom:1px solid currentColor;text-decoration:none}

/* the ways, as a list to choose from */
.km .ways{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid rgba(255,255,255,.4)}
.km .ways button{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid rgba(255,255,255,.28);background:none;color:#FFFFFF;padding:16px 0}
.km .ways b{display:block;font-family:var(--fdisp);font-weight:800;font-size:21px;letter-spacing:-.025em;line-height:1.1}
.km .ways span{display:block;margin-top:5px;font-size:13.5px;font-weight:300;line-height:1.45;opacity:.92}

/* a white card: writing, choosing and paying all happen on white */
.km .card{margin-top:22px;background:#FFFFFF;color:#0A2A6E;padding:20px 18px;box-shadow:0 26px 44px -26px rgba(10,20,80,.55)}
.km .card label,.km .card .lab{display:block;font-family:var(--fe);font-size:18px;letter-spacing:.01em;color:#1C5FD6;margin:0 0 6px}
.km .card input[type=text],.km .card input[type=email],.km .card textarea{appearance:none;width:100%;border:0;border-bottom:1px solid #0A2A6E;border-radius:0;background:#FFFFFF;color:#0A2A6E;font-family:var(--fb);font-size:17px;line-height:1.5;padding:10px 0}
.km .card textarea{resize:none;min-height:96px;border:1px solid rgba(10,42,110,.35);padding:12px}
.km .card .field+.field{margin-top:18px}
.km .card .go{background:#0A3CA8;color:#FFFFFF;margin-top:18px}
.km .card .small{margin:12px 0 0;font-size:13px;line-height:1.5;color:#2B4C8C}
.km .sides{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.km .sides button{border:1px solid #0A2A6E;background:#FFFFFF;color:#0A2A6E;padding:10px 14px;font-size:15px;border-radius:0}
.km .sides button[aria-pressed=true]{background:#0A2A6E;color:#FFFFFF}
.km .oops{margin:10px 0 0;font-size:14px;color:#0A3CA8}

/* the room */
.km-room .top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.km-room .top .who{font-family:var(--fe);font-size:16px;opacity:.9}
.km-room .prev{margin:22px 0 0;font-size:15px;font-weight:300;line-height:1.5;color:#FFFFFF;opacity:.82;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.km-room .prev:before{content:"You said";display:block;font-family:var(--fe);font-size:15px;opacity:.85;margin-bottom:2px}
.km-room .line{margin:16px 0 0;font-family:var(--fe);font-size:min(31px,8.2vw);line-height:1.22;letter-spacing:0;color:#FFFFFF;min-height:2.4em;text-shadow:0 1px 18px rgba(10,30,90,.25)}
.km-room .line span{display:inline-block;opacity:0;transform:translate3d(0,6px,0);transition:opacity .6s ease,transform .6s ease}
.km-room .line span.on{opacity:1;transform:none}
.km-room .wait{margin:18px 0 0;font-family:var(--fe);font-size:20px;opacity:.85}
.km-room .write{margin-top:22px}
.km-room .write .row{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:10px}
.km-room .write .speak{border:1px solid #0A2A6E;background:#FFFFFF;color:#0A2A6E;padding:12px 14px;font-size:14px;border-radius:0}
.km-room .write .speak[aria-pressed=true]{background:#0A2A6E;color:#FFFFFF}
.km-room .write .send{margin:0;flex:0 0 auto}
.km-room .quiet{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(10,42,110,.2)}
.km-room .quiet button{border:0;background:none;padding:6px 0;color:#0A2A6E;font-family:var(--fe);font-size:17px;border-bottom:1px solid rgba(10,42,110,.5)}
.km-room .gather{margin-top:18px}
.km-room .sofar{margin-top:18px}
.km-room .sofar summary{cursor:pointer;font-family:var(--fe);font-size:17px;color:#FFFFFF;list-style:none;border-bottom:1px solid rgba(255,255,255,.55);display:inline-block;padding-bottom:2px}
.km-room .sofar summary::-webkit-details-marker{display:none}
.km-room .sofar ol{list-style:none;margin:12px 0 0;padding:16px;background:#FFFFFF;color:#0A2A6E}
.km-room .sofar li{margin:0 0 12px;font-size:14.5px;line-height:1.5}
.km-room .sofar li.a{font-family:var(--fe);font-size:17px;color:#1C5FD6}
.km .care{margin-top:18px;background:#FFFFFF;color:#0A2A6E;padding:18px;border-left:3px solid #0A3CA8}
.km .care p{margin:0 0 10px;font-size:15px;line-height:1.5}
.km .care ul{list-style:none;margin:0;padding:0}
.km .care li{padding:8px 0;border-top:1px solid rgba(10,42,110,.15);font-size:15px;line-height:1.4}
.km .care a{color:#0A3CA8;font-weight:500;text-decoration:none;border-bottom:1px solid #0A3CA8}

/* the page */
.km .page{margin-top:22px;background:#FFFFFF;color:#0A2A6E;padding:22px 18px 18px;box-shadow:0 26px 40px -24px rgba(10,20,80,.6)}
.km .page header{display:flex;justify-content:space-between;align-items:baseline;gap:10px;border-bottom:1px solid #0A2A6E;padding-bottom:8px}
.km .page header b{font-family:var(--fdisp);font-weight:800;font-size:22px;letter-spacing:-.03em}
.km .page header span{font-family:var(--fe);font-style:italic;font-size:16px;color:#1C5FD6}
.km .page .for{margin:8px 0 0;font-family:var(--fe);font-size:15px;color:#2B4C8C}
.km .page section{margin-top:16px}
.km .page h3{margin:0 0 4px;font-family:var(--fe);font-weight:400;font-size:19px;letter-spacing:.01em;color:#1C5FD6;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.km .page .ln{position:relative;margin:0 0 8px}
.km .page .ln p{margin:0;font-size:15.5px;line-height:1.55;padding:2px 30px 2px 0;outline:none;border-bottom:1px dashed transparent}
.km .page .ln p[contenteditable=true]:focus{border-bottom-color:#1C5FD6}
.km .page .ln .x{position:absolute;right:0;top:0;border:0;background:none;color:#2B4C8C;font-size:18px;line-height:1;padding:4px}
.km .page .flag{margin:4px 0 0;font-family:var(--fe);font-style:italic;font-size:15px;color:#1C5FD6}
.km .page .flag button{border:0;background:none;color:#0A2A6E;font-family:var(--fb);font-style:normal;font-size:13px;border-bottom:1px solid #0A2A6E;padding:2px 0;margin-left:6px}
.km .page .add{border:0;background:none;color:#2B4C8C;font-family:var(--fe);font-size:15px;padding:4px 0;border-bottom:1px solid rgba(43,76,140,.5)}
.km .page .hand{border:1px solid #0A2A6E;background:#FFFFFF;color:#0A2A6E;font-family:var(--fb);font-size:12.5px;padding:6px 10px;border-radius:0;white-space:nowrap}
.km .page .hand[aria-pressed=true]{background:#0A2A6E;color:#FFFFFF}
.km .page .acts{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:18px;padding-top:14px;border-top:1px solid rgba(10,42,110,.2)}
.km .page .acts .go{margin:0}
.km .page .acts .link{color:#0A2A6E;font-size:17px}
.km .page.given header span{color:#0A3CA8}

/* keeping */
.km .choose{display:grid;gap:10px;margin-top:4px}
.km .choose button{display:block;text-align:left;width:100%;border:1px solid #0A2A6E;background:#FFFFFF;color:#0A2A6E;padding:14px 14px;border-radius:0}
.km .choose button[aria-pressed=true]{background:#0A2A6E;color:#FFFFFF}
.km .choose b{display:flex;justify-content:space-between;font-family:var(--fdisp);font-weight:800;font-size:19px;letter-spacing:-.02em}
.km .choose span{display:block;margin-top:4px;font-size:14px;line-height:1.45}
.km .pay{margin-top:18px}
.km .share{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.km .share input{flex:1 1 100%;font-size:14px !important;color:#0A2A6E}
.km .share .go{margin:0}
.km .shelf>h2{margin-top:30px}

@media (prefers-reduced-motion: reduce){
  .km-s{animation:none}
  .km .faces .half,.km .faces .gap,.km .faces .bloom,.km-room .line span{transition:none}
  .km .faces .half{transform:none}.km .faces .gap{opacity:1}
  .km-room .line span{opacity:1;transform:none}
  .km .faces.breathe .gap{animation:none}
}
.km a:focus-visible,.km button:focus-visible,.km input:focus-visible,.km textarea:focus-visible,.km [contenteditable]:focus-visible,.km summary:focus-visible{outline:2px solid #FFFFFF;outline-offset:3px;box-shadow:0 0 0 5px rgba(10,42,110,.6)}
.km .card :focus-visible,.km .page :focus-visible,.km .care :focus-visible{outline-color:#0A3CA8;box-shadow:none}
.km .page .go{background:#0A3CA8;color:#FFFFFF}
.km .page .small{margin:18px 0 0;font-size:14px;line-height:1.6;color:#2B4C8C}
.km .page .small .add{margin-right:12px}
.km .card .starter{margin:0 0 10px;font-family:var(--fe);font-style:italic;font-size:21px;line-height:1.3;color:#0A2A6E}
.km-room .card .choose button b{font-size:17px;letter-spacing:-.01em;display:block}
.km-room .card .choose{gap:8px}