:root{--ink: #171513;--wall: #24211d;--wall-raised: #2c2823;--plaster: #f2ece0;--plaster-dim: #c9c2b4;--brass: #b3865f;--brass-bright: #d1a377;--line: rgba(242, 236, 224, .12);--radius: 3px;--font-display: "Fraunces", serif;--font-body: "Inter", sans-serif}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--ink);color:var(--plaster);font-family:var(--font-body);-webkit-font-smoothing:antialiased}button{font-family:var(--font-body)}.app-shell{display:grid;grid-template-columns:260px 1fr;min-height:100vh}@media (max-width: 860px){.app-shell{grid-template-columns:1fr}}.masthead{grid-column:1 / -1;padding:28px 32px 18px;border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:14px}.masthead h1{font-family:var(--font-display);font-weight:500;font-size:1.6rem;margin:0;letter-spacing:.01em}.masthead p{margin:0;color:var(--plaster-dim);font-size:.9rem}.gallery-rail{border-right:1px solid var(--line);padding:20px;overflow-y:auto}.gallery-rail h2{font-family:var(--font-display);font-weight:500;font-size:.95rem;text-transform:none;color:var(--plaster-dim);margin:0 0 14px}.frame-thumb{width:100%;border:1px solid var(--line);background:var(--wall-raised);border-radius:var(--radius);padding:10px;margin-bottom:12px;cursor:pointer;text-align:left;color:var(--plaster);transition:border-color .15s ease,transform .15s ease}.frame-thumb:hover{border-color:var(--brass)}.frame-thumb.selected{border-color:var(--brass-bright);box-shadow:0 0 0 1px var(--brass-bright)}.frame-thumb .thumb-img-wrap{aspect-ratio:4 / 3;border-radius:2px;overflow:hidden;background-image:linear-gradient(45deg,#35312a 25%,transparent 25%),linear-gradient(-45deg,#35312a 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#35312a 75%),linear-gradient(-45deg,transparent 75%,#35312a 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px;background-color:#201d19}.frame-thumb .thumb-img-wrap img{width:100%;height:100%;object-fit:contain}.frame-thumb .thumb-name{display:block;font-size:.82rem;margin-top:8px;color:var(--plaster-dim)}.stage{padding:32px 40px 48px;max-width:760px}.stage h2{font-family:var(--font-display);font-weight:500;font-size:1.15rem;margin:0 0 4px}.stage .hint{color:var(--plaster-dim);font-size:.88rem;margin:0 0 20px;max-width:60ch;line-height:1.5}.upload-dropzone{border:1px dashed var(--line);border-radius:var(--radius);padding:40px 20px;text-align:center;color:var(--plaster-dim);cursor:pointer}.upload-dropzone:hover{border-color:var(--brass);color:var(--plaster)}.crop-stage{position:relative;width:100%;height:420px;background:var(--wall-raised);border-radius:var(--radius);overflow:hidden}.controls-row{display:flex;align-items:center;gap:16px;margin-top:18px}.controls-row label{font-size:.82rem;color:var(--plaster-dim);min-width:40px}.controls-row input[type=range]{flex:1;accent-color:var(--brass)}.actions-row{display:flex;gap:12px;margin-top:24px}.btn{font-family:var(--font-body);font-size:.9rem;font-weight:500;padding:11px 20px;border-radius:var(--radius);border:1px solid var(--line);background:transparent;color:var(--plaster);cursor:pointer;transition:background .15s ease,border-color .15s ease}.btn:hover:not(:disabled){border-color:var(--brass)}.btn.primary{background:var(--brass);border-color:var(--brass);color:var(--ink)}.btn.primary:hover:not(:disabled){background:var(--brass-bright);border-color:var(--brass-bright)}.btn:disabled{opacity:.45;cursor:not-allowed}.result-wrap{margin-top:24px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.result-wrap img{width:100%;display:block}.status-line{margin-top:14px;font-size:.85rem;color:var(--plaster-dim)}.status-line.error{color:#d98b7a}