:root{color-scheme:dark;--bg: #000000;--fg: #b2dbd5;--accent: #e05a3a;--azure: #1daaa9;--kb-h: clamp(96px, 17vh, 150px)}.tds-play-app{position:relative;height:100%;display:flex;flex-direction:column;background:#000;color:var(--fg);font-family:system-ui,sans-serif;overflow:hidden}#stage{position:relative;flex:1 1 auto;min-height:0;display:flex;justify-content:center;align-items:flex-start}#stage:before,#stage:after{content:"";position:absolute;top:0;width:var(--side-w, 0px);height:var(--canvas-h, 0px);background:linear-gradient(to bottom,#1f0a02,#1c0902 20%,#170701,#140601,#110501 80%,#0e0300);pointer-events:none}#stage:before{left:0;-webkit-mask-image:linear-gradient(to right,transparent,#000);mask-image:linear-gradient(to right,transparent,#000)}#stage:after{right:0;-webkit-mask-image:linear-gradient(to left,transparent,#000);mask-image:linear-gradient(to left,transparent,#000)}#nav-hint{position:absolute;left:50%;top:calc(var(--canvas-h, 0px) * .95);transform:translate(-50%,-50%);z-index:1;margin:0;white-space:nowrap;font-family:Work Sans,system-ui,sans-serif;font-size:calc(var(--canvas-h, 0px) * .026);letter-spacing:.02em;color:#467777;pointer-events:none;opacity:0;transition:opacity .6s ease}#nav-hint.shown{opacity:1}#tds-canvas{display:block}#kb-bar{--kb-pad: clamp(120px, 16vw, 220px);position:relative;box-sizing:border-box;padding:0 var(--kb-pad);flex:0 0 var(--kb-h);display:flex;align-items:center;justify-content:center;border-top:1px solid rgba(29,170,169,.25);background:linear-gradient(to bottom,#050909,#000)}#overlay{position:absolute;left:50%;top:12px;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;text-align:center;pointer-events:none}#overlay>*{margin:0!important}#overlay .bar{display:flex;gap:8px;align-items:center}#status{color:var(--accent)}@media(max-width:749px){#kb-bar{--kb-pad: 112px;padding-left:8px}}.kb-hint-slot{position:absolute;top:0;left:0;bottom:0;width:var(--kb-pad);display:flex;align-items:center;justify-content:center;pointer-events:none}.kb-hint{margin:0;padding:0 12px;text-align:center;font:11px/1.7 system-ui,sans-serif;letter-spacing:.02em;color:#b2dbd599}.kb-hint kbd{display:inline-block;min-width:1.5em;padding:0 .3em;border:1px solid rgba(29,170,169,.5);border-radius:4px;font:inherit;color:var(--fg)}@media(max-width:749px){.kb-hint-slot{display:none}}.kb-start-slot{position:absolute;top:0;right:0;bottom:0;width:var(--kb-pad);display:flex;align-items:center;justify-content:center}#start{max-width:calc(100% - 16px);padding:10px 16px;background:var(--azure);color:#121212;border:0;border-radius:8px;font:13px system-ui,sans-serif;line-height:1.25;cursor:pointer;transition:background-color .2s ease}#start:hover{background:var(--accent)}#start:disabled{opacity:.6;cursor:progress}#overlay button{pointer-events:auto;margin-bottom:8px;padding:8px 16px;background:var(--azure);color:#121212;border:0;border-radius:8px;font:inherit;cursor:pointer;transition:background-color .2s ease}#overlay button:hover{background:var(--accent)}#overlay select{pointer-events:auto;display:block;margin-bottom:8px;padding:6px 8px;background:#0b0b0ad1;color:var(--fg);border:1px solid #5a5a44;border-radius:4px;font:inherit}.kb{--d: calc(var(--kb-h) * .3);--gap: calc(var(--d) * .22);position:relative;display:flex;align-items:center;gap:20px;touch-action:none;user-select:none;-webkit-user-select:none}.kb-keys{position:relative;width:calc(var(--whites) * var(--d) + (var(--whites) - 1) * var(--gap));height:calc(2 * var(--d) + var(--gap));margin-bottom:16px}.kb-key{display:block!important;position:absolute;left:calc(var(--col) * (var(--d) + var(--gap)));width:var(--d);height:var(--d);box-sizing:border-box;border-radius:var(--wob, 50%);cursor:pointer;transition:background-color 60ms,box-shadow 60ms,border-color .12s,transform .12s ease-out}.kb-key[data-wob="0"]{--wob: 50%}.kb-key[data-wob="1"]{--wob: 52% 48% 50% 50% / 49% 51% 49% 51%}.kb-key[data-wob="2"]{--wob: 48% 52% 51% 49% / 52% 50% 50% 48%}.kb-key[data-wob="3"]{--wob: 51% 49% 47% 53% / 50% 52% 48% 50%}.kb-key[data-wob="4"]{--wob: 49% 51% 52% 48% / 48% 49% 51% 52%}.kb-key:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:radial-gradient(circle at 70% 75%,rgba(224,90,58,.55),transparent 55%),radial-gradient(circle at 25% 30%,rgba(29,170,169,.5),transparent 60%);mix-blend-mode:soft-light;opacity:.25;pointer-events:none;animation:kb-shimmer 7s ease-in-out infinite;animation-delay:calc(var(--i, 0) * -.22s)}@keyframes kb-shimmer{0%,to{opacity:.15}50%{opacity:.85}}.kb-probe{position:absolute;visibility:hidden;pointer-events:none}.kb-white{bottom:0;background:radial-gradient(circle at 34% 30%,#e6f6f2 0%,var(--fg) 38%,#7fa9a3 100%);border:2px solid transparent;background-clip:padding-box}.kb-black{top:0;border:0;background:radial-gradient(circle at 34% 30%,#253433,#0d1716 55%,#050909)}.kb-black:after{opacity:.1}.kb-key:hover{border-color:var(--accent);transform:scale(1.04)}.kb-key.on{background:radial-gradient(circle at 34% 30%,#7fe3df 0%,var(--azure) 45%,#0f6e6d 100%);border-color:var(--azure);box-shadow:0 0 calc(var(--d) * .3) var(--azure),0 0 calc(var(--d) * .8) #e05a3a59;transform:scale(1.07)}@media(prefers-reduced-motion:reduce){.kb-key:after{animation:none}}.kb-label{position:absolute;top:100%;left:calc(var(--col) * (var(--d) + var(--gap)));width:var(--d);margin-top:4px;text-align:center;font-size:11px;letter-spacing:.04em;color:#b2dbd5b3;pointer-events:none}.kb-oct{flex:0 0 auto;width:34px;height:34px;padding:0;background:transparent;color:var(--azure);border:0;border-radius:50%;font:22px system-ui,sans-serif;cursor:pointer;transition:color .2s ease,border-color .2s ease}.kb-oct:hover:not(:disabled){color:var(--accent)}.kb-oct:focus-visible{outline:1px solid var(--azure);outline-offset:2px}.kb-oct:disabled{opacity:.3;cursor:default}.kb-mobile{display:none;align-items:center;gap:28px;touch-action:none;user-select:none;-webkit-user-select:none}.kb-mobile .kb-key{--d: calc(var(--kb-h) * .5);position:relative;bottom:auto}.kb-nav{display:grid;place-items:center;width:48px;height:48px;padding:0;background:none;border:0;color:var(--azure);cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;transition:color .2s ease,transform .12s ease-out}.kb-nav svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.kb-nav:active{color:var(--accent);transform:scale(.92)}.kb-nav:focus-visible{outline:1px solid var(--azure);outline-offset:2px}@media(max-width:749px){.kb{display:none}.kb-mobile{display:flex}#nav-hint{display:none}#kb-bar{padding:0}.kb-start-slot{display:none}#stage{overflow:hidden}#tds-canvas{flex:none}#stage:before,#stage:after{display:none}}.popup-menu{position:fixed;z-index:10;min-width:120px;padding:4px 0;background:#1b1b17;border:1px solid #5a5a44;border-radius:6px;box-shadow:0 6px 24px #00000080;font:13px system-ui,sans-serif;user-select:none;-webkit-user-select:none}.popup-header{padding:4px 12px;color:#8a8670;font-weight:600}.popup-item{padding:4px 12px;cursor:pointer}.popup-item:hover{background:var(--accent);color:#0b0b0a}.popup-item.disabled{opacity:.4;cursor:default}.popup-item.disabled:hover{background:none;color:inherit}.popup-item.ticked:before{content:"\2713  "}.popup-separator{height:1px;margin:4px 0;background:#5a5a44}.tds-modal{position:fixed;z-index:20;display:grid;place-items:center;background:#0009}.tds-box{box-sizing:border-box;width:320px;min-height:156px;padding:20px;display:flex;flex-direction:column;gap:8px;background:#101418f2;border:1px solid rgba(57,197,203,.35);border-radius:8px;color:#39c5cb;font:15px system-ui,sans-serif}.tds-box-title{height:28px;line-height:28px;text-align:center;font-size:17px}.tds-box-message{font-size:13px;line-height:1.4;text-align:center}.tds-box input{height:30px;padding:0 8px;background:#0003;color:#39c5cb;border:1px solid rgba(57,197,203,.35);border-radius:3px;font:inherit;outline:none}.tds-box input::placeholder{color:#39c5cb73}.tds-box input:focus{border-color:#39c5cbb3}.tds-box-buttons{display:flex;gap:8px;margin-top:6px}.tds-box-buttons button{flex:1;height:30px;background:#0003;color:#39c5cb;border:1px solid rgba(57,197,203,.35);border-radius:3px;font:inherit;cursor:pointer}.tds-box-buttons button:hover,.tds-box-buttons button:focus-visible{border-color:#39c5cb;outline:none}
/*# sourceMappingURL=/cdn/shop/t/5/assets/tds-play.css.map */