.keyboard-widget{width:100%;background-color:transparent;display:flex;align-items:flex-end;justify-content:flex-start;color:#fff;overflow-x:hidden;overflow-y:hidden;white-space:nowrap}.ivory{background:#fff;border:1px solid #333;height:100%;border-radius:4px;display:inline-block;box-sizing:border-box;cursor:pointer;transition:box-shadow .1s;position:relative;z-index:1}.ebony{background:#000;border:1px solid #333;height:70%;border-radius:4px;display:inline-block;box-sizing:border-box;cursor:pointer;transition:box-shadow .1s;position:absolute;z-index:2;top:0}.key-label{position:absolute;left:0;width:100%;display:flex;align-items:center;pointer-events:none;-webkit-user-select:none;user-select:none}.key-label--white{top:0;bottom:5px;height:auto;flex-direction:column;justify-content:flex-end;align-items:center}.key-label--white .key-label__primary{writing-mode:vertical-rl;text-orientation:sideways;letter-spacing:.02em;padding-left:2px}.key-label--black{top:4px;bottom:4px;left:0;height:auto;width:100%;writing-mode:vertical-rl;text-orientation:sideways;flex-direction:row;justify-content:center;gap:2px;letter-spacing:.02em}.key-label__primary{display:block;font-weight:600}.key-label__secondary{display:block;opacity:.7}.key-label--black .key-label__secondary{opacity:1}.ivory--realistic{background:linear-gradient(175deg,#f5f0e8,#fffef8 60%,#e8dfc8);border:1px solid #222;border-top:none;border-radius:0 0 10px 10px;box-shadow:2px 6px 12px #00000073,inset 0 -4px 8px #0000001a;transition:box-shadow .08s,transform .08s}.ivory--realistic:hover{background:linear-gradient(175deg,#def,#eef6ff 60%,#ccddf0);box-shadow:2px 8px 18px #0000008c,inset 0 -4px 8px #0000001f}.ivory--realistic:active{transform:translateY(5px);box-shadow:1px 2px 6px #0006,inset 0 -2px 4px #0000001a}.ebony--realistic{background:linear-gradient(175deg,#1a1a1a,#2d2d2d 70%,#111);border:2px solid #000;border-top:none;border-radius:0 0 6px 6px;box-shadow:1px 3px 7px #00000061,inset 0 -2px 3px #ffffff0a;transition:box-shadow .08s,transform .08s}.ebony--realistic:hover{background:linear-gradient(175deg,#1a1a3a,#2a2a4a 70%,#0d0d20);box-shadow:1px 4px 9px #0000006e,inset 0 -2px 3px #ffffff0f}.ebony--realistic:active{transform:translateY(4px);box-shadow:1px 1px 3px #00000059,inset 0 -1px 2px #ffffff0a}@keyframes cof-btn-blink{0%,to{opacity:1}50%{opacity:.1}}@keyframes cof-dot-blink{0%,80%,to{opacity:.2}40%{opacity:1}}.cof-dot{animation:cof-dot-blink 1.4s infinite ease-in-out;display:inline-block}.cof-dot:nth-child(2){animation-delay:.2s}.cof-dot:nth-child(3){animation-delay:.4s}.app-root{width:100vw;height:100dvh;display:flex;flex-direction:column;align-items:center;background-color:#111;color:#fff;font-family:system-ui,-apple-system,sans-serif;overflow:hidden;-webkit-user-select:none;user-select:none}.lang-selector{position:absolute;top:12px;right:16px;z-index:10}.lang-select{background:#1e1e1e;color:#ccc;border:1px solid #333;border-radius:6px;padding:4px 8px;font-size:.85rem;cursor:pointer;outline:none}.circle-area{flex:1;display:flex;align-items:center;justify-content:center;width:100%;min-height:0;padding:0;box-sizing:border-box}.circle-container{width:100%;aspect-ratio:1;max-height:100%;position:relative}.btn-overlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;pointer-events:auto;display:flex;align-items:center;justify-content:center}.cof-btn{color:#fff;border:none;border-radius:50%;line-height:1;transition:background .25s,opacity .25s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;justify-content:center}.cof-btn--idle{background:#1b5e20;cursor:pointer;opacity:1}.cof-btn--active{background:#b71c1c;cursor:pointer;opacity:1;animation:cof-btn-blink 1s ease-in-out infinite}.cof-btn--busy{background:#2a2a2a;cursor:default;opacity:.4}.btn-icon-stop{display:block;background:#fff;border-radius:4px}.btn-icon-play{display:block;width:0;height:0}.status-messages{position:absolute;bottom:12px;left:50%;transform:translate(-50%);z-index:10;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}.error-box{margin:0;text-align:center}.error-title{margin:0 0 4px;font-size:.82rem;color:#ff6b6b;font-weight:600}.error-hint{margin:0;font-size:.75rem;color:#f99;max-width:280px}.loading-text{margin:0;font-size:.78rem;color:#888;text-align:center}.qr-wrapper{position:absolute;bottom:12px;left:16px;z-index:10}.impressum-link{position:absolute;bottom:14px;right:16px;z-index:10;color:#888;font-size:.8rem;text-decoration:underline}.tune-btn-wrap{position:absolute;top:12px;left:16px;z-index:10}.tune-btn{display:flex;align-items:center;gap:5px;background:#1e1e1e;color:#ccc;border:1px solid #333;border-radius:6px;padding:4px 8px;font-size:.85rem;cursor:pointer;outline:none;line-height:1;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:color .2s,border-color .2s}.tune-btn--calibrated{color:#7ec8a4;border-color:#7ec8a4}.tune-btn__badge{font-size:.72rem;opacity:.85;letter-spacing:.02em}.cal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b8;display:flex;align-items:flex-start;justify-content:flex-start;padding:60px 16px 16px;z-index:50}.cal-card{background:#1e1e1e;border:1px solid #444;border-radius:10px;padding:18px 20px;max-width:320px;width:100%;display:flex;flex-direction:column;gap:12px;box-shadow:0 8px 32px #0009}.cal-title{margin:0;font-size:1rem;font-weight:600;color:#e0e0e0}.cal-instruction{margin:0;font-size:.88rem;color:#aaa;line-height:1.4}.cal-progress-track{height:6px;background:#333;border-radius:3px;overflow:hidden}.cal-progress-bar{height:100%;background:#7ec8a4;border-radius:3px;transition:width .1s linear}.cal-result{margin:0;font-size:.92rem;font-weight:500}.cal-result--ok{color:#7ec8a4}.cal-result--err{color:#ff6b6b}.cal-actions{display:flex;flex-wrap:wrap;gap:8px}.cal-btn{flex:1;min-width:0;padding:7px 12px;border-radius:6px;border:1px solid #444;background:#2a2a2a;color:#ccc;font-size:.82rem;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;white-space:nowrap}.cal-btn--primary{background:#1b5e20;border-color:#2e7d32;color:#fff}.cal-btn--reset{border-color:#555;color:#888;flex:100%;text-align:center}