.punto{--title-size:clamp(var(--text-display-hero), 10.5vw, calc(var(--text-display-hero) * 2.6));--dot-held:var(--spacing-8);--ease:cubic-bezier(.2, .8, .2, 1);min-height:100svh;display:grid;position:relative}.punto-scene{padding:calc(var(--spacing-12) * 2 + env(safe-area-inset-top)) max(var(--spacing-6), env(safe-area-inset-right)) calc(var(--spacing-12) * 2.5 + env(safe-area-inset-bottom)) max(var(--spacing-6), env(safe-area-inset-left));grid-area:1/1;place-items:center;display:grid}.punto-scene[data-scene=level]{touch-action:none}.punto-home{justify-items:center;display:grid}.punto-title{max-width:11ch;font-family:var(--font-display);font-weight:var(--text-display-hero--font-weight);font-size:var(--title-size);letter-spacing:-.04em;text-align:center;text-wrap:balance;margin:0;line-height:1}.punto-word{display:inline-block}.punto-slot{width:var(--sbu-mark-size);height:var(--sbu-mark-size);vertical-align:baseline;background:currentColor;margin-inline-start:var(--sbu-mark-gap);display:inline-block}.punto-on .punto-slot{background:0 0}.punto-apps{justify-content:center;gap:var(--spacing-1) var(--spacing-5);max-width:calc(var(--spacing-12) * 16);margin-top:clamp(var(--spacing-8), 5vh, var(--spacing-12));font-family:var(--font-display);font-weight:var(--text-display-title--font-weight);font-size:clamp(var(--text-title-2), 2.4vw, var(--text-display-title));letter-spacing:-.02em;flex-wrap:wrap;line-height:1.2;transition:opacity .6s .1s;display:flex}.punto-app{padding:var(--spacing-1) 2px;color:var(--sbu-ink);text-decoration:none;transition:color .25s;display:inline-block;position:relative}.punto-app.is-soon{color:var(--sbu-ink-muted)}button.punto-app{font:inherit;letter-spacing:inherit;cursor:pointer;background:0 0;border:0}.punto-app:after{content:"";height:calc(var(--sbu-hairline) * 3);background:var(--c);transform-origin:0;transition:transform .3s var(--ease);position:absolute;inset:auto 0 0;transform:scaleX(0)}a.punto-app:hover:after,button.punto-app:hover:after,.punto-app:focus-visible:after,.punto-app.is-hot:after{transform:scaleX(1)}.punto-app.is-hot{color:var(--c)}.punto-hint{inset:auto var(--spacing-6) calc(var(--spacing-6) + env(safe-area-inset-bottom));text-align:center;font-size:var(--text-subheadline);color:var(--sbu-ink-muted);margin:0;transition:opacity .4s;position:absolute}.punto-hint b{color:var(--sbu-ink);font-weight:var(--text-headline--font-weight)}.punto-hint.is-gone{opacity:0}.is-intro .punto-word{clip-path:inset(-20% 100% -20% -5%)}.is-intro .punto-apps,.is-intro .punto-hint{opacity:0}.punto-dot{z-index:20;width:var(--spacing-6);height:var(--spacing-6);background:var(--acc,var(--sbu-ink));cursor:grab;touch-action:none;will-change:transform;transition:background-color .3s,opacity .2s;position:absolute;top:0;left:0}.punto-dot:after{content:"";inset:calc(var(--spacing-3) * -1);position:absolute}.punto-dot.is-held{cursor:grabbing}.punto-dot.is-calling{animation:2.4s ease-in-out 3 punto-call}@keyframes punto-call{0%,70%,to{box-shadow:0 0 0 0 color-mix(in srgb, var(--acc) 40%, transparent)}85%{box-shadow:0 0 0 var(--spacing-2) transparent}}.punto-wipe{z-index:15;pointer-events:none;background:var(--wipe,var(--sbu-ink));clip-path:inset(50%);position:fixed;inset:0}.punto-sc{gap:var(--spacing-5);width:min(calc(var(--spacing-12) * 19), 100%);text-align:center;justify-items:center;display:grid}.punto-scene [tabindex="-1"]:focus{outline:none}.punto-kick{font-size:var(--text-caption);font-weight:var(--text-caption--font-weight);letter-spacing:var(--text-caption--letter-spacing);text-transform:uppercase;color:var(--sbu-ink-muted);margin:0}.punto-fig{font-family:var(--font-display);font-weight:var(--text-stat-hero--font-weight);font-size:clamp(var(--text-stat-hero), 16vw, calc(var(--text-stat-hero) * 3.4));letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--sbu-ink);margin:0;line-height:1}.punto-fig.is-medium{font-variant-numeric:normal;font-size:clamp(var(--text-stat-hero), 11vw, calc(var(--text-stat-hero) * 2.3))}.punto-fig.is-small{font-size:clamp(var(--text-display-title), 8vw, calc(var(--text-display-hero) * 1.85))}.punto-unit{font-family:var(--font-sans);font-weight:var(--text-body--font-weight);font-size:clamp(var(--text-headline), 2vw, var(--text-title-2));letter-spacing:0;color:var(--sbu-ink-muted)}.punto-ctx{min-height:1.4em;font-size:clamp(var(--text-body), 1.6vw, var(--text-title-2));color:var(--sbu-ink-muted);margin:0}.punto-vial{width:100%;height:calc(var(--sbu-hairline) * 2);margin-block:var(--spacing-6);background:var(--sbu-line);position:relative}.punto-vial:before{content:"";inset:calc(var(--spacing-5) * -1) auto;width:calc(var(--sbu-hairline) * 2);margin-left:calc(var(--sbu-hairline) * -1);background:var(--sbu-line);transition:background .3s;position:absolute;left:50%}.punto-vial.is-flat:before{background:var(--c)}.punto-actions{justify-content:center;align-items:center;gap:var(--spacing-3);flex-wrap:wrap;display:flex}.punto-btn{padding:var(--spacing-3) var(--spacing-5);border:var(--sbu-hairline) solid transparent;border-radius:var(--radius-lg);background:var(--c,var(--sbu-ink));color:var(--sbu-on-accent);font:inherit;font-size:var(--text-subheadline);font-weight:var(--text-headline--font-weight);cursor:pointer;align-items:center;text-decoration:none;display:inline-flex}.punto-btn.is-ghost{border-color:var(--sbu-line);color:var(--sbu-ink);background:0 0}.punto-tag{padding:var(--spacing-1) var(--spacing-3);border:var(--sbu-hairline) solid var(--sbu-line);border-radius:var(--radius-pill);font-size:var(--text-subheadline);color:var(--sbu-ink-muted)}.punto-rings{justify-content:center;gap:clamp(var(--spacing-5), 4vw, var(--spacing-12));flex-wrap:wrap;display:flex}.punto-ring{width:clamp(calc(var(--spacing-12) * 2), 14vw, calc(var(--spacing-12) * 3));aspect-ratio:1;border-radius:var(--radius-pill);font:inherit;cursor:pointer;background:0 0;border:0;place-items:center;padding:0;display:grid;position:relative}.punto-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}.punto-ring-track{stroke:var(--sbu-line);transition:stroke .3s}.punto-ring-fill{stroke:var(--c);stroke-linecap:round;transition:stroke-dashoffset .6s var(--ease)}.punto-ring span{font-size:var(--text-subheadline);color:var(--sbu-ink-muted)}.punto-ring[aria-pressed=true] span{color:var(--sbu-ink);font-weight:var(--text-headline--font-weight)}.punto-ring.is-hot .punto-ring-track{stroke:var(--c)}.punto-plate{width:min(calc(var(--spacing-12) * 8), 70vw, 40svh);border-radius:var(--radius-icon);mix-blend-mode:multiply;height:auto}@media (prefers-color-scheme:dark){.punto-plate{filter:invert()hue-rotate(180deg)brightness(.94);mix-blend-mode:screen}}.punto-on body{overflow-x:clip}@media (prefers-reduced-motion:reduce){.punto-apps,.punto-hint,.punto-app,.punto-app:after,.punto-ring-fill,.punto-dot{transition:none}.punto-dot.is-calling{animation:none}}@media (forced-colors:active){.punto-dot,.punto-slot{forced-color-adjust:none;background:canvastext}.punto-on .punto-slot{background:0 0}.punto-wipe{display:none}}
