*{box-sizing:border-box;margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif}body{background:#eef2f8;min-height:100vh;padding:0;margin:0}.card{max-width:1400px;width:100%;margin:0 auto;background:#ffffffeb;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:0;box-shadow:none;transition:all .2s;min-height:100vh;display:flex;flex-direction:column}h1 small{font-size:1rem;font-weight:400}@media (min-width: 769px){body{padding:20px;align-items:center;display:flex}.card{border-radius:40px;box-shadow:0 25px 50px -12px #00000040,0 0 0 1px #00000005;padding:30px 30px 36px;border:1px solid rgba(255,255,255,.6);min-height:auto}}@media (max-width: 768px){.card{padding:0;background:#f8fafc;-webkit-backdrop-filter:none;backdrop-filter:none}.workspace{flex-direction:column;gap:0}.preview-area{position:fixed;top:0;z-index:20;background:#f8fafc;padding:16px 16px 12px;box-shadow:0 6px 14px #0000000d;border-bottom:1px solid rgba(0,0,0,.05);margin-bottom:0}.control-panel{max-height:none;overflow-y:auto;padding:20px 18px 32px;background:#fff;border-radius:28px 28px 0 0;margin-top:268px;box-shadow:0 -8px 20px #00000005}.preview-area .canvas-container{background:#f1f5f9;border-radius:24px;padding:8px;margin-bottom:8px;min-height:auto}canvas{max-height:45vh;width:100%;height:auto;object-fit:contain}.upload-area{margin-top:12px;justify-content:center;flex-wrap:wrap}h1{font-size:1.8rem;padding:16px 20px 4px;background:#f8fafc}.subtitle{margin:0 20px 12px;padding-left:12px}}.workspace{display:flex;flex-wrap:wrap;gap:28px}.control-panel{flex:1.2;min-width:280px;background:#ffffffd9;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:28px;padding:24px 22px;box-shadow:0 8px 20px #00000005,inset 0 1px #fff;border:1px solid #e9eef3}.preview-area{flex:2.3;min-width:320px}.canvas-container{background:#eef2f6;border-radius:24px;padding:12px;box-shadow:inset 0 2px 4px #00000005,0 8px 18px #0000000a;border:1px solid #dde3e9;display:flex;justify-content:center;align-items:center;min-height:300px}canvas{max-width:100%;max-height:70vh;height:auto;width:auto;border-radius:16px;box-shadow:0 10px 25px -5px #0000001a;display:block;background:#fff;border:1px solid #cbd5e1}.upload-area{margin-top:20px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}.file-label{background:#fff;border:1.5px dashed #8ba0bb;border-radius:48px;padding:10px 24px;font-weight:500;color:#1e293b;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:8px;font-size:.9rem}.file-label:hover{border-color:#2563eb;background:#f0f7ff}.file-label input{display:none}.btn{background:#fff;border:1px solid #ccdbe9;padding:10px 20px;border-radius:48px;font-weight:500;color:#1e293b;cursor:pointer;transition:all .15s;font-size:.9rem}.btn-primary{background:#0f1a2e;border-color:#0f1a2e;color:#fff;box-shadow:0 8px 16px -4px #0f1a2e40}.btn-primary:hover{background:#1e2f47}.btn:hover{background:#f4f9ff;border-color:#94a3b8}.control-group{margin-bottom:26px}.control-group label{display:flex;justify-content:space-between;font-weight:550;color:#0b1e33;margin-bottom:8px;font-size:.95rem}.value-badge{background:#e1e9f2;padding:4px 12px;border-radius:40px;font-size:.8rem;font-weight:600;color:#1e3a5f}input[type=range]{width:100%;margin:6px 0 2px;-webkit-appearance:none;background:transparent}input[type=range]::-webkit-slider-runnable-track{height:6px;background:#d7e0e9;border-radius:10px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:22px;width:22px;border-radius:22px;background:#2563eb;margin-top:-8px;box-shadow:0 4px 10px #2563eb4d;border:2px solid white;cursor:grab}.text-input-line{width:100%;padding:12px 16px;border:1.5px solid #dae2ec;border-radius:20px;font-size:1rem;background:#fff;margin-top:6px;transition:border .15s}.text-input-line:focus{border-color:#3b82f6;outline:none;box-shadow:0 0 0 3px #3b82f626}.double-line{display:flex;flex-direction:column;gap:10px}.style-select{width:100%;padding:12px 16px;border-radius:20px;border:1.5px solid #dae2ec;background:#fff;font-size:.95rem;margin-top:6px}.hint-row{display:flex;justify-content:space-between;font-size:.75rem;color:#5e7180;padding:0 4px}.footer-note{margin-top:22px;color:#4b6589;font-size:.8rem;text-align:center;border-top:1px dashed #bdd3e8;padding-top:18px}@media (max-width: 768px){.footer-note{margin:8px 20px 24px;padding-top:16px}}.angle-row{display:flex;gap:12px;align-items:center;margin-top:8px}.angle-value{background:#eef3fc;padding:6px 14px;border-radius:40px;font-weight:600;font-size:.9rem;min-width:70px;text-align:center;color:#0f3b6f}