:root{--cso-primary:var(--main-primary);--cso-primary-light:#6366f11a;--cso-success:var(--main-success);--cso-success-light:#10b9811a;--cso-error:var(--main-error);--cso-error-light:#ef44441a;--cso-warning:var(--main-warning);--cso-text:#1f2937;--cso-text-muted:#64748b;--cso-bg:#fff;--cso-bg-secondary:#f8fafc;--cso-border:#e2e8f0;--cso-canvas-grid:#e2e8f0;--cso-canvas-bg:#fff;--cso-stroke-color:#334155;--cso-outline-color:#e2e8f0;--cso-highlight-color:#6366f1;--cso-drawing-color:#3b82f6}._cso-container{gap:var(--main-space-5);flex-direction:column;max-width:900px;margin:0 auto;display:flex}._cso-main{gap:var(--main-space-5);grid-template-columns:1fr 280px;align-items:start;display:grid}@media (max-width:768px){._cso-container{gap:var(--main-space-4);padding-left:1rem;padding-right:1rem}._cso-main{gap:var(--main-space-4);grid-template-columns:1fr}}@media (max-width:480px){._cso-container{gap:var(--main-space-3);padding-left:.75rem;padding-right:.75rem}}._cso-search{justify-content:center;display:flex}._cso-search-input-wrap{align-items:center;width:100%;max-width:420px;display:flex;position:relative}._cso-search-icon{color:var(--cso-text-muted);pointer-events:none;display:flex;position:absolute;left:14px}._cso-search-input{background:var(--cso-bg);border-style:solid;border-width:1.5px;border-color:var(--cso-border);border-radius:var(--main-radius-lg);width:100%;color:var(--cso-text);outline:none;padding:.75rem 2.5rem .75rem 2.75rem;font-size:1.125rem;transition:border-color .2s,box-shadow .2s}._cso-search-input::placeholder{color:var(--cso-text-muted);font-size:.875rem}._cso-search-input:focus{border-color:var(--cso-primary);box-shadow:0 0 0 3px var(--cso-primary-light)}._cso-search-clear{background:var(--cso-bg-secondary);border-radius:var(--main-radius-full);width:28px;height:28px;color:var(--cso-text-muted);cursor:pointer;border-width:0;justify-content:center;align-items:center;padding:0;transition:color .15s,background .15s;display:flex;position:absolute;right:8px}._cso-search-clear:hover{color:var(--cso-text)}@media (max-width:480px){._cso-search-input{padding:.625rem 2.5rem;font-size:1rem}._cso-search-input::placeholder{font-size:.8125rem}._cso-search-icon{left:12px}._cso-search-clear{width:32px;height:32px;right:6px}}._cso-display-card{background:var(--cso-bg);border-radius:var(--main-radius-lg);border-style:solid;border-width:1px;border-color:var(--cso-border);box-shadow:var(--main-shadow-sm);overflow:hidden}._cso-mode-tabs{border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:var(--cso-border);display:flex}._cso-mode-tab{color:var(--cso-text-muted);cursor:pointer;background:0 0;border-width:0 0 2px;border-bottom-style:solid;border-bottom-color:#0000;flex:1;justify-content:center;align-items:center;gap:6px;padding:.75rem .5rem;font-size:.8125rem;font-weight:500;transition:color .2s;display:flex}._cso-mode-tab svg{width:14px;height:14px}._cso-mode-tab:hover{color:var(--cso-text)}._cso-mode-tab--active{color:var(--cso-primary);border-bottom-color:var(--cso-primary)}._cso-canvas-area{padding:var(--main-space-5);flex-direction:column;align-items:center;display:flex}._cso-canvas-wrap{aspect-ratio:1;border-style:solid;border-width:2px;border-color:var(--cso-border);border-radius:var(--main-radius);background:var(--cso-canvas-bg);touch-action:none;-webkit-user-select:none;user-select:none;width:300px;max-width:100%;position:relative;overflow:hidden}._cso-canvas-grid{pointer-events:none;z-index:0;width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;right:0}._cso-canvas-grid line{stroke:var(--cso-canvas-grid);stroke-width:1px}._cso-writer-target{z-index:1;position:absolute;top:0;bottom:0;left:0;right:0}._cso-placeholder{justify-content:center;align-items:center;gap:var(--main-space-3);z-index:2;flex-direction:column;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}._cso-placeholder-icon{color:var(--cso-border);display:flex}._cso-placeholder-icon svg{width:40px;height:40px}._cso-placeholder-text{color:var(--cso-text-muted);text-align:center;padding:0 1rem;font-size:.8125rem}._cso-stroke-counter{margin-top:var(--main-space-3);color:var(--cso-text-muted);align-items:center;gap:4px;font-size:.8125rem;display:flex}._cso-stroke-counter-value{color:var(--cso-primary);font-weight:600;font-family:var(--main-font-mono)}._cso-stroke-counter-total{font-weight:500;font-family:var(--main-font-mono)}._cso-quiz-feedback{padding:0 var(--main-space-4) var(--main-space-3)}._cso-quiz-feedback-inner{border-radius:var(--main-radius);justify-content:center;align-items:center;gap:8px;padding:.625rem 1rem;font-size:.8125rem;font-weight:500;display:flex}._cso-quiz-feedback-inner svg{flex-shrink:0;width:16px;height:16px}._cso-quiz-feedback--success ._cso-quiz-feedback-inner{background:var(--cso-success-light);color:#059669}._cso-quiz-feedback--error ._cso-quiz-feedback-inner{background:var(--cso-error-light);color:#dc2626}._cso-quiz-feedback--complete ._cso-quiz-feedback-inner{background:var(--cso-success-light);color:#059669}._cso-speed{padding:0 var(--main-space-4) var(--main-space-4);align-items:center;gap:8px;display:flex}._cso-speed-label{color:var(--cso-text-muted);white-space:nowrap;font-size:.75rem}._cso-speed-slider{height:4px;accent-color:var(--cso-primary);flex:1}._cso-speed-value{color:var(--cso-text);font-size:.75rem;font-weight:600;font-family:var(--main-font-mono);text-align:center;min-width:28px}@media (max-width:768px){._cso-canvas-area{padding:var(--main-space-4)}._cso-mode-tab{padding:.625rem .375rem;font-size:.8125rem}._cso-quiz-feedback,._cso-speed{padding:0 var(--main-space-3) var(--main-space-3)}._cso-speed-slider{height:6px}}@media (max-width:480px){._cso-canvas-wrap{width:280px}._cso-canvas-area{padding:var(--main-space-3)}._cso-mode-tab{gap:4px;padding:.625rem .25rem;font-size:.75rem}}@media (max-width:360px){._cso-canvas-wrap{width:240px}._cso-mode-tab span{display:none}._cso-mode-tab svg{width:18px;height:18px}}._cso-controls{padding:0 var(--main-space-4) var(--main-space-4);justify-content:center;align-items:center;gap:4px;display:flex}._cso-controls-animate,._cso-controls-practice,._cso-controls-quiz{justify-content:center;align-items:center;gap:4px;display:flex}._cso-ctrl-btn{background:var(--cso-bg-secondary);border-style:solid;border-width:1px;border-color:var(--cso-border);border-radius:var(--main-radius);width:40px;height:40px;color:var(--cso-text);cursor:pointer;justify-content:center;align-items:center;padding:0;transition:background .15s,color .15s;display:flex}._cso-ctrl-btn svg{width:16px;height:16px}._cso-ctrl-btn:hover{background:var(--cso-primary-light);color:var(--cso-primary)}._cso-ctrl-btn--active{background:var(--cso-primary);color:#fff;border-color:var(--cso-primary)}._cso-ctrl-btn--active:hover{opacity:.9;background:var(--cso-primary);color:#fff}._cso-ctrl-divider{background:var(--cso-border);width:1px;height:24px;margin:0 4px}@media (max-width:768px){._cso-controls{padding:0 var(--main-space-3) var(--main-space-3);gap:6px}._cso-controls-animate,._cso-controls-practice,._cso-controls-quiz{flex-wrap:wrap;gap:6px}._cso-ctrl-btn{width:44px;height:44px}._cso-ctrl-divider{margin:0 2px}}@media (max-width:360px){._cso-ctrl-btn{width:40px;height:40px}}._cso-info-panel{background:var(--cso-bg);border-radius:var(--main-radius-lg);border-style:solid;border-width:1px;border-color:var(--cso-border);box-shadow:var(--main-shadow-sm);padding:var(--main-space-5)}._cso-info-header{align-items:center;gap:var(--main-space-4);margin-bottom:var(--main-space-4);padding-bottom:var(--main-space-4);border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:var(--cso-border);display:flex}._cso-info-char{color:var(--cso-text);font-size:3rem;font-weight:400;line-height:1}._cso-info-meta{flex-direction:column;gap:4px;display:flex}._cso-info-strokes{align-items:center;gap:6px;display:flex}._cso-info-label{color:var(--cso-text-muted);font-size:.75rem}._cso-info-value{color:var(--cso-primary);font-size:1.25rem;font-weight:700;font-family:var(--main-font-mono)}._cso-stroke-list{gap:var(--main-space-3);flex-direction:column;display:flex}._cso-stroke-list-label{color:var(--cso-text);font-size:.8125rem;font-weight:600}._cso-stroke-list-items{grid-template-columns:repeat(4,1fr);gap:6px;min-height:60px;display:grid}._cso-stroke-item{aspect-ratio:1;background:var(--cso-bg-secondary);border-style:solid;border-width:1px;border-color:var(--cso-border);border-radius:var(--main-radius);cursor:pointer;justify-content:center;align-items:center;transition:border-color .15s;display:flex;position:relative}._cso-stroke-item:hover{border-color:var(--cso-primary)}._cso-stroke-item--active{border-color:var(--cso-primary);box-shadow:0 0 0 2px var(--cso-primary-light)}._cso-stroke-item-num{color:var(--cso-text-muted);font-size:.625rem;font-family:var(--main-font-mono);position:absolute;top:2px;left:4px}._cso-history{gap:var(--main-space-3);flex-direction:column;display:flex}._cso-history-label{color:var(--cso-text);align-items:center;gap:6px;font-size:.8125rem;font-weight:600;display:flex}._cso-history-label svg{width:14px;height:14px;color:var(--cso-text-muted)}._cso-history-chars{flex-wrap:wrap;gap:6px;display:flex}._cso-history-char{background:var(--cso-bg);border-style:solid;border-width:1px;border-color:var(--cso-border);border-radius:var(--main-radius);width:40px;height:40px;color:var(--cso-text);cursor:pointer;justify-content:center;align-items:center;font-size:1.25rem;transition:border-color .15s;display:flex}._cso-history-char:hover{border-color:var(--cso-primary);color:var(--cso-primary)}@media (max-width:768px){._cso-info-panel{padding:var(--main-space-4)}._cso-info-header{gap:var(--main-space-3);margin-bottom:var(--main-space-3);padding-bottom:var(--main-space-3)}._cso-info-char{font-size:2.5rem}._cso-stroke-list-items{grid-template-columns:repeat(5,1fr);gap:8px}._cso-history-chars{gap:8px}._cso-history-char{width:44px;height:44px}}@media (max-width:480px){._cso-info-panel{padding:var(--main-space-3)}._cso-info-char{font-size:2.25rem}._cso-stroke-list-items{grid-template-columns:repeat(4,1fr)}}@media (max-width:360px){._cso-history-char{width:40px;height:40px;font-size:1.125rem}}._cso-presets{gap:var(--main-space-3);flex-direction:column;display:flex}._cso-presets-label{color:var(--cso-text);font-size:.8125rem;font-weight:600}._cso-presets-groups{gap:var(--main-space-4);flex-direction:column;display:flex}._cso-presets-group{gap:var(--main-space-2);flex-direction:column;display:flex}._cso-presets-group-label{color:var(--cso-text-muted);font-size:.75rem;font-weight:500}._cso-presets-chars{flex-wrap:wrap;gap:6px;display:flex}._cso-preset-char{background:var(--cso-bg);border-style:solid;border-width:1px;border-color:var(--cso-border);border-radius:var(--main-radius);width:40px;height:40px;color:var(--cso-text);cursor:pointer;box-shadow:var(--main-shadow-sm);justify-content:center;align-items:center;font-size:1.25rem;transition:border-color .15s,color .15s;display:flex}._cso-preset-char:hover{border-color:var(--cso-primary);color:var(--cso-primary)}._cso-preset-char--active{border-color:var(--cso-primary);background:var(--cso-primary-light);color:var(--cso-primary)}@media (max-width:768px){._cso-presets-chars{gap:8px}._cso-preset-char{width:44px;height:44px}}@media (max-width:360px){._cso-preset-char{width:40px;height:40px;font-size:1.125rem}}