body{margin:0;padding:0}:root{--cell-size:min(12vw, 80px);--circle-size:min(14vw, 97px);--bg:#464646;--surface:#333;--surface2:#292929;--border:#555;--accent:#6a8fff;--radius:10px}body{background-color:var(--bg);color:#fff;margin:0;font-family:Arial,sans-serif}.app-container{box-sizing:border-box;min-height:100vh;padding:.75rem 1rem 2rem}.app-header{justify-content:center;align-items:center;gap:.6rem;padding:.25rem 0 .75rem;display:flex}.app-header h1{margin:0;font-size:clamp(1.1rem,3vw,1.5rem);text-decoration:underline}.help-btn{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:1.5rem;height:1.5rem;padding:0;font-size:.85rem;font-weight:700;line-height:1;display:inline-flex}.help-wrapper{display:inline-flex;position:relative}.help-popup{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);z-index:999;width:260px;padding:.75rem 1rem;font-size:.82rem;line-height:1.5;position:absolute;top:calc(100% + 6px);right:0;box-shadow:0 4px 16px #00000080}.help-popup b{margin-top:.5rem;display:block}.help-popup b:first-child{margin-top:0}.main-layout{align-items:flex-start;gap:2rem;max-width:1100px;margin:0 auto;display:flex}.clock-panel{flex-direction:column;flex-shrink:0;align-items:center;gap:.5rem;display:flex;position:sticky;top:1rem}.clock-hint{color:#aaa;text-align:center;font-size:.75rem}.clock-body{width:calc(var(--cell-size) * (485 / 110));height:calc(var(--cell-size) * (485 / 110));cursor:pointer;background:#2a2a2a;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex;overflow:visible}#clock{width:calc(var(--cell-size) * (280 / 110) + var(--circle-size));height:calc(var(--cell-size) * (280 / 110) + var(--circle-size));flex-shrink:0;position:relative}.controls-panel{flex-direction:column;flex:1;gap:.75rem;min-width:0;display:flex}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.75rem 1rem}.memo-status h2{margin:0 0 .2rem;font-size:1.1rem}.scramble-bar{word-break:break-all;align-items:center;gap:.5rem;font-size:.85rem;display:flex}.scramble-text{cursor:pointer;color:#ccc;flex:1}.scramble-text:hover{color:#fff}.row{flex-wrap:wrap;align-items:center;gap:.6rem;display:flex}.row label{font-size:.9rem}.accordion-btn{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);color:#fff;cursor:pointer;text-align:left;width:100%;padding:.4rem .9rem;font-size:.9rem;transition:border-radius 0s .2s}.accordion-btn.open{border-radius:var(--radius) var(--radius) 0 0;transition:border-radius}.accordion-btn:hover{background:#3a3a3a}.accordion-body{background:var(--surface2);border:0px solid var(--border);border-radius:0 0 var(--radius) var(--radius);border-top:none;flex-direction:column;gap:.5rem;max-height:0;padding:0 1rem;font-size:.85rem;transition:max-height .2s,padding .2s,border-width 0s .2s;display:flex;overflow:hidden}.accordion-body.open{border-width:1px;max-height:800px;padding:.75rem 1rem;transition:max-height .35s,padding .35s,border-width}.accordion-body-inner{display:contents}.accordion-body-inner label{cursor:pointer}.accordion-body-inner input[type=radio],.accordion-body-inner input[type=checkbox]{cursor:pointer;margin-right:.4rem}.setting-row{flex-wrap:wrap;align-items:center;gap:.4rem;display:flex}.stat-action-btn{background:var(--surface);border:1px solid var(--border);color:#fff;cursor:pointer;border-radius:6px;padding:.3rem .7rem;font-size:.8rem}.stat-action-btn:hover{background:#4a4a4a}.custom-pin-card{flex-direction:column;gap:.4rem;font-size:.85rem;display:flex}.custom-pin-card select{background:var(--surface2);color:#fff;border:1px solid var(--border);border-radius:6px;padding:.2rem .4rem}#statsContainer{justify-content:center;display:flex}#normalStats{flex-wrap:wrap;justify-content:center;gap:.75rem;display:flex}.statCard{background:var(--surface2);text-align:center;border:1px solid #fff;border-radius:8px;min-width:100px;padding:.6rem 1rem}.statLabel{color:#ccc;margin-bottom:4px;font-size:.7rem}.statValue{font-size:1.2rem;font-weight:700}#letterButtons{gap:8px;max-width:400px;margin:0;padding:0;display:grid}.two-columns{grid-template-columns:repeat(2,1fr)}.six-columns{grid-template-columns:repeat(6,1fr)}#letterButtons button,#letterButtons #timer{color:#fff;text-align:center;cursor:pointer;background:#444;border:none;border-radius:8px;padding:12px 0;font-size:1.1em}#letterButtons #timer{grid-column:5/span 2;justify-content:center;align-items:center;margin:0;font-size:1em;display:flex}.timer-display{margin:0;font-size:1.3rem;font-weight:700}button{touch-action:manipulation;cursor:pointer;font-size:.9rem}select{background:var(--surface2);color:#fff;border:1px solid var(--border);cursor:pointer;border-radius:6px;padding:.2rem .5rem;font-size:.9rem}input[type=checkbox],input[type=radio]{cursor:pointer}.action-btn{background:var(--surface2);border:1px solid var(--border);color:#fff;cursor:pointer;border-radius:8px;padding:.4rem .9rem;font-size:.9rem}.action-btn:hover{background:#3a3a3a}.pairs-row{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.pairs-row label{align-items:center;gap:.25rem;font-size:.85rem;display:flex}.circle{aspect-ratio:1;width:var(--circle-size);border-radius:50%;position:absolute}.circle-face{width:calc(var(--circle-size) * (74 / 110));height:calc(var(--circle-size) * (74 / 110));border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.dial{width:calc(var(--circle-size) * (15 / 110));height:calc(var(--circle-size) * (45 / 110));transform-origin:50% 77.78%;--tx:calc(var(--circle-size) * (47 / 110));--ty:calc(var(--circle-size) * (20 / 110));--rot:0deg;transform:translate(var(--tx), var(--ty)) rotate(var(--rot));clip-path:polygon(50% 0%,85% 48%,50% 78%,15% 48%);position:absolute}.dial-base{width:calc(var(--circle-size) * (12 / 110));height:calc(var(--circle-size) * (12 / 110));transform:translate(calc(var(--circle-size) * (49 / 110)), calc(var(--circle-size) * (49 / 110)));border-radius:50%;position:absolute}.twelve{width:calc(var(--circle-size) * (7 / 110));height:calc(var(--circle-size) * (10 / 110));transform:translate(calc(var(--circle-size) * (51 / 110)), calc(var(--circle-size) * (5 / 110)));background-color:red;border-radius:0;position:absolute;-webkit-mask:linear-gradient(90deg,#000 33%,#0000 33% 67%,#000 67%);mask:linear-gradient(90deg,#000 33%,#0000 33% 67%,#000 67%)}.one{width:calc(var(--circle-size)*(3/110));aspect-ratio:1;transform:translate(calc(var(--circle-size)*(54/110)),calc(var(--circle-size)*(8/110))) rotate(30deg);transform-origin:calc(var(--circle-size)*(1/110)) calc(var(--circle-size)*(47/110));border-radius:50%;position:absolute}.two{width:calc(var(--circle-size)*(3/110));aspect-ratio:1;transform:translate(calc(var(--circle-size)*(54/110)),calc(var(--circle-size)*(8/110))) rotate(60deg);transform-origin:calc(var(--circle-size)*(1/110)) calc(var(--circle-size)*(47/110));border-radius:50%;position:absolute}.three{width:calc(var(--circle-size)*(2/110));height:calc(var(--circle-size)*(7/110));transform:translate(calc(var(--circle-size)*(54/110)),calc(var(--circle-size)*(6/110))) rotate(90deg);transform-origin:calc(var(--circle-size)*(1/110)) calc(var(--circle-size)*(49/110));border-radius:0;position:absolute}.four{width:calc(var(--circle-size)*(3/110));aspect-ratio:1;transform:translate(calc(var(--circle-size)*(54/110)),calc(var(--circle-size)*(8/110))) rotate(120deg);transform-origin:calc(var(--circle-size)*(1/110)) calc(var(--circle-size)*(47/110));border-radius:50%;position:absolute}.five{width:calc(var(--circle-size)*(3/110));aspect-ratio:1;transform:translate(calc(var(--circle-size)*(54/110)),calc(var(--circle-size)*(8/110))) rotate(150deg);transform-origin:calc(var(--circle-size)*(1/110)) calc(var(--circle-size)*(47/110));border-radius:50%;position:absolute}.six{width:calc(var(--circle-size)*(2/110));height:calc(var(--circle-size)*(7/110));transform:translate(calc(var(--circle-size)*(54/110)),calc(var(--circle-size)*(6/110))) rotate(180deg);transform-origin:calc(var(--circle-size)*(1/110)) calc(var(--circle-size)*(49/110));border-radius:0;position:absolute}.twelve.single-marker{width:calc(var(--circle-size) * (2 / 110));height:calc(var(--circle-size) * (7 / 110));transform:translate(calc(var(--circle-size) * (54 / 110)), calc(var(--circle-size) * (6 / 110)));-webkit-mask:none;mask:none}.six.double-marker{width:calc(var(--circle-size) * (7 / 110));height:calc(var(--circle-size) * (10 / 110));transform:translate(calc(var(--circle-size) * (51 / 110)), calc(var(--circle-size) * (5 / 110))) rotate(180deg);transform-origin:calc(var(--circle-size) * (4 / 110)) calc(var(--circle-size) * (50 / 110));-webkit-mask:linear-gradient(90deg,#000 33%,#0000 33% 67%,#000 67%);mask:linear-gradient(90deg,#000 33%,#0000 33% 67%,#000 67%)}.seven{width:calc(var(--circle-size)*(3/110));aspect-ratio:1;transform:translate(calc(var(--circle-size)*(54/110)),calc(var(--circle-size)*(8/110))) rotate(210deg);transform-origin:calc(var(--circle-size)*(1/110)) calc(var(--circle-size)*(47/110));border-radius:50%;position:absolute}.eight{width:calc(var(--circle-size)*(3/110));aspect-ratio:1;transform:translate(calc(var(--circle-size)*(54/110)),calc(var(--circle-size)*(8/110))) rotate(240deg);transform-origin:calc(var(--circle-size)*(1/110)) calc(var(--circle-size)*(47/110));border-radius:50%;position:absolute}.nine{width:calc(var(--circle-size)*(2/110));height:calc(var(--circle-size)*(7/110));transform:translate(calc(var(--circle-size)*(54/110)),calc(var(--circle-size)*(6/110))) rotate(270deg);transform-origin:calc(var(--circle-size)*(1/110)) calc(var(--circle-size)*(49/110));border-radius:0;position:absolute}.ten{width:calc(var(--circle-size)*(3/110));aspect-ratio:1;transform:translate(calc(var(--circle-size)*(54/110)),calc(var(--circle-size)*(8/110))) rotate(300deg);transform-origin:calc(var(--circle-size)*(1/110)) calc(var(--circle-size)*(47/110));border-radius:50%;position:absolute}.eleven{width:calc(var(--circle-size)*(3/110));aspect-ratio:1;transform:translate(calc(var(--circle-size)*(54/110)),calc(var(--circle-size)*(8/110))) rotate(330deg);transform-origin:calc(var(--circle-size)*(1/110)) calc(var(--circle-size)*(47/110));border-radius:50%;position:absolute}.pin-dot{width:calc(var(--circle-size) * (24 / 110));height:calc(var(--circle-size) * (24 / 110));background:#c8c8c8;border-radius:50%;position:absolute}.pin-ul{left:calc(var(--circle-size) * (43 / 110) + var(--cell-size) * (70 / 110));top:calc(var(--circle-size) * (43 / 110) + var(--cell-size) * (70 / 110))}.pin-ur{left:calc(var(--cell-size) * (210 / 110) + var(--circle-size) * (43 / 110));top:calc(var(--circle-size) * (43 / 110) + var(--cell-size) * (70 / 110))}.pin-dl{left:calc(var(--circle-size) * (43 / 110) + var(--cell-size) * (70 / 110));top:calc(var(--cell-size) * (210 / 110) + var(--circle-size) * (43 / 110))}.pin-dr{left:calc(var(--cell-size) * (210 / 110) + var(--circle-size) * (43 / 110));top:calc(var(--cell-size) * (210 / 110) + var(--circle-size) * (43 / 110))}.u{left:calc(var(--cell-size) * (140 / 110))}.ur{left:calc(var(--cell-size) * (280 / 110))}.l{top:calc(var(--cell-size) * (140 / 110))}.c{left:calc(var(--cell-size) * (140 / 110));top:calc(var(--cell-size) * (140 / 110))}.r{left:calc(var(--cell-size) * (280 / 110));top:calc(var(--cell-size) * (140 / 110))}.dl{top:calc(var(--cell-size) * (280 / 110))}.d{left:calc(var(--cell-size) * (140 / 110));top:calc(var(--cell-size) * (280 / 110))}.dr{left:calc(var(--cell-size) * (280 / 110));top:calc(var(--cell-size) * (280 / 110))}.session-tabs{gap:.3rem;display:flex}.session-tab{background:var(--surface);border:1px solid var(--border);color:#aaa;cursor:pointer;border-radius:6px;min-width:2rem;padding:.25rem .65rem;font-size:.85rem}.session-tab:hover{color:#fff;background:#3a3a3a}.session-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}.stats-table-wrapper{border:1px solid var(--border);border-radius:6px;max-height:300px;margin-top:.5rem;overflow:auto}.stats-table thead th{z-index:1;position:sticky;top:0}.stats-table{border-collapse:collapse;white-space:nowrap;width:100%;font-size:.78rem}.stats-table th{color:#aaa;text-align:left;border-bottom:1px solid var(--border);background:#1a1a1a;padding:.35rem .5rem;font-weight:400}.stats-table td{border-bottom:1px solid #3a3a3a;padding:.3rem .5rem}.stats-table tr:last-child td{border-bottom:none}.stats-table tr:hover td{background:#2a2a2a}.row-delete-btn{color:#888;cursor:pointer;background:0 0;border:none;padding:0 .3rem;font-size:.75rem;line-height:1}.row-delete-btn:hover{color:#f87171}@keyframes toast-in{0%{opacity:0;transform:translate(-50%)translateY(-110%)}to{opacity:1;transform:translate(-50%)translateY(0)}}#toast-box{color:#fff;border:1px solid var(--border);border-radius:var(--radius);z-index:9999;cursor:pointer;white-space:nowrap;background:#1e1e1e;padding:.7rem 1.4rem;font-size:.95rem;animation:.25s toast-in;position:fixed;top:1rem;left:50%;transform:translate(-50%);box-shadow:0 4px 20px #00000080}@media (width<=700px){:root{--cell-size:min(22vw, 80px);--circle-size:min(27vw, 97px)}.main-layout{flex-direction:column;align-items:center}.clock-panel{align-items:center;width:100%;position:static}.controls-panel{width:100%}}