@import"https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Inter:wght@400;500;600&display=swap";:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#f4f4f5;background:#09090b;color-scheme:dark;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:#09090b}button,input{font:inherit}button{color:inherit}.topbar{height:68px;padding:0 24px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid #27272a;background:#0c0c0e}.topbar p{margin:0;font:10px DM Mono,monospace;text-transform:uppercase;letter-spacing:.12em;color:#8f8f99}.brand{color:#fafafa;text-decoration:none;font-weight:600;font-size:17px;letter-spacing:-.03em;display:flex;align-items:center;gap:10px}.brand-mark{width:16px;height:16px;border:1.5px solid;border-radius:50%;position:relative}.brand-mark:after{content:"";position:absolute;width:6px;height:6px;right:-4px;bottom:-4px;border-right:1.5px solid;border-bottom:1.5px solid}.upload{justify-self:end;background:#fafafa;color:#09090b;border:1px solid #fafafa;padding:9px 14px;border-radius:5px;font-size:12px;font-weight:600;cursor:pointer;box-shadow:0 1px 2px #0006;transition:background-color .15s ease,border-color .15s ease,transform .15s ease}.upload:hover{background:#e4e4e7;border-color:#e4e4e7}.upload:active{transform:translateY(1px)}.upload input{position:absolute;opacity:0;width:1px;height:1px}.workspace{min-height:calc(100vh - 68px);display:grid;grid-template-columns:minmax(230px,280px) minmax(360px,1fr) minmax(240px,300px)}.panel{padding:34px 24px;display:flex;flex-direction:column;gap:32px;background:#0c0c0e}.formats-panel{border-right:1px solid #27272a}.controls-panel{border-left:1px solid #27272a}.eyebrow{margin:0 0 10px;font:10px DM Mono,monospace;color:#8f8f99;text-transform:uppercase;letter-spacing:.1em}h1,h2{margin:0;color:#fafafa;font-size:clamp(24px,2.2vw,32px);font-weight:500;line-height:1.08;letter-spacing:-.045em}.format-list{display:grid;gap:6px}.format{width:100%;min-height:62px;background:transparent;border:1px solid transparent;padding:10px;display:flex;gap:13px;align-items:center;text-align:left;cursor:pointer;border-radius:5px;transition:background-color .15s ease,border-color .15s ease}.format:hover{background:#18181b}.format.active{border-color:#3f3f46;background:#18181b;box-shadow:0 1px 2px #0008}.format span:last-child{display:grid;gap:4px}.format strong{font-size:12px;font-weight:500;color:#e4e4e7}.format small{font:9px DM Mono,monospace;color:#8f8f99}.ratio{width:30px;max-height:37px;border:1px solid #3f3f46;background:#27272a;border-radius:2px}.active .ratio{background:#f4f4f5;border-color:#f4f4f5;box-shadow:0 0 0 2px #ffffff14}.privacy{margin:auto 0 0;font-size:10px;line-height:1.6;color:#8f8f99;padding-left:18px;position:relative}.privacy:before{content:"●";color:#22c55e;position:absolute;left:0;font-size:8px}.stage-wrap{padding:36px;display:grid;place-items:center;background-color:#09090b;background-image:radial-gradient(#27272a 1px,transparent 1px);background-size:20px 20px;overflow:hidden}.stage{width:min(100%,580px);max-height:calc(100vh - 140px);background:#18181b;border:1px solid #3f3f46;border-radius:3px;box-shadow:0 20px 60px #0009,0 0 0 1px #ffffff08;position:relative;overflow:hidden;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.stage:active{cursor:grabbing}.stage img{position:absolute;left:50%;top:50%;max-width:none;object-fit:cover;pointer-events:none}.grid{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.45;background:linear-gradient(to right,transparent 33.1%,#fff 33.2%,#fff 33.35%,transparent 33.45%,transparent 66.55%,#fff 66.65%,#fff 66.8%,transparent 66.9%),linear-gradient(to bottom,transparent 33.1%,#fff 33.2%,#fff 33.35%,transparent 33.45%,transparent 66.55%,#fff 66.65%,#fff 66.8%,transparent 66.9%);pointer-events:none}.hint{position:absolute;bottom:12px;left:50%;transform:translate(-50%);background:#09090be6;color:#d4d4d8;border:1px solid #ffffff24;padding:6px 9px;border-radius:4px;font:9px DM Mono,monospace;white-space:nowrap;pointer-events:none;box-shadow:0 2px 8px #0006}.slider-label{display:grid;gap:13px;font-size:11px;font-weight:500;color:#d4d4d8}.slider-label span{display:flex;justify-content:space-between}.slider-label output{font:10px DM Mono,monospace;color:#8f8f99}input[type=range]{width:100%;accent-color:#fafafa;cursor:pointer}.reset{align-self:start;border:0;padding:0;background:none;color:#a1a1aa;font-size:11px;cursor:pointer;transition:color .15s ease}.reset:hover{color:#fafafa}.export-card{margin-top:auto;border-top:1px solid #27272a;padding-top:22px;display:grid;gap:5px}.export-card p{margin:0;font-size:11px;color:#8f8f99}.export-card strong{font:11px DM Mono,monospace;color:#d4d4d8}.export{margin-top:14px;border:1px solid #fafafa;border-radius:5px;background:#fafafa;color:#09090b;padding:12px 14px;display:flex;justify-content:space-between;font-size:12px;font-weight:600;cursor:pointer;box-shadow:0 1px 2px #0008;transition:background-color .15s ease,border-color .15s ease,transform .15s ease}.export:hover{background:#e4e4e7;border-color:#e4e4e7}.export:active{transform:translateY(1px)}button:focus-visible,a:focus-visible,.upload:focus-within,input:focus-visible{outline:2px solid #fafafa;outline-offset:3px}@media(max-width:900px){.workspace{grid-template-columns:220px 1fr}.controls-panel{grid-column:1 / -1;border-left:0;border-top:1px solid #27272a;display:grid;grid-template-columns:1fr 1fr}.export-card{margin-top:0;grid-column:2;grid-row:1 / 4;border:0;padding:0}}@media(max-width:650px){.topbar{padding:0 18px;grid-template-columns:1fr auto}.topbar p{display:none}.workspace{display:flex;flex-direction:column}.panel{padding:26px 20px}.formats-panel{border:0}.format-list{grid-template-columns:1fr 1fr}.privacy{margin-top:8px}.stage-wrap{min-height:500px;padding:24px 18px;order:2}.controls-panel{order:3;display:flex;border-top:1px solid #27272a}.export-card{border-top:1px solid #27272a;padding-top:22px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}