:root{--ink:#514655;--muted:#92858e;--pink:#f5cbd6;--purple:#e5ddf4;--mint:#dceee5}*{box-sizing:border-box}body{margin:0;background:#fffcf8;color:var(--ink);font-family:'Noto Sans TC',sans-serif;font-size:14px}button,input,textarea,select{font:inherit;color:inherit}button,.file{cursor:pointer;border:1px solid #e9e2e7;background:white;border-radius:13px;padding:11px 18px;transition:.2s}button:hover,.file:hover{transform:translateY(-2px);box-shadow:0 4px 12px #51465510}button:focus-visible,a:focus-visible{outline:3px solid #a58fbd}header{max-width:1140px;margin:auto;height:100px;display:flex;align-items:center;justify-content:space-between;padding:0 30px}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--ink);font-size:34px}.brand span{font-size:21px;letter-spacing:2px;font-weight:700}.brand small{display:block;font-size:8px;letter-spacing:2px;margin-top:3px}header button{background:transparent;font-size:12px}main{max-width:1080px;margin:auto;padding:12px 30px}.hero{background:#f6edf1;border-radius:30px;min-height:345px;display:flex;align-items:center;justify-content:space-between;padding:48px 60px;overflow:hidden;position:relative}.eyebrow{font-size:10px;letter-spacing:2.4px;color:#a18297;font-weight:600}h1{font-size:39px;letter-spacing:2px;line-height:1.5;margin:16px 0}h1 span{display:block}p{line-height:1.9;color:#91818c}.hero p{font-size:13px}.primary{background:#66516c;border:0;color:white;font-weight:500}.hero .primary{margin-top:12px;padding:14px 24px}.cloud{position:relative;border-radius:100px;background:#fffafc;width:270px;height:170px;margin-right:20px;box-shadow:-30px 30px 0 -10px #e7dff0,25px -25px 0 -12px #fffafc;transform:rotate(-6deg);text-align:center;display:flex;flex-direction:column;justify-content:center}.cloud span{font-size:20px}.cloud b{font-size:28px;color:#9b7c92}.cloud i{position:absolute;bottom:-65px;font-size:11px;font-style:normal;letter-spacing:1px;white-space:nowrap;left:10px}.cloud em{position:absolute;right:-32px;top:-35px;font-size:36px;color:#d4b56c}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0 44px}.stats>div{border-radius:18px;padding:22px;display:flex;align-items:center;gap:16px;background:#f9e5dc}.stats>div:nth-child(2){background:#e4efe7}.stats>div:nth-child(3){background:#ede7f6}.stats b{font-size:28px;font-weight:500}.stats span{font-size:12px;color:#8e7d85}.section-title{display:flex;align-items:center;justify-content:space-between}h2{font-size:21px;letter-spacing:1px}h2 small{display:block;font-weight:400;font-size:11px;color:var(--muted);margin-top:8px;letter-spacing:.5px}.pill{background:#eff1e8;padding:7px 12px;border-radius:20px;font-size:10px;color:#83917e}.tools{display:flex;gap:12px;margin:22px 0}.search{flex:1;display:flex;align-items:center;background:white;border:1px solid #eee7e9;border-radius:12px;padding:0 16px;font-size:24px}.search input{border:0;margin:0;background:none;padding:13px 10px;width:100%;outline:none;font-size:12px}.tools select{border:1px solid #eee7e9;border-radius:12px;background:white;padding:10px}#entries{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.entry{border:1px solid #eee6e9;border-radius:18px;background:white;padding:24px;text-align:left;width:100%;position:relative}.entry:nth-child(3n+2){background:#faf8fe}.entry:nth-child(3n+3){background:#f6fbf8}.entry h3{font-size:17px;margin:12px 0}.entry p{white-space:pre-line;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px}.meta{display:flex;justify-content:space-between;font-size:10px;color:#a28e9a}.tag{font-size:10px;display:inline-block;padding:4px 8px;border-radius:8px;background:#f7edf1;margin:3px}.empty{grid-column:1/-1;text-align:center;padding:45px 20px;background:#fff;border:1px dashed #e6dce3;border-radius:20px}.empty b{font-size:44px;display:block}.empty h3{font-weight:500}.empty p{font-size:12px}footer{font-size:11px;color:#ad9ea5;display:flex;justify-content:space-between;margin:44px 0 25px}dialog{border:0;border-radius:24px;padding:30px;max-width:650px;width:calc(100% - 24px);max-height:90dvh;color:var(--ink);background:#fffcf9;box-shadow:0 20px 80px #51465530}dialog::backdrop{background:#51465566;backdrop-filter:blur(5px)}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.modal-head h2{margin:7px 0}.close{border:0;background:#f2eaf0;border-radius:50%;width:35px;height:35px;padding:0;font-size:25px}form>label,.row label{display:block;font-size:12px;margin:18px 0;color:#8a7585}input:not([type=checkbox],[type=range],[type=color]),textarea{display:block;width:100%;border:1px solid #e9dfe6;border-radius:10px;padding:12px;background:#fff;margin-top:7px;outline-color:#baa2ca}textarea{resize:vertical}input[type=range]{display:block;width:100%;accent-color:#a385b2;margin-top:14px}.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.row label{margin:10px 0}output{float:right;font-size:11px;color:#b0869d}.drawing{background:#f3edf7;border-radius:16px;padding:16px;margin:20px 0}.drawing small{display:block;color:#a28eaa;font-size:10px;margin-top:4px}.palette{display:flex;align-items:center;gap:7px;margin:12px 0;flex-wrap:wrap}.palette button,.palette select{padding:6px 9px;font-size:11px;border:1px solid #e3dbe8;border-radius:8px;background:white}.palette input{border:0;width:30px;height:28px;padding:0;background:none}canvas{display:block;background:white;border-radius:12px;width:100%;aspect-ratio:1.8;touch-action:none}.check{display:flex;align-items:center;gap:8px}.check input{accent-color:#a385b2}.actions{display:flex;justify-content:flex-end;gap:10px;margin-top:25px}.backup-card{background:#f3edf7;border-radius:15px;padding:18px;margin:20px 0}.backup-card:nth-of-type(3){background:#e6f0e9}.backup-card p{font-size:12px}.file{display:inline-block;background:white}.file input{display:none}dialog small{font-size:11px;color:#9c8995}#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:#66516c;color:white;padding:12px 25px;border-radius:20px;display:none;z-index:10}.delete{color:#bc707b;background:#fff5f5;margin-right:auto}@media(max-width:700px){header{height:80px;padding:0 20px}.brand span{font-size:18px}header button{padding:9px;font-size:10px}main{padding:0 16px}.hero{padding:32px 27px;min-height:350px}.hero h1{font-size:30px}.hero p{font-size:12px}.cloud{width:130px;height:100px;position:absolute;right:-30px;top:55px;opacity:.7}.cloud b{font-size:19px}.cloud i{display:none}.hero>div:first-child{z-index:1}.stats{gap:8px;margin:16px 0 30px}.stats>div{padding:17px 10px;gap:7px;flex-direction:column}.stats b{font-size:23px}.stats span{font-size:10px}.pill{display:none}#entries{grid-template-columns:1fr}.section-title h2{font-size:19px}.tools{gap:7px}.tools select{max-width:115px;font-size:11px}.search{padding:0 8px}.search input{padding:13px 5px;font-size:11px}footer{display:block;text-align:center;line-height:2}footer span{display:block}dialog{padding:23px 18px}.actions button{padding:10px 12px}.modal-head h2{font-size:18px}}

.hero{background:linear-gradient(115deg,#fce3df,#eee2fa 68%,#dff3ed)}.stats>div:first-child{background:#ffe8bd}.primary{background:#71639e}.cloud{background:#fffdf6;box-shadow:-30px 30px 0 -10px #bfe7db,25px -25px 0 -12px #fffdf6}.entry:nth-child(3n+1){background:#fff4e7}.entry:nth-child(3n+2){background:#f1eaff}.entry:nth-child(3n+3){background:#e9f7ee}.empty{background:linear-gradient(125deg,#fff5dd,#fbe8f0,#eaf5ef)}.brand span{letter-spacing:1px}@media(max-width:700px){.brand span{font-size:15px}.hero h1{font-size:28px}.cloud{top:240px;right:-10px;width:105px;height:85px}.hero{min-height:390px}}