.role-switch-button[data-role=dev]{--role-color:var(--accent-dev);background-image:linear-gradient(to right, color-mix(in oklch, var(--role-color) 20%, transparent), color-mix(in oklch, var(--role-color) 20%, transparent));box-shadow:0 0 0 0 color-mix(in oklch, var(--role-color) 0%, transparent);color:var(--role-color);-webkit-text-decoration:underline dashed;text-decoration:underline dashed;-webkit-text-decoration-color:color-mix(in oklch, var(--role-color) 60%, transparent);text-decoration-color:color-mix(in oklch, var(--role-color) 60%, transparent);text-underline-offset:3px;background-position:0;background-repeat:no-repeat;background-size:0% 100%;border-radius:2px;text-decoration-thickness:1px;transition:background-size .32s cubic-bezier(.22,1,.36,1),box-shadow .28s cubic-bezier(.34,1.2,.64,1) 80ms}.role-switch-button[data-role=dev]:hover,.role-switch-button[data-role=dev][data-state=on]{box-shadow:0 0 0 .18em color-mix(in oklch, var(--role-color) 20%, transparent);background-size:100% 100%}.role-switch-button[data-role=designer]{--role-color:var(--accent-designer);color:var(--accent-designer)}.role-switch-button[data-role=creator]{--role-color:var(--accent-creator);color:var(--accent-creator);font-family:var(--font-pixel), var(--font-mono);--box-shadow-width:3px;--pixel-ring-color:transparent;--pixel-box-shadow:calc(-1 * var(--box-shadow-width)) 0 0 0 var(--pixel-ring-color), var(--box-shadow-width) 0 0 0 var(--pixel-ring-color), 0 var(--box-shadow-width) 0 0 var(--pixel-ring-color), 0 calc(-1 * var(--box-shadow-width)) 0 0 var(--pixel-ring-color);--tw-shadow:var(--pixel-box-shadow);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);transition:box-shadow .2s var(--ease-out-quart);padding:0 1px 0 4px;font-size:10px}.role-switch-button[data-role=creator]:hover,.role-switch-button[data-role=creator][data-state=on]{--pixel-ring-color:var(--accent-creator)}.role-switch-button:focus{outline:none}.role-switch-button:focus-visible{outline:2px solid var(--role-color);outline-offset:3px;border-radius:2px}.role-switch-button[data-role=designer] .role-chrome{opacity:0;transition:opacity .2s var(--ease-out-quart)}.role-switch-button[data-role=designer]:hover .role-chrome,.role-switch-button[data-role=designer][data-state=on] .role-chrome{opacity:1}@media (prefers-reduced-motion:reduce){.role-switch-button[data-role=dev],.role-switch-button[data-role=creator],.role-switch-button[data-role=designer] .role-chrome{transition-duration:0s}}
@keyframes avatar-tame-flip{0%,5.87%{opacity:1}5.88%,to{opacity:0}}.avatar-tame-frame{opacity:0}.avatar-tame-frame[data-frame="0"]{opacity:1}@media (prefers-reduced-motion:no-preference){.avatar-tame-frame{opacity:0;animation:6.8s step-end infinite avatar-tame-flip;animation-delay:calc(var(--frame,0) * .4s)}}
.avatar-variant{opacity:0;pointer-events:none;transition:opacity .24s var(--ease-out-quart)}[data-mode=dev] .avatar-variant[data-show-in=dev],[data-mode=designer] .avatar-variant[data-show-in=designer],[data-mode=creator] .avatar-variant[data-show-in=creator]{opacity:1}.avatar-ascii{background-color:var(--color-fg);-webkit-mask-image:url(/ascii-light.svg);mask-image:url(/ascii-light.svg);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}[data-theme=dark] .avatar-ascii{-webkit-mask-image:url(/ascii-dark.svg);mask-image:url(/ascii-dark.svg)}
.grabber-affordance{transition:box-shadow .18s;box-shadow:inset 0 0 #0000}.grabber-affordance:hover{box-shadow:inset 0 0 0 2px var(--accent)}
@keyframes hero-avatar-enter{0%{opacity:.01;filter:blur(8px);transform:scale(.92)}to{opacity:1;filter:blur();transform:scale(1)}}.hero-avatar-enter{animation:hero-avatar-enter .6s var(--ease-out-quart) .15s both;will-change:transform}.hero-avatar-enter[data-anim-done=true]{will-change:auto}[data-mode=dev] h1.hero-name{font-family:var(--font-mono);letter-spacing:-.02em}[data-mode=creator] h1.hero-name .hero-name__live{font-family:var(--font-pixel), var(--font-mono);letter-spacing:0;top:50%;font-size:clamp(32px,4.5vw,48px)!important;line-height:1.1!important;transform:translateY(-50%)!important}@media (max-width:639px){[data-mode=creator] h1.hero-name .hero-name__live{left:50%;transform:translate(-50%,-50%)!important}}.hero-caret{display:none}[data-mode=dev] .hero-caret{font-family:var(--font-mono);color:var(--accent);margin-left:.06em;font-weight:400;animation:1.05s steps(2,end) infinite hero-caret-blink;display:inline-block}