:root{--porcelain:#eef1f4;--field:#dfe4ea;--white:#ffffff;--ink:#121317;--slate:#545b68;--night:#0b0b0d;--marigold:#e7bf2d;--coral:#f25c26;--raspberry:#e42364;--lagoon:#0a8f8b;--sky:#16a5e2;--g1:var(--marigold);--g2:var(--coral);--g3:var(--raspberry);--g4:var(--sky);--g5:var(--lagoon);--serif:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;--sans:"Instrument Sans",-apple-system,"Helvetica Neue",Arial,sans-serif;--ease:cubic-bezier(.2,.8,.2,1);}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:var(--sans);font-weight:400;color:var(--ink);background:var(--porcelain);overflow:hidden;overscroll-behavior:none;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;}.app{position:relative;width:100%;height:100dvh;overflow:hidden;background:var(--porcelain);isolation:isolate;}[data-tone="sunset"]{--g1:var(--marigold);--g2:var(--coral);--g3:var(--raspberry);--g4:var(--coral);--g5:var(--marigold)}[data-tone="lagoon"]{--g1:var(--sky);--g2:var(--lagoon);--g3:#7fd6e8;--g4:var(--lagoon);--g5:var(--sky)}[data-tone="mono"]{--g1:#ffffff;--g2:#8d939e;--g3:#ffffff;--g4:#4a505a;--g5:#ffffff}.island{position:absolute;left:0;right:0;top:calc(12px + env(safe-area-inset-top));height:148px;z-index:5;pointer-events:none}.pill,.card{position:absolute;top:0;left:50%;overflow:hidden;background:var(--night);transform-origin:50% 0}.pill{width:196px;height:54px;margin-left:-98px;border-radius:999px;box-shadow:0 6px 16px rgba(18,19,23,.18)}.card{width:var(--cw,336px);height:148px;margin-left:calc(var(--cw,336px) / -2);border-radius:42px;opacity:0;box-shadow:0 14px 34px rgba(18,19,23,.22),0 3px 8px rgba(18,19,23,.12)}.spin{position:absolute;left:50%;top:50%;width:520px;height:520px;margin:-260px 0 0 -260px;background:conic-gradient(from 0deg,var(--g1),var(--g2),var(--g3),var(--g4),var(--g5),var(--g1));animation:spin 5.5s linear infinite}.core{position:absolute;inset:2.5px;border-radius:inherit;background:var(--night)}@keyframes spin{to{transform:rotate(360deg)}}.pill .in{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 18px}.orb{width:24px;height:24px;border-radius:50%;overflow:hidden;position:relative}.orb .spin{width:60px;height:60px;margin:-30px 0 0 -30px;animation-duration:3s}.wave{display:flex;align-items:center;gap:3px;height:22px}.wave i{display:block;width:4px;height:22px;border-radius:2px;transform-origin:50% 50%;animation:bar 1.1s var(--ease) infinite alternate}.wave i:nth-child(1){background:var(--g1);animation-delay:-.2s}.wave i:nth-child(2){background:var(--g2);animation-delay:-.6s}.wave i:nth-child(3){background:var(--g3);animation-delay:-.1s}.wave i:nth-child(4){background:var(--g4);animation-delay:-.8s}.wave i:nth-child(5){background:var(--g5);animation-delay:-.4s}@keyframes bar{from{transform:scaleY(.25)}to{transform:scaleY(1)}}.card .in{position:absolute;inset:0;padding:20px 22px 18px;display:flex;flex-direction:column;justify-content:space-between;color:#f4f5f7}.card .top{display:flex;align-items:center;gap:12px}.card .orb{width:44px;height:44px;flex:none}.card .orb .spin{width:100px;height:100px;margin:-50px 0 0 -50px}.card .who{flex:1;min-width:0}.card .who span{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(1.25rem,1.1rem + .6vw,1.45rem);line-height:1.1}.card .who small{display:block;font-size:.8125rem;color:#b9bec8;margin-top:3px}.flow{position:relative;height:6px;border-radius:3px;overflow:hidden;background:#24262c}.flow span{position:absolute;top:0;left:0;width:200%;height:100%;background:linear-gradient(90deg,var(--g1),var(--g2),var(--g3),var(--g4),var(--g5),var(--g1),var(--g2),var(--g3),var(--g4),var(--g5),var(--g1));animation:flow 4s linear infinite}@keyframes flow{to{transform:translateX(-50%)}}.card .meta{display:flex;justify-content:space-between;font-size:.8125rem;color:#b9bec8;margin-top:8px}.card .meta b{font-weight:600;color:#f4f5f7}.head{position:relative;z-index:1;padding:calc(88px + env(safe-area-inset-top)) 22px 0;transform-origin:50% 0}.brand{display:flex;align-items:center;gap:12px;margin-bottom:18px}.brand img{width:64px;height:64px;border-radius:15px;box-shadow:0 2px 6px rgba(18,19,23,.10),0 10px 22px rgba(18,19,23,.08);background:var(--white)}.brand span{font-weight:600;font-size:clamp(1rem,.95rem + .3vw,1.125rem);letter-spacing:.01em}.brand small{display:block;font-weight:400;font-size:.8125rem;color:var(--slate);letter-spacing:0}h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.6rem,1.9rem + 3.2vw,3.4rem);line-height:.98;letter-spacing:-.015em}h1 em{font-style:normal;display:block}.lede{margin-top:14px;font-size:clamp(1rem,.96rem + .2vw,1.0625rem);line-height:1.45;color:var(--slate);max-width:30ch}.sheet{position:absolute;left:0;right:0;bottom:var(--dock,112px);height:var(--sh,420px);z-index:3;background:var(--white);border-radius:28px 28px 0 0;box-shadow:0 -1px 2px rgba(18,19,23,.05),0 -10px 30px rgba(18,19,23,.08);touch-action:none;user-select:none;-webkit-user-select:none;overscroll-behavior:contain;will-change:transform}.grab{display:block;width:100%;height:28px;border:0;background:transparent;cursor:grab;position:relative;-webkit-tap-highlight-color:transparent}.grab::after{content:"";position:absolute;left:50%;top:9px;width:38px;height:5px;margin-left:-19px;border-radius:3px;background:#c9ced6}.grab:focus-visible{outline:2px solid var(--ink);outline-offset:-4px;border-radius:12px}.sheet-in{padding:0 18px}.sheet h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.35rem,1.25rem + .4vw,1.5rem);line-height:1.15}.hint{font-size:.8125rem;color:var(--slate);margin-top:2px}.tones{display:flex;gap:10px;margin:12px 0 16px}.tone{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;border:0;background:transparent;font:inherit;font-size:.75rem;color:var(--slate);cursor:pointer;padding:2px 0;border-radius:12px;-webkit-tap-highlight-color:transparent;transition:transform .12s var(--ease)}.tone .sw{width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(18,19,23,.08);position:relative}.tone .sw::after{content:"";position:absolute;inset:-4px;border-radius:50%;box-shadow:0 0 0 2px var(--ink);opacity:0;transition:opacity .15s var(--ease)}.tone[aria-pressed="true"]{color:var(--ink);font-weight:600}.tone[aria-pressed="true"] .sw::after{opacity:1}.tone:active{transform:scale(.97)}.tone:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.sw.t1{background:conic-gradient(var(--marigold),var(--coral),var(--raspberry),var(--sky),var(--lagoon),var(--marigold))}.sw.t2{background:linear-gradient(140deg,var(--marigold),var(--coral) 50%,var(--raspberry))}.sw.t3{background:linear-gradient(140deg,#7fd6e8,var(--sky) 45%,var(--lagoon))}.sw.t4{background:linear-gradient(140deg,#ffffff,#8d939e 55%,#2c3038)}.list{list-style:none;background:#f3f5f8;border-radius:16px;overflow:hidden}.list li{display:flex;align-items:center;gap:12px;padding:11px 14px;min-height:56px;position:relative}.list li+li::before{content:"";position:absolute;top:0;left:56px;right:0;height:1px;background:#e1e5eb}.ico{width:30px;height:30px;border-radius:8px;flex:none;display:grid;place-items:center}.ico svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.i1{background:var(--raspberry)}.i2{background:var(--coral)}.i3{background:var(--sky)}.i4{background:var(--ink)}.list strong{display:block;font-weight:600;font-size:.9375rem}.list span{display:block;font-size:.8125rem;color:var(--slate);margin-top:1px}.dock{position:absolute;left:0;right:0;bottom:0;z-index:4;background:var(--white);padding:10px 16px calc(34px + env(safe-area-inset-bottom))}.cta{display:flex;align-items:center;justify-content:center;gap:8px;height:54px;border-radius:16px;background:var(--ink);color:var(--white);text-decoration:none;font-weight:600;font-size:clamp(1rem,.96rem + .2vw,1.0625rem);letter-spacing:.005em;box-shadow:0 1px 2px rgba(18,19,23,.2),0 8px 18px rgba(18,19,23,.16);transition:transform .12s var(--ease);-webkit-tap-highlight-color:transparent}.cta svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.cta:active{transform:scale(.97)}.cta:focus-visible{outline:3px solid var(--sky);outline-offset:3px}footer{position:absolute;left:0;right:0;bottom:calc(10px + env(safe-area-inset-bottom));z-index:5;text-align:center;font-size:.75rem;color:var(--slate)}.fade{animation:fade .18s ease-out}@keyframes fade{from{opacity:.4}to{opacity:1}}@media (hover: hover) and (pointer: fine){.cta:hover{background:#2a2c33}.tone:hover .sw{box-shadow:inset 0 0 0 1px rgba(18,19,23,.2)}.grab:hover::after{background:#aeb4be}}@media (min-width:720px){body{background:var(--field);background-image:radial-gradient(60vmax 60vmax at 8% 12%,rgba(228,35,100,.10),transparent 60%),radial-gradient(60vmax 60vmax at 92% 88%,rgba(22,165,226,.12),transparent 60%),radial-gradient(40vmax 40vmax at 90% 8%,rgba(231,191,45,.10),transparent 60%);display:grid;place-items:center;min-height:100dvh}.app{width:420px;height:min(860px,calc(100dvh - 48px));border-radius:40px;box-shadow:0 1px 2px rgba(18,19,23,.06),0 12px 30px rgba(18,19,23,.10),0 40px 80px rgba(18,19,23,.12)}.island{top:16px}.head{padding-top:96px;padding-left:28px;padding-right:28px}.brand img{width:88px;height:88px;border-radius:20px}.dock{padding-bottom:36px}footer{bottom:11px}}@media (max-height:680px){.head{padding-top:calc(80px + env(safe-area-inset-top))}.brand{margin-bottom:12px}.brand img{width:52px;height:52px;border-radius:12px}h1{font-size:clamp(2.2rem,1.7rem + 2.6vw,2.8rem)}}@media (prefers-reduced-motion: reduce){.spin,.wave i,.flow span{animation:none}.wave i{transform:scaleY(.7)}}html,body{max-width:100%;overflow-x:clip}