:root{--abs-primary:var(--main-primary);--abs-text:#1f2937;--abs-text-muted:#64748b;--abs-bg:#fff;--abs-border:#e2e8f0;--abs-frame-bg:linear-gradient(180deg, #a0762c 0%, #8b6518 30%, #7a5a14 70%, #6b4f10 100%);--abs-frame-border:#5a4210;--abs-frame-edge:#c49a3a;--abs-frame-inner-shadow:inset 0 2px 6px #0006, inset 0 -1px 3px #ffdc7826;--abs-beam-bg:linear-gradient(180deg, #9a7a2a 0%, #7a5c10 40%, #6b4f10 100%);--abs-beam-height:14px;--abs-beam-shadow:0 3px 8px #00000080;--abs-rod-color:linear-gradient(90deg, #b8b8b8 0%, #d4d4d4 40%, #e8e8e8 50%, #d4d4d4 60%, #b0b0b0 100%);--abs-rod-width:4px;--abs-rod-shadow:0 0 3px #00000040;--abs-bead-upper:linear-gradient(135deg, #e8534a 0%, #c0392b 35%, #a83229 60%, #8b2920 100%);--abs-bead-upper-flat:#c0392b;--abs-bead-lower:linear-gradient(135deg, #4aa8e8 0%, #2980b9 35%, #2272a4 60%, #1a5c85 100%);--abs-bead-lower-flat:#2980b9;--abs-bead-shadow:0 3px 6px #0006, 0 1px 2px #0000004d;--abs-bead-inner-shadow:inset 0 -3px 6px #0000004d, inset 0 2px 4px #ffffff26;--abs-bead-size:30px;--abs-bead-width:50px;--abs-bead-gap:6px;--abs-bead-hole:6px;--abs-value-color:#1e293b;--abs-value-bg:#fff;--abs-success:var(--main-success);--abs-error:var(--main-error);--abs-warning:var(--main-warning)}._abs-container{align-items:center;gap:var(--main-space-4);-webkit-tap-highlight-color:transparent;flex-direction:column;max-width:900px;margin:0 auto;display:flex}._abs-abacus-wrapper{-webkit-overflow-scrolling:touch;touch-action:pan-x;scrollbar-width:thin;width:100%;overflow:auto hidden}._abs-place-labels{scrollbar-width:none;-ms-overflow-style:none;justify-content:center;gap:0;width:100%;display:flex;overflow:auto hidden}._abs-place-labels::-webkit-scrollbar{display:none}._abs-place-label{font-size:var(--main-text-xs);color:var(--abs-text-muted);text-align:center;-webkit-user-select:none;user-select:none;flex-shrink:0}@media (max-width:768px){._abs-container{padding-left:1rem;padding-right:1rem}._abs-abacus-wrapper{margin-left:-1rem;margin-right:-1rem;padding-left:1rem;padding-right:1rem}}@media (max-width:480px){._abs-container{gap:var(--main-space-3)}}._abs-abacus{background:var(--abs-frame-bg);border-style:solid;border-width:4px;border-color:var(--abs-frame-border);border-top-color:var(--abs-frame-edge);box-shadow:0 6px 24px #0000004d, 0 2px 8px #0003, var(--abs-frame-inner-shadow);border-radius:12px;justify-content:center;gap:0;width:-moz-fit-content;width:fit-content;margin:0 auto;padding:10px 16px;display:flex;position:relative;overflow:hidden}._abs-abacus:before{content:"";z-index:0;pointer-events:none;background:repeating-linear-gradient(90deg,#0000 0,#00000008 1px,#0000 2px 8px),repeating-linear-gradient(#0000 0,#8b651414 2px,#0000 4px 20px);border-radius:8px;position:absolute;top:0;bottom:0;left:0;right:0}._abs-abacus-beam{height:var(--abs-beam-height);background:var(--abs-beam-bg);box-shadow:var(--abs-beam-shadow), inset 0 1px 0 #ffdc7833, inset 0 -1px 0 #0000004d;z-index:3;pointer-events:none;position:absolute;left:0;right:0}._abs-abacus-beam:before,._abs-abacus-beam:after{content:"";height:1px;position:absolute;left:0;right:0}._abs-abacus-beam:before{background:#ffffff1f;top:2px}._abs-abacus-beam:after{background:#00000026;bottom:2px}._abs-rod{cursor:pointer;min-width:calc(var(--abs-bead-width) + 6px);z-index:1;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;flex-direction:column;align-items:center;padding:6px 0;display:flex;position:relative}._abs-rod:before{content:"";width:var(--abs-rod-width);background:var(--abs-rod-color);z-index:0;box-shadow:var(--abs-rod-shadow);border-radius:2px;position:absolute;top:0;bottom:0}._abs-upper-deck{align-items:center;gap:var(--abs-bead-gap);z-index:1;flex-direction:column;padding-bottom:14px;display:flex}._abs-lower-deck{align-items:center;gap:var(--abs-bead-gap);padding-top:calc(var(--abs-beam-height) + 14px);z-index:1;flex-direction:column;display:flex}._abs-bead{width:var(--abs-bead-width);height:var(--abs-bead-size);cursor:pointer;z-index:1;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;will-change:transform;border-style:solid;border-width:1px;border-radius:50%/42%;flex-shrink:0;transition:transform .12s cubic-bezier(.34,1.56,.64,1);position:relative}._abs-bead:before{content:"";width:var(--abs-bead-hole);height:calc(var(--abs-bead-hole) - 1px);z-index:2;background:#0003;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}._abs-bead:after{content:"";z-index:3;pointer-events:none;background:radial-gradient(at 40% 40%,#ffffff80,#ffffff1a 60%,#0000 100%);border-radius:50%;width:35%;height:30%;position:absolute;top:4px;left:18%}._abs-bead:hover{box-shadow:0 3px 10px #00000059}._abs-bead--upper{background:var(--abs-bead-upper);box-shadow:var(--abs-bead-shadow), var(--abs-bead-inner-shadow);border-color:#00000026}._abs-bead--upper._abs-bead--active{transform:translateY(12px)}._abs-bead--upper:not(._abs-bead--active){transform:translateY(-6px)}._abs-bead--lower{background:var(--abs-bead-lower);box-shadow:var(--abs-bead-shadow), var(--abs-bead-inner-shadow);border-color:#00000026}._abs-bead--lower._abs-bead--active{transform:translateY(-12px)}._abs-bead--lower:not(._abs-bead--active){transform:translateY(6px)}@media (max-width:640px){:root{--abs-bead-size:26px;--abs-bead-width:42px;--abs-bead-gap:5px;--abs-beam-height:10px;--abs-rod-width:3px;--abs-bead-hole:5px}._abs-abacus{border-width:3px;border-radius:10px;padding:8px 10px}._abs-rod{min-width:calc(var(--abs-bead-width) + 4px);padding:8px 0}._abs-bead--upper._abs-bead--active{transform:translateY(10px)}._abs-bead--upper:not(._abs-bead--active){transform:translateY(-5px)}._abs-bead--lower._abs-bead--active{transform:translateY(-10px)}._abs-bead--lower:not(._abs-bead--active){transform:translateY(5px)}}@media (max-width:400px){:root{--abs-bead-size:22px;--abs-bead-width:36px;--abs-bead-gap:4px;--abs-beam-height:8px;--abs-bead-hole:4px}._abs-bead--upper._abs-bead--active{transform:translateY(8px)}._abs-bead--upper:not(._abs-bead--active){transform:translateY(-4px)}._abs-bead--lower._abs-bead--active{transform:translateY(-8px)}._abs-bead--lower:not(._abs-bead--active){transform:translateY(4px)}}@media (prefers-reduced-motion:reduce){._abs-bead{transition:none}}._abs-toolbar{justify-content:space-between;align-items:center;gap:var(--main-space-3);flex-wrap:wrap;width:100%;display:flex}._abs-toolbar-left,._abs-toolbar-right{align-items:center;gap:var(--main-space-3);display:flex}._abs-type-selector{background:var(--abs-bg);border-radius:var(--main-radius);border-style:solid;border-width:1px;border-color:var(--abs-border);box-shadow:var(--main-shadow-sm);display:flex;overflow:hidden}._abs-type-btn{align-items:center;gap:var(--main-space-1);font-size:var(--main-text-sm);color:var(--abs-text-muted);cursor:pointer;white-space:nowrap;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:0 0;border:none;min-height:36px;padding:.5rem .85rem;font-weight:500;transition:color .15s,background .15s;display:flex}._abs-type-btn:hover{color:var(--abs-text)}._abs-type-btn--active{background:var(--abs-primary);color:#fff}._abs-type-btn--active:hover{color:#fff}._abs-type-badge{font-size:.65rem;font-family:var(--main-font-mono);opacity:.8}._abs-rod-control{align-items:center;gap:var(--main-space-2);display:flex}._abs-rod-label{font-size:var(--main-text-sm);color:var(--abs-text-muted);font-weight:500}._abs-rod-stepper{background:var(--abs-bg);border-radius:var(--main-radius);border-style:solid;border-width:1px;border-color:var(--abs-border);box-shadow:var(--main-shadow-sm);align-items:center;display:flex;overflow:hidden}._abs-rod-btn{cursor:pointer;width:32px;height:32px;color:var(--abs-text);touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:0 0;border:none;justify-content:center;align-items:center;font-size:1rem;font-weight:600;display:flex}._abs-rod-btn:hover{background:rgba(var(--main-primary-rgb), .08);color:var(--abs-primary)}body.dark-mode ._abs-rod-btn:hover{background:rgba(var(--main-primary-rgb), .18)}._abs-rod-value{text-align:center;min-width:30px;font-size:var(--main-text-sm);font-weight:600;font-family:var(--main-font-mono);color:var(--abs-text);border-left-style:solid;border-left-width:1px;border-left-color:var(--abs-border);border-right-style:solid;border-right-width:1px;border-right-color:var(--abs-border);-webkit-user-select:none;user-select:none;padding:0 4px;line-height:32px}._abs-icon-btn{background:var(--abs-bg);border-radius:var(--main-radius);border-style:solid;border-width:1px;border-color:var(--abs-border);cursor:pointer;width:36px;height:36px;color:var(--abs-text-muted);box-shadow:var(--main-shadow-sm);touch-action:manipulation;-webkit-tap-highlight-color:transparent;flex-shrink:0;justify-content:center;align-items:center;display:flex}._abs-icon-btn:hover{color:var(--abs-text);box-shadow:var(--main-shadow)}._abs-icon-btn svg{width:16px;height:16px}._abs-value-display{text-align:center;background:var(--abs-value-bg);border-radius:var(--main-radius-lg);border-style:solid;border-width:1px;border-color:var(--abs-border);box-shadow:var(--main-shadow-sm);min-width:180px;padding:.75rem 2rem}._abs-value-number{font-size:2rem;font-weight:700;font-family:var(--main-font-mono);color:var(--abs-value-color);letter-spacing:.05em;line-height:1.2}._abs-value-label{font-size:var(--main-text-xs);color:var(--abs-text-muted);margin-top:2px}@media (max-width:640px){._abs-toolbar{gap:var(--main-space-2);justify-content:center}._abs-toolbar-left,._abs-toolbar-right{justify-content:center;gap:var(--main-space-2);flex-wrap:wrap}._abs-type-btn{font-size:var(--main-text-xs);padding:.45rem .65rem}._abs-value-number{font-size:1.5rem}._abs-value-display{min-width:140px;padding:.5rem 1.25rem}}@media (max-width:380px){._abs-toolbar-left{justify-content:space-between;width:100%}._abs-toolbar-right{justify-content:center;width:100%}._abs-rod-label{display:none}._abs-value-display{min-width:120px;padding:.5rem 1rem}._abs-value-number{font-size:1.35rem}}._abs-practice{width:100%;max-width:500px}._abs-practice-header{text-align:center}._abs-practice-toggle{align-items:center;gap:var(--main-space-2);background:var(--abs-bg);border-radius:var(--main-radius);border-style:solid;border-width:1px;border-color:var(--abs-border);cursor:pointer;font-size:var(--main-text-sm);color:var(--abs-text);box-shadow:var(--main-shadow-sm);touch-action:manipulation;-webkit-tap-highlight-color:transparent;min-height:40px;padding:.55rem 1.25rem;font-weight:500;display:inline-flex}._abs-practice-toggle:hover{opacity:.85}._abs-practice-toggle svg{width:16px;height:16px;color:var(--abs-primary)}._abs-practice-toggle--active{background:var(--abs-primary);color:#fff;border-color:var(--abs-primary)}._abs-practice-toggle--active svg{color:#fff}._abs-practice-panel{margin-top:var(--main-space-3);background:var(--abs-bg);border-radius:var(--main-radius-lg);border-style:solid;border-width:1px;border-color:var(--abs-border);padding:var(--main-space-4);box-shadow:var(--main-shadow-sm);gap:var(--main-space-4);flex-direction:column;display:flex}._abs-practice-controls{justify-content:space-between;align-items:center;gap:var(--main-space-3);flex-wrap:wrap;display:flex}._abs-practice-difficulty{border-radius:var(--main-radius);border-style:solid;border-width:1px;border-color:var(--abs-border);display:flex;overflow:hidden}._abs-diff-btn{font-size:var(--main-text-xs);cursor:pointer;color:var(--abs-text-muted);touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:0 0;border:none;min-height:36px;padding:.45rem .85rem;font-weight:500;transition:color .15s,background .15s}._abs-diff-btn:hover{color:var(--abs-text)}._abs-diff-btn--active{background:var(--abs-primary);color:#fff}._abs-diff-btn--active:hover{color:#fff}._abs-practice-new{align-items:center;gap:var(--main-space-1);background:var(--abs-primary);color:#fff;border-radius:var(--main-radius);cursor:pointer;font-size:var(--main-text-sm);box-shadow:0 2px 8px rgba(var(--main-primary-rgb), .25);touch-action:manipulation;-webkit-tap-highlight-color:transparent;border:none;min-height:38px;padding:.5rem .95rem;font-weight:500;display:inline-flex}._abs-practice-new:hover{opacity:.9;box-shadow:0 3px 12px rgba(var(--main-primary-rgb), .35)}._abs-practice-new svg{width:14px;height:14px}._abs-practice-challenge{text-align:center;padding:var(--main-space-3) 0}._abs-challenge-prompt{font-size:var(--main-text-sm);color:var(--abs-text-muted);margin-bottom:var(--main-space-2)}._abs-challenge-number{font-size:2.5rem;font-weight:800;font-family:var(--main-font-mono);color:var(--abs-primary);letter-spacing:.05em;line-height:1.2}._abs-challenge-feedback{min-height:24px;font-size:var(--main-text-sm);margin:var(--main-space-2) 0;font-weight:600}._abs-challenge-feedback--correct{color:var(--abs-success)}._abs-challenge-feedback--wrong{color:var(--abs-error)}._abs-check-btn{align-items:center;gap:var(--main-space-1);background:var(--abs-success);color:#fff;border-radius:var(--main-radius);cursor:pointer;font-size:var(--main-text-sm);touch-action:manipulation;-webkit-tap-highlight-color:transparent;border:none;min-height:42px;padding:.6rem 1.35rem;font-weight:600;display:inline-flex}._abs-check-btn:hover{opacity:.9}._abs-check-btn svg{width:14px;height:14px}._abs-practice-stats{justify-content:center;gap:var(--main-space-6);padding-top:var(--main-space-3);border-top-style:solid;border-top-width:1px;border-top-color:var(--abs-border);display:flex}._abs-stat{align-items:center;gap:var(--main-space-1);font-size:var(--main-text-sm);display:flex}._abs-stat-icon{color:var(--abs-primary);display:flex}._abs-stat-icon svg{width:16px;height:16px}._abs-stat-value{font-weight:700;font-family:var(--main-font-mono);color:var(--abs-text)}._abs-stat-label{color:var(--abs-text-muted)}@media (max-width:480px){._abs-practice-panel{padding:var(--main-space-3);gap:var(--main-space-3)}._abs-practice-controls{justify-content:center}._abs-practice-difficulty{flex:100%}._abs-diff-btn{flex:1}._abs-practice-new{flex:100%;justify-content:center}._abs-challenge-number{font-size:2rem}._abs-practice-stats{gap:var(--main-space-4);flex-wrap:wrap}._abs-stat{flex:30%;justify-content:center}}@media (max-width:380px){._abs-practice-stats{gap:var(--main-space-2)}._abs-stat{text-align:center;flex-direction:column;gap:2px}}