:root{font-family:"Microsoft YaHei",system-ui,sans-serif;color:#343b37;background:#f8f8f2;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,select,input{font:inherit}button,summary,label.upload{cursor:pointer}button{border:1px solid #dce2d6;border-radius:10px;background:white;color:inherit;padding:11px 16px}button:hover{border-color:#70866a}button:disabled{opacity:.45;cursor:default}button:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #b6c3e2;outline-offset:3px}header{height:84px;display:flex;align-items:center;gap:28px;border-bottom:1px solid #e4e7dd;padding:0 5vw;background:#fffdf8}.brand{text-decoration:none;font-size:22px;font-weight:800;color:#43543d}header span{font-size:13px;color:#929689}header small{margin-left:auto;background:#eef1e6;border-radius:30px;padding:9px 16px;color:#617052}main{max-width:1480px;margin:auto;padding:42px 5vw 16px}.eyebrow{font-size:12px;letter-spacing:2px;color:#7d896b}h1{font-size:38px;line-height:1.45;letter-spacing:1px;margin:12px 0}p{line-height:1.8}.intro{margin-bottom:30px}.intro p{color:#858b7e;margin:0}.workspace{display:grid;grid-template-columns:310px minmax(0,1fr);gap:28px}aside{display:flex;flex-direction:column;gap:18px}.card{background:#fffefb;border:1px solid #e3e5d9;border-radius:18px;padding:22px}h2{font-size:15px;margin:0 0 18px;font-weight:700}h2 b{display:inline-grid;place-items:center;background:#eaf0de;border-radius:50%;width:26px;height:26px;font-size:13px;margin-right:7px;color:#74825c}.upload{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:162px;gap:12px;border:1.5px dashed #c6cfb8;background:#f7f9f0;border-radius:12px}.upload span{font-size:30px;color:#8a9c74}.upload strong{font-size:14px}.upload small{font-size:10px;color:#8a927e}#filename{font-size:12px;color:#89907f;overflow-wrap:anywhere}.quiet{background:transparent;font-size:12px;padding:8px 12px}.field{display:block;font-size:13px;margin:18px 0}select{display:block;width:100%;margin-top:9px;padding:11px 8px;border:1px solid #e0e3d6;background:#fbfcf6;border-radius:8px;color:#555e4c}.primary{background:#687e52;color:white;border:0;width:100%;margin-top:5px;padding:14px;font-weight:600}.note{font-size:11px;color:#8b917f;line-height:1.9}.toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:16px;font-size:12px;margin-bottom:15px}.tabs{background:#eceedf;border-radius:10px;padding:4px;display:flex;gap:3px;margin-right:auto}.tabs button{font-size:12px;border:none;background:transparent;padding:9px 14px}.tabs .active{background:white;box-shadow:0 2px 5px #00000008}.toolbar label{display:flex;align-items:center;gap:5px}input{accent-color:#6b8054}.zoom input{width:75px}.board-wrap{height:660px;border:1px solid #e0e4d7;border-radius:18px;background-color:#f0f2e9;background-image:radial-gradient(#cfd5c5 .7px,transparent .7px);background-size:14px 14px;overflow:auto;padding:22px;display:flex;align-items:flex-start}.board-wrap:has(#empty:not([hidden])){align-items:center;justify-content:center}#empty{text-align:center;color:#818c70}#empty h2{font-size:18px;margin:20px 0 5px}#empty p{font-size:12px}.empty-icon{font-size:74px;color:#b6c694}.mini-beads{display:flex;gap:9px;justify-content:center;margin-top:28px}.mini-beads i{width:22px;height:22px;border-radius:6px;background:#c2cfa4}.mini-beads i:nth-child(2){background:#edc0b3}.mini-beads i:nth-child(3){background:#e9d58e}.mini-beads i:nth-child(4){background:#b7cddd}.mini-beads i:nth-child(5){background:#cbbedd}canvas{flex:none;box-shadow:0 5px 20px #43523715}#source{max-width:100%;max-height:610px;object-fit:contain;margin:auto}#status{font-size:12px;color:#7c886e;min-height:22px}.export{display:flex;gap:10px;flex-wrap:wrap}.export button{font-size:12px}.usage{margin-top:23px}.usage-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}.usage-heading h2{margin:0}.usage-heading span{font-size:11px;color:#89927d}#counts{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.count{display:flex;align-items:center;gap:9px;border:1px solid #e7e9df;border-radius:10px;padding:10px 12px;font-size:12px}.swatch{width:22px;height:22px;border-radius:6px;border:1px solid #00000010}.count small{color:#8e9583}.palette{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:15px 0}.palette button{padding:7px 0;font-size:10px;border-radius:7px;min-height:36px}.palette button.off{opacity:.25;text-decoration:line-through}summary{font-size:13px;font-weight:600}footer{padding:30px 0 10px;font-size:11px;color:#949b88}footer a{color:inherit;margin-left:18px}[hidden]{display:none!important}@media(max-width:900px){header{padding:0 20px}header span{display:none}main{padding:28px 18px}.workspace{grid-template-columns:1fr}.intro h1{font-size:29px}aside{display:grid;grid-template-columns:1fr 1fr}aside details{grid-column:1/-1}.board-wrap{height:550px}.palette{grid-template-columns:repeat(10,1fr)}}@media(max-width:550px){aside{display:flex}header small{font-size:10px}header .brand{font-size:18px}.board-wrap{height:460px;padding:10px}.zoom{display:none}.usage-heading{align-items:flex-start}.palette{grid-template-columns:repeat(7,1fr)}}@media print{header,.intro,aside,.toolbar,.export,footer,#status{display:none}.workspace{display:block}main{padding:0}.board-wrap{height:auto;overflow:visible;padding:0;border:0;display:block;background:none}canvas{width:100%!important;height:auto;box-shadow:none}.usage{break-before:page}.usage .count{break-inside:avoid}@page{size:A3 portrait;margin:10mm}}
:is(aside,.board-area){min-width:0}.upload small{text-align:center;padding:0 8px}.board-wrap{max-width:100%}
:root .zoom{display:flex}