@font-face{font-family:KNBobohei;src:url('./assets/fonts/bobo-hand.woff2') format('woff2');font-weight:700;font-style:normal;font-display:block}
:root{--paper:#fffaf0;--ink:#51433e;--muted:#806d65;--line:#51433e;--hand:KNBobohei,'KaiTi',cursive;font-family:var(--hand);font-synthesis:none;color:var(--ink);background:var(--paper)}
body{background-image:radial-gradient(#d8c6af80 1px,transparent 1px);background-size:20px 20px}
body,button,input,select,option,dialog,.brand-sub,.brand-icon,.step-number,.preview-size,.empty-icon,.primary>span{font-family:var(--hand)}
.site-header{padding-top:27px}.site-header:after{background:#bf9b81;height:1px}.brand{color:#655044}.brand-icon{background:#ffe7a2;border-color:var(--ink);box-shadow:3px 3px 0 #dfbaa3;border-radius:11px 7px 12px 6px}.brand-sub{font-size:12px;letter-spacing:1px}.text-button{background:#ffe1e5;font-size:15px;border-color:var(--ink);box-shadow:3px 3px 0 #e5b5ba}.local-badge{font-size:13px}.local-badge i{background:#8dba9b}
.eyebrow{background:#fff0b7;font-size:16px;border-color:#a88e59;box-shadow:3px 3px 0 #ead8a4;letter-spacing:2px}.intro h1{font-weight:700;font-size:clamp(40px,5.3vw,62px);color:#5b4843}.intro h1 span:after{height:17px;bottom:0;border:0;background:#ffd9df;border-radius:40% 30% 50% 25%;transform:rotate(-2deg);opacity:.8}.intro p{font-size:17px;color:#89756b;margin-top:21px}.hero-star{color:#b99643;fill:#fff0b5;filter:drop-shadow(3px 4px 0 #eedec0)}.hero-arrow{color:#ba8799}.hero-note{color:#a86e84;font-size:20px}.intro:after{content:'♡';position:absolute;left:13%;bottom:30px;color:#dba0ac;font-size:36px;transform:rotate(-16deg)}
.controls,.preview-panel{border-color:#68564c;border-width:2px}.controls{background:#fffef8;box-shadow:5px 6px 0 #e8d7bd;border-radius:17px 11px 19px 9px}.preview-panel{box-shadow:6px 7px 0 #d6e5e3;border-radius:15px 9px 17px 8px}.controls:before{background:repeating-linear-gradient(100deg,#ffd0d9c9 0 5px,#ffe4e9dd 5px 8px);border-color:#cb97a566;height:24px}.preview-panel:before{background:repeating-linear-gradient(100deg,#b8dcd8ce 0 5px,#ddf0e9e0 5px 8px);border-color:#91bab366;height:24px}.panel-title h2{font-size:25px}.step-number{background:#ffedb9;border-color:#9b825f;font-size:17px;color:#785a39}.preview-title .step-number{background:#dceee8;border-color:#86aea3;color:#527b70}.tiny-spark{color:#cc9d46}
.upload{background:#fff4e1;border-color:#c5a47c;border-radius:12px 17px 11px 15px;gap:8px}.upload:last-child{background:#fcebf0;border-color:#cea1b2}.upload:hover,.upload.dragging{background:#fff1bc;border-color:#947d50}.upload-icon{color:#b2915b}.upload:last-child .upload-icon{color:#b989a0}.upload strong{font-size:19px;color:#655047}.upload-hint{font-size:12px;color:#8c7463}.field-note{font-size:13px;color:#8a746a;line-height:1.8}.primary{background:#f4b8c8;color:#594249;border-color:#795a62;box-shadow:3px 3px 0 #fff,5px 5px 0 #bd8c99;border-radius:12px 9px 15px 7px;font-size:24px}.primary:disabled{background:#f1e4dc;color:#9c8b80;border-color:#c4b09e;box-shadow:3px 3px 0 white,5px 5px 0 #e1cbb9}.generate-section>.field-note{font-size:12px;letter-spacing:0}.upload-tip{font-size:12px;color:#8b756a;border-color:#d2bdaa}.progress-wrap p,#symbol-choice,select{font-size:14px;color:#7b655d}progress{accent-color:#c78ea2}
.preview-heading{background:#eff7f2;border-radius:14px 8px 0 0;border-color:#bad5c9;padding-top:23px;padding-bottom:20px}.preview-title{font-size:26px;color:#58786f}.preview-size{font-size:13px;color:#7f958a;border:1px dashed #98b8a7;background:#fffdf4;border-radius:7px 3px 6px 4px}.preview-stage{background-color:#fffcf5;background-image:linear-gradient(#b2c6b522 1px,transparent 1px),linear-gradient(90deg,#b2c6b522 1px,transparent 1px);background-size:25px 25px;position:relative}.empty-icon{color:#a58dc1;gap:22px}.empty-icon>span{color:#d2a14a}.empty-state h3{color:#7c6a61;font-size:24px}.empty-state p{font-size:15px;color:#9b877b}.empty-state:after{content:'✧  ·  ♡  ·  ✧';display:block;color:#d5a3ad;font-size:24px;letter-spacing:8px;margin-top:25px}.preview-frame{border-color:#8d7c6a;box-shadow:4px 4px 0 #e7d7bd}.result-area{background:#fffefa;border-color:#d1c3ae;border-radius:0 0 15px 8px}.status-pill{font-size:13px;border-color:#c5b49e;color:#988575;background:#fff7e6;border-radius:9px 4px 11px 5px}.status-pill.success{background:#e3f1df;color:#496c50;border-color:#83a786}.scan-note{font-size:13px;color:#947c6f}.download,.secondary{font-size:20px;border-radius:10px 6px 12px 7px;border-color:#796b59;box-shadow:3px 3px 0 #d1bca2}.download{background:#ffdf98;color:#68543c}.secondary{background:#e8e2f4;color:#7b678f}.download:disabled,.secondary:disabled{background:#f2eee7;color:#b5a99a;border-color:#dacdbb;box-shadow:2px 2px 0 #e5d8c6}.privacy-note{font-size:13px;color:#998478}footer{border-top:1.5px dashed #bea88e}footer>span{font-size:13px;color:#9a8273}footer:after{content:'✿';color:#d6a4b4;font-size:30px}
dialog{border-color:#866d61;background:#fffcf1;box-shadow:8px 9px 0 #d8bea6;border-radius:18px 12px 20px 10px}dialog::backdrop{background:#71594766}dialog li,dialog p{font-size:16px;color:#8a7365}dialog .close{background:transparent;color:#9f7e71}#toast{font-size:16px;background:#fff3cd;border-color:#ad9068;color:#725b47;box-shadow:4px 4px 0 #dac1a0}
@media(max-width:1050px){.intro h1{font-size:50px}.preview-title{font-size:23px}.preview-size{font-size:11px}.panel-title h2{font-size:23px}}
@media(max-width:720px){.brand-sub{font-size:10px}.text-button{font-size:13px}.intro h1{font-size:43px}.intro p{font-size:14px}.eyebrow{font-size:13px}.intro:after{left:0;bottom:19px;font-size:27px}.hero-note{font-size:15px}.panel-title h2{font-size:25px}.upload-hint{font-size:12px}.upload-tip{font-size:12px}.generate-section>.field-note{font-size:11px}.preview-title{font-size:24px}.preview-size{font-size:11px}.empty-state h3{font-size:21px}.empty-state p{font-size:14px}.privacy-note{font-size:12px}footer>span{font-size:11px}.download,.secondary{font-size:19px}}
@media(max-width:370px){.intro h1{font-size:37px}.preview-title{font-size:21px}.preview-size{font-size:10px}.download,.secondary{font-size:17px}}

/* PP rainbow bubble palette */
:root{--paper:#faf5ff;--ink:#594786;--muted:#8d7aaa;--line:#a593cb;--hand:KNBobohei,cursive;color:var(--ink)}
body{background-color:var(--paper);background-image:radial-gradient(ellipse at 8% 10%,#d9f5ff99,transparent 38%),radial-gradient(ellipse at 95% 30%,#ffe1ef99,transparent 40%),radial-gradient(#cab8e060 1px,transparent 1px);background-size:auto,auto,21px 21px}
body,body *{font-family:var(--hand)!important;font-synthesis:none}
.brand{color:#7754b0;gap:8px}.brand-logo{display:block;object-fit:contain;flex:none;filter:drop-shadow(0 3px 3px #b9a4e440)}
.site-header{padding-top:15px;padding-bottom:15px}.site-header:after{background:#d2bdea}.brand-sub{color:#aa7bbd}.text-button{background:#ffe1f3;border-color:#b494d3;box-shadow:3px 3px 0 #d6bfef}.local-badge{color:#9380ae}.local-badge i{background:#85d5e8}
.eyebrow{background:#fff1b9;color:#9c729d;border-color:#dabde3;box-shadow:3px 3px 0 #f3d4ec}.intro h1{color:#6e4c9f;font-weight:700;line-height:1.45}.intro h1 span:after{background:linear-gradient(100deg,#b7ecff,#e5c5ff,#ffbfdd);opacity:.7;height:19px}.intro p{color:#9780b2}.hero-star{color:#c6a044;fill:#fff0ad;filter:drop-shadow(3px 4px 0 #f1d9ed)}.hero-arrow{color:#bb8de1}.hero-note{color:#d775b3}.intro:after{color:#e491c2}
.controls{background:#fffaff;border-color:#b59ad1;box-shadow:5px 6px 0 #e3cff6}.preview-panel{border-color:#a5b4de;box-shadow:6px 7px 0 #c9eafa}.controls:before{background:repeating-linear-gradient(100deg,#ffcde6dd 0 5px,#ffe8f3dd 5px 8px);border-color:#dfacd255}.preview-panel:before{background:repeating-linear-gradient(100deg,#beeaffdd 0 5px,#e7f5ffdd 5px 8px);border-color:#9acded66}
.panel-title h2{color:#8763b4}.step-number{background:#f0dfff;color:#9a6ab5;border-color:#c3a0dc}.preview-title .step-number{background:#d9f3ff;color:#6b9dc0;border-color:#a6cee5}.tiny-spark{color:#dca94b}
.upload{background:#edf8ff;border-color:#a8c8e8}.upload:last-child{background:#fff0f8;border-color:#dfb3d6}.upload:hover,.upload.dragging{background:#eee6ff;border-color:#b99cde}.upload-icon{color:#90b5db}.upload:last-child .upload-icon{color:#d398bf}.upload strong{color:#8d6aad}.upload-hint,.field-note,.upload-tip{color:#9a86ae}.upload-tip{border-color:#dfccec}.primary{color:#765099;background:linear-gradient(110deg,#ccefff,#e5ceff 50%,#ffd5eb);border-color:#b394cf;box-shadow:3px 3px 0 white,5px 5px 0 #d0b7e7}.primary:disabled{background:#eee6f4;color:#b3a1c0;border-color:#d1bfdf;box-shadow:3px 3px 0 white,5px 5px 0 #e3d5ef}
.preview-heading{background:linear-gradient(100deg,#e7f6ff,#f0eaff,#fff0f8);border-color:#d1c5e7}.preview-title{color:#8470b0}.preview-size{background:#fff9ff;color:#9b84b5;border-color:#c5acde}.preview-stage{background-color:#fffcff;background-image:linear-gradient(#cab6e21a 1px,transparent 1px),linear-gradient(90deg,#cab6e21a 1px,transparent 1px)}.empty-icon{color:#ae8fdb}.empty-icon>span{color:#e3b256}.empty-state h3{color:#9a7eaf}.empty-state p{color:#b099c1}.empty-state:after{color:#dea3ca}.preview-frame{border-color:#b69acf;box-shadow:4px 4px 0 #e6d5f5}.result-area{background:#fffcff;border-color:#ddcfec}.status-pill{background:#f3eafd;color:#a68aba;border-color:#d4bce6}.status-pill.success{background:#e5f7ff;color:#6a96b9;border-color:#a4c9e2}.scan-note,.privacy-note{color:#a48ab5}
.download{background:linear-gradient(110deg,#d6edff,#e5d2ff);color:#8461ad;border-color:#b399cf;box-shadow:3px 3px 0 #d5bfe8}.secondary{background:#ffe4f3;color:#b1769e;border-color:#d5a9c9;box-shadow:3px 3px 0 #edc8e1}.download:disabled,.secondary:disabled{background:#f1eaf7;color:#b8a7c5;border-color:#ddd0e8;box-shadow:2px 2px 0 #e7dced}
footer{border-color:#d7bfe6}footer>span{color:#ac8cbb}footer:after{color:#dc9bc8}footer .brand-logo{width:48px;height:48px}dialog{background:#fff8ff;border-color:#b89ad5;box-shadow:8px 9px 0 #dfc6ef}dialog h2{color:#9c72b6}dialog li,dialog p{color:#9e85b2}dialog::backdrop{background:#7f659455}#toast{background:#f8eaff;border-color:#c8a9df;color:#a379b6;box-shadow:4px 4px 0 #e1c8ed}
@media(max-width:720px){.site-header{padding-top:12px;padding-bottom:13px;gap:8px}.brand-logo{width:52px;height:52px}.brand{font-size:24px}.brand-sub{font-size:9px;letter-spacing:.5px}.intro h1{font-size:39px}.intro p{font-size:13px}.hero-note{top:174px}.text-button{font-size:12px}.panel-title h2{font-size:22px}.preview-title{font-size:21px}.empty-state h3{font-size:19px}.download,.secondary{font-size:17px}}
@media(max-width:370px){.brand-logo{width:45px;height:45px}.intro h1{font-size:34px}.hero-note{display:none}.preview-title{font-size:19px}.download,.secondary{font-size:16px}}
.brand-words{display:flex;flex-direction:column;gap:4px;align-items:flex-start;line-height:1.35}.brand-name{font-size:30px}.brand-words .brand-sub{display:block;margin:0;font-size:13px;letter-spacing:1px;color:#a582bb}footer{gap:16px}footer>span{text-align:right}
@media(max-width:720px){.brand-name{font-size:23px}.brand-words .brand-sub{font-size:10px;letter-spacing:.3px}.local-badge{display:none}footer .brand{font-size:19px;gap:4px}footer>span{font-size:10px;max-width:140px;line-height:1.8}}
@media(max-width:370px){.brand-name{font-size:20px}.brand-words .brand-sub{display:block;font-size:9px}.site-header .brand-logo{width:40px;height:40px}footer .brand-logo{width:35px;height:35px}footer .brand{font-size:17px}}
.preview-frame{border:0;box-shadow:none;background:transparent}
:root{--focus-ring:#fff;--focus-accent:#c5acde}.upload:first-child{--focus-accent:#bfa3df}.upload:last-child{--focus-accent:#e2aecb}
footer .brand-name{font-size:22px}footer .brand-words .brand-sub{font-size:11px}dialog h2{line-height:1.5;overflow-wrap:anywhere}@media(max-width:720px){footer .brand-name{font-size:18px}footer .brand-words .brand-sub{font-size:9px}}
