@keyframes m-pop-in{0%{opacity:0;transform:scale(.96)translateY(6px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes m-fade-up{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes m-glow-out{0%{opacity:.85}to{opacity:0}}@keyframes m-sweep{0%{transform:translate(-130%)}to{transform:translate(230%)}}.m-preview-enter{animation:m-pop-in .28s var(--m-ease-pop) both}.m-preview-glow{pointer-events:none;border-radius:inherit;box-shadow:0 0 0 3px var(--m-accent-soft), 0 0 44px 10px var(--m-accent-soft);animation:m-glow-out .7s var(--m-ease-out) both;position:absolute;inset:0}.m-feed-enter{animation:m-fade-up var(--m-dur-fast) var(--m-ease-out) both}.m-fade-in,.m-stagger>*{animation:m-fade-up var(--m-dur-base) var(--m-ease-out) both}.m-stagger>:first-child{animation-delay:0s}.m-stagger>:nth-child(2){animation-delay:60ms}.m-stagger>:nth-child(3){animation-delay:.12s}.m-stagger>:nth-child(4){animation-delay:.18s}.m-skeleton{position:relative;overflow:hidden}.m-skeleton:after{content:"";background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--m-accent-soft) 20%, transparent), transparent);width:40%;animation:m-sweep 1.6s var(--m-ease-in-out) infinite;position:absolute;inset:0}.m-press{transition:transform var(--m-dur-press) var(--m-ease-out), box-shadow var(--m-dur-press) var(--m-ease-out), border-color var(--m-dur-press) var(--m-ease-out), color var(--m-dur-press) var(--m-ease-out), background-color var(--m-dur-press) var(--m-ease-out);touch-action:manipulation;-webkit-tap-highlight-color:transparent}.m-press:active:not(:disabled){transform:scale(.97)}.m-raised{box-shadow:var(--m-lift-soft)}.m-raised:active:not(:disabled){box-shadow:var(--m-lift-pressed)}.m-raised-accent{box-shadow:var(--m-lift), var(--m-glow-accent)}.m-raised-accent:active:not(:disabled){box-shadow:var(--m-lift-pressed)}.m-raised:active:not(:disabled),.m-raised-accent:active:not(:disabled){transform:translateY(1px)scale(.985)}@media (hover:hover) and (pointer:fine){.m-raised:hover:not(:disabled),.m-raised-accent:hover:not(:disabled){transform:translateY(-1px)}.m-raised-accent:hover:not(:disabled){box-shadow:var(--m-lift), 0 6px 22px color-mix(in srgb, var(--m-accent) 50%, transparent), 0 2px 6px color-mix(in srgb, var(--m-accent) 36%, transparent)}.m-raised:active:not(:disabled),.m-raised-accent:active:not(:disabled){transform:translateY(1px)scale(.985)}}.m-raised:disabled,.m-raised-accent:disabled{box-shadow:none}.m-hit{position:relative}.m-hit:before{content:"";position:absolute;inset:-10px}@keyframes m-tip-in{0%{opacity:0}to{opacity:1}}.m-tip-in{animation:m-tip-in .14s var(--m-ease-out) both}@keyframes m-spin-once{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.m-spin-once{animation:m-spin-once .42s var(--m-ease-in-out)}@media (hover:hover) and (pointer:fine){.m-press:hover:not(:disabled){transform:translateY(-1px)}.m-press:active:not(:disabled){transform:translateY(0)scale(.97)}}.m-maker{container-type:inline-size}.m-card{box-shadow:var(--m-shadow-sm)}.m-composer-shell{border:1px solid var(--m-rule);border-radius:var(--m-radius);background:var(--m-panel);transition:box-shadow var(--m-dur-fast) var(--m-ease-out), border-color var(--m-dur-fast) var(--m-ease-out);flex-direction:column;display:flex;box-shadow:inset 0 1px 2px #0000000f}.m-composer-shell:focus-within{border-color:var(--m-accent);box-shadow:inset 0 1px 2px #0000000f, 0 0 0 2px var(--m-accent)}.m-composer-actions{justify-content:flex-end;align-items:center;gap:.375rem;padding:0 .375rem .375rem;display:flex}@container (max-width:330px){.m-composer-secondary{display:none}}.m-hero-mio{--mio-by-height:96px;--mio-by-width:96px;--m-mio-size:min(var(--mio-by-height), var(--mio-by-width))}.m-hero>h2{font-size:clamp(1.0625rem,4.5cqi,1.5rem)}.m-hero>p{font-size:.875rem}@container (max-width:330px){.m-hero-mio{--mio-by-width:60px}}.m-classics{scrollbar-width:none;scroll-snap-type:x proximity;gap:.375rem;padding:3px 0;display:flex;overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 14px calc(100% - 14px),#0000 100%);mask-image:linear-gradient(90deg,#0000 0,#000 14px calc(100% - 14px),#0000 100%)}.m-classics::-webkit-scrollbar{display:none}.m-classics>*{scroll-snap-align:start;flex:none}@media (max-height:820px){.m-hero-mio{--mio-by-height:76px}.m-hero{gap:0}.m-hero>h2{margin-top:.5rem}.m-hero>p{margin-top:.375rem}}@media (max-height:700px){.m-hero-mio{--mio-by-height:60px}.m-hero-templates>p{display:none}}@media (max-height:660px){.m-hero-mio{--mio-by-height:48px}.m-hero-scroll{padding-top:.75rem;padding-bottom:.75rem}.m-hero .m-stagger button{padding-top:.3125rem;padding-bottom:.3125rem}.m-hero .m-stagger>:nth-child(3){display:none}}.m-stage{background:radial-gradient(900px 460px at 18% -12%, color-mix(in srgb, var(--m-accent-soft) 9%, transparent), transparent 62%), radial-gradient(760px 420px at 96% 108%, color-mix(in srgb, var(--m-accent) 7%, transparent), transparent 58%), var(--m-stage)}.m-screen{color:var(--m-screen-ink);background:radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--m-accent) 26%, transparent), transparent 62%), radial-gradient(90% 70% at 15% 100%, color-mix(in srgb, var(--m-accent-2) 22%, transparent), transparent 60%), var(--m-screen-bg);border:1px solid color-mix(in srgb, var(--m-accent) 22%, transparent);box-shadow:inset 0 1px 0 #ffffff1a, inset 0 0 80px #00000073, var(--m-shadow-lg);position:relative;overflow:hidden}.m-screen:before{content:"";pointer-events:none;background:linear-gradient(158deg,#ffffff17 0%,#ffffff05 34%,#0000 58%);position:absolute;inset:0}.m-screen-soft{color:var(--m-screen-ink-soft)}@keyframes m-breathe{0%,to{transform:translateY(0)scale(1)}50%{transform:translateY(-4px)scale(1.035)}}.m-breathe{animation:m-breathe 4s var(--m-ease-in-out) infinite}.m-mio-strip{background:linear-gradient(168deg, color-mix(in srgb, var(--m-accent-soft) 9%, var(--m-panel)), var(--m-panel) 74%)}.m-bubble-tail{position:relative}.m-bubble-tail:before{content:"";background:inherit;border-style:solid;border-width:1px 0 0 1px;border-color:inherit;border-radius:2px;width:11px;height:11px;margin-left:-5.5px;position:absolute;top:-6px;left:50%;transform:rotate(45deg)}.m-receipt-good,.m-receipt-bad{background:var(--m-ground)}.m-receipt-good{border:1px solid color-mix(in srgb, var(--m-accent) 34%, var(--m-line));background:color-mix(in srgb, var(--m-accent) 5%, var(--m-ground));animation:m-receipt-land .42s var(--m-ease-out) both}.m-receipt-bad{border:1px solid color-mix(in srgb, var(--m-bad) 34%, var(--m-line))}@keyframes m-receipt-land{0%{opacity:0;box-shadow:0 0 0 0 color-mix(in srgb, var(--m-accent) 30%, transparent);transform:translateY(5px)}60%{box-shadow:0 0 0 4px color-mix(in srgb, var(--m-accent) 13%, transparent)}to{opacity:1;box-shadow:0 0 0 0 color-mix(in srgb, var(--m-accent) 0%, transparent);transform:translateY(0)}}.m-drawer{transition:transform var(--m-dur-drawer) var(--m-ease-drawer), opacity var(--m-dur-drawer) var(--m-ease-drawer)}@keyframes m-pin-drop{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.m-pin-drop{animation:m-pin-drop .16s var(--m-ease-pop) both}@keyframes m-pin-note-in{0%{opacity:0}to{opacity:1}}.m-pin-note{animation:m-pin-note-in var(--m-dur-fast) var(--m-ease-out) both}@media (prefers-reduced-motion:reduce){@keyframes m-pop-in{0%{opacity:0}to{opacity:1}}@keyframes m-fade-up{0%{opacity:0}to{opacity:1}}@keyframes m-receipt-land{0%{opacity:0}to{opacity:1}}.m-stagger>*{animation-delay:0s!important}@keyframes m-pin-drop{0%{opacity:0}to{opacity:1}}.m-skeleton:after{background:color-mix(in srgb, var(--m-accent-soft) 12%, transparent);width:100%;animation:none;inset:0}.m-press{transition:box-shadow var(--m-dur-press) linear, border-color var(--m-dur-press) linear, color var(--m-dur-press) linear, background-color var(--m-dur-press) linear}.m-press:active:not(:disabled),.m-raised:active:not(:disabled),.m-raised-accent:active:not(:disabled){transform:none}.m-spin-once{opacity:.55;transition:opacity var(--m-dur-fast) linear;animation:none}.m-breathe{animation:none}.m-drawer{transition:opacity var(--m-dur-fast) linear}@media (hover:hover) and (pointer:fine){.m-press:hover:not(:disabled),.m-press:active:not(:disabled),.m-raised:hover:not(:disabled),.m-raised-accent:hover:not(:disabled){transform:none}}}@keyframes m-pop{0%{transform:scale(1)}38%{transform:scale(1.028)}to{transform:scale(1)}}.m-pop{animation:m-pop .42s var(--m-ease-out)}@media (prefers-reduced-motion:reduce){.m-pop{animation:none}}.m-device-shell{box-shadow:var(--m-shadow-lg);background:#d8d6e0;border:1px solid #c8c6d2;border-radius:30px;padding:9px}:root{--m-device-screen-radius:22px}.m-device-screen{border-radius:var(--m-device-screen-radius)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .m-device-shell{background:#23202c;border-color:#322e3d}}.m-device-shift{transition:filter var(--m-dur-base) var(--m-ease-in-out), opacity var(--m-dur-base) var(--m-ease-in-out)}.m-device-shift[data-shifting=true]{filter:blur(3px);opacity:.72}@media (prefers-reduced-motion:reduce){.m-device-shift[data-shifting=true]{filter:none;opacity:.85}}.m-making{flex-direction:column;gap:.375rem;display:flex}.m-making-step{border-radius:var(--m-radius-sm);color:var(--m-screen-ink-soft);transition:color var(--m-dur-base) var(--m-ease-out), background-color var(--m-dur-base) var(--m-ease-out);align-items:flex-start;gap:.625rem;padding:.5rem .625rem;display:flex}.m-making-step[data-state=writing]{color:var(--m-screen-ink);background:#ffffff0f}.m-making-step[data-state=done]{color:var(--m-screen-ink)}.m-making-step[data-state=waiting]{color:var(--m-screen-ink-soft)}.m-making-mark{flex:none;width:1.05rem;height:1.05rem;margin-top:.05rem;position:relative}.m-making-mark:before{content:"";opacity:.35;border:1.5px solid;border-radius:999px;position:absolute;inset:0}.m-making-step[data-state=done] .m-making-mark:after{content:"";background:var(--m-accent);border-radius:999px;position:absolute;inset:3px}.m-making-step[data-state=writing] .m-making-mark:after{content:"";border:1.5px solid #0000;border-top-color:var(--m-accent);border-right-color:var(--m-accent);border-radius:999px;animation:.9s linear infinite m-making-spin;position:absolute;inset:0}@keyframes m-making-spin{to{transform:rotate(360deg)}}.m-making-swatch{border-radius:var(--m-radius-sm);width:1.5rem;height:1.5rem;animation:m-making-pop var(--m-dur-base) var(--m-ease-pop) both;box-shadow:inset 0 0 0 1px #ffffff38,0 1px 3px #00000059}@keyframes m-making-pop{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion:reduce){.m-making-step[data-state=writing] .m-making-mark:after,.m-making-swatch{animation:none}}.m-spec{align-items:center;gap:.5rem;display:flex}.m-spec-track{background:color-mix(in srgb, var(--m-ink) 12%, transparent);border-radius:999px;flex:none;width:3.25rem;height:3px;overflow:hidden}.m-spec-fill{background:var(--m-accent);transform-origin:0;height:100%;transition:transform var(--m-dur-base) var(--m-ease-out);border-radius:999px}@media (prefers-reduced-motion:reduce){.m-spec-fill{transition:none}}
