.ono-scene{contain:layout paint;background:var(--color-muted);border-radius:1rem;place-items:center;width:100%;min-height:132px;display:grid;position:relative;overflow:hidden;container-type:inline-size}@supports (color:color-mix(in oklab, red, red)){.ono-scene{background:radial-gradient(120% 100% at 50% 0%, color-mix(in oklab, var(--color-primary) 7%, transparent), transparent 70%), var(--color-muted)}}.ono-scene--sm{border-radius:.75rem;min-height:84px}.ono-field{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.ono-word{z-index:1;font-family:var(--nm-font-jp), system-ui, sans-serif;white-space:nowrap;letter-spacing:.02em;color:var(--color-foreground);will-change:transform;justify-content:center;align-items:baseline;margin:0;font-size:clamp(1.4rem,13cqw,3.25rem);font-weight:600;line-height:1.1;display:flex;position:relative}.ono-scene--sm .ono-word{font-size:clamp(.8rem,15cqw,1.6rem)}.ono-word>span{animation-duration:var(--dur,.42s);animation-iteration-count:var(--rep,2);animation-delay:calc(1ms + var(--i,0) * var(--stag,40ms));animation-play-state:paused;animation-fill-mode:forwards;display:inline-block}.ono-scene[data-play="1"] .ono-word>span,.ono-scene[data-play="1"] .ono-field *{animation-play-state:running}.ono-field *{animation-duration:var(--dur,.42s);animation-iteration-count:var(--rep,2);transform-box:fill-box;transform-origin:50%;animation-play-state:paused;animation-delay:1ms;animation-fill-mode:forwards}@keyframes ono-impact{0%{transform:translateY(calc(-30px * var(--amp))) scaleY(1.08);opacity:.5;animation-timing-function:cubic-bezier(.55,0,1,.45)}14%{transform:translateY(0) scale(calc(1 + .2 * var(--amp)), calc(1 - .24 * var(--amp)));opacity:1}28%{transform:translateY(calc(-8px * var(--amp))) scale(calc(1 - .07 * var(--amp)), calc(1 + .1 * var(--amp)))}44%{transform:translateY(0)scale(1.05,.95)}64%{transform:translateY(calc(-2px * var(--amp))) scale(1, 1)}to{transform:translateY(0)scale(1)}}[data-motion=impact] .ono-word>span{animation-name:ono-impact;animation-timing-function:var(--ease-out)}@keyframes ono-ground{0%,8%{opacity:0;transform:scaleX(.4)scaleY(1)}16%{opacity:.5;transform:scaleX(1.15)scaleY(.5)}60%{opacity:.18;transform:scaleX(.9)scaleY(.9)}to{opacity:0;transform:scaleX(.8)scaleY(1)}}[data-motion=impact] .ono-ground{animation-name:ono-ground;animation-timing-function:var(--ease-out)}@keyframes ono-tremor{0%,to{transform:translate(0)}25%{transform:translateX(calc(1.7px * var(--amp)))}75%{transform:translateX(calc(-1.7px * var(--amp)))}}[data-motion=tremor] .ono-word>span{animation-name:ono-tremor;animation-timing-function:ease-in-out}@keyframes ono-rattle{0%{transform:translate(0)rotate(0)}20%{transform:translate(calc(2.6px * var(--amp)), calc(-1.8px * var(--amp))) rotate(calc(1.3deg * var(--amp)))}40%{transform:translate(calc(-3px * var(--amp)), calc(1.3px * var(--amp))) rotate(calc(-1.5deg * var(--amp)))}60%{transform:translate(calc(2px * var(--amp)), calc(2px * var(--amp))) rotate(calc(.9deg * var(--amp)))}80%{transform:translate(calc(-1.6px * var(--amp)), calc(-1.5px * var(--amp))) rotate(calc(-1.1deg * var(--amp)));animation-timing-function:linear}to{transform:translate(0)rotate(0)}}[data-motion=rattle] .ono-word>span{animation-name:ono-rattle;animation-timing-function:step-end}@keyframes ono-gait{0%{transform:translate(0)rotate(0)}25%{transform:translate(calc(1px * var(--amp)), calc(-7px * var(--amp))) rotate(calc(-3.5deg * var(--amp)))}50%{transform:translate(calc(3px * var(--amp)), 0) rotate(calc(1.5deg * var(--amp)))}75%{transform:translate(calc(1px * var(--amp)), calc(-4px * var(--amp))) rotate(calc(3deg * var(--amp)))}to{transform:translate(0)rotate(0)}}[data-motion=gait] .ono-word>span{animation-name:ono-gait;animation-timing-function:ease-in-out}@keyframes ono-glide{0%,to{transform:translate(0)}22%{transform:translateX(calc(-7px * var(--amp)))}62%{transform:translateX(calc(18px * var(--amp)))}}[data-motion=glide] .ono-word>span{animation-name:ono-glide;animation-timing-function:ease-in-out;animation-delay:1ms}@keyframes ono-float{0%,to{transform:translateY(0)rotate(0)}30%{transform:translateY(calc(-9px * var(--amp))) rotate(calc(-1.6deg * var(--amp)))}70%{transform:translateY(calc(5px * var(--amp))) rotate(calc(1.4deg * var(--amp)))}}[data-motion=float] .ono-word>span{animation-name:ono-float;animation-timing-function:ease-in-out}@keyframes ono-viscous{0%{animation-timing-function:cubic-bezier(.2,.9,.3,1);transform:translateY(0)scaleY(1)}35%{transform:translateY(calc(9px * var(--amp))) scaleY(calc(1 + .16 * var(--amp)))}55%{transform:translateY(calc(8px * var(--amp))) scaleY(calc(1 + .14 * var(--amp)));animation-timing-function:cubic-bezier(.7,0,.85,.6)}to{transform:translateY(0)scaleY(1)}}[data-motion=viscous] .ono-word>span{animation-name:ono-viscous;animation-delay:calc(1ms + var(--i,0) * var(--stag,40ms) * 1.8)}@keyframes ono-elastic{0%{transform:scale(1)}16%{transform:scale(calc(1 + .22 * var(--amp)), calc(1 - .26 * var(--amp)))}34%{transform:scale(calc(1 - .14 * var(--amp)), calc(1 + .18 * var(--amp)))}52%{transform:scale(calc(1 + .09 * var(--amp)), calc(1 - .11 * var(--amp)))}70%{transform:scale(calc(1 - .04 * var(--amp)), calc(1 + .05 * var(--amp)))}to{transform:scale(1)}}[data-motion=elastic] .ono-word>span{animation-name:ono-elastic;animation-timing-function:var(--ease-out);transform-origin:bottom}@keyframes ono-press{0%{transform:scaleY(1)translateY(0)}22%{transform:scaleY(calc(1 - .22 * var(--amp))) translateY(calc(3px * var(--amp)))}60%{transform:scaleY(calc(1 - .2 * var(--amp))) translateY(calc(3px * var(--amp)));animation-timing-function:cubic-bezier(.4,0,.6,1)}to{transform:scaleY(1)translateY(0)}}[data-motion=press] .ono-word>span{animation-name:ono-press;animation-timing-function:var(--ease-out);transform-origin:bottom}@keyframes ono-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}[data-motion=spin] .ono-word>span{animation-name:ono-spin;animation-timing-function:cubic-bezier(.45,.05,.55,.95)}@keyframes ono-sway{0%,to{transform:rotate(0)}25%{transform:rotate(calc(7deg * var(--amp)))}75%{transform:rotate(calc(-7deg * var(--amp)))}}[data-motion=sway] .ono-word>span{transform-origin:bottom;animation-name:ono-sway;animation-timing-function:ease-in-out}@keyframes ono-pulse{0%{transform:scale(1)}10%{transform:scale(calc(1 + .09 * var(--amp)))}20%{transform:scale(1)}32%{transform:scale(calc(1 + .17 * var(--amp)))}46%{transform:scale(1)}to{transform:scale(1)}}[data-motion=pulse] .ono-word>span{animation-name:ono-pulse;animation-timing-function:var(--ease-out)}@keyframes ono-flash-word{0%,to{opacity:.92;transform:scale(1)}22%{transform:scale(calc(1 + .05 * var(--amp)));opacity:1}}@keyframes ono-star{0%{opacity:0;transform:scale(0)rotate(0)}35%{transform:scale(calc(1 * var(--amp))) rotate(45deg);opacity:1}to{transform:scale(calc(.2 * var(--amp))) rotate(90deg);opacity:0}}[data-motion=flash] .ono-word>span{animation-name:ono-flash-word;animation-timing-function:var(--ease-out)}@keyframes ono-granular{0%{transform:translateY(calc(-4px * var(--amp)));opacity:.8}40%{transform:translateY(calc(4px * var(--amp)));opacity:1}to{opacity:1;transform:translateY(0)}}[data-motion=granular] .ono-word>span{animation-name:ono-granular;animation-timing-function:ease-in-out}@keyframes ono-diffuse{0%{opacity:1;transform:translate(0)}55%{transform:translateX(calc((var(--i) - (var(--moras) - 1) / 2) * 5px * var(--amp)));opacity:.75}to{opacity:1;transform:translate(0)}}[data-motion=diffuse] .ono-word>span{animation-name:ono-diffuse;animation-timing-function:ease-in-out;animation-delay:1ms}@keyframes ono-resonance{0%{transform:scale(calc(1 + .06 * var(--amp)));opacity:1}to{opacity:.86;transform:scale(1)}}@keyframes ono-ring{0%{opacity:.65;transform:scale(.25)}to{opacity:0;transform:scale(1.9)}}[data-motion=resonance] .ono-word>span{animation-name:ono-resonance;animation-timing-function:var(--ease-out)}@keyframes ono-thermal{0%,to{opacity:0}50%{opacity:.55}}[data-motion=thermal] .ono-thermal-wash{animation-name:ono-thermal;animation-timing-function:ease-in-out}[data-motion=thermal] .ono-word>span{animation-name:ono-resonance;animation-timing-function:ease-in-out}@keyframes ono-p-rise{0%{opacity:0;transform:translate(0)scale(.4)}30%{opacity:.85}to{transform:translate(calc(var(--dx) * 1px), calc(var(--dy) * 1px)) scale(1);opacity:0}}@keyframes ono-p-burst{0%{opacity:0;transform:translate(0)scale(.2)}18%{opacity:1}to{transform:translate(calc(var(--dx) * 1px), calc(var(--dy) * 1px)) scale(.6);opacity:0}}@keyframes ono-p-twinkle{0%,to{opacity:0;transform:scale(0)}45%{opacity:.95;transform:scale(1)}}@keyframes ono-p-drop{0%{transform:translateY(calc(var(--dy) * -1px)) scale(.6);opacity:0}25%{opacity:.9}to{transform:translateY(calc(var(--dy) * 1px)) scale(1);opacity:0}}@keyframes ono-p-streak{0%{transform:translateX(calc(var(--dx) * -1px)) scaleX(.3);opacity:0}40%{opacity:.8}to{transform:translateX(calc(var(--dx) * 1px)) scaleX(1);opacity:0}}@keyframes ono-p-orbit{0%{transform:rotate(0deg) translateX(calc(var(--dx) * 1px));opacity:0}20%{opacity:.85}to{transform:rotate(300deg) translateX(calc(var(--dx) * 1px));opacity:0}}@keyframes ono-p-shiver{0%,to{opacity:.5;transform:translate(0)}50%{transform:translate(calc(var(--dx) * .3px), calc(var(--dy) * .3px));opacity:.9}}.ono-p{animation-delay:calc(1ms + var(--pd,0) * 1ms)}[data-particles=spark] .ono-p{animation-name:ono-p-twinkle;animation-timing-function:ease-in-out}[data-particles=dust] .ono-p{animation-name:ono-p-rise;animation-timing-function:var(--ease-out)}[data-particles=burst] .ono-p{animation-name:ono-p-burst;animation-timing-function:var(--ease-out)}[data-particles=rings] .ono-p{animation-name:ono-ring;animation-timing-function:var(--ease-out)}[data-particles=drops] .ono-p{animation-name:ono-p-drop;animation-timing-function:cubic-bezier(.55,0,1,.45)}[data-particles=swirl] .ono-p{animation-name:ono-p-orbit;animation-timing-function:ease-in-out}[data-particles=trail] .ono-p{animation-name:ono-p-streak;animation-timing-function:var(--ease-out)}[data-particles=bubble] .ono-p{animation-name:ono-p-rise;animation-timing-function:ease-in-out}[data-particles=shadow] .ono-p{animation-name:ono-p-shiver;animation-timing-function:ease-in-out}[data-particles=heat] .ono-p{animation-name:ono-p-rise;animation-timing-function:ease-in-out}[data-particles=frost] .ono-p{animation-name:ono-p-twinkle;animation-timing-function:ease-in-out}[data-particles=notes] .ono-p{animation-name:ono-p-rise;animation-timing-function:ease-in-out}[data-motion=impact] .ono-shock,[data-motion=resonance] .ono-shock{animation-name:ono-ring;animation-timing-function:var(--ease-out)}.ono-shock--2{animation-delay:calc(1ms + var(--dur) * .22)}.ono-shock--3{animation-delay:calc(1ms + var(--dur) * .44)}[data-motion=flash] .ono-star{animation-name:ono-star;animation-timing-function:var(--ease-out)}.ono-trace{width:min(200px,70%);height:auto;color:var(--nm-accent-text);display:none}@supports (color:color-mix(in oklab, red, red)){.ono-trace{color:color-mix(in oklab, var(--nm-accent-text) 70%, transparent)}}.ono-trace path{fill:none;stroke:currentColor;stroke-width:2.4px;stroke-linecap:round;stroke-linejoin:round;opacity:.75}@media (prefers-reduced-motion:reduce){.ono-scene:not([data-motion=thermal]) .ono-word>span,.ono-scene:not([data-motion=thermal]) .ono-field *{animation:none!important}.ono-scene:not([data-motion=thermal]) .ono-field{display:none}.ono-scene:not([data-motion=thermal]) .ono-trace{opacity:.45;margin:0 auto;display:block;position:absolute;inset:auto 0 10px}.ono-scene:not([data-motion=thermal]) .ono-word{transform:translateY(-18px)}.ono-scene--sm:not([data-motion=thermal]) .ono-word{transform:translateY(-10px)}.ono-scene--sm:not([data-motion=thermal]) .ono-trace{width:min(120px,70%);inset:auto 0 4px}}@media (hover:hover) and (pointer:fine){.ono-card:hover .ono-scene[data-hover="1"] .ono-word>span,.ono-card:hover .ono-scene[data-hover="1"] .ono-field *{animation-play-state:running}}.ono-card:active .card{transition-duration:var(--dur-press);transform:translateY(1px)}@supports (color:color-mix(in srgb, red, red)){.ono-card:active .card{border-color:color-mix(in srgb, var(--nm-accent) 35%, var(--nm-line-strong))}}