.motion-workspace{max-width:1500px;margin:auto}.motion-intro{display:flex;justify-content:space-between;align-items:center;gap:35px;padding:10px 0 30px}.motion-kicker{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:700;letter-spacing:1.5px;color:#4860d9}.motion-kicker svg{width:17px;height:17px}.motion-intro h2{font-size:32px;letter-spacing:-1px;margin:12px 0;color:#122c42}.motion-intro p{max-width:660px;color:#6b7d90;line-height:1.8;font-size:13px;margin:0}.motion-status{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:10px 15px;background:#e9eef4;color:#60768b;border:1px solid #dce4ed;border-radius:25px;font-size:11px;font-weight:600}.motion-status:before{content:'';width:7px;height:7px;background:#92a4b7;border-radius:50%}.motion-status.is-on{background:#e8f6f0;color:#197b57;border-color:#caeadb}.motion-status.is-on:before{background:#23a172}.motion-columns{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(320px,1fr);align-items:start;gap:28px}.motion-form{min-width:0}.motion-panel.panel{padding:27px;margin:0 0 23px;border:1px solid #e1e9f2;border-radius:16px;box-shadow:0 4px 20px #14365903}.motion-panel h2{font-size:17px;color:#172e43;margin:0 0 5px}.motion-panel p{font-size:12px;line-height:1.8;color:#77879a;margin:0}.motion-panel-head{display:flex;align-items:center;gap:15px;margin-bottom:23px}.motion-icon{display:grid;place-items:center;width:46px;height:46px;background:#edf2ff;color:#4f67ef;border-radius:13px}.motion-icon svg{width:24px;height:24px}.motion-activation{position:relative;display:flex;align-items:center;justify-content:space-between;gap:25px;padding:20px;background:#f5f8ff;border:1px solid #e4ebff;border-radius:12px;cursor:pointer;margin:0!important}.motion-activation strong{display:block;color:#173149;font-size:13px}.motion-activation small{display:block;color:#74859a;font-size:11px;line-height:1.8;margin-top:4px;max-width:360px}.motion-activation input{position:absolute;right:20px;width:46px;height:26px;opacity:0;margin:0;cursor:pointer;z-index:2}.motion-switch{width:46px;height:26px;border-radius:20px;background:#c8d3e1;position:relative;flex-shrink:0;transition:background .2s}.motion-switch:after{content:'';position:absolute;left:4px;top:4px;width:18px;height:18px;background:white;border-radius:50%;box-shadow:0 1px 4px #21355326;transition:transform .2s}.motion-activation input:checked+.motion-switch{background:#4c68ff}.motion-activation input:checked+.motion-switch:after{transform:translateX(20px)}.motion-activation input:focus-visible+.motion-switch{outline:3px solid #8ca6ff;outline-offset:4px}.motion-section-title{display:flex;gap:14px;align-items:flex-start;margin-bottom:23px}.motion-section-title>span{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#f0f4fc;color:#5675b6;font-size:11px;font-weight:700;flex-shrink:0}.motion-effects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.motion-effect{position:relative;display:flex;flex-direction:column;gap:9px;padding:18px 15px;border:1px solid #e0e8f2;border-radius:12px;cursor:pointer;min-width:0;margin:0!important;background:#fff;transition:border-color .15s,box-shadow .15s}.motion-effect>input{position:absolute;opacity:0;top:12px;right:12px;width:20px;height:20px;margin:0}.motion-effect:has(input:checked){border-color:#617cff;box-shadow:0 0 0 2px #617cff16;background:#f7f9ff}.motion-effect:has(input:focus-visible){outline:3px solid #9eb4ff;outline-offset:2px}.motion-effect-symbol{width:38px;height:38px;display:grid;place-items:center;color:#5472dd;background:linear-gradient(130deg,#edf2ff,#e6f7ff);border-radius:10px;font:26px/1 Arial,sans-serif}.motion-effect strong{font-size:11px;color:#19324a;line-height:1.5}.motion-effect small{font-size:10px;color:#7a8ba1;line-height:1.7;flex:1}.motion-effect-check{display:none;position:absolute;right:12px;top:12px;color:#4c69f1;font-size:13px}.motion-effect input:checked~.motion-effect-check{display:block}.motion-ranges{display:grid;grid-template-columns:1fr 1fr;gap:25px}.motion-range>label{display:flex!important;align-items:center;justify-content:space-between;gap:10px;font-size:11px;font-weight:600;color:#31495f;margin:0 0 15px!important}.motion-range output{font-size:10px;padding:4px 8px;background:#f0f4ff;color:#4e69c7;border-radius:5px;white-space:nowrap}.motion-range input{width:100%!important;min-height:20px;padding:0!important;margin:0;accent-color:#5574f7;border:0!important;box-shadow:none!important;cursor:pointer}.motion-range>div{display:flex;justify-content:space-between;color:#8b9aae;font-size:10px;margin-top:5px}.motion-select-label{display:block;margin:25px 0 9px!important;font-size:12px;font-weight:600;color:#31495f}.motion-form select{width:100%;padding:12px 14px;border:1px solid #d9e4f2;border-radius:9px;background:#f9fbff;font-size:12px;color:#35516d;min-height:45px}.motion-targets{display:grid;gap:10px}.motion-targets>label{display:flex;align-items:center;gap:14px;padding:15px;border:1px solid #e4ebf5;border-radius:10px;cursor:pointer;margin:0!important}.motion-targets>label:has(input:checked){background:#f9fbff;border-color:#d1ddfc}.motion-targets svg{width:21px;height:21px;color:#6380bd;flex-shrink:0}.motion-targets>label>span{flex:1}.motion-targets strong,.motion-other strong{display:block;font-size:12px;color:#284259}.motion-targets small,.motion-other small{display:block;font-size:10px;color:#8190a1;line-height:1.8;margin-top:3px}.motion-targets input,.motion-other input{width:17px!important;height:17px;min-height:0!important;margin:0;accent-color:#5376fb;flex-shrink:0}.motion-other{display:grid;gap:18px;margin-top:23px;padding-top:20px;border-top:1px solid #e7eef6}.motion-other label{display:flex;align-items:flex-start;gap:12px;margin:0!important;cursor:pointer}.motion-other input{margin-top:3px}.motion-accessibility{display:flex;gap:9px;align-items:flex-start;margin-top:22px!important;padding:12px;border-radius:9px;background:#f1f8f5;color:#5c8074!important;font-size:10px!important}.motion-accessibility svg{width:16px;height:16px;flex-shrink:0;margin-top:3px}.motion-save{display:flex;flex-wrap:wrap;gap:12px;padding:0 0 30px}.motion-save>.button{font-size:11px;padding:13px 20px;min-height:44px}.motion-save>span{width:100%;font-size:11px;color:#8797a8;padding:3px 0}.motion-save>span.is-dirty{color:#9b6a26}.motion-preview{position:sticky;top:25px;min-width:0}.motion-preview-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:23px}.motion-preview-heading .motion-kicker{font-size:9px;margin-bottom:9px}.motion-preview-heading h2{font-size:21px}.motion-replay{display:grid;place-items:center;width:37px;height:37px;border:1px solid #d9e4f5;border-radius:50%;background:#f6f9ff;color:#6280d5;cursor:pointer;flex-shrink:0}.motion-replay svg{width:20px;height:20px}.motion-demo{border:1px solid #e0e6ee;border-radius:13px;overflow:hidden;background:#faf6ed;isolation:isolate}.motion-demo-nav{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:13px 17px;background:#fff9f1;color:#353126;font-size:10px;letter-spacing:1px}.motion-demo-nav>span{font-size:6px;color:#c0b49b}.motion-demo-photo{height:175px;overflow:hidden;background:#efe5d6}.motion-demo-photo>img{display:block;width:100%;height:100%;object-fit:cover}.motion-demo-copy{padding:24px;color:#2c291f}.motion-demo-copy>small{font-size:7px;letter-spacing:2px;color:#9f7a46}.motion-demo-copy>h3{font:27px/1.18 Georgia,serif;letter-spacing:-.5px;margin:12px 0}.motion-demo-copy>p{font-size:10px;line-height:1.8;color:#8c816e}.motion-demo-button{display:inline-block;font-size:9px;background:#967446;color:white;padding:8px 16px;margin-top:12px;border-radius:3px}.motion-demo-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0 16px 18px}.motion-demo-cards>div{display:flex;flex-direction:column;align-items:center;gap:9px;padding:14px 5px;background:#fff9ef;border:1px solid #e8dfd0;border-radius:6px;color:#9e8056;font-size:8px}.motion-demo-cards svg{width:19px;height:19px}.motion-demo[data-design=timeora],.motion-demo[data-design=barber],.motion-demo[data-design=elysia]{background:#111412}.motion-demo[data-design=timeora] .motion-demo-nav,.motion-demo[data-design=barber] .motion-demo-nav,.motion-demo[data-design=elysia] .motion-demo-nav{background:#080909;color:#e3ceaa}.motion-demo[data-design=timeora] .motion-demo-copy,.motion-demo[data-design=barber] .motion-demo-copy,.motion-demo[data-design=elysia] .motion-demo-copy{color:#faf3e6}.motion-demo[data-design=timeora] .motion-demo-copy>p,.motion-demo[data-design=barber] .motion-demo-copy>p,.motion-demo[data-design=elysia] .motion-demo-copy>p{color:#afa794}.motion-demo[data-design=nail]{background:#fff3ef}.motion-demo[data-design=nail] .motion-demo-button{background:#bb4364}.motion-demo[data-design=nail] .motion-demo-copy>small{color:#b34765}.motion-preview-caption{font-size:10px!important;color:#8393a4!important;line-height:1.8!important;margin:18px 0!important;min-height:36px}.motion-preview-play{width:100%;justify-content:center;font-size:11px;min-height:42px}.motion-visit{display:block;text-align:center;margin-top:17px;font-size:10px;color:#5a79c0}.motion-tip{display:flex;gap:13px;padding:17px 20px;border:1px solid #dce8fa;background:#f1f6ff;border-radius:12px;color:#6c83a0}.motion-tip>svg{width:20px;height:20px;flex-shrink:0;margin-top:3px}.motion-tip p{font-size:11px;line-height:1.9;margin:0}.motion-tip strong{display:block;color:#4c6b93;margin-bottom:3px}
@media(max-width:1150px){.motion-columns{grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr);gap:20px}.motion-effects{grid-template-columns:repeat(2,minmax(0,1fr))}.motion-ranges{grid-template-columns:1fr}.motion-panel.panel{padding:22px}.motion-intro{align-items:flex-start}.motion-intro h2{font-size:28px}}
@media(max-width:900px){.motion-columns{grid-template-columns:1fr}.motion-preview{position:static;grid-row:1}.motion-preview>.motion-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,1fr);gap:0 25px;align-items:center}.motion-preview-heading{grid-column:1}.motion-demo{grid-row:1/6;grid-column:2}.motion-preview-caption{grid-column:1}.motion-preview-play,.motion-visit{grid-column:1}.motion-tip{margin-bottom:24px}.motion-ranges{grid-template-columns:1fr 1fr}.motion-effects{grid-template-columns:repeat(3,minmax(0,1fr))}.motion-intro{flex-direction:column;gap:18px}.motion-demo-photo{height:130px}}
@media(max-width:600px){.motion-intro h2{font-size:26px}.motion-intro p{font-size:12px}.motion-panel.panel{padding:20px;border-radius:12px}.motion-preview>.motion-panel{display:block}.motion-preview{grid-row:auto}.motion-effects{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.motion-effect{padding:15px 12px}.motion-ranges{grid-template-columns:1fr;gap:23px}.motion-activation{padding:17px;gap:20px}.motion-activation small{font-size:10px}.motion-save>.button{width:100%;justify-content:center}.motion-demo-photo{height:180px}.motion-preview-heading h2{font-size:20px}.motion-targets>label{padding:13px}.motion-save{padding-bottom:15px}}
@media(prefers-reduced-motion:reduce){.motion-switch,.motion-switch:after,.motion-effect{transition:none}}