:root{--bg-cream: #FDFBF7;--text-charcoal: #2C2C2C;--square-dark: #EBE7DE;--grid-line: rgba(44, 44, 44, .15);--font-condensed: "Barlow Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:var(--text-charcoal);background-color:var(--bg-cream);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;background-color:var(--bg-cream);position:relative}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999;opacity:.4;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")}h1{font-size:3.2em;line-height:1.1;color:var(--text-charcoal)}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#f9f9f9;color:#213547;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}:root{--bg-cream: #FDFBF7;--text-charcoal: #2C2C2C;--text-graphite: #666666;--text-indigo: #0047AB;--text-terracotta: #CC4E00;--text-sage: #778C75;--font-headline: "Barlow Condensed", sans-serif;--font-data: "Roboto Mono", monospace;--font-handwriting: "Architects Daughter", cursive}body{background-color:var(--bg-cream);color:var(--text-charcoal);margin:0;font-family:var(--font-data);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body:before{content:"";position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:9999;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")}.app{display:flex;flex-direction:column;height:100vh;width:100%;overflow:hidden}button{background:none;border:1px solid var(--text-charcoal);color:var(--text-charcoal);padding:8px 16px;font-family:var(--font-headline);font-weight:700;cursor:pointer;text-transform:uppercase;transition:all .2s ease}button:hover{background-color:var(--text-charcoal);color:var(--bg-cream)}:root{--paper-cream: #FDFBF7;--ink-charcoal: #363636;--nib-indigo: #6366f1;--timeline-height: 80px}.timeline-container{position:relative;width:100%;height:var(--timeline-height);background-color:var(--paper-cream);overflow:hidden;border-top:1px solid rgba(0,0,0,.05);display:flex;align-items:center}.timeline-nib{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;background-color:transparent;border:2px solid var(--nib-indigo);border-radius:50%;z-index:10;box-shadow:0 0 10px #6366f133;pointer-events:none}.timeline-ink-line{position:absolute;left:0;right:0;top:50%;height:2px;background-color:#3636361a;z-index:1;pointer-events:none}.timeline-track{display:flex;align-items:center;position:absolute;left:50%;height:100%;will-change:transform;z-index:2}.timeline-item{height:100%;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;-webkit-user-select:none;user-select:none;font-family:Courier Prime,Courier New,monospace;font-size:16px;color:var(--ink-charcoal);opacity:.5;transition:opacity .2s ease,transform .2s ease}.timeline-item:hover{opacity:.8}.timeline-item.active{opacity:1;font-weight:700}.move-content{position:relative;display:flex;align-items:center;justify-content:center}.move-san{background-color:var(--paper-cream);padding:0 4px;border-radius:4px;position:relative;z-index:3}.move-number{position:absolute;right:100%;top:50%;transform:translateY(-50%);padding-right:8px;white-space:nowrap;color:var(--ink-charcoal);opacity:.7;z-index:3;background-color:var(--paper-cream)}.header{height:10%;display:flex;align-items:center;justify-content:space-between;padding:0 20px;position:relative;z-index:10}.header-left,.header-right{width:48px;display:flex;justify-content:center}.icon-btn{border:none;padding:8px;cursor:pointer;color:var(--text-charcoal);background:transparent}.icon-btn:hover{background:transparent;color:var(--text-indigo)}.logo{position:relative;margin:0;font-family:var(--font-headline);font-size:2rem;letter-spacing:2px;color:var(--text-charcoal);display:flex;flex-direction:column;align-items:center;justify-content:center}.logo-text{z-index:2;position:relative}.logo-wash{position:absolute;bottom:5px;left:-10%;width:120%;height:40%;background-color:var(--text-indigo);opacity:.2;border-radius:50% 40% 60% 30%/30% 50% 60% 40%;filter:blur(4px);z-index:1}.status-dot{width:8px;height:8px;border-radius:50%;background-color:var(--text-indigo);animation:breathe 3s infinite ease-in-out}@keyframes breathe{0%,to{opacity:.4;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}.arena{flex-grow:1;display:flex;align-items:center;justify-content:center;position:relative;width:100%}.board-wrapper{width:100%;max-width:80vh;box-sizing:border-box;position:relative;z-index:1}.margin-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2}.custom-board{width:100%;aspect-ratio:1 / 1;display:flex;flex-direction:column;border:1px solid var(--grid-line);-webkit-user-select:none;user-select:none;cursor:default;background-color:var(--bg-cream);position:relative;z-index:0;touch-action:none}.board-rank{flex:1;display:flex;position:relative}.board-square{flex:1;display:flex;align-items:center;justify-content:center;position:relative}.board-square.light{background-color:transparent}.board-square.dark{background-color:var(--square-dark)}.board-square.selected{background-color:#6366f166}.board-square.dark.selected{background-color:#6366f180}.piece{width:85%;height:85%;cursor:grab;transition:transform .1s ease,filter .1s ease;filter:drop-shadow(0px 1px 0px rgba(0,0,0,.1));position:relative;z-index:10;pointer-events:none}.piece:active{cursor:grabbing}.board-grid-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:5}.dragged-piece{width:60px;height:60px;z-index:1000}.board-coordinate{position:absolute;font-family:var(--font-condensed);font-size:12px;font-weight:500;color:var(--text-charcoal);opacity:.4;pointer-events:none;z-index:6}.board-coordinate.rank{top:2px;left:2px}.board-coordinate.file{bottom:1px;right:2px}