.jic-composition { position: absolute; inset: 0; z-index: 230; overflow: hidden; background: transparent; color: #fafafa; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif; user-select: none; outline: 0; }
.jic-composition *, .jic-composition *::before, .jic-composition *::after { box-sizing: border-box; }
.jic-composition .jic-loading { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); color: #a6a6a8; font-size: 13px; }
.jic-composition .jic-frame { position: absolute; isolation: isolate; }
.jic-composition .jic-image { display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: fill; pointer-events: none; }
.jic-composition .jic-selection { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 10000px #0005; }
.jic-composition .jic-selection::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, transparent calc(33.333% - .5px), #ffffff30 calc(33.333% - .5px), #ffffff30 calc(33.333% + .5px), transparent calc(33.333% + .5px), transparent calc(66.667% - .5px), #ffffff30 calc(66.667% - .5px), #ffffff30 calc(66.667% + .5px), transparent calc(66.667% + .5px)), linear-gradient(to bottom, transparent calc(33.333% - .5px), #ffffff30 calc(33.333% - .5px), #ffffff30 calc(33.333% + .5px), transparent calc(33.333% + .5px), transparent calc(66.667% - .5px), #ffffff30 calc(66.667% - .5px), #ffffff30 calc(66.667% + .5px), transparent calc(66.667% + .5px)); }
.jic-composition .jic-frame::after { content: ''; position: absolute; inset: 0; z-index: -1; background: #151517; }
.jic-composition button { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin: 0; border: 0; box-shadow: none; background: transparent; color: #fafafa; font: 500 13px/20px "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif; cursor: pointer; }
.jic-composition button:focus-visible { outline: 2px solid #70b8ff; outline-offset: 2px; }
.jic-composition .jic-move { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border-radius: 0; cursor: move; touch-action: none; }
.jic-composition .jic-handle { position: absolute; z-index: 2; width: 16px; height: 16px; padding: 0; border-radius: 0; color: #111; touch-action: none; }
.jic-composition .jic-handle svg { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.jic-composition .jic-handle-nw { left: -8px; top: -8px; cursor: nwse-resize; transform: rotate(90deg); }
.jic-composition .jic-handle-ne { right: -8px; top: -8px; cursor: nesw-resize; transform: rotate(180deg); }
.jic-composition .jic-handle-se { right: -8px; bottom: -8px; cursor: nwse-resize; transform: rotate(270deg); }
.jic-composition .jic-handle-sw { left: -8px; bottom: -8px; cursor: nesw-resize; }
.jic-composition .jic-handle-n, .jic-composition .jic-handle-s { left: calc(50% - 12px); width: 24px; height: 12px; cursor: ns-resize; }
.jic-composition .jic-handle-n { top: -7px; }
.jic-composition .jic-handle-s { bottom: -7px; transform: rotate(180deg); }
.jic-composition .jic-handle-e, .jic-composition .jic-handle-w { top: calc(50% - 12px); width: 12px; height: 24px; cursor: ew-resize; }
.jic-composition .jic-handle-e { right: -7px; }
.jic-composition .jic-handle-w { left: -7px; transform: rotate(180deg); }
.jic-composition .jic-handle-e svg, .jic-composition .jic-handle-w svg { width: 24px; height: 12px; transform: rotate(90deg); flex-shrink: 0; }
.jic-composition .jic-settings { position: absolute; left: 50%; z-index: 5; display: flex; align-items: center; gap: 2px; width: 526px; max-width: calc(100% - 24px); height: 40px; padding: 4px; border-radius: 12px; background: #202022; transform: translateX(-50%); }
.jic-composition .jic-ratios { display: flex; flex: 0 1 auto; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.jic-composition .jic-ratios::-webkit-scrollbar { display: none; }
.jic-composition .jic-ratio { gap: 4px; width: 56px; height: 32px; padding: 4px 8px; border-radius: 8px; white-space: nowrap; font-size: 13px; line-height: 22px; }
.jic-composition .jic-ratio:nth-child(1), .jic-composition .jic-ratio:nth-child(2), .jic-composition .jic-ratio:nth-child(6) { width: 61px; }
.jic-composition .jic-ratio:nth-child(4) { width: 51px; }
.jic-composition .jic-ratio svg { width: 16px; height: 16px; }
.jic-composition .jic-ratio:hover, .jic-composition .jic-flip:hover { background: #ffffff0d; }
.jic-composition .jic-ratio[aria-pressed="true"], .jic-composition .jic-flip[aria-pressed="true"] { background: #ffffff1a; }
.jic-composition .jic-separator { align-self: center; flex-shrink: 0; width: 1px; height: 16px; margin: 0 4px; background: #ffffff1a; }
.jic-composition .jic-flip { width: 32px; height: 32px; padding: 8px; border-radius: 8px; }
.jic-composition .jic-flip svg { width: 16px; height: 16px; }
.jic-composition .jic-confirm { width: 82px; height: 32px; margin-left: 0; padding: 4px 16px; border-radius: 8px; background: #fafafa; color: #1a1a1a; font-size: 13px; line-height: 22px; }
.jic-composition .jic-confirm:hover { background: #e6e6e8; }
.jic-composition .jic-confirm:disabled { opacity: .5; cursor: wait; }
.jic-composition[aria-busy="true"] .jic-settings > :not(.jic-confirm), .jic-composition[aria-busy="true"] .jic-ratios { pointer-events: none; }
@media (max-width: 600px) { .jic-composition .jic-settings { width: calc(100% - 24px); } .jic-composition .jic-ratios { flex: 1 1 auto; } .jic-composition .jic-confirm { width: 64px; padding: 0 12px; } }