.operation-tutorial{--tutorial-ink:var(--user-ink,#252035);--tutorial-muted:var(--user-muted,#696276);--tutorial-accent:var(--user-accent,#7244ce);--tutorial-soft:var(--user-accent-soft,#eee7ff);width:100%;max-width:760px;min-width:0;margin-inline:auto;padding:8px 0;color:var(--tutorial-ink);text-align:left}.operation-tutorial .operation-tutorial__header{margin:0 0 12px}.operation-tutorial .operation-tutorial__header h2{margin:0;color:var(--tutorial-ink);font-size:19px;font-weight:700;line-height:1.4}.operation-tutorial .studio-icon{flex:none;width:16px;height:16px}.operation-tutorial-photo{display:block;width:100%;height:100%;object-fit:contain}.operation-tutorial .operation-tutorial__studio{position:relative;display:grid;grid-template-columns:minmax(110px,.28fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);height:300px;overflow:hidden;isolation:isolate;border:1px solid var(--user-line,#e8e2f0);border-radius:12px;background:var(--user-surface,#fff)}.operation-tutorial .operation-tutorial__source{display:flex;flex-direction:column;gap:6px;min-width:0;min-height:0;padding:12px;border-right:1px solid var(--user-line,#e8e2f0);background:var(--user-canvas,#fbfaff)}.operation-tutorial .operation-tutorial__source>strong{color:var(--tutorial-ink);font-size:13px;line-height:1.4}.operation-tutorial .operation-tutorial__source>span{color:var(--tutorial-muted);font-size:11px;line-height:1.4}.operation-tutorial .operation-tutorial__source-photo{display:grid;flex:none;place-items:center;width:100%;height:90px;overflow:hidden;border:1px solid var(--user-line,#e8e2f0);border-radius:8px;background:var(--user-surface,#fff)}.operation-tutorial .operation-tutorial__source-photo.is-empty{gap:3px;align-content:center;border-style:dashed;color:var(--tutorial-accent)}.operation-tutorial .operation-tutorial__source-photo.is-empty .studio-icon{width:24px;height:24px}.operation-tutorial .operation-tutorial__source-photo.is-empty>span{font-size:11px}.operation-tutorial .operation-tutorial__demo-image{display:block;width:100%;height:100%;min-height:0;max-height:100%;object-fit:contain}.operation-tutorial .operation-tutorial__image-fallback{align-self:center;color:var(--tutorial-muted);font-size:11px}.operation-tutorial .operation-tutorial__demo-image.is-entering{animation:tutorial-photo-enter .5s cubic-bezier(.16,1,.3,1) both}.operation-tutorial .operation-tutorial__file{display:flex;align-items:center;gap:4px;font-size:11px}.operation-tutorial .operation-tutorial__file.is-ready{color:var(--complete,#34705b)}.operation-tutorial .operation-tutorial__mock-field{display:grid;grid-gap:4px;gap:4px;color:var(--tutorial-muted);font-size:11px}.operation-tutorial .operation-tutorial__mock-field strong{display:flex;justify-content:space-between;align-items:center;gap:4px;padding:6px 8px;border:1px solid var(--field-line,#d5d0da);border-radius:7px;background:var(--user-surface,#fff);color:var(--tutorial-ink);font-size:11px;font-weight:500}.operation-tutorial .operation-tutorial__category{display:inline-flex;align-items:center;gap:5px}.operation-tutorial .operation-tutorial__placement{display:grid;grid-gap:5px;gap:5px;font-size:11px;color:var(--tutorial-muted)}.operation-tutorial .operation-tutorial__placement strong{display:flex;align-items:center;gap:4px;color:var(--tutorial-accent);font-size:11px;font-weight:500;line-height:1.4}.operation-tutorial .operation-tutorial__radio{width:11px;height:11px;flex:none;border:3px solid var(--tutorial-accent);border-radius:50%;background:var(--user-surface,#fff)}.operation-tutorial .operation-tutorial__canvas{min-width:0;min-height:0;padding:12px;animation:tutorial-view-enter .3s cubic-bezier(.16,1,.3,1) both}.operation-tutorial .operation-tutorial__view{display:flex;flex-direction:column;gap:10px;width:100%;height:100%;min-width:0;min-height:0}.operation-tutorial .operation-tutorial__view-heading{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px;min-height:18px}.operation-tutorial .operation-tutorial__view-heading>strong{color:var(--tutorial-ink);font-size:13px;line-height:1.4}.operation-tutorial .operation-tutorial__upload-view{justify-content:center;align-items:center;gap:12px;text-align:center}.operation-tutorial .operation-tutorial__upload-view>.studio-icon{width:32px;height:32px;color:var(--tutorial-accent)}.operation-tutorial .operation-tutorial__upload-view>strong{color:var(--tutorial-ink);font-size:14px}.operation-tutorial .operation-tutorial__upload-view>span{border-radius:8px;padding:7px 12px;background:var(--tutorial-accent);color:var(--user-surface,#fff);font-size:11px}.operation-tutorial .operation-tutorial__drag-source{width:82px;height:110px;overflow:hidden;border:1px solid var(--user-line,#e8e2f0);border-radius:8px;background:var(--user-surface,#fff)}.operation-tutorial[data-drag-phase=drop] .operation-tutorial__drag-source,.operation-tutorial[data-drag-phase=grab] .operation-tutorial__drag-source,.operation-tutorial[data-drag-phase=move] .operation-tutorial__drag-source,.operation-tutorial[data-drag-phase=over] .operation-tutorial__drag-source{opacity:.3}.operation-tutorial[data-drag-phase=drop] .operation-tutorial__source-photo,.operation-tutorial[data-drag-phase=over] .operation-tutorial__source-photo{border-color:var(--tutorial-accent);background:var(--tutorial-soft)}.operation-tutorial .operation-tutorial__selection-bar{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:6px 8px;border-radius:6px;background:var(--tutorial-soft);color:var(--tutorial-muted);font-size:11px}.operation-tutorial .operation-tutorial__mock-primary{display:inline-flex;flex:none;align-items:center;justify-content:center;min-height:28px;padding:5px 8px;border-radius:6px;background:var(--tutorial-accent);color:var(--user-surface,#fff);font-size:11px;font-weight:600;transition:transform .16s ease}.operation-tutorial .operation-tutorial__mock-primary.is-disabled{background:var(--disabled-background,#e9e4ee);color:var(--disabled-text,#686073)}.operation-tutorial .operation-tutorial__mock-primary.is-pressed{animation:tutorial-button-press .7s ease .3s both}.operation-tutorial .operation-tutorial__templates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:10px;gap:10px;flex:1 1;min-height:0}.operation-tutorial .operation-tutorial__templates.is-single{grid-template-columns:minmax(0,1fr);width:min(100%,190px);align-self:center}.operation-tutorial .operation-tutorial__template{display:flex;flex-direction:column;gap:6px;min-width:0;min-height:0;overflow:hidden;padding:3px 3px 6px;border:1px solid var(--user-line,#e8e2f0);border-radius:8px;background:var(--user-surface,#fff);transition:border-color .18s ease,background-color .18s ease}.operation-tutorial .operation-tutorial__template[data-selected=true]{border-color:var(--tutorial-accent);background:var(--tutorial-soft)}.operation-tutorial .operation-tutorial__template-photo{position:relative;flex:1 1;min-height:0;overflow:hidden;border-radius:6px}.operation-tutorial .operation-tutorial__template>strong{display:block;margin:0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tutorial-ink);font-size:11px;font-weight:600;line-height:1.4}.operation-tutorial .operation-tutorial__check{display:grid;position:absolute;right:5px;bottom:5px;width:20px;height:20px;place-items:center;border-radius:50%;background:var(--user-muted,#696276);color:var(--user-surface,#fff)}.operation-tutorial .operation-tutorial__template[data-selected=true] .operation-tutorial__check{background:var(--tutorial-accent)}.operation-tutorial .operation-tutorial__complete{display:inline-flex;align-items:center;gap:3px;color:var(--complete,#34705b);font-size:11px;line-height:1.4}.operation-tutorial .operation-tutorial__result-template{color:var(--tutorial-muted);font-size:11px;font-weight:500}.operation-tutorial .operation-tutorial__candidate{color:var(--tutorial-ink);font-size:11px;font-weight:600}.operation-tutorial .operation-tutorial__results{display:grid;flex:1 1;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:12px;gap:12px;min-height:0}.operation-tutorial .operation-tutorial__results.is-single{grid-template-columns:minmax(0,1fr);width:min(100%,200px);align-self:center}.operation-tutorial .operation-tutorial__result{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0}.operation-tutorial .operation-tutorial__result-photo{position:relative;flex:1 1;min-height:0;overflow:hidden;border-radius:8px;background:var(--user-canvas,#fbfaff)}.operation-tutorial .operation-tutorial__expand{display:inline-flex;position:absolute;right:5px;bottom:5px;align-items:center;gap:3px;padding:4px 5px;border-radius:6px;background:var(--user-surface,#fff);color:var(--tutorial-muted);font-size:11px}.operation-tutorial .operation-tutorial__expand .studio-icon{width:12px;height:12px}.operation-tutorial .operation-tutorial__mock-download{display:flex;justify-content:center;align-items:center;gap:5px;min-height:30px;padding:5px 8px;border:1px solid var(--field-line,#d5d0da);border-radius:7px;color:var(--tutorial-ink);font-size:11px}.operation-tutorial .operation-tutorial__mock-download.is-downloaded{border-color:var(--complete,#34705b);color:var(--complete,#34705b)}.operation-tutorial .operation-tutorial__mock-download:not(.is-downloaded){border-color:var(--tutorial-accent);background:var(--tutorial-accent);color:var(--user-surface,#fff)}.operation-tutorial .operation-tutorial__generating{justify-content:center;align-items:center;gap:14px;color:var(--tutorial-muted)}.operation-tutorial .operation-tutorial__generating>strong{font-size:13px;color:var(--tutorial-ink)}.operation-tutorial .operation-tutorial__spinner{width:26px;height:26px;border:2px solid var(--tutorial-soft);border-top-color:var(--tutorial-accent);border-radius:50%;animation:tutorial-spin .9s linear infinite}.operation-tutorial .operation-tutorial__waiting-images{display:flex;justify-content:center;gap:12px;width:min(100%,220px)}.operation-tutorial .operation-tutorial__waiting-images>span{width:70px;height:78px;border-radius:8px;background:var(--user-canvas,#fbfaff);animation:tutorial-wait 1s ease-in-out infinite alternate}.operation-tutorial .operation-tutorial__waiting-images>span:nth-child(2){animation-delay:.18s}.operation-tutorial .operation-tutorial__preview{position:absolute;z-index:2;inset:0;display:grid;place-items:center;padding:12px;background:var(--dialog-backdrop,rgb(28 23 38/.5));animation:tutorial-view-enter .25s ease-out both}.operation-tutorial .operation-tutorial__preview-window{display:flex;flex-direction:column;gap:8px;width:min(80%,300px);height:100%;min-height:0;padding:10px;border-radius:10px;background:var(--user-surface,#fff)}.operation-tutorial .operation-tutorial__preview-heading{display:flex;justify-content:space-between;align-items:center;gap:6px}.operation-tutorial .operation-tutorial__preview-heading>strong{color:var(--tutorial-ink);font-size:12px}.operation-tutorial .operation-tutorial__preview-heading>span{display:grid;width:24px;height:24px;place-items:center;border-radius:6px;background:var(--user-canvas,#fbfaff);color:var(--tutorial-ink)}.operation-tutorial .operation-tutorial__preview-photo{flex:1 1;min-height:0;overflow:hidden}.operation-tutorial .operation-tutorial__cursor{position:absolute;z-index:3;top:0;left:0;width:24px;height:28px;pointer-events:none;color:var(--tutorial-ink);opacity:0;transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .15s ease}.operation-tutorial .operation-tutorial__cursor[data-visible=true]{opacity:1}.operation-tutorial .operation-tutorial__cursor[data-dragging=true]{transition:transform .75s ease,opacity .15s ease}.operation-tutorial .operation-tutorial__drag-photo{position:absolute;z-index:-1;left:-29px;top:-40px;width:64px;height:84px;overflow:hidden;border:1px solid var(--tutorial-accent);border-radius:6px;background:var(--user-surface,#fff)}.operation-tutorial .operation-tutorial__cursor-tip{position:absolute;top:2px;left:3px;width:0;height:0}.operation-tutorial .operation-tutorial__click-ring{position:absolute;top:-8px;left:-7px;width:20px;height:20px;border:2px solid var(--tutorial-accent);border-radius:50%;opacity:0}.operation-tutorial .operation-tutorial__cursor[data-click=true] .operation-tutorial__click-ring{animation:tutorial-click .55s ease-out .65s both}.operation-tutorial .operation-tutorial__cursor[data-dragging=true][data-click=true] .operation-tutorial__click-ring{animation:tutorial-click .25s ease-out both}.operation-tutorial[data-motion=paused] .operation-tutorial__cursor{transition:none}.operation-tutorial[data-motion=paused] .operation-tutorial__studio *{animation-play-state:paused}.operation-tutorial .operation-tutorial__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:8px;gap:8px;margin:12px 0 0;padding:0;list-style:none}.operation-tutorial .operation-tutorial__steps li{min-width:0}.operation-tutorial .operation-tutorial__steps button{display:flex;align-items:center;gap:7px;width:100%;min-height:36px;padding:5px;border:0;border-radius:8px;background:transparent;color:var(--tutorial-muted);text-align:left;font:inherit;font-size:12px;line-height:1.4;cursor:pointer}.operation-tutorial .operation-tutorial__steps button:hover{background:var(--user-canvas,#fbfaff)}.operation-tutorial .operation-tutorial__steps button[aria-current=step]{background:var(--tutorial-soft);color:var(--nav-selected,#6338ba);font-weight:650}.operation-tutorial .operation-tutorial__step-number{display:grid;flex:none;width:22px;height:22px;place-items:center;border:1px solid var(--field-line,#d5d0da);border-radius:50%;background:var(--user-surface,#fff);font-size:11px;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.operation-tutorial .operation-tutorial__steps button[aria-current=step] .operation-tutorial__step-number{border-color:var(--tutorial-accent);background:var(--tutorial-accent);color:var(--user-surface,#fff)}.operation-tutorial .operation-tutorial__actions{display:flex;margin-top:16px}.operation-tutorial .operation-tutorial__upload{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:10px 18px;border:0;border-radius:8px;background:var(--tutorial-accent);color:var(--user-surface,#fff);font:inherit;font-size:13px;font-weight:650;line-height:1.4;cursor:pointer}.operation-tutorial .operation-tutorial__upload:hover:not(:disabled){background:var(--nav-selected,#6338ba)}.operation-tutorial .operation-tutorial__upload:disabled{background:var(--disabled-background,#e9e4ee);color:var(--disabled-text,#686073);cursor:not-allowed}.operation-tutorial button:focus-visible{outline:2px solid var(--tutorial-accent);outline-offset:3px}.operation-tutorial ::selection{background:var(--selection-background,#e1d5f8);color:var(--selection-text,#322246)}.operation-tutorial .operation-tutorial__overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:12px;gap:12px;height:300px;padding:12px;border:1px solid var(--user-line,#e8e2f0);border-radius:12px;background:var(--user-canvas,#fbfaff)}.operation-tutorial .operation-tutorial__overview>div{min-width:0;min-height:0}.operation-tutorial .operation-tutorial__overview-upload{display:flex;flex-direction:column;gap:10px;color:var(--tutorial-muted);font-size:11px}.operation-tutorial .operation-tutorial__overview-upload>strong{color:var(--tutorial-ink);font-size:13px;line-height:1.4}.operation-tutorial .operation-tutorial__overview-photo{display:grid;flex:1 1;min-height:0;overflow:hidden;border-radius:8px;background:var(--user-surface,#fff)}.operation-tutorial .operation-tutorial__overview .operation-tutorial__templates{gap:5px}.operation-tutorial .operation-tutorial__overview .operation-tutorial__selection-bar{flex-wrap:wrap}.operation-tutorial .operation-tutorial__overview .operation-tutorial__results{grid-template-columns:minmax(0,1fr)}.operation-tutorial .operation-tutorial__overview .operation-tutorial__result:nth-child(n+2){display:none}@keyframes tutorial-photo-enter{0%{opacity:.4;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes tutorial-view-enter{0%{opacity:.4}to{opacity:1}}@keyframes tutorial-button-press{0%,to{transform:scale(1)}45%{transform:scale(.96)}}@keyframes tutorial-click{0%{opacity:.7;transform:scale(.6)}to{opacity:0;transform:scale(1.6)}}@keyframes tutorial-spin{to{transform:rotate(1turn)}}@keyframes tutorial-wait{0%{opacity:.4}to{opacity:1}}@media (max-width:700px){.operation-tutorial .operation-tutorial__studio{grid-template-columns:112px minmax(0,1fr);height:282px}.operation-tutorial .operation-tutorial__canvas,.operation-tutorial .operation-tutorial__source{padding:10px}.operation-tutorial .operation-tutorial__source-photo{height:90px}.operation-tutorial .operation-tutorial__results,.operation-tutorial .operation-tutorial__templates{gap:7px}}@media (prefers-reduced-motion:reduce){.operation-tutorial *{animation:none!important;transition:none!important}}