.motion-tool{max-width:58rem;margin-inline:auto}.motion-workspace{border:1px solid var(--color-base-300);background:var(--color-base-200);border-radius:.75rem;padding:1rem}.motion-purpose{border:1px solid var(--color-base-300);background:var(--color-base-100);border-radius:.5rem;grid-template-columns:minmax(0,1.25fr) minmax(15rem,.75fr);gap:1rem;margin-bottom:1rem;padding:1rem;display:grid}.motion-purpose h3{margin:0;font-size:1.15rem;line-height:1.35}.motion-purpose p{margin:.25rem 0 0;font-size:1rem;line-height:1.5}.motion-purpose small{color:color-mix(in srgb,var(--color-base-content) 72%,transparent);margin-top:.45rem;font-size:.875rem;line-height:1.5;display:block}.motion-auto-hint{border-inline-start:1px solid var(--color-base-300);flex-direction:column;justify-content:center;align-items:flex-start;gap:.5rem;padding-inline-start:1rem;font-size:.9rem;line-height:1.5;display:flex}.motion-auto-hint span{background:color-mix(in srgb,var(--color-primary) 18%,var(--color-base-100));border-radius:.3rem;flex:none;padding:.25rem .55rem;font-weight:700}.motion-input-scene{grid-template-columns:minmax(17rem,1fr) minmax(17rem,.75fr);align-items:end;gap:clamp(1rem,4vw,3rem);max-width:48rem;margin:0 auto;padding:.25rem 0;display:grid}.motion-runner-node,.motion-time-node{min-width:0}.motion-time-node{flex-direction:column;align-items:center;display:flex}.motion-input-scene .motion-field{box-sizing:border-box;width:100%}.motion-picture-slot{flex-direction:column;justify-content:center;align-items:center;height:5.75rem;display:flex}.motion-clock-picture{border:4px solid var(--color-base-content);background:var(--color-base-100);box-sizing:border-box;border-radius:50%;width:4.25rem;height:4.25rem;position:relative}.motion-clock-picture:before,.motion-clock-picture:after{content:"";background:var(--color-base-content);transform-origin:top;border-radius:2px;width:3px;position:absolute;inset-block-start:50%;inset-inline-start:50%}.motion-clock-picture:before{height:1.15rem;transform:translate(-1.5px,-1.15rem)}.motion-clock-picture:after{height:.95rem;transform:translate(-1.5px)rotate(-48deg)}.motion-clock-picture span{background:var(--color-primary);border-radius:.2rem .2rem 0 0;width:1.5rem;height:.55rem;position:absolute;inset-block-start:-.65rem;inset-inline-start:50%;transform:translate(-50%)}.motion-runner-track{height:5.75rem;position:relative}.motion-object-picture{width:8rem;height:3.7rem;position:absolute;inset-block-end:.7rem;inset-inline-start:50%;transform:translate(-50%)}.motion-object-lines{background:var(--color-primary);width:2rem;height:3px;box-shadow:.65rem 1rem 0 var(--color-primary);border-radius:2px;position:absolute;inset-block-start:1.2rem;inset-inline-start:.15rem}.motion-runner-head{border:3px solid var(--color-base-content);background:var(--color-primary);box-sizing:border-box;border-radius:50%;width:1rem;height:1rem;position:absolute;inset-block-start:.05rem;inset-inline-start:5.2rem}.motion-runner-body,.motion-runner-arm-one,.motion-runner-arm-two,.motion-runner-leg-one,.motion-runner-leg-two{background:var(--color-base-content);transform-origin:0;border-radius:2px;height:3px;position:absolute}.motion-runner-body{width:1.85rem;inset-block-start:1.05rem;inset-inline-start:5.25rem;transform:rotate(112deg)}.motion-runner-arm-one{width:1.65rem;inset-block-start:1.45rem;inset-inline-start:4.75rem;transform:rotate(14deg)}.motion-runner-arm-two{width:1.5rem;inset-block-start:1.45rem;inset-inline-start:4.8rem;transform:rotate(155deg)}.motion-runner-leg-one{width:2.35rem;inset-block-start:2.65rem;inset-inline-start:4.6rem;transform:rotate(22deg)}.motion-runner-leg-two{width:2.15rem;inset-block-start:2.65rem;inset-inline-start:4.6rem;transform:rotate(145deg)}.motion-distance-picture{z-index:1;width:min(22rem,100% - 1rem);height:1.4rem;position:absolute;inset-block-end:0;inset-inline-start:50%;transform:translate(-50%)}.motion-distance-picture:before{content:"";background:var(--color-base-content);border-radius:2px;height:3px;position:absolute;inset-block-start:.65rem;inset-inline:0}.motion-distance-picture:after,.motion-distance-picture span:after{content:"";border:3px solid var(--color-base-content);background:var(--color-base-200);box-sizing:border-box;border-radius:50%;width:.85rem;height:.85rem;position:absolute;inset-block-start:.3rem}.motion-distance-picture:after{inset-inline-start:0}.motion-distance-picture span:after{inset-inline-end:0}.motion-field{background:0 0;border:0;min-width:0;padding:0}.motion-field>label{text-align:center;min-height:1.5rem;margin-bottom:.6rem;font-size:.875rem;font-weight:650;display:block}.motion-card{border:1px solid var(--color-base-300);border-top:.35rem solid var(--color-primary);border-radius:var(--radius-box);background:var(--color-base-100);box-shadow:0 .6rem 1.8rem color-mix(in oklab,var(--color-base-content) 7%,transparent);padding:clamp(1rem,3vw,1.5rem)}.motion-card-heading{justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.5rem;display:flex}.motion-card-heading h2{margin:.2rem 0 0;font-size:1.4rem;font-weight:650;line-height:1.35}.motion-kicker{color:var(--color-primary);margin:0;font-size:.875rem;font-weight:700}.motion-privacy{color:color-mix(in srgb, var(--color-base-content) 65%, transparent);text-align:end;margin:0;font-size:.75rem;font-weight:400;line-height:1.5}.motion-targets{border:0;min-width:0;margin:0 0 1.5rem;padding:0}.motion-targets legend{margin-bottom:.5rem;font-size:.875rem;font-weight:600}.motion-target-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;display:grid}.motion-target{border:1px solid var(--color-base-300);cursor:pointer;text-align:center;overflow-wrap:anywhere;border-radius:.5rem;justify-content:center;align-items:center;gap:.5rem;min-height:44px;padding:.6rem .75rem;display:flex}.motion-target.active{border-color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 16%,var(--color-base-100));font-weight:650}.motion-target input{accent-color:var(--color-primary)}.motion-fields{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:1rem;display:grid}.motion-value-unit{grid-template-columns:minmax(0,1fr) minmax(5rem,.65fr) max-content;gap:.5rem;display:grid}.motion-result-unit.motion-value-unit{grid-template-columns:minmax(0,1fr) minmax(5rem,.65fr)}.motion-field :is(.input,.select){box-sizing:border-box;width:100%;min-width:0;height:44px;min-height:44px;font-size:1rem}.motion-field-clear{border:1px solid var(--color-base-300);background:var(--color-base-100);min-width:4.5rem;height:44px;color:var(--color-base-content);cursor:pointer;border-radius:.5rem;place-items:center;padding:.5rem .75rem;font-size:.875rem;font-weight:650;line-height:1;display:grid}.motion-field-clear:hover{border-color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 10%,var(--color-base-100))}.motion-field-clear:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.motion-field.calculated :is(.input,.motion-duration,.motion-pace-inputs){background:color-mix(in srgb,var(--color-primary) 12%,var(--color-base-100))}.motion-field input[readonly]{color:var(--color-base-content);cursor:default}.motion-duration,.motion-pace-inputs{border-radius:.5rem;gap:.5rem;display:grid}.motion-duration{grid-template-columns:repeat(3,minmax(0,1fr)) max-content}.motion-duration label,.motion-pace-inputs label{flex-direction:column;min-width:0;display:flex}.motion-duration span,.motion-pace-inputs span{color:color-mix(in srgb,var(--color-base-content) 70%,transparent);text-align:center;overflow-wrap:anywhere;order:2;margin-top:.25rem;font-size:.875rem;line-height:1.4}.motion-pace-row{grid-template-columns:minmax(0,1.15fr) minmax(6.5rem,.8fr) 44px;align-items:start;gap:.5rem;display:grid}.motion-result-unit.motion-pace-row{grid-template-columns:minmax(0,1fr) minmax(6.5rem,.8fr)}.motion-pace-inputs{grid-template-columns:repeat(2,minmax(0,1fr))}.motion-actions{justify-content:center;margin-top:1.5rem;display:flex}.motion-actions .btn{white-space:normal;width:min(18rem,100%);min-width:0;height:auto;min-height:44px;padding:.625rem 1rem;font-size:.875rem;line-height:1.25rem}.motion-output{border:1px solid color-mix(in srgb,var(--color-primary) 45%,var(--color-base-300));background:color-mix(in srgb,var(--color-primary) 10%,var(--color-base-100));border-radius:.5rem;margin-top:1rem;padding:1rem}.motion-output>h3{text-align:center;margin:0 0 .85rem;font-size:1rem}.motion-output .motion-field{width:min(24rem,100%);margin-inline:auto}.motion-output.has-error{border-color:var(--color-error)}.motion-result{border:1px solid color-mix(in srgb,var(--color-primary) 45%,var(--color-base-300));background:color-mix(in srgb,var(--color-primary) 12%,var(--color-base-100));overflow-wrap:anywhere;border-radius:.5rem;margin-top:1.25rem;padding:1rem}.motion-result span{color:color-mix(in srgb,var(--color-base-content) 67%,transparent);font-size:.8rem;display:block}.motion-result strong{margin-top:.25rem;font-size:clamp(1.15rem,3vw,1.55rem);line-height:1.4;display:block}.motion-result.has-error{border-color:var(--color-error);background:color-mix(in srgb,var(--color-error) 8%,var(--color-base-100))}.motion-result.has-error strong{color:var(--color-error);font-size:1rem}.motion-result-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.motion-guide .motion-example{border:1px solid var(--color-base-300);background:var(--color-base-200);border-radius:.5rem;padding:1rem}@media (width<=47.99rem){.motion-purpose{grid-template-columns:1fr}.motion-auto-hint{border-inline-start:0;border-top:1px solid var(--color-base-300);padding:1rem 0 0}.motion-input-scene{grid-template-columns:1fr;gap:1.25rem;max-width:28rem}}@media (width<=39.99rem){.motion-card-heading{align-items:flex-start}.motion-privacy{max-width:11rem}.motion-target-grid{gap:.5rem}}@media (width<=23rem){.motion-card-heading{flex-direction:column}.motion-privacy{text-align:start;max-width:none}.motion-auto-hint{flex-direction:column;align-items:flex-start}}