: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: 300px}.timeline-container{position:relative;width:100%;height:var(--timeline-height);background-color:var(--paper-cream);overflow-x:hidden;overflow-y:visible;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-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}.line-segment{position:absolute;left:-50%;width:100%;top:50%;height:0;border-bottom:2px dotted rgba(54,54,54,.3);z-index:1}.line-segment.solid{border-bottom-style:solid;border-bottom-color:var(--ink-charcoal);opacity:.8}.line-segment.dotted{border-bottom-style:dotted;border-bottom-color:#36363699}.move-content{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column}.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)}.branch-container{position:absolute;top:50%;left:50%;width:0;height:0}.branch-node{position:absolute;left:0;transform:translate(-50%);display:flex;flex-direction:row;align-items:center;background-color:transparent;padding:4px 8px;font-size:14px;color:#666;white-space:nowrap;cursor:pointer;z-index:20}.branch-node:hover{color:var(--nib-indigo)}.branch-node:hover .branch-san{font-weight:700}.branch-line-connector{position:absolute;width:0;border-left:2px dotted rgba(54,54,54,.3);left:50%;transform:translate(-50%);top:-70px;height:70px;z-index:-1}.branch-line-connector.solid{border-left-style:solid;border-left-color:var(--ink-charcoal);border-left-width:2px;opacity:.5}.branch-line-connector.dotted{border-left-style:dotted}.branch-tail{width:30px;height:2px;margin-left:8px;border-bottom:2px dotted rgba(54,54,54,.5);mask-image:linear-gradient(to right,black 0%,transparent 100%);-webkit-mask-image:linear-gradient(to right,black 0%,transparent 100%)}.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%;padding:20px 0}.board-wrapper{width:90vmin;height:90vmin;max-width:100%;max-height:100%;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;position:relative;border:1px solid var(--grid-line);-webkit-user-select:none;user-select:none;cursor:default;background-color:var(--bg-cream);z-index:0;touch-action:none}.board-squares-layer{width:100%;height:100%;display:flex;flex-direction:column;position:relative;z-index:1}.board-pieces-layer{width:100%;height:100%;position:absolute;top:0;left:0;pointer-events:none;z-index:10}.piece-container{pointer-events:auto;display:flex;align-items:center;justify-content:center;cursor:grab}.piece-container:active{cursor:grabbing}.piece-container svg{width:85%;height:85%;filter:drop-shadow(0px 1px 0px rgba(0,0,0,.1))}.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}.board-grid-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:5}.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}