:root{font-family:Inter,'Segoe UI',Tahoma,sans-serif;color-scheme:light;--bg:#f6f8fc;--surface:#fff;--fg:#182232;--muted:#6f7b8e;--border:#e1e7ef;--blue:#316ce2;--sub:#edf2f9;--shadow:0 15px 45px rgba(30,45,80,.045)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);transition:background .24s,color .24s}body.dark{color-scheme:dark;--bg:#10151e;--surface:#1b2430;--fg:#f0f4f9;--muted:#a2adbb;--border:#344252;--blue:#6091f9;--sub:#242f3d;--shadow:0 15px 45px rgba(0,0,0,.12)}button,textarea{font:inherit}button{cursor:pointer;border-radius:11px;padding:11px 18px;font-weight:600;transition:transform .14s,background .2s}button:active{transform:scale(.98)}button:disabled{opacity:.42;cursor:not-allowed}.primary{background:var(--blue);border:1px solid var(--blue);color:white}.secondary{background:var(--surface);border:1px solid var(--border);color:var(--fg)}.shell{max-width:1190px;margin:auto;padding:0 24px}header{display:flex;justify-content:space-between;align-items:center;padding:25px 0;border-bottom:1px solid var(--border)}.brand{display:flex;gap:12px;align-items:center}.brandmark{background:var(--blue);color:#fff;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;font-size:27px}.brand strong{display:block;font-size:19px;letter-spacing:-.5px}.brand small{font-size:11px;color:var(--muted)}.hero{text-align:center;padding:64px 0 36px}.eyebrow{display:inline-block;color:var(--blue);font-size:13px;font-weight:700;background:var(--sub);border-radius:50px;padding:8px 16px}.hero h1{font-size:clamp(30px,5vw,49px);letter-spacing:-1.5px;line-height:1.35;margin:18px 0}.hero h1 span{color:var(--blue)}.hero p{color:var(--muted);font-size:15px;line-height:1.85;margin:auto;max-width:690px}.panel{background:var(--surface);border:1px solid var(--border);border-radius:17px;box-shadow:var(--shadow)}.drop{margin:22px;border:2px dashed var(--border);border-radius:13px;padding:35px 15px;text-align:center;transition:border-color .2s,background .2s}.drop.hover{border-color:var(--blue);background:var(--sub)}.cloud{font-size:36px;background:var(--sub);color:var(--blue);width:65px;height:65px;border-radius:18px;margin:auto;display:grid;place-items:center}.drop h2{font-size:19px;margin:17px 0 6px}.drop p,.heading p{color:var(--muted);font-size:13px}.drop button{margin-top:12px}.actions{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 22px 18px;font-size:13px;color:var(--muted);flex-wrap:wrap}.action-buttons,.exports{display:flex;gap:8px}.progress{margin:0 22px;height:5px;background:var(--sub);border-radius:20px;overflow:hidden}.progress>div{height:100%;width:0%;background:var(--blue);transition:width .2s}#status{font-size:12px;color:var(--muted);padding:5px 22px 13px;line-height:1.7}.workspace{margin-top:35px}.heading{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}.heading h2{margin:0}.editgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.preview,.editor{padding:15px;min-height:540px}.subheading{font-size:14px;font-weight:700;display:flex;justify-content:space-between;padding:8px 4px 13px;color:var(--fg)}.subheading span{font-size:12px;color:var(--muted)}.imagewrap{background:var(--sub);height:510px;overflow:auto;display:flex;justify-content:center;align-items:flex-start;border-radius:10px}.imagewrap img{max-width:100%;height:auto;object-fit:contain}.editor textarea{width:100%;height:475px;padding:16px;resize:vertical;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:10px;line-height:1.85;font-size:15px;white-space:pre-wrap}.hint{font-size:12px;color:var(--muted)}.pageButtons{display:flex;gap:8px;margin:18px 0;flex-wrap:wrap}.pageButtons button.current{background:var(--blue);color:white;border-color:var(--blue)}footer{text-align:center;color:var(--muted);font-size:12px;padding:40px 0}@media(max-width:750px){.shell{padding:0 14px}.hero{padding:44px 0 25px}.editgrid{grid-template-columns:1fr}.preview,.editor{min-height:initial}.imagewrap{height:380px}.actions{align-items:stretch}.action-buttons{width:100%}.action-buttons button{flex:1}.exports{width:100%}.exports button{flex:1}}
.access{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0}.access input{font:inherit;padding:8px 10px;border:1px solid currentColor;border-radius:8px;background:transparent;color:inherit;max-width:100%}
