*{box-sizing:border-box}:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#edf1ff;background:#080b14;font-synthesis:none}body{margin:0;min-width:320px;background:radial-gradient(circle at 50% -20%,#172142 0,#080b14 46rem)}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.65}.app{min-height:100vh;display:flex;flex-direction:column}.header{width:min(1180px,calc(100% - 40px));margin:0 auto;height:72px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;font-weight:750;letter-spacing:-.02em}.brand-mark{display:grid;place-items:center;width:30px;height:30px;border:1px solid #4d5878;border-radius:9px;font-size:14px;background:#11182a}.ghost-btn,.mini-btn{border:1px solid #303a56;background:#101629;color:#bfc8df;border-radius:9px;padding:9px 13px}.ghost-btn:hover,.mini-btn:hover{border-color:#556383;color:#fff}.main{width:min(1080px,calc(100% - 40px));margin:0 auto;flex:1}.hero{text-align:center;padding:58px 0 34px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.18em;color:#8290b5;margin:0 0 15px}.hero h1{font-size:clamp(38px,6vw,66px);line-height:.99;letter-spacing:-.055em;margin:0}.hero h1 span{color:#8996bb}.hero-copy{max-width:620px;margin:20px auto 0;color:#9ba6c1;font-size:16px;line-height:1.6}.dropzone{min-height:330px;border:1px dashed #46516d;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#0f1526a6;transition:.2s ease}.dropzone:hover,.dropzone:focus{border-color:#8795ba;background:#11182a;outline:none;transform:translateY(-1px)}.upload-icon{width:58px;height:58px;display:grid;place-items:center;border:1px solid #3b4662;border-radius:16px;font-size:26px;margin-bottom:16px;background:#121a2c}.dropzone h2{margin:0;font-size:20px;letter-spacing:-.02em}.dropzone p{margin:7px 0 16px;color:#8f9bb8}.file-hint{color:#66738f;font-size:12px}.workspace{border:1px solid #242d44;border-radius:20px;overflow:hidden;background:#0d1220;box-shadow:0 22px 70px #0000003d}.toolbar{padding:14px 16px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-bottom:1px solid #242d44;background:#101629}.toolbar-group{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.label{color:#7886a4;font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:750}.ratio-list{display:flex;gap:5px;flex-wrap:wrap}.ratio{border:1px solid transparent;background:transparent;color:#aab5ce;padding:7px 10px;border-radius:7px;font-size:12px}.ratio:hover{background:#182138;color:#fff}.ratio.active{background:#e9edf8;color:#111626}.zoom-group input{accent-color:#dce3f4;width:110px}.editor{display:grid;grid-template-columns:minmax(0,1fr) 280px;min-height:520px}.stage{min-width:0;min-height:520px;background:#080c16;position:relative;touch-action:none;overflow:hidden;display:grid;place-items:center}.stage canvas{display:block;max-width:100%}.side{border-left:1px solid #242d44;padding:16px;display:flex;flex-direction:column;gap:12px;background:#0d1220}.side-card{border:1px solid #242d44;border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:6px}.side-card strong{font-size:18px;letter-spacing:-.02em}.muted{color:#687592;font-size:12px;line-height:1.5}.primary,.secondary{border-radius:10px;padding:11px 14px;font-weight:700}.primary{background:#e9edf8;color:#101522;border:1px solid #e9edf8}.primary:hover{background:#fff}.secondary{background:#141c2e;color:#b9c4dc;border:1px solid #303b56}.secondary:hover{color:#fff;border-color:#53607d}.full{width:100%;margin-top:5px}.result-preview{width:100%;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:repeating-conic-gradient(#182138 0 25%,#101727 0 50%) 50% / 16px 16px;display:grid;place-items:center}.result-preview img{max-width:100%;max-height:100%;object-fit:contain;display:block}.tip{color:#687592;font-size:11px;text-align:center;padding:0 16px 15px;margin:0}.error{margin:14px 0;padding:12px 14px;border:1px solid #60363b;background:#21141a;color:#f0b6bd;border-radius:10px;display:flex;gap:9px;align-items:center;font-size:13px}.error span{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#713740;color:#fff;font-weight:800}.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:48px 0 70px}.info-grid article{border-top:1px solid #252e45;padding-top:20px}.info-grid h2{font-size:16px;margin:0 0 16px}.info-grid ol{margin:0;padding-left:20px;color:#8f9ab4;line-height:1.7;font-size:13px}.info-grid li{padding-left:5px;margin-bottom:8px}.info-grid b{color:#d9dfef}details{border-top:1px solid #252e45;padding:12px 0}details:first-of-type{border-top:0}summary{cursor:pointer;color:#aeb9d1;font-size:13px}details p{color:#74809b;font-size:12px;line-height:1.6;margin:9px 0 0}footer{text-align:center;color:#59657f;font-size:12px;padding:24px;border-top:1px solid #151c2c}footer a{color:#8996b4;text-decoration:none}footer a:hover{color:#fff;text-decoration:underline}@media(max-width:760px){.header,.main{width:min(100% - 24px,1080px)}.header{height:62px}.hero{padding:42px 0 25px}.hero-copy{font-size:14px}.dropzone{min-height:280px}.editor{grid-template-columns:1fr}.stage{min-height:65vw;max-height:72vh}.side{border-left:0;border-top:1px solid #242d44}.toolbar{align-items:flex-start}.zoom-group{width:100%}.zoom-group input{flex:1}.info-grid{grid-template-columns:1fr;margin-top:36px}}@media(max-width:430px){.hero h1{font-size:39px}.ratio{padding:7px 8px}.file-hint{max-width:240px}}