:root{--bg:#fff;--surface:#fafafa;--surface-2:#f0f0f0;--border:#eeebee;--border-strong:#dcdcdc;--text:#0a0a0a;--text-dim:#1a5360;--text-faint:#6a7a7e;--accent:#077;--accent-hover:#0a5a5a;--accent-bg:#00777714;--heading:#053766;--checker-a:#f4f4f4;--checker-b:#eaeaea}@media (prefers-color-scheme:dark){:root{--bg:#0f0f14;--surface:#1a1a22;--surface-2:#22222c;--border:#2a2a36;--border-strong:#3a3a48;--text:#e8e8ec;--text-dim:#9090a0;--text-faint:#60606c;--accent:#3fc1c9;--accent-hover:#5ad5dd;--accent-bg:#3fc1c924;--heading:#8fb3d8;--checker-a:#1a1a22;--checker-b:#22222c}}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;margin:0;font-family:Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:1.4}.layout{display:grid;grid-template-columns:320px 1fr;overflow:hidden;height:100vh}.sidebar{background:var(--surface);border-right:1px solid var(--border);display:flex;overflow:hidden;flex-direction:column}.sidebar-scroll{overflow-y:auto;flex:1;padding:18px 16px 16px}.main{display:flex;overflow:hidden;flex-direction:column;justify-content:center;align-items: center;gap:14px;padding:20px}.title{color:var(--heading);margin:0;font-size:16px;font-weight:600}.subtitle{color:var(--text-faint);margin:2px 0 18px;font-size:12px}.panel{border-top:1px solid var(--border);padding:14px 0}.panel:first-of-type{border-top:none;padding-top:0}.panel h2{color:var(--heading);margin:0 0 6px;font-size:13px;font-weight:600}.panel-desc{color:var(--text-faint);margin:0 0 10px;font-size:12px;line-height:1.5}.panel-desc code{color:var(--accent);font-family:ui-monospace,monospace}.row{display:flex;align-items: center;gap:8px;margin-bottom:8px}.row:last-child{margin-bottom:0}.row label{color:var(--text-dim);min-width:44px;font-size:12px}.value{color:var(--text-faint);text-align:right;font-variant-numeric:tabular-nums;min-width:32px;font-family:ui-monospace,monospace;font-size:12px}input[type=range]{-webkit-appearance:none;appearance:none;background:var(--border-strong);border-radius:2px;flex:1;height:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);cursor:pointer;border-radius:50%;width:14px;height:14px}input[type=range]::-moz-range-thumb{background:var(--accent);cursor:pointer;border:none;border-radius:50%;width:14px;height:14px}input[type=color]{border:1px solid var(--border-strong);cursor:pointer;background:0 0;border-radius:3px;width:28px;height:28px;padding:0}input[type=text],input[type=number],select{background:var(--bg);color:var(--text);border:1px solid var(--border-strong);border-radius:3px;flex:1;padding:5px 8px;font-family:inherit;font-size:13px}input:focus,select:focus{outline:none;border-color:var(--accent)}input[type=file]{color:var(--text-dim);width:100%;font-size:12px}input[type=file]::-webkit-file-upload-button{background:var(--surface);color:var(--accent);border:1px solid var(--border-strong);cursor:pointer;border-radius:3px;margin-right:8px;padding:4px 10px;font-size:12px}input[type=file]::file-selector-button{background:var(--surface);color:var(--accent);border:1px solid var(--border-strong);cursor:pointer;border-radius:3px;margin-right:8px;padding:4px 10px;font-size:12px}input[type=file]::-webkit-file-upload-button:hover{border-color:var(--accent)}input[type=file]::file-selector-button:hover{border-color:var(--accent)}input[type=checkbox]{appearance:none;-webkit-appearance:none;background:var(--bg);border:1px solid var(--border-strong);cursor:pointer;position:relative;border-radius:3px;width:16px;height:16px;margin:0;transition:border-color .12s,background .12s}input[type=checkbox]:hover{border-color:var(--accent)}input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}input[type=checkbox]:checked:after{content:"";position:absolute;border:2px solid #fff;border-width:0 2px 2px 0;width:5px;height:9px;top:1px;left:4px;transform:rotate(45deg)}input[type=checkbox]:focus-visible{outline:2px solid var(--accent-bg);outline-offset:1px}.corner-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;max-width:110px;margin-bottom:10px}.corner-btn{aspect-ratio:1;background:var(--bg);border:1px solid var(--border-strong);color:var(--text-faint);cursor:pointer;border-radius:3px;padding:0;font-size:20px}.corner-btn:hover{border-color:var(--accent)}.corner-btn.active{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;margin-bottom:8px}.emoji-btn{aspect-ratio:1;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:3px;padding:0;font-size:16px}.emoji-btn:hover{background:var(--surface-2)}.emoji-btn.active{background:var(--accent-bg);border-color:var(--accent)}.emoji-twemoji{display:block;pointer-events:none;width:70%;height:70%;margin:auto}.emoji-empty{color:var(--text-dim);margin:4px 0 8px;font-size:12px}.emoji-active-row{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}.emoji-stack{display:flex;flex-wrap:wrap;gap:8px}.emoji-stack-item{position:relative;width:36px;height:36px}.emoji-stack-select{border:1px solid var(--border);cursor:pointer;display:flex;background:0 0;border-radius:4px;justify-content:center;align-items: center;width:100%;height:100%;padding:4px;transition:border-color .12s,background .12s}.emoji-stack-select:hover{background:var(--surface-2)}.emoji-stack-item.active .emoji-stack-select{border-color:var(--accent);background:var(--accent-bg)}.emoji-stack-remove{position:absolute;background:var(--surface);color:var(--text-faint);border:1px solid var(--border-strong);cursor:pointer;display:flex;opacity:0;border-radius:50%;justify-content:center;align-items: center;width:16px;height:16px;padding:0;transition:opacity .12s,color .12s,border-color .12s;font-size:13px;line-height:1;top:-5px;right:-5px}.emoji-stack-item:hover .emoji-stack-remove{opacity:1}.emoji-stack-remove:focus-visible{opacity:1}.emoji-stack-remove:hover{color:var(--text);border-color:var(--text-faint)}.btn{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:3px;padding:7px 14px;font-family:inherit;font-size:13px;font-weight:600}.btn:hover{background:var(--accent-hover)}.btn.secondary{background:var(--surface);color:var(--accent);border:1px solid var(--border-strong);font-weight:600}.btn.secondary:hover{border-color:var(--accent);background:var(--accent-bg)}.btn-row{display:flex;flex-wrap:wrap;gap:6px}.toggle{display:inline-flex;cursor:pointer;color:var(--text-dim);align-items: center;gap:6px;font-size:12px}.toggle input{appearance:none;background:var(--border-strong);position:relative;cursor:pointer;border:none;border-radius:8px;width:28px;height:16px}.toggle input:checked:after{content:none}.toggle input:checked{background:var(--accent)}.toggle input:before{content:"";position:absolute;background:#fff;border-radius:50%;width:12px;height:12px;transition:transform .15s;top:2px;left:2px}.toggle input:checked:before{transform:translate(12px)}.export-stack{display:flex;flex-direction:column;align-items: center;gap:6px;width:100%;max-width:460px}.export-bar{display:flex;background:var(--surface);border:1px solid var(--border);border-radius:4px;align-items: center;gap:8px;width:100%;max-width:460px;padding:10px 14px}.export-bar input[type=text]{flex:1;min-width:0}.export-bar .btn-row{flex:none}.export-hint{color:var(--text-faint);margin:4px 0 0;font-size:11.5px}.export-hint code{color:var(--accent);font-family:ui-monospace,monospace}.export-error{color:#b3261e;background:#b3261e14;border:1px solid #b3261e4d;border-radius:3px;width:100%;margin:4px 0 0;padding:8px 10px;font-size:11.5px;line-height:1.45}@media (prefers-color-scheme:dark){.export-error{color:#ffb4ab;background:#ffb4ab14;border-color:#ffb4ab4d}}.preview-stack{display:flex;flex-direction:column;align-items: center;gap:10px}.preview-toggles{display:flex;gap:18px;font-size:12px}.preview-wrap{background:repeating-conic-gradient(var(--checker-a)0% 25%,var(--checker-b)0% 50%)50%/14px 14px;border:1px solid var(--border);border-radius:4px;padding:16px}.preview-canvas{display:block;cursor:grab;border-radius:4px}.preview-canvas:active{cursor:grabbing}.sidebar-footer{border-top:1px solid var(--border);background:var(--bg);display:flex;flex-direction:column;gap:10px;padding:12px 16px}.info-links{display:flex;flex-direction:column;gap:2px}.info-links a{color:var(--accent);text-decoration:none;border-bottom:1px solid #0000;align-self: flex-start;padding:3px 0;font-size:12px}.info-links a:hover{border-bottom-color:var(--accent)}@media (max-width:768px){.layout{grid-template-columns:1fr;overflow:visible;height:auto}.sidebar{border-right:none;border-bottom:1px solid var(--border)}.main{overflow:visible;padding:16px}}