:root{--bg-color: #1a1a1a;--text-color: #e0e0e0;--accent-color: #00ff88;--accent-glow: rgba(0, 255, 136, .4);--button-color: #333;--button-active: #444;--success-color: #4caf50;--font-main: "Inter", system-ui, -apple-system, sans-serif;--font-mono: "Courier New", Courier, monospace}*,*:before,*:after{box-sizing:border-box}body{font-family:var(--font-main);background-color:var(--bg-color);color:var(--text-color);margin:0;padding:0;min-height:100dvh;display:flex;justify-content:center;align-items:flex-start;overflow-x:hidden}#app{width:100%;max-width:800px;padding:1rem;display:flex;flex-direction:column;gap:1rem}.header-container{background:#2a2a2a;padding:1rem;border-radius:12px;border:1px solid #333;box-shadow:0 4px 6px #0000004d;text-align:center}h1{font-size:1.5rem;margin:0 0 .5rem;color:var(--accent-color);text-shadow:0 0 10px var(--accent-glow)}.challenge-section{display:flex;flex-direction:column;align-items:center}.label,.label-small{font-size:.75rem;color:#888;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.25rem}#challenge-word{font-size:1.8rem;font-weight:700;letter-spacing:.1em;color:#fff;word-break:break-all}.display-area{background:#2a2a2a;padding:1rem;border-radius:12px;border:1px solid #333;text-align:center;min-height:80px;display:flex;flex-direction:column;justify-content:center}#output{font-size:2rem;font-weight:700;letter-spacing:.1em;min-height:2.4rem;word-break:break-all}#output.success{color:var(--success-color);text-shadow:0 0 15px rgba(76,175,80,.6)}#morse-output{font-family:var(--font-mono);font-size:1.2rem;color:var(--accent-color);min-height:1.5rem;margin-top:.5rem}#timer{font-family:var(--font-mono);font-size:1.2rem;text-align:center;color:#bbb;margin-top:.5rem;border-top:1px solid #444;padding-top:.5rem;width:100%}.input-row{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-top:-1.5rem;width:100%}.hints{display:flex;gap:.5rem;margin-top:-1.5rem}.btn-container{position:relative;width:140px;height:140px;display:flex;justify-content:center;align-items:center;flex-shrink:0}.progress-ring{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;transform:rotate(-90deg)}.progress-ring__circle{transition:stroke-dashoffset 0s linear}#morse-btn{width:120px;width:110px;height:110px;border-radius:50%;border:none;background:#008044;color:var(--text-color);font-size:1.5rem;font-weight:700;cursor:pointer;box-shadow:0 5px 15px #00000080;transition:transform .1s,background .1s;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;display:flex;justify-content:center;align-items:center;z-index:1}#morse-btn:active,.btn-active{transform:scale(.95);background:var(--button-active);box-shadow:0 0 15px var(--accent-glow)}.control-btn{width:80px;height:80px;border-radius:50%;padding:0;display:flex;justify-content:center;align-items:center;text-align:center;background:#333;color:#aaa;border:1px solid #444;font-size:.75rem;font-weight:600;cursor:pointer;box-shadow:0 4px 10px #0000004d;transition:transform .1s,background .1s;flex-shrink:0}.control-btn:active{background:#444;color:#fff}.hints{display:flex;gap:.5rem;margin-top:.25rem}.hint-box{flex:1;background:#222;padding:.5rem;border-radius:8px;border:1px solid #333;text-align:center;transition:background-color .1s}.hint-box.active{background-color:#00ff881a;border-color:var(--accent-color);box-shadow:0 0 10px var(--accent-glow)}.hint-box.suggested{border-color:var(--accent-color);box-shadow:0 0 15px #00ff884d;background-color:#00ff880d}.hint-title.symbol{font-size:1.5rem;font-weight:700;color:var(--accent-color)}.hint-value{font-size:1rem;font-weight:700;color:var(--accent-color);min-height:1.2rem}.settings-panel{display:flex;flex-direction:column;gap:1rem;background:#2a2a2a;padding:1rem;border-radius:12px;border:1px solid #333;margin-top:.5rem}.settings-row{display:flex;flex-direction:row;gap:1rem;width:100%}.setting-group{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:80px}.setting-group.wide{min-width:150px;flex:2}.toggle-switch{position:relative;display:inline-block;width:50px;height:26px}.toggle-switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#444;transition:.4s}.slider:before{position:absolute;content:"";height:18px;width:18px;left:4px;bottom:4px;background-color:#fff;transition:.4s}input:checked+.slider{background-color:var(--accent-color)}input:checked+.slider:before{transform:translate(24px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}input[type=range]{width:100%;accent-color:var(--accent-color);margin:.5rem 0}#history-container{width:100%;background:#222;border-radius:8px;padding:.5rem;border:1px solid #333;min-height:80px;flex:1;display:flex;flex-direction:column;margin-top:.5rem;max-height:200px}#output[contenteditable]{outline:none;cursor:text;border-bottom:2px solid transparent;transition:border-color .2s;user-select:text;-webkit-user-select:text}#output[contenteditable]:empty:before{content:attr(placeholder);color:#555;font-size:1.5rem;letter-spacing:normal;text-transform:none;font-weight:400;display:block}#output[contenteditable]:focus{border-bottom-color:var(--accent-color)}#potential-list{font-family:var(--font-mono);font-size:.8rem;color:#666;word-wrap:break-word;text-align:center}.highlight-char{color:var(--accent-color);font-weight:700;text-shadow:0 0 5px var(--accent-glow)}#reference-table{margin-top:1rem;background:#2a2a2a;padding:1rem;border-radius:12px;border:1px solid #333}.ref-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.ref-item{display:flex;flex-direction:column;justify-content:center;align-items:center;background:#333;padding:.5rem;border-radius:4px;text-align:center;font-size:.9rem;font-family:var(--font-mono);color:#ccc;min-height:3rem}.ref-item .ref-char{font-weight:700;color:var(--accent-color);font-size:1.1rem;margin-bottom:.2rem;margin-right:0}.ref-item .ref-morse{font-size:.8rem;color:#eee;letter-spacing:1px}@media (min-width: 768px){body{align-items:center}.btn-container{width:200px;height:200px}#morse-btn{width:160px;height:160px;font-size:2rem}.control-btn{width:100px;height:100px;font-size:.9rem}.hint-title.symbol{font-size:2.5rem}}