:root{--primary-color:#b71c1c;--primary-light:#f05545;--primary-dark:#7f0000;--secondary-color:#00796b;--secondary-light:#48a999;--secondary-dark:#004c40;--bg-color:#fdfaf2;--surface-color:#fff;--text-main:#333;--text-muted:#757575;--border-color:#e0e0e0;--grid-color:#ffcdd2;--shadow-sm:0 2px 4px #0000000d;--shadow-md:0 4px 8px #00000014;--radius-md:8px;--radius-lg:12px;color-scheme:light}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-main);-webkit-font-smoothing:antialiased;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,PingFang HK,MingLiU,sans-serif;line-height:1.6}#app{max-width:800px;margin:0 auto;padding:24px 16px}header{text-align:center;margin-bottom:24px}h1{color:var(--text-main);margin-bottom:8px;font-size:2rem}.subtitle{color:var(--text-muted);font-size:1rem}.lang-selector{justify-content:center;gap:8px;margin-top:16px;display:flex}.lang-selector button{border:1px solid var(--secondary-color);color:var(--secondary-color);cursor:pointer;background:0 0;border-radius:4px;padding:6px 16px;font-size:.9rem;transition:all .2s}.lang-selector button[aria-checked=true]{color:#00695c;background:#e0f2f1;border-color:#00897b;font-weight:700}.lang-selector button:hover:not([aria-checked=true]){background:#00796b0d}.search-bar{max-width:500px;box-shadow:var(--shadow-sm);border-radius:var(--radius-md);margin:0 auto 32px;display:flex;overflow:hidden}#input-char{border:2px solid var(--primary-color);border-radius:var(--radius-md) 0 0 var(--radius-md);text-align:center;border-right:none;outline:none;flex:1;padding:12px 16px;font-size:1.25rem}#input-char:focus{background-color:#b71c1c05}#btn-search{background-color:var(--primary-color);color:#fff;cursor:pointer;white-space:nowrap;border:none;min-width:max-content;padding:0 24px;font-size:1.1rem;font-weight:700;transition:background-color .2s}#btn-search:hover{background-color:var(--primary-dark)}.main-display-grid{background:var(--surface-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);grid-template-columns:minmax(300px,1fr) 280px;align-items:start;gap:24px;padding:24px;display:grid}@media (width<=650px){.main-display-grid{grid-template-columns:1fr}}.canvas-wrapper{flex-direction:column;align-items:center;width:100%;display:flex}.warning-banner{color:#e65100;text-align:center;background-color:#fff3e0;border-left:4px solid #ff9800;border-radius:4px;width:100%;margin-bottom:16px;padding:12px;font-size:.9rem;display:none}.warning-banner.visible{display:block}.warning-banner.warning-error{color:#c62828;background-color:#ffebee;border-left-color:#f44336}.canvas-container{aspect-ratio:1;border:2px solid var(--primary-color);background-color:#fff;border-radius:4px;width:100%;max-width:400px;position:relative;overflow:hidden;box-shadow:inset 0 0 10px #00000008}#trace-canvas,#ink-canvas{position:absolute;inset:0;width:100%!important;height:100%!important}#trace-canvas{z-index:1;pointer-events:none}#ink-canvas{z-index:2;cursor:crosshair;touch-action:none}.stroke-badge{color:var(--text-muted);z-index:3;background:#ffffffe6;border-radius:12px;padding:4px 10px;font-size:1.25rem;font-weight:700;position:absolute;top:8px;left:12px;box-shadow:0 1px 3px #0000001a}.verified-badge{color:#fff;z-index:10;pointer-events:none;background-color:#2e7d32;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-size:16px;font-weight:700;display:none;position:absolute;top:12px;right:12px;box-shadow:0 2px 4px #0003}.verified-badge.visible{display:inline-flex}.play-bubble{background-color:var(--primary-dark);color:#fff;cursor:pointer;width:44px;height:44px;box-shadow:var(--shadow-md);z-index:3;border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;font-size:1.2rem;transition:transform .1s,background-color .2s;display:flex;position:absolute;bottom:12px;right:12px}.play-bubble:hover{background-color:var(--primary-color);transform:scale(1.05)}.play-bubble:active{transform:scale(.95)}.controls-row{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px;display:flex}.btn-control{border:1px solid var(--border-color);cursor:pointer;color:var(--text-main);background:#fff;border-radius:4px;padding:8px 16px;font-size:.9rem;transition:all .2s}.btn-control:hover{background:#f5f5f5;border-color:#bdbdbd}.btn-control.danger{color:var(--primary-color);border-color:#ffcdd2}.btn-control.danger:hover{background:#ffebee}.meta-panel{flex-direction:column;gap:16px;display:flex}.meta-card{border:1px solid var(--secondary-light);border-radius:var(--radius-md);overflow:hidden}.meta-header{background-color:var(--secondary-color);color:#fff;text-align:center;padding:8px;font-weight:700}.meta-grid-2col{text-align:center;grid-template-columns:1fr 1fr;display:grid}.meta-col{background-color:#e0f2f1;padding:12px 8px}.meta-col:first-child{border-right:1px solid #00796b1a}.meta-label{color:var(--secondary-dark);margin-bottom:4px;font-size:.85rem;font-weight:700;display:block}.meta-val{color:var(--text-main);font-size:1.2rem}.pronounce-card .meta-header{background-color:#0288d1}.pronounce-card{border-color:#81d4fa}.pronounce-row{background-color:#e1f5fe;border-bottom:1px solid #0288d11a;align-items:center;padding:12px 16px;display:flex}.pronounce-row:last-child{border-bottom:none}.lang-label{color:#01579b;width:60px;font-size:.9rem;font-weight:700}.pronounce-val{color:var(--text-main);flex:1;font-family:monospace;font-size:1.1rem}.pronounce-note{color:var(--text-muted);margin-left:8px;font-size:.8rem}.btn-audio{cursor:pointer;color:#0288d1;background:0 0;border:none;border-radius:50%;padding:4px;font-size:1.2rem;transition:background .2s}.btn-audio:hover{background:#0288d11a}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}button:focus-visible,.search-bar input:focus-visible{outline-offset:2px;border-radius:4px;outline:2px solid #0288d1}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}