:root{color-scheme:light;--bg:#f2f3eb;--paper:#fcfcf8;--ink:#253632;--sub:#50605a;--line:#d4dbd2;--accent:#225844;font-family:"DM Sans","Microsoft YaHei","PingFang SC",sans-serif;color:var(--ink);background:var(--bg)}
*{box-sizing:border-box}
body{margin:0;min-width:300px}
button,input{font:inherit}
button{cursor:pointer;color:inherit}
button:disabled{opacity:.45;cursor:default}
button:focus-visible,.upload:focus-within,.upload:has(+input:focus-visible){outline:3px solid #78a68b;outline-offset:3px}
.topbar{height:62px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #dce1d6;padding:0 max(5%,calc((100vw - 1180px)/2));background:#fbfcf6;gap:12px}
.brand{display:flex;gap:10px;align-items:center;white-space:nowrap;font-size:15px;font-weight:700;letter-spacing:.05em}
.brand-icon{display:block;width:23px;height:23px;border:2px solid var(--accent);border-radius:5px;background:linear-gradient(90deg,transparent 45%,var(--accent) 45% 53%,transparent 53%),linear-gradient(0deg,transparent 36%,var(--accent) 36% 44%,transparent 44%);background-color:#e5efe3}
.privacy{color:var(--sub);font-size:12px;white-space:nowrap}
.privacy i{display:inline-block;width:7px;height:7px;border-radius:100%;background:#467757;margin-right:6px}
main{max-width:1240px;margin:auto;padding:42px 30px 45px}
.intro{margin:0 0 22px}
h1{margin:0;font-size:clamp(28px,4.5vw,46px);line-height:1.25;letter-spacing:-.045em}
.intro p{margin:10px 0 0;color:var(--sub);font-size:14px;line-height:1.6}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 254px;gap:16px;align-items:start}
.preview,.controls{background:var(--paper);border:1px solid var(--line);border-radius:14px;min-width:0}
.preview{overflow:hidden;box-shadow:0 5px 18px #3b463508}
.preview-header,.preview-footer{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px}
.tabs{display:flex;gap:2px;background:#eaece3;padding:3px;border-radius:8px}
.tabs button,.download,.example{border:0;border-radius:6px;background:transparent;font-size:13px;min-height:36px;white-space:nowrap}
.tabs button{padding:0 10px;color:#4d5f56}
.tabs button[aria-pressed=true]{background:#fff;color:#254d3e;box-shadow:0 1px 2px #0001;font-weight:700}
.download{background:#e3ede4;color:#21533e;padding:0 10px;font-weight:700}
.download span{margin-left:4px}
.drawing{min-height:320px;display:grid;place-items:center;padding:20px;background-color:#e8ebe2;background-image:linear-gradient(#dfe4d9 1px,transparent 1px),linear-gradient(90deg,#dfe4d9 1px,transparent 1px);background-size:20px 20px}
canvas{display:block;max-width:100%;max-height:58vh;width:auto;height:auto;object-fit:contain;box-shadow:0 3px 20px #24353013;background:white}
.preview-footer{font-size:12px;color:#50605a;padding:13px 14px;min-height:45px}
#filename{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#counts{white-space:nowrap}
.controls{padding:16px}
h2{font-size:14px;margin:0 0 11px}
.upload{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;min-height:108px;border:1px dashed #669481;border-radius:9px;background:#ecf2e8;cursor:pointer;text-align:center;color:#214d3b}
.upload:hover{background:#e5eee4}
.upload-icon{font-size:25px;line-height:1}
.upload strong{font-size:14px}
.upload small{font-size:11px;color:#54695e}
.file-input{position:absolute;width:1px;height:1px;opacity:0}
.example{margin-top:4px;padding:0 2px;text-decoration:underline;text-underline-offset:3px;color:#426052}
.palettes{border-top:1px solid var(--line);padding-top:16px;margin-top:8px}
.palette-options{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.palette-options button{display:grid;place-items:center;gap:5px;background:#f5f6ef;border:1px solid transparent;border-radius:7px;padding:7px 0;min-height:48px;font-size:12px}
.palette-options button[aria-pressed=true]{background:#e6ede4;border-color:#6c9982}
.swatch{width:23px;height:12px;border-radius:4px}
.natural{background:linear-gradient(90deg,#e7bb8d 50%,#eadbbb 50%)}
.sage{background:linear-gradient(90deg,#9cc6a5 50%,#d3dfb2 50%)}
.slate{background:linear-gradient(90deg,#9cb4cc 50%,#d0d2df 50%)}
#status{font-size:12px;color:#43594c;line-height:1.55;margin:13px 0 0}
#status[data-kind=error]{color:#972f21}
@media(max-width:720px){
  .topbar{height:53px;padding:0 14px}
  main{padding:20px 12px 26px}
  .intro{margin-bottom:15px}
  .workspace{grid-template-columns:1fr;gap:12px}
  .controls{grid-row:1;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px}
  .palettes{border:0;margin:0;padding:0}
  h2{margin-bottom:7px}
  .upload{min-height:66px;gap:2px}
  .upload-icon{display:none}
  .example{min-height:28px}
  #status{grid-column:1/-1;margin:0}
  .drawing{min-height:0;padding:10px}
  canvas{max-height:none}
  .preview-header,.preview-footer{padding:8px}
  .tabs button,.download{padding:0 7px}
}
[hidden]{display:none!important}
:root{color-scheme:dark;--bg:#0a0c10;--paper:#161a23;--ink:#eef0f5;--sub:#a7b0be;--line:#2a303d;--accent:#c9a86a;--cyan:#4fbfc9;--spring:cubic-bezier(.2,.85,.26,1.14);font-family:"DM Sans","Microsoft YaHei UI","PingFang SC",sans-serif}
body{background:radial-gradient(ellipse at 18% -14%,#2b2531 0,transparent 53%),radial-gradient(ellipse at 100% 98%,#122b32 0,transparent 55%),var(--bg);min-height:100vh}
.topbar{background:#10131ad9;border-color:#2a303d;backdrop-filter:blur(14px)}
.brand{color:#ddbf85;letter-spacing:.16em}
.brand-icon{width:19px;height:19px;transform:rotate(45deg);border-radius:5px;background:#c9a86a17;box-shadow:inset 0 0 0 3px #181924,0 0 15px #c9a86a33}
main{padding-top:34px}
h1{font-size:clamp(28px,4vw,43px);letter-spacing:-.03em;font-weight:700}
.intro p{color:var(--sub)}
.workspace{grid-template-columns:minmax(0,1fr) 272px}
.preview,.controls{background:linear-gradient(145deg,#1d232e,#151924 85%);box-shadow:0 16px 48px #0005,inset 0 1px #fff0;border-color:#343a49}
.preview-header,.preview-footer{background:#181d27}
.preview-footer,#counts,.upload small,.example,#status{color:var(--sub)}
.drawing{position:relative;background-color:#10141c;background-image:linear-gradient(#212833 1px,transparent 1px),linear-gradient(90deg,#212833 1px,transparent 1px);overflow:hidden}
canvas{box-shadow:0 10px 32px #0009}
.tabs{background:#0e1219;border:1px solid #292f3b}
.tabs button{color:#a7b0be}
.tabs button[aria-pressed=true]{color:#efd398;background:#59472d60;box-shadow:inset 0 0 0 1px #a6874c6b}
.download,#generate{background:linear-gradient(180deg,#e8cc94,#c9a86a);color:#18130d;font-weight:700;border:0}
.upload{background:radial-gradient(ellipse at 50% 0%,#b695572b,transparent 85%),#151a22;border-color:#a98856;color:#f1d49a}
.upload:hover{background-color:#222522}
.palette-options button{background:#181e28;color:#bdc7d5}
.palette-options button[aria-pressed=true]{border-color:#a88954;background:#352d21;color:#f5d59c}
.motion,.pdf-page select,#access{border:1px solid var(--line);background:#10141c;color:var(--ink);border-radius:8px;min-height:34px;padding:0 9px}
.motion span{color:#e8c785;margin-left:3px}
.drawing-tools{display:flex;gap:6px;flex-wrap:wrap;background:#181d27;padding:0 12px 10px}
.drawing-tools button{border:1px solid #383e4d;border-radius:8px;background:#141923;color:#b9c3d1;padding:0 10px;min-height:33px;font-size:12px}
.drawing-tools button[aria-pressed=true]{border-color:#a88954;color:#f0cf92}
.pdf-page{display:flex;align-items:center;justify-content:space-between;gap:9px;font-size:12px;color:var(--sub);padding:9px 0}
.pdf-page select{min-width:70px}
.ai{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}
.ai p{font-size:12px;color:var(--sub);line-height:1.5;margin:0 0 10px}
#access,#generate{width:100%;min-height:40px;font-size:13px}
#generate{border-radius:8px;margin-top:7px}
#status[data-kind=error]{color:#ffb4a8}
button,.upload{transition:background-color 180ms ease,border-color 180ms ease,box-shadow 180ms ease,transform 240ms var(--spring)}
button:not(:disabled):active,.upload:active{transform:scale(.96)}
.preview{animation:enter 440ms var(--spring) both}
.controls{animation:enter 490ms var(--spring) both}
canvas.reveal{animation:reveal 330ms ease both}
#scan{position:absolute;inset:0;pointer-events:none;display:none}
.processing #scan{display:block;background:linear-gradient(to bottom,transparent 46%,#65d8e125 49%,#77e9f0a0 50%,transparent 51%);animation:scan 1.7s ease-in-out infinite}
@keyframes enter{from{opacity:.35;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes reveal{from{opacity:.65;transform:scale(.991)}to{opacity:1;transform:scale(1)}}
@keyframes scan{from{transform:translateY(-48%)}to{transform:translateY(48%)}}
[data-motion=off] *,[data-motion=off] *::before,[data-motion=off] *::after{animation:none!important;transition:none!important}
[data-motion=off] .processing #scan{display:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.processing #scan{display:none}}
@media(max-width:720px){
  main{padding-top:18px}
  .workspace{grid-template-columns:1fr}
  .ai{grid-column:1/-1;margin:0}
  .preview-header{flex-wrap:wrap}
  .tabs{flex-wrap:wrap}
  .tabs button,.download{min-height:37px}
}