:root{color-scheme:light;--paper:#faf8f3;--ink:#292623;--portrait:clamp(64px,8.7vw,126px);--operator:clamp(20px,2.5vw,36px);font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}
html,body{margin:0;min-width:280px;min-height:100%;overscroll-behavior:none}
body{height:100svh;min-height:320px;background:radial-gradient(ellipse at 50% 48%,#fffefa 0%,var(--paper) 75%);display:flex;flex-direction:column;overflow-x:hidden}
a,button{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
.masthead{position:relative;z-index:5;padding:30px 4vw;pointer-events:none}
.wordmark{font:24px Georgia,'Times New Roman',serif;letter-spacing:-1px;white-space:nowrap;pointer-events:auto}
.wordmark span{font-style:italic;color:#8d8780;padding:0 3px}
.scene{flex:1;position:relative;isolation:isolate;overflow:hidden;min-height:300px;touch-action:manipulation}
.equation{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);display:flex;align-items:center;z-index:2}
.founders{display:grid;grid-template-columns:var(--portrait) var(--operator) var(--portrait);align-items:center}
.business{display:grid;grid-template-columns:var(--portrait) var(--operator) var(--portrait) var(--operator) var(--portrait);align-items:center}
.answer{display:flex;align-items:center}
.answer>.equals{width:var(--operator);flex-shrink:0}
.bridge{width:var(--operator);flex-shrink:0}
.ingredient{will-change:transform}
.token{position:relative;width:var(--portrait);height:var(--portrait);display:flex;align-items:center;justify-content:center;user-select:none}
.symbol{position:relative;display:flex;align-items:center;justify-content:center;width:var(--portrait);height:var(--portrait);font-size:var(--portrait);line-height:1;filter:drop-shadow(0 9px 12px #3427210d)}
.person{margin:0;position:relative;will-change:transform;z-index:2}
.portrait{width:var(--portrait);height:var(--portrait);border-radius:50%;padding:5px;background:white;box-shadow:0 12px 32px #34272112,0 0 0 1px #332a1a08;transition:box-shadow .2s}
.portrait img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;pointer-events:none;user-select:none;-webkit-user-drag:none}
.operator{font:normal clamp(36px,4vw,56px)/1 Georgia,serif;text-align:center;color:#a7a197;transition:opacity .35s,transform .55s cubic-bezier(.34,1.56,.64,1)}
.result{width:var(--portrait);height:var(--portrait);display:flex;align-items:center;justify-content:center;transition:opacity .25s,transform .7s cubic-bezier(.34,1.56,.64,1)}
.heart{display:flex;align-items:center;justify-content:center;width:var(--portrait);height:var(--portrait);font-size:var(--portrait);line-height:1;filter:drop-shadow(0 9px 12px #3427210d);user-select:none}
.controls{position:absolute;bottom:max(26px,env(safe-area-inset-bottom));left:0;right:0;display:flex;justify-content:center;z-index:5;pointer-events:none}
.control{pointer-events:auto;font:12px Arial,sans-serif;border:1px solid #dcd6cb;background:#ffffff90;backdrop-filter:blur(12px);color:#746b61;border-radius:30px;padding:12px 22px;min-height:44px;display:inline-flex;align-items:center;gap:9px;cursor:pointer;transition:transform .2s,background .2s}
.control:hover{background:white;transform:rotate(-4deg) scale(1.06)}
.control:active{transform:scale(.94)}
.control svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.control:focus-visible,.wordmark:focus-visible{outline:2px solid #f25047;outline-offset:5px}
[hidden]{display:none!important}
.effects{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.mini{position:absolute;left:0;top:0;width:var(--size);height:var(--size);border-radius:50%;padding:3px;background:#fff;box-shadow:0 5px 18px #34272116;will-change:transform;overflow:hidden}
.mini img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.particle{position:absolute;left:0;top:0;pointer-events:none;will-change:transform,opacity;user-select:none;line-height:1}
.ring{position:absolute;border:3px solid #ff8b7c;border-radius:50%;width:40px;height:40px;left:0;top:0}
.scene[data-phase="wandering"] .operator,.scene[data-phase="gathering"] .operator{opacity:0;transform:scale(.1) rotate(-90deg)}
.scene[data-phase="wandering"] .result,.scene[data-phase="gathering"] .result{opacity:0;transform:scale(0) rotate(-30deg)}
.scene[data-phase="complete"] .portrait:hover{box-shadow:0 16px 35px #f2504728}
.scene[data-phase="complete"] .portrait,.scene[data-phase="complete"] .token{cursor:pointer}
@media(max-width:760px){
  :root{--portrait:clamp(68px,21vw,96px);--operator:26px}
  .masthead{padding:24px 20px 0;text-align:center}
  .wordmark{font-size:21px;letter-spacing:-.85px}
  .scene{min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 18px max(48px,env(safe-area-inset-bottom));gap:26px}
  .equation{position:relative;left:auto;top:auto;transform:none;flex-direction:column;gap:14px;flex-shrink:0}
  .founders{grid-template-columns:var(--portrait) 32px var(--portrait)}
  .portrait{padding:5px;box-shadow:0 12px 24px #38251114,0 2px 4px #38251108}
  .operator{font-size:23px;color:#b8ac9b}
  .founders .plus{font-size:25px}
  .bridge{width:auto;height:18px;line-height:18px;font-size:20px}
  .business{grid-template-columns:var(--portrait) var(--operator) var(--portrait) var(--operator) var(--portrait)}
  .symbol{filter:none}
  .business .operator{font:20px Arial,Helvetica,sans-serif;color:#c0b5a5}
  .answer{flex-direction:column;gap:8px}
  .answer>.equals{width:auto;font-size:25px;line-height:24px}
  .heart{filter:none}
  .controls{position:relative;inset:auto;flex-shrink:0}
  .control{background:transparent;border-color:transparent;color:#978b7b;backdrop-filter:none;font-size:12px;padding:10px 16px}
  .control:hover{background:#f0eae0}
}
@media(max-width:760px) and (max-height:650px){
  :root{--portrait:clamp(64px,18vw,84px)}
  .masthead{padding-top:20px}
  .scene{padding-top:8px;padding-bottom:max(22px,env(safe-area-inset-bottom));gap:16px}
  .equation{gap:10px}
  .bridge{height:14px;line-height:14px;font-size:18px}
}
@media(max-height:500px) and (min-width:501px){
  :root{--portrait:clamp(48px,8vw,90px);--operator:clamp(20px,3vw,32px)}
  .masthead{padding:17px 25px;text-align:left}
  .scene{display:block;min-height:250px;padding:0}
  .equation{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);flex-direction:row;gap:0}
  .founders{grid-template-columns:var(--portrait) var(--operator) var(--portrait)}
  .person .portrait{transform:none;padding:3px}
  .bridge{width:var(--operator);height:auto;line-height:1}
  .answer{flex-direction:row;gap:0}
  .answer>.equals{width:var(--operator)}
  .controls{position:absolute;inset:auto 0 15px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}