html,body,#root{height:100%;margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial}.app{height:100%;display:flex;flex-direction:column}.toolbar{padding:8px;display:flex;align-items:center;gap:8px;border-bottom:1px solid #e5e7eb;background:#fafafa;flex-wrap:wrap}.toolbar .spacer{flex:1}.btn{padding:6px 10px;border:1px solid #d1d5db;background:#fff;border-radius:999px;cursor:pointer}.btn:hover{background:#f9fafb}.badge{display:inline-block;padding:2px 6px;background:#f3f4f6;border-radius:6px;font-size:12px;color:#4b5563}.canvas{position:relative;flex:1;background:#fff;overflow:hidden}.hint{padding:6px 10px;font-size:12px;color:#4b5563;border-top:1px solid #e5e7eb;background:#fafafa;display:flex;gap:10px;flex-wrap:wrap}.kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace;padding:0 6px;border:1px solid #d1d5db;border-bottom-width:2px;border-radius:4px;background:#fff;font-size:12px}.label-input{position:absolute;border:2px solid #f59e0b;border-radius:6px;outline:none;background:#fffffff5;box-shadow:0 1px 2px #0000000f}.ratio-wrap{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid #e5e7eb;border-radius:999px;background:#fff}.ratio-wrap input[type=number]{width:4.2rem;padding:2px 4px}.toggle{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid #e5e7eb;border-radius:999px;background:#fff}