:root{--p:#f8f6f2;--l:#e5ded4;--r:#a62032;--m:#82796e;font:13px Arial,sans-serif;color:#242322;background:var(--p)}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit;border:1px solid var(--l);border-radius:7px;color:inherit}button{min-height:44px;padding:10px 13px;background:#fff;cursor:pointer}button:disabled{opacity:.4}:focus-visible{outline:3px solid #c88c97;outline-offset:3px}[hidden]{display:none!important}.header{padding:22px 40px}.mark{font:700 38px Georgia,serif;color:var(--r)}.intro,.app{max-width:1344px;margin:auto}.intro{padding:34px 0}h1{font:38px/1.15 Georgia,serif;margin:0}h1 em{font-style:normal;color:var(--r)}.app{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:30px;align-items:start;padding-bottom:40px}.pv{position:sticky;top:20px;min-width:0}.frame{background:#eeeae3;border:1px solid #dcd5cc;border-radius:12px;overflow:hidden}.bar,.view,.lb{display:flex;align-items:center;justify-content:space-between}.bar{height:44px;padding:0 20px;color:var(--m)}#stage{position:relative;height:clamp(400px,43vw,610px);touch-action:pan-y;cursor:grab;overflow:hidden;background:#303a45}#stage>canvas{display:block;width:100%;height:100%}#fallback{object-fit:contain}#loading{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:#fff;background:#303a45}.view{padding:12px}.seg,.zoom{display:flex;gap:4px}.seg button{border-color:transparent;background:none}.seg button[aria-pressed=true]{background:#fff;border-color:var(--l)}.zoom button{width:44px;padding:0}.label{margin-top:20px}.label canvas{width:100%;height:78px;display:block}#reference{display:block;margin-top:12px;text-align:right;color:var(--m)}.ctrl{display:grid;gap:16px}.card{padding:24px;background:#ffffffbd;border:1px solid var(--l);border-radius:12px}.card h2{font-size:18px;margin:0 0 22px}.card h2>span{color:var(--r);margin-right:12px}.upload{position:relative;display:grid;place-content:center;text-align:center;gap:8px;min-height:120px;border:1px dashed #cbbeb2;border-radius:8px;background:#faf8f4}.upload input,.file input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.upload:focus-within,.file:focus-within{outline:3px solid #c88c97}.upload>span,.hint,.note,.logo>span{color:var(--m)}.logo{display:flex;align-items:center;gap:8px;margin-top:8px}.logo img{width:32px;height:32px;object-fit:contain}.logo>span{flex:1;min-width:0;overflow-wrap:anywhere}.check{display:flex;align-items:center;gap:8px;min-height:44px}.hint{margin:0 0 16px}.sug,.quote{width:100%;color:var(--r);background:#f9f0ef;border-color:#ead6d6}.clrs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0 22px}.sw input{width:100%;min-height:44px;padding:4px}.sw input[type=text]{font-size:16px;border:0}.styles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0 22px}.styles button{padding:8px 2px;border-top:25px solid var(--sample)}.styles button[aria-pressed=true]{border-color:var(--r);box-shadow:0 0 0 1px var(--r)}.field{display:block;margin-top:16px}.field>input,.field>select,.field>textarea{display:block;width:100%;min-height:44px;padding:11px;font-size:16px;background:#fff;margin-top:8px}textarea{resize:vertical}.adjust,.qbox{border-top:1px solid var(--l);margin-top:22px;padding-top:15px}.adjust summary{min-height:44px}.slider label{display:flex;justify-content:space-between}.slider input{width:100%;min-height:44px;accent-color:var(--r)}.actions,.tools,.qf{display:grid;grid-template-columns:1fr 1fr;gap:8px}.pri,.sec{display:block;text-align:center;min-height:46px;padding:13px;border-radius:7px}.pri{background:var(--r);border:1px solid var(--r);color:#fff}.tools button,.file{position:relative;min-height:44px;text-align:center;padding:12px 2px;background:none;border:0;cursor:pointer}.note{line-height:1.6}.qbox h3{font:21px Georgia,serif;margin:0}.quote{margin-top:15px}.reset{display:block;margin:10px auto -8px;border:0;background:none}#status{line-height:1.6;color:var(--m)}#status.error{color:var(--r)}.res{display:flex;justify-content:space-between}.export img{width:100%;display:block;margin:15px 0}dialog{width:min(440px,calc(100% - 32px));padding:24px;border:1px solid var(--l);border-radius:12px;background:var(--p)}dialog::backdrop{background:#211b1980}dialog p{line-height:1.7}dialog a{margin-top:10px}.sec{border:1px solid var(--l)}@media(max-width:1440px){.intro,.app{margin-left:40px;margin-right:40px}}@media(max-width:760px){.header{padding:12px 20px}.mark{font-size:32px}.intro{padding:20px 0;margin:0 20px}h1{font-size:25px}h1 br{display:none}.app{display:block;margin:0 14px}.pv{top:0;z-index:3;background:var(--p);padding:8px 0 10px;margin-bottom:12px}.bar{height:30px;font-size:8px}#stage{height:min(32vh,300px)}.view{padding:6px 9px}.seg button{padding:6px 4px;font-size:12px}.label{margin-top:8px}.lb{font-size:9px}.label canvas{height:31px}#reference{display:none}.card{padding:22px 20px}}