.psc-editor { position:fixed; inset:0; margin:0; padding:0; width:100%; max-width:none; height:100dvh; max-height:none; border:0; background:#0b1627; color:#f4f7fc; color-scheme:dark; font:inherit; overflow:auto; display:none; grid-template-rows:auto auto auto minmax(180px,1fr) auto; overscroll-behavior:contain; }
.psc-editor[open] { display:grid; }
.psc-editor::backdrop { background:#061020ed; }
.psc-editor * { box-sizing:border-box; }
.psc-editor [hidden] { display:none!important; }
.psc-editor button { min-width:44px; min-height:44px; font:inherit; cursor:pointer; touch-action:manipulation; }
.psc-editor button:disabled,.psc-editor input:disabled { opacity:.4; cursor:default; }
.psc-editor :focus-visible { outline:3px solid #b4d5ff; outline-offset:3px; }
.psc-editor button { -webkit-tap-highlight-color:transparent; transition:background-color .12s,border-color .12s; }
.psc-editor button svg { width:20px; height:20px; flex:none; pointer-events:none; }
.psc-editor button:active:not(:disabled) { background-color:#294261; }
.psc-editor__view:focus-visible { outline:1px solid #ffffff12; outline-offset:0; }
.psc-editor__header { display:flex; justify-content:space-between; align-items:center; gap:16px; width:100%; max-width:1000px; margin:auto; padding:calc(12px + env(safe-area-inset-top)) 20px 8px; }
.psc-editor h2 { margin:0; font-size:1.125rem; line-height:1.35; overflow-wrap:anywhere; }
.psc-editor__header button { flex:none; border:1px solid #41516b; border-radius:50%; color:#f4f7fc; background:#18273c; font-size:1.5rem; }
.psc-editor__header-actions { display:flex; flex:none; gap:6px; }
.psc-editor__heading { min-width:0; }
.psc-editor__header-actions { align-self:flex-start; }
.psc-editor h2 { font-size:1rem; }
.psc-editor__hint { max-width:54ch; text-align:center; margin:0 auto; padding:4px 20px 12px; font-size:.875rem; line-height:1.45; color:#c3d2e6; overflow-wrap:anywhere; }
.psc-editor__view { position:relative; min-height:180px; width:calc(100% - 24px); max-width:952px; justify-self:center; overflow:hidden; border-radius:20px; background:#060c15; touch-action:none; cursor:grab; }
.psc-editor__view:active { cursor:grabbing; }
.psc-editor__background,.psc-editor__sharp { position:absolute; pointer-events:none; overflow:hidden; }
.psc-editor__background { inset:0; }
.psc-editor__sharp { z-index:1; border-radius:12px; }
.psc-editor__view img { position:absolute; top:0; left:0; max-width:none; transform-origin:0 0; pointer-events:none; will-change:transform; backface-visibility:hidden; user-select:none; }
.psc-editor[data-state="loading"] .psc-editor__view img,.psc-editor[data-state="error"] .psc-editor__view img { visibility:hidden; }
.psc-editor__frame { position:absolute; z-index:2; border:2px solid #f4f7fc; border-radius:12px; pointer-events:none; box-shadow:0 0 0 1px #0005,0 0 0 200vmax #030914b3; }
.psc-editor__frame i { position:absolute; width:26px; height:26px; border:4px solid white; }
.psc-editor__coach { position:relative; width:100%; display:grid; grid-template-columns:80px minmax(0,1fr); gap:10px; align-items:center; padding:6px 8px; border:1px solid #334b67; border-radius:10px; background:#13243b; }
.psc-editor__coach-copy small { display:block; min-height:34px; margin:0 32px 6px 0; color:#a8c2e6; font-size:.6875rem; line-height:1.4; }
.psc-editor__coach-copy p { display:flex; align-items:flex-start; gap:7px; margin:6px 0 0; color:#f4f7fc; font-size:.75rem; line-height:1.35; overflow-wrap:anywhere; }
.psc-editor__coach-close { position:absolute; top:0; right:0; width:44px; height:44px; padding:0; border:0; border-radius:0 10px 0 10px; background:transparent; color:#c3d2e6; font-size:1.5rem!important; line-height:1; }
.psc-editor__coach-copy b { flex:none; display:grid; place-items:center; width:19px; height:19px; border-radius:50%; background:#365373; font-size:.6875rem; }
.psc-editor__coach-steps { display:grid; }
.psc-editor__coach-steps .psc-editor__step { grid-area:1/1; align-self:center; margin:0; opacity:0; }
.psc-editor__coach-steps .psc-editor__step--zoom { opacity:1; animation:psc-coach-zoom 8s ease-in-out infinite both; }
.psc-editor__coach-steps .psc-editor__step--move { animation:psc-coach-move 8s ease-in-out infinite both; }
.psc-editor__coach-steps .psc-editor__step--fit { animation:psc-coach-fit 8s ease-in-out infinite both; }
.psc-editor__step--fit b { background:#204c45; color:#b5efdc; }
.psc-editor__coach-progress { display:flex; gap:4px; margin:10px 0 0 26px; }
.psc-editor__coach-progress i { width:24px; height:3px; overflow:hidden; border-radius:3px; background:#354b67; }
.psc-editor__coach-progress i::after { content:''; display:block; width:100%; height:100%; background:#b4d5ff; transform-origin:left; animation:psc-coach-progress-one 8s linear infinite both; }
.psc-editor__coach-progress i:nth-child(2)::after { animation-name:psc-coach-progress-two; }
.psc-editor__coach-progress i:nth-child(3)::after { background:#9fdfc9; animation-name:psc-coach-progress-three; }
.psc-editor__demo-check { position:absolute; top:3px; right:4px; display:grid; place-items:center; width:19px; height:19px; border:2px solid #071323; border-radius:50%; background:#b5efdc; color:#103c31; opacity:0; animation:psc-crop-check 8s ease-in-out infinite both; }
.psc-editor__demo-check svg { width:15px; height:15px; }
@keyframes psc-coach-zoom { 0%,42%,100% { opacity:1; transform:translateY(0); } 47%,95% { opacity:0; transform:translateY(-3px); } }
@keyframes psc-coach-move { 0%,42%,73%,100% { opacity:0; transform:translateY(3px); } 47%,68% { opacity:1; transform:translateY(0); } }
@keyframes psc-coach-fit { 0%,68%,100% { opacity:0; transform:translateY(3px); } 73%,95% { opacity:1; transform:translateY(0); } }
@keyframes psc-crop-aligned { 0%,65%,100% { border-color:#f4f7fc; box-shadow:none; } 72%,88% { border-color:#b5efdc; box-shadow:0 0 0 3px #b5efdc22; } }
@keyframes psc-crop-check { 0%,68%,100% { opacity:0; transform:scale(.8); } 73%,88% { opacity:1; transform:scale(1); } 95% { opacity:0; transform:scale(1); } }
@keyframes psc-coach-progress-one { 0% { transform:scaleX(0); } 42%,95% { transform:scaleX(1); opacity:1; } 100% { transform:scaleX(1); opacity:0; } }
@keyframes psc-coach-progress-two { 0%,42% { transform:scaleX(0); } 68%,95% { transform:scaleX(1); opacity:1; } 100% { transform:scaleX(1); opacity:0; } }
@keyframes psc-coach-progress-three { 0%,68% { transform:scaleX(0); } 95% { transform:scaleX(1); opacity:1; } 100% { transform:scaleX(1); opacity:0; } }
.psc-editor__demo { position:relative; width:80px; height:96px; overflow:hidden; border-radius:9px; background:#071323; }
.psc-editor__demo-stage { position:relative; width:90px; height:108px; transform:scale(.888889); transform-origin:0 0; }
.psc-editor__demo-frame { position:absolute; left:15px; top:12px; width:60px; height:84px; border:2px solid #fff; border-radius:5px; animation:psc-crop-aligned 8s ease-in-out infinite both; }
.psc-editor__demo-book { position:absolute; left:17px; top:14px; width:56px; height:80px; overflow:hidden; border-radius:3px; transform-origin:center; animation:psc-crop-demo 8s cubic-bezier(.4,0,.2,1) infinite both; }
.psc-editor__demo-book img { position:absolute; max-width:none; pointer-events:none; user-select:none; left:50%; top:50%; width:auto; height:104.5%; transform:translate(-50%,-50%); will-change:auto; }
.psc-editor__finger { position:absolute; top:45px; width:12px; height:12px; border:2px solid white; border-radius:50%; background:#cfe4ff; box-shadow:0 0 0 5px #8bb9f244,0 2px 5px #0007; }
.psc-editor__finger--left { left:23px; opacity:0; animation:psc-crop-left 8s cubic-bezier(.4,0,.2,1) infinite both; }
.psc-editor__finger--right { left:45px; opacity:0; animation:psc-crop-right 8s cubic-bezier(.4,0,.2,1) infinite both; }
.psc-editor__finger--move { left:39px; top:56px; opacity:0; animation:psc-crop-move 8s cubic-bezier(.4,0,.2,1) infinite both; }
/* Pause at the aligned result, then reset while invisible to avoid a jump. */
@keyframes psc-crop-demo {
 0%,5% { opacity:0; transform:translate(-7px,6px) scale(.72); }
 12%,20% { opacity:1; transform:translate(-7px,6px) scale(.72); }
 40%,48% { opacity:1; transform:translate(-7px,6px) scale(1); }
 68%,88% { opacity:1; transform:translate(0,0) scale(1); }
 95% { opacity:0; transform:translate(0,0) scale(1); }
 100% { opacity:0; transform:translate(-7px,6px) scale(.72); }
}
@keyframes psc-crop-left { 0%,14% { opacity:0; transform:translateX(4px); } 20% { opacity:1; transform:translateX(4px); } 40% { opacity:1; transform:translateX(-3px); } 47%,100% { opacity:0; transform:translateX(-3px); } }
@keyframes psc-crop-right { 0%,14% { opacity:0; transform:translateX(-4px); } 20% { opacity:1; transform:translateX(-4px); } 40% { opacity:1; transform:translateX(3px); } 47%,100% { opacity:0; transform:translateX(3px); } }
@keyframes psc-crop-move { 0%,47% { opacity:0; transform:translate(-7px,6px); } 52% { opacity:1; transform:translate(-7px,6px); } 68% { opacity:1; transform:translate(0,0); } 75%,100% { opacity:0; transform:translate(0,0); } }
.psc-editor__frame i:nth-child(1) { left:-2px; top:-2px; border-right:0; border-bottom:0; border-radius:12px 0 0; }
.psc-editor__frame i:nth-child(2) { right:-2px; top:-2px; border-left:0; border-bottom:0; border-radius:0 12px 0 0; }
.psc-editor__frame i:nth-child(3) { left:-2px; bottom:-2px; border-right:0; border-top:0; border-radius:0 0 0 12px; }
.psc-editor__frame i:nth-child(4) { right:-2px; bottom:-2px; border-left:0; border-top:0; border-radius:0 0 12px; }
.psc-editor footer { width:calc(100% - 24px); max-width:520px; justify-self:center; display:grid; gap:6px; margin:8px 0 calc(8px + env(safe-area-inset-bottom)); padding:6px; border:1px solid #2c3b51; border-radius:16px; background:#111f32; }
.psc-editor__tools { width:calc(100% - 24px); max-width:520px; justify-self:center; display:grid; gap:4px; padding:4px 6px; margin:0 0 8px; border:1px solid #2c3b51; border-radius:14px; background:#111f32; }
.psc-editor__adjust { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.psc-editor__move { display:flex; gap:2px; }
.psc-editor__tools button { display:flex; align-items:center; justify-content:center; gap:4px; padding:0; background:transparent; color:#d2deef; border:1px solid transparent; border-radius:10px; font-size:.75rem; line-height:1.3; }
.psc-editor__adjust [data-action="rotate"] { padding:0 8px; background:#1a2b41; }
.psc-editor__move button { background:#1a2b41; }
.psc-editor__zoom { display:flex; align-items:center; gap:2px; padding:0 2px; }
.psc-editor__zoom button { flex:none; }
.psc-editor__tools input { --zoom:0%; appearance:none; -webkit-appearance:none; width:100%; min-width:24px; height:44px; margin:0; background:transparent; cursor:pointer; touch-action:pan-y; }
.psc-editor__tools input::-webkit-slider-runnable-track { height:6px; border-radius:6px; background:linear-gradient(to right,#b4d5ff var(--zoom),#334963 var(--zoom)); }
.psc-editor__tools input::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:24px; height:24px; margin-top:-9px; border:3px solid #f4f7fc; border-radius:50%; background:#94c2ff; box-shadow:0 2px 6px #0006; }
.psc-editor__tools input::-moz-range-track { height:6px; border-radius:6px; background:#334963; }
.psc-editor__tools input::-moz-range-progress { height:6px; border-radius:6px; background:#b4d5ff; }
.psc-editor__tools input::-moz-range-thumb { width:18px; height:18px; border:3px solid #f4f7fc; border-radius:50%; background:#94c2ff; }
.psc-editor__scale { flex:none; width:42px; font-size:.6875rem; font-variant-numeric:tabular-nums; text-align:center; color:#a8bdd6; }
.psc-editor__actions { display:grid; grid-template-columns:1fr 1.4fr; gap:8px; }
.psc-editor__use,.psc-editor__cancel { display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; border-radius:12px; line-height:1.3; font-weight:600!important; overflow-wrap:anywhere; }
.psc-editor__actions button { padding:8px 10px; font-size:.875rem; line-height:1.35; }
.psc-editor__use { border:1px solid #cfe1fb; background:#cfe1fb; color:#071d43; }
.psc-editor__use:active:not(:disabled) { background:#b4d0f4!important; }
.psc-editor__cancel { border:1px solid #41516b; background:transparent; color:#c3d2e6; }
.psc-editor[data-state="encoding"] .psc-editor__use svg { display:none; }
.psc-editor[data-state="encoding"] .psc-editor__use::before { content:''; width:18px; height:18px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:psc-editor-spin .7s linear infinite; }
@keyframes psc-editor-spin { to { transform:rotate(360deg); } }
@media(max-height:520px) and (min-width:560px) { .psc-editor { grid-template-columns:minmax(220px,1fr) minmax(280px,34%); grid-template-rows:auto auto auto minmax(120px,1fr); } .psc-editor__header,.psc-editor__hint,.psc-editor__tools { grid-column:1/-1; } .psc-editor__tools { max-width:952px; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; } .psc-editor__view { min-height:120px; margin-bottom:8px; } .psc-editor footer { align-self:center; } }
@media(max-height:520px) and (min-width:560px) {
 .psc-editor__tools button { font-size:.75rem; padding:0; gap:4px; }
 .psc-editor__adjust [data-action="rotate"] { padding:0; }
 .psc-editor__adjust [data-action="rotate"] span { display:none; }
 .psc-editor__move { gap:0; }
 .psc-editor__actions { grid-template-columns:1fr 1.7fr; }
 .psc-editor__actions button { font-size:.75rem; padding:8px; }
 .psc-editor__use svg { display:none; }
}
@media(max-height:650px) and (max-width:559px) {
 .psc-editor { grid-template-rows:auto auto auto minmax(100px,1fr) auto; }
 .psc-editor__view { min-height:100px; }
 .psc-editor__header { padding:calc(8px + env(safe-area-inset-top)) 16px 6px; gap:10px; }
 .psc-editor h2 { font-size:.9375rem; }
 .psc-editor__hint { padding:4px 16px 8px; font-size:.8125rem; }
 .psc-editor footer { gap:4px; padding:6px; margin:8px 0 calc(8px + env(safe-area-inset-bottom)); }
 .psc-editor__tools { gap:4px; }
 .psc-editor__tools button { font-size:.75rem; gap:6px; padding:6px; }
 .psc-editor__actions { grid-template-columns:1fr 1.8fr; }
 .psc-editor__actions button { padding:8px 10px; font-size:.8125rem; }
}
@media(prefers-reduced-motion:reduce) { .psc-editor * { transition:none!important; animation:none!important; } }

@media(prefers-reduced-motion:reduce) {
 .psc-editor__coach-steps { gap:4px; }
 .psc-editor__coach-steps .psc-editor__step--zoom,.psc-editor__coach-steps .psc-editor__step--move { grid-area:auto; opacity:1; transform:none; }
 .psc-editor__coach-steps .psc-editor__step--fit,.psc-editor__coach-progress { display:none; }
 .psc-editor__coach { grid-template-columns:60px minmax(0,1fr); }
 .psc-editor__demo { width:60px; height:72px; }
 .psc-editor__demo-stage { transform:scale(.666667); }
}