@font-face{font-family:DM;src:url('../buddy_arrival_02/assets/fonts/dm-sans-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Instrument;src:url('../buddy_arrival_02/assets/fonts/instrument-serif-italic-latin.woff2') format('woff2');font-style:italic;font-display:swap}
:root{
  --bg:#07090d;--ink:#f2f1e9;--soft:#9da7a4;--dim:#5f6d68;
  --accent:#cff4dd;--accent-rgb:207,244,221;
  --dur:.5s;--ease:cubic-bezier(.2,.7,.2,1);
  font-family:DM,Arial,sans-serif;color-scheme:dark;
}
body[data-colour=dawn]{--accent:#ffcf9f;--accent-rgb:255,207,159}
body[data-colour=mint]{--accent:#a8ffe6;--accent-rgb:168,255,230}
body[data-colour=lilac]{--accent:#dcc7ff;--accent-rgb:220,199,255}
body[data-colour=sky]{--accent:#bfe1ff;--accent-rgb:191,225,255}
body[data-colour=rose]{--accent:#ffc4d6;--accent-rgb:255,196,214}
*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;background:var(--bg);color:var(--ink)}
body{overflow:hidden;height:100dvh;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
em{font-family:Instrument,Georgia,serif;font-style:italic;font-weight:400;color:var(--accent);letter-spacing:-.01em}
[hidden]{display:none!important}

#being{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
.orb-hit{position:fixed;left:var(--ox,50%);top:var(--oy,36%);width:var(--od,160px);height:var(--od,160px);margin:calc(var(--od,160px)/-2) 0 0 calc(var(--od,160px)/-2);
  border-radius:50%;z-index:4;background:none;opacity:0;cursor:pointer}
.orb-hit:focus-visible{opacity:1;outline:1px dashed rgba(var(--accent-rgb),.5);outline-offset:6px;border-radius:50%}
body[data-step=home] .orb-hit{pointer-events:none}

.bar{position:fixed;top:0;left:0;right:0;z-index:6;display:flex;align-items:center;justify-content:space-between;
  padding:calc(14px + env(safe-area-inset-top)) 16px 10px;pointer-events:none}
.bar>*{pointer-events:auto}
.ghost{color:var(--dim);font-size:12px;letter-spacing:.06em;min-height:40px;min-width:40px;padding:0 6px;transition:color .2s,opacity .3s}
.ghost:hover{color:var(--accent)}
#back{font-size:18px}
.bar[data-hide-back] #back,.bar[data-hide-skip] #skip{opacity:0;pointer-events:none}
.dots{display:flex;gap:7px;list-style:none;margin:0;padding:0}
.dots li{width:5px;height:5px;border-radius:50%;background:#28312f;transition:background .4s,transform .4s}
.dots li.done{background:var(--dim)}
.dots li.now{background:var(--accent);transform:scale(1.35)}
body[data-step=home] .bar{opacity:0;pointer-events:none;transition:opacity .6s}

main{position:relative;z-index:3;height:100%}
.step{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:0 20px;text-align:center;opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .22s var(--ease),transform .22s var(--ease)}
.step.active{opacity:1;pointer-events:auto;transform:none;transition-duration:var(--dur);transition-delay:.18s}
.step:not(.home){padding-top:58dvh}
.say{font-size:clamp(28px,7.6vw,44px);letter-spacing:-.04em;line-height:1.1;margin:0 0 20px;text-wrap:balance;max-width:560px;transition:opacity .3s var(--ease)}
.say.fade{opacity:0}
.hint{font-size:13px;color:var(--soft);margin:0}
.row{display:flex;align-items:center;width:min(340px,100%);border-bottom:1px solid #c1d5c73a;padding-bottom:6px;transition:border-color .3s}
.row:focus-within{border-color:var(--accent)}
.row input{flex:1;min-width:0;background:none;border:0;outline:none;font-size:22px;padding:8px 2px;letter-spacing:-.02em}
.row input::placeholder{color:#5c6a64}
.row button{width:42px;height:42px;border-radius:50%;background:rgba(var(--accent-rgb),.08);color:var(--accent);font-size:22px;flex-shrink:0;
  transition:background .25s,transform .25s}
.row button:hover{background:rgba(var(--accent-rgb),.16);transform:translateX(2px)}
.row+.hint{margin-top:16px}
.chips{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap;justify-content:center}
.chips button{font-size:12px;color:var(--soft);border:1px solid #c1d5c72a;border-radius:30px;padding:9px 14px;min-height:38px;transition:color .2s,border-color .2s}
.chips button:hover{color:var(--accent);border-color:rgba(var(--accent-rgb),.5)}

.colour-now{margin:-6px 0 14px;font-size:clamp(22px,6vw,34px);line-height:1;min-height:1.1em}
.colour-now em{color:var(--accent);transition:color .4s}
.tints{display:flex;gap:14px;justify-content:center;margin:0 0 14px}
.tints button{width:28px;height:28px;border-radius:50%;padding:0;position:relative;transition:transform .3s var(--ease)}
.tints button::before{content:'';position:absolute;inset:8px;border-radius:50%;background:var(--c);opacity:.55;transition:inset .3s var(--ease),opacity .3s,box-shadow .3s}
.tints button:hover::before{inset:6px;opacity:.9}
.tints button[aria-checked=true]::before{inset:4px;opacity:1;box-shadow:0 0 0 2px var(--bg),0 0 0 3px rgba(var(--accent-rgb),.55),0 0 16px rgba(var(--accent-rgb),.4)}
.commit{margin-top:8px;color:var(--soft);font-size:13px;letter-spacing:.02em;border:1px solid rgba(var(--accent-rgb),.22);border-radius:30px;padding:0 16px;min-height:40px;transition:border-color .2s,color .2s}
.commit:hover{color:var(--accent);border-color:rgba(var(--accent-rgb),.6)}

/* home */
.home{justify-content:flex-start;align-items:stretch;text-align:left;padding:calc(64px + env(safe-area-inset-top)) 20px 120px;overflow:auto}
.home-head .brand{font-size:10px;font-weight:600;letter-spacing:.21em;color:var(--soft)}
.home-head h1{font-size:clamp(40px,10vw,84px);letter-spacing:-.05em;font-weight:400;line-height:1;margin:18px 0 28px;overflow-wrap:anywhere}
.cards{display:grid;gap:14px;grid-template-columns:1fr;max-width:820px}
.card{position:relative;border:1px solid rgba(var(--accent-rgb),.22);border-radius:14px;padding:20px;min-height:118px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;
  background:linear-gradient(140deg,rgba(var(--accent-rgb),.05),#0a0f12aa);overflow:hidden;
  opacity:0;transform:translateY(6px);transition:opacity .9s var(--ease),transform .9s var(--ease),border-color .3s}
.home.arrived .card{opacity:1;transform:none}
.home.arrived .card:nth-child(2){transition-delay:.12s}
.home.arrived .card:nth-child(3){transition-delay:.24s}
.card strong{font-size:17px;font-weight:450;letter-spacing:-.02em}
.card small{font-size:12px;color:var(--soft)}
.card-mark{position:absolute;top:16px;left:18px;font-size:18px;color:var(--accent)}
.card.picture{min-height:150px;justify-content:flex-end}
.card.picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;filter:saturate(.8)}
.card.picture strong{position:relative;text-shadow:0 2px 12px #000}
.home-head{opacity:0;transition:opacity .7s var(--ease)}
.home.drawing .home-head{opacity:1}
.remember{opacity:0;transform:translateY(6px);transition:opacity .9s var(--ease) .4s,transform .9s var(--ease) .4s}
.home.arrived .remember{opacity:1;transform:none}
.remember{margin-top:26px;max-width:640px;padding:16px 18px;border-left:2px solid rgba(var(--accent-rgb),.55);background:linear-gradient(90deg,rgba(var(--accent-rgb),.06),transparent)}
.remember-say{margin:0;font-size:clamp(17px,4.6vw,21px);letter-spacing:-.02em;line-height:1.35}
.remember-keys{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px}
.remember-keys li{font:11px/1.6 ui-monospace,Menlo,monospace;color:var(--dim);white-space:nowrap}
.remember-keys li b{font-weight:400;color:var(--soft)}
.corner-name{position:fixed;right:22px;bottom:calc(14px + env(safe-area-inset-bottom));margin:0;font-size:11px;letter-spacing:.08em;color:var(--dim);z-index:6;
  opacity:0;transition:opacity 1s var(--ease) .9s;pointer-events:none}
.home.arrived .corner-name{opacity:1}
#replay{position:fixed;left:16px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:6;opacity:0;transition:opacity 1s var(--ease) 1s}
.home.arrived #replay{opacity:1}
.no-js{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:var(--bg)}

@media (min-width:900px){
  .step:not(.home){padding-top:60dvh}
  .say{margin-bottom:26px;font-size:clamp(36px,3.8vw,56px)}
  .row{width:min(420px,100%)}
  .row input{font-size:24px}
  .home{padding:80px 6vw 120px}
  .cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .card{min-height:170px;padding:24px}
  .card.picture{min-height:170px}
  .tints{gap:18px}
  .tints button{width:32px;height:32px}
  .remember{margin-top:34px}
}
@media (prefers-reduced-motion:reduce){
  :root{--dur:.01s}
    .step,.say,.card,.home-head,.remember,.corner-name,#replay,.tints button,.tints button::before{transition-duration:.01s;transition-delay:0s}
}