*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{color:#e8e8f0;background:#0a0a0f;min-height:100dvh;font-family:JetBrains Mono,SF Mono,Fira Code,Menlo,monospace;overflow-x:hidden}button,input{font-family:inherit}.app{flex-direction:column;align-items:center;gap:2rem;min-height:100svh;padding:2rem 1.5rem 3rem;display:flex}.app__header{flex-direction:column;align-items:center;gap:.25rem;display:flex}.app__title{letter-spacing:.3em;text-transform:uppercase;background:linear-gradient(135deg,#00f5ff,#ff00e5);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.5rem;font-weight:700}.app__subtitle{color:#6a6a8a;letter-spacing:.15em;text-transform:uppercase;font-size:.6875rem;font-weight:500}.app__mute-indicator{color:#6a6a8a;margin-top:.25rem;font-size:.625rem}.app__mute-indicator--muted{color:#ff00e5}.app__footer{color:#4a4a6a;flex-direction:column;align-items:center;gap:.375rem;margin-top:auto;font-size:.6875rem;display:flex}.app__shortcuts{color:#3a3a5a;text-align:center;font-size:.625rem}.input-panel{flex-direction:column;gap:.75rem;width:100%;max-width:520px;display:flex}.input-panel__row{gap:.5rem;display:flex}.input-panel__input{color:#e8e8f0;background:#16161f;border:1px solid #2a2a3e;border-radius:8px;outline:none;flex:1;padding:.75rem 1rem;font-family:JetBrains Mono,SF Mono,Fira Code,monospace;font-size:.875rem;transition:border-color .2s,box-shadow .2s}.input-panel__input:focus{border-color:#00f5ff;box-shadow:0 0 0 3px #00f5ff1f}.input-panel__input::placeholder{color:#55556a}.input-panel__btn{color:#fff;cursor:pointer;white-space:nowrap;background:linear-gradient(135deg,#7b2ff7,#5b8af5);border:none;border-radius:8px;padding:.75rem 1.25rem;font-family:inherit;font-size:.875rem;font-weight:600;transition:transform .1s,box-shadow .2s}.input-panel__btn:hover{box-shadow:0 0 16px #7b2ff74d}.input-panel__btn:active{transform:scale(.97)}.input-panel__btn:disabled{opacity:.4;cursor:default;box-shadow:none}.input-panel__btn--primary{background:linear-gradient(135deg,#00f5ff,#5b8af5)}.input-panel__btn--primary:hover{box-shadow:0 0 16px #00f5ff4d}.input-panel__nav{justify-content:center;gap:.5rem;display:flex}.input-panel__nav .input-panel__btn{color:#8a8aaa;background:#1a1a26;border:1px solid #2a2a3e;padding:.5rem 1rem;font-size:.75rem}.input-panel__nav .input-panel__btn:hover{color:#e8e8f0;border-color:#00f5ff;box-shadow:0 0 10px #00f5ff1a}.sync-area{flex-direction:column;align-items:center;gap:.5rem;display:flex}.sync-button{color:#0a0a0f;cursor:pointer;background:#00f5ff;border:none;border-radius:8px;margin-top:.5rem;padding:.5rem 1.25rem;font-family:inherit;font-size:.8125rem;font-weight:600;transition:box-shadow .2s,transform .1s}.sync-button:hover{box-shadow:0 0 16px #00f5ff66}.sync-button:active{transform:scale(.97)}.sync-status{color:#6a6a8a;text-align:center;font-size:.75rem}.board{aspect-ratio:22/5;background:#0e0e16;border:1px solid #1a1a28;border-radius:12px;grid-template-columns:repeat(22,minmax(0,1fr));grid-auto-rows:1fr;gap:2px;width:100%;max-width:100vw;margin:0 auto;padding:8px;display:grid;box-shadow:0 0 40px #00f5ff0a,inset 0 1px #ffffff08}.board__row{display:contents}.tile{perspective:300px;aspect-ratio:1;border-radius:4px;position:relative;overflow:hidden}.tile:hover{box-shadow:0 0 12px #00f5ff26}.tile--changing{box-shadow:0 0 8px #ff00e51a}.tile--empty{opacity:.25}.tile__inner{width:100%;height:100%;position:relative}.tile__top,.tile__bottom{color:#e8e8f0;backface-visibility:hidden;background:#12121a;border:1px solid #2a2a3e;justify-content:center;align-items:center;font-family:JetBrains Mono,SF Mono,Fira Code,monospace;font-size:calc(1.5vw + .5vh);font-weight:700;display:flex;position:absolute;left:0;right:0;overflow:hidden}.tile__top{background:#1a1a26;border-bottom:none;border-radius:4px 4px 0 0;align-items:flex-end;padding-bottom:.15em;top:0;bottom:50%}.tile__bottom{background:#0e0e16;border-top:none;border-radius:0 0 4px 4px;align-items:flex-start;padding-top:.15em;top:50%;bottom:0}.tile__bottom:before{content:"";background:#2a2a3e;height:1px;position:absolute;top:0;left:10%;right:10%}.tile__flap{transform-style:preserve-3d;pointer-events:none;z-index:2;transition:transform .35s cubic-bezier(.4,0,.2,1);position:absolute;inset:0}.tile__flap--active{transform:rotateX(-180deg)}.tile__flap-front,.tile__flap-back{backface-visibility:hidden;color:#e8e8f0;justify-content:center;align-items:center;font-family:JetBrains Mono,SF Mono,Fira Code,monospace;font-size:calc(1.5vw + .5vh);font-weight:700;display:flex;position:absolute;inset:0;overflow:hidden}.tile__flap-front{background:#1a1a26;border:1px solid #2a2a3e;border-bottom:none;border-radius:4px 4px 0 0;align-items:flex-end;padding-bottom:.15em;top:0;bottom:50%}.tile__flap-back{background:#0e0e16;border:1px solid #2a2a3e;border-top:none;border-radius:0 0 4px 4px;align-items:flex-start;padding-top:.15em;top:50%;bottom:0;transform:rotateX(180deg)}.tile__flap-back:before{content:"";background:#2a2a3e;height:1px;position:absolute;top:0;left:10%;right:10%}@media (width<=480px){.tile__top,.tile__bottom,.tile__flap-front,.tile__flap-back{font-size:calc(2.5vw + .5vh)}.board{border-radius:8px;gap:1px;padding:4px}}@media (width>=1200px){.board{gap:3px;padding:12px}}@media (width<=600px){.app{gap:1.25rem;padding:1rem .75rem 2rem}.app__title{font-size:1.125rem}.input-panel{gap:.5rem}.input-panel__input{padding:.625rem .75rem;font-size:.8125rem}.input-panel__btn{padding:.625rem .875rem;font-size:.75rem}}