:root{--ink:#1b1d19;--paper:#fffaf0;--muted:#5e645d;--line:#cbc9c0;--yellow:#ffd653;--blue:#275cea;--green:#16785d;--soft-green:#dff4e9;--soft-blue:#e4ebff;--soft-red:#ffe5df}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink)}
button,input{font:inherit}
.face-hero{padding-bottom:48px}
.face-workspace{padding:0 0 84px}
.face-tool-card{overflow:hidden;border:2px solid var(--ink);border-radius:27px;background:#fff;box-shadow:9px 10px 0 var(--ink)}
.face-empty{padding:26px}
.face-dropzone{position:relative;display:grid;min-height:370px;place-items:center;align-content:center;padding:36px;border:2px dashed var(--ink);border-radius:20px;background:linear-gradient(135deg,#fff 0%,#f3f7ec 100%);text-align:center;cursor:pointer}
.face-dropzone.is-over{background:var(--soft-green);border-style:solid}
.face-dropzone input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.drop-pebble{display:grid;width:68px;height:62px;place-items:center;margin-bottom:15px;border:2px solid var(--ink);border-radius:48% 52% 44% 56%;background:var(--yellow);box-shadow:5px 5px 0 var(--ink);transform:rotate(-5deg);font-size:37px;font-weight:900}
.face-dropzone h2{margin:8px 0 5px;font-size:37px;letter-spacing:-.05em}
.face-dropzone p{margin:0 0 19px;color:var(--muted);font-size:17px}
.face-dropzone small{display:block;margin-top:12px;color:var(--muted)}
.primary-button,.secondary-button{min-height:48px;padding:10px 17px;border:1.5px solid var(--ink);border-radius:11px;font-weight:900;cursor:pointer}
.primary-button{background:var(--ink);color:#fff}
.primary-button:hover{background:#30342e}
.secondary-button{background:#fff;color:var(--ink)}
.secondary-button:hover{background:#f2f2ed}
.full-button{width:100%}
.face-editor-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 25px;border-bottom:2px solid var(--ink);background:var(--soft-green)}
.face-editor-head h2{margin:2px 0 0;font-size:27px;letter-spacing:-.04em;overflow-wrap:anywhere}
.face-editor-head p{margin:3px 0 0;color:var(--muted);font-size:12px}
.eyebrow{font-size:10px;font-weight:950;letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.face-editor-grid{display:grid;grid-template-columns:370px minmax(0,1fr);min-width:0}
.face-controls{border-right:2px solid var(--ink);background:#fff}
.face-step{display:grid;grid-template-columns:35px 1fr;gap:11px;padding:21px;border-bottom:1px solid var(--line)}
.step-number{display:grid;width:33px;height:31px;place-items:center;border:1.5px solid var(--ink);border-radius:50%;background:var(--yellow);font-size:10px;font-weight:950}
.face-step h3{margin:0;font-size:21px;letter-spacing:-.035em}
.face-step p{margin:3px 0 0;color:var(--muted);font-size:12px;line-height:1.5}
.face-step>.full-button,.face-step>.effect-buttons,.face-step>.strength-control,.face-step>.privacy-advice,.face-step>.face-chips,.face-step>.small-actions,.face-step>.format-switch{grid-column:1/-1}
.small-note{grid-column:1/-1}
.effect-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-top:3px}
.effect-button{display:grid;min-height:65px;place-items:center;padding:8px 5px;border:1.5px solid var(--ink);border-radius:10px;background:#fff;color:var(--ink);cursor:pointer}
.effect-button strong{font-size:13px}
.effect-button span{color:var(--muted);font-size:9px}
.effect-button.is-active{background:var(--soft-blue);box-shadow:3px 3px 0 var(--ink)}
.strength-control{display:grid;gap:7px;margin-top:6px}
.strength-control>span{display:flex;justify-content:space-between;font-size:12px}
.strength-control input{width:100%;accent-color:var(--blue)}
.strength-control.is-disabled{opacity:.45}
.privacy-advice{padding:10px 11px;border-radius:10px;background:#f5f4ef!important;color:#555b54!important}
.face-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:3px}
.face-chip{min-height:34px;padding:5px 10px;border:1.5px solid var(--ink);border-radius:999px;background:#fff;font-size:11px;font-weight:850;cursor:pointer}
.face-chip.is-active{background:var(--yellow)}
.small-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:3px}
.small-actions button{min-height:38px;padding:7px;border:1px solid var(--ink);border-radius:8px;background:#fff;font-size:10px;font-weight:850;cursor:pointer}
.small-actions button:last-child{grid-column:1/-1}
.small-actions button:disabled,.primary-button:disabled{cursor:not-allowed;opacity:.4}
.format-switch{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:4px;border:1.5px solid var(--ink);border-radius:11px;background:#fff}
.format-switch button{min-height:36px;border:0;border-radius:7px;background:transparent;font-weight:900;cursor:pointer}
.format-switch button.is-active{background:var(--ink);color:#fff}
.download-step{background:var(--soft-green)}
.status-line{min-height:44px;margin:0;padding:12px 20px;color:var(--green);font-size:11px;font-weight:800;line-height:1.4}
.status-line.is-error{color:#9b2f25;background:#fff3ef}
.face-stage-column{display:grid;min-width:0;align-content:start;padding:25px;background:#f4f2eb}
.canvas-stage{position:relative;display:grid;min-height:520px;place-items:center;overflow:hidden;padding:18px;border:1.5px solid var(--ink);border-radius:17px;background-color:#e6e6e0;background-image:linear-gradient(45deg,#d4d4ce 25%,transparent 25%),linear-gradient(-45deg,#d4d4ce 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d4d4ce 75%),linear-gradient(-45deg,transparent 75%,#d4d4ce 75%);background-position:0 0,0 12px,12px -12px,-12px 0;background-size:24px 24px}
.canvas-stage canvas{display:block;max-width:100%;max-height:720px;border:1px solid rgba(0,0,0,.2);background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.15);cursor:crosshair;touch-action:none;outline:none}
.canvas-stage canvas.is-moving{cursor:move}
.canvas-stage canvas:focus-visible{outline:4px solid rgba(39,92,234,.35);outline-offset:4px}
.stage-instruction{position:absolute;left:50%;bottom:30px;margin:0;padding:8px 12px;border:1.5px solid var(--ink);border-radius:999px;background:rgba(255,255,255,.94);font-size:11px;font-weight:900;transform:translateX(-50%);pointer-events:none;white-space:nowrap}
.stage-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 3px 0;color:var(--muted);font-size:11px}
.stage-toolbar strong{color:var(--ink);font-size:12px}
:focus-visible{outline:3px solid rgba(39,92,234,.4);outline-offset:3px}
@media(max-width:960px){.face-editor-grid{grid-template-columns:320px minmax(0,1fr)}.face-stage-column{padding:18px}.canvas-stage{min-height:430px}}
@media(max-width:760px){.face-tool-card{border-radius:20px;box-shadow:5px 6px 0 var(--ink)}.face-empty{padding:14px}.face-dropzone{min-height:330px;padding:24px 15px}.face-dropzone h2{font-size:31px}.face-editor-head{align-items:flex-start;padding:18px 16px}.face-editor-head .secondary-button{flex:0 0 auto;padding:8px 11px;font-size:11px}.face-editor-grid{grid-template-columns:1fr}.face-controls{border-right:0;border-bottom:2px solid var(--ink)}.face-stage-column{grid-row:1;padding:12px}.face-controls{grid-row:2}.canvas-stage{min-height:330px;padding:9px}.stage-instruction{bottom:18px;max-width:90%;overflow:hidden;text-overflow:ellipsis}.stage-toolbar{display:grid;gap:3px}.face-step{padding:18px 16px}.status-line{padding:12px 16px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}