*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,Helvetica Neue,Noto Sans TC,sans-serif;background:#fff;color:#222;overflow:hidden;height:100vh}#app{display:flex;height:100vh}#sidebar{width:220px;background:#fafafa;padding:24px 16px;overflow-y:auto;flex-shrink:0;border-right:1px solid #e0e0e0}#sidebar h1{font-size:14px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:#999;margin-bottom:24px}.panel{margin-bottom:20px}.panel>label{display:block;font-size:11px;color:#999;margin-bottom:6px;font-weight:500;letter-spacing:.02em}.panel>label span{color:#222;font-weight:600}#char-input{width:100%;padding:10px 12px;font-size:28px;text-align:center;background:#fff;border:1px solid #ddd;border-radius:4px;color:#111;outline:none;font-weight:300}#char-input:focus{border-color:#111}#shape-selector,#skeleton-source{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}.shape-btn,.src-btn{padding:5px 8px;font-size:11px;background:#fff;border:1px solid #ddd;border-radius:3px;color:#666;cursor:pointer;transition:all .15s}.shape-btn:hover,.src-btn:hover{border-color:#999;color:#222}.shape-btn.active,.src-btn.active{background:#222;color:#fff;border-color:#222}input[type=range]{width:100%;accent-color:#222;height:2px}input[type=color]{width:100%;height:28px;border:1px solid #ddd;border-radius:3px;background:#fff;cursor:pointer;padding:2px}input[type=checkbox]{accent-color:#222;margin-right:6px}input[type=file]{display:none}.file-label{display:block;padding:8px;background:#fff;border:1px dashed #ccc;border-radius:3px;text-align:center;cursor:pointer;font-size:11px;color:#999;margin-top:6px;transition:all .15s}.file-label:hover{border-color:#666;color:#666}.file-label.loaded{border-color:#222;color:#222;border-style:solid}#ttc-font-select{width:100%;padding:6px 8px;font-size:11px;border:1px solid #ddd;border-radius:3px;background:#fff;color:#222;margin-top:6px;outline:none;cursor:pointer}#ttc-font-select:focus{border-color:#111}.skeletonize-label{display:block;font-size:11px;color:#666;margin-top:8px;cursor:pointer}#export-svg{width:100%;padding:10px;font-size:12px;background:#222;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:500;letter-spacing:.03em;transition:background .15s}#export-svg:hover{background:#444}#canvas-wrap{flex:1;display:flex;align-items:center;justify-content:center;background:#fff;position:relative}#canvas{width:100%;height:100%}.hidden{display:none!important}#custom-preview{margin-top:6px;padding:8px;background:#f5f5f5;border-radius:3px;text-align:center}#custom-preview svg{max-width:36px;max-height:36px}