*,:before,:after{box-sizing:border-box}html,body,#root{background:#1a1a1f;width:100%;height:100%;margin:0;overflow:hidden}canvas{touch-action:none;display:block}.opening-panel{--panel-marble-dark:#1e3329;--panel-marble-mid:#2a4538;--panel-marble-light:#3d5c4a;--panel-cream:#e8e0d0;--panel-gold:#c9a227;--panel-gold-dim:#c9a22773;--panel-gold-glow:#c9a2272e;z-index:10;border:1px solid var(--panel-gold-dim);background:linear-gradient(145deg, #ffffff0d 0%, transparent 42%), linear-gradient(320deg, #0000002e 0%, transparent 55%), linear-gradient(180deg, var(--panel-marble-mid) 0%, var(--panel-marble-dark) 100%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--panel-cream);border-left-width:3px;border-radius:.65rem;flex-direction:column;font-size:.875rem;line-height:1.4;transition:width .28s,max-height .28s;display:flex;position:fixed;top:1rem;right:1rem;overflow:hidden;box-shadow:0 12px 40px #00000073,inset 0 1px #ffffff12}.opening-panel-expanded{width:min(22rem,100vw - 2rem);max-height:calc(100vh - 2rem)}.opening-panel-collapsed{width:3.25rem;max-height:8.5rem}.opening-panel-header{border-bottom:1px solid var(--panel-gold-dim);background:linear-gradient(#ffffff0a 0%,#0000 100%);flex-shrink:0;justify-content:space-between;align-items:flex-start;gap:.5rem;padding:.85rem .75rem .85rem .9rem;display:flex}.opening-panel-collapsed .opening-panel-header{flex-direction:column;align-items:center;padding:.75rem .45rem}.opening-panel-title{min-width:0}.opening-panel-collapsed .opening-panel-title{display:none}.opening-panel-header h1{color:var(--panel-cream);letter-spacing:.01em;margin:0;font-size:.95rem;font-weight:600}.opening-panel-source{color:#e8e0d08c;letter-spacing:.04em;text-transform:uppercase;margin:.2rem 0 0;font-size:.68rem}.opening-panel-toggle{border:1px solid var(--panel-gold-dim);width:1.85rem;height:1.85rem;color:var(--panel-gold);cursor:pointer;background:linear-gradient(#ffffff14 0%,#0000001f 100%);border-radius:.4rem;flex-shrink:0;place-items:center;padding:0;transition:background .15s,border-color .15s;display:grid}.opening-panel-toggle:hover{border-color:var(--panel-gold);background:var(--panel-gold-glow)}.opening-panel-toggle-icon{border-top:2px solid;border-right:2px solid;width:.45rem;height:.45rem;transition:transform .28s;display:block;transform:rotate(45deg)}.opening-panel-collapsed .opening-panel-toggle-icon{transform:rotate(-135deg)}.opening-panel-collapsed-summary{place-items:center;padding:.65rem .35rem .85rem;display:grid}.opening-panel-collapsed-move{color:var(--panel-gold);letter-spacing:.02em;writing-mode:vertical-rl;font-size:1.15rem;font-weight:700}.opening-panel-collapsed-label{color:#e8e0d073;writing-mode:vertical-rl;font-size:1rem}.opening-panel-body{padding:.85rem .9rem 1rem;overflow:auto}.opening-panel-line{color:#e8e0d0b8;margin:0}.opening-panel-line code{color:var(--panel-cream);font-family:ui-monospace,monospace;font-size:.82rem}.opening-panel-active{border:1px solid var(--panel-gold-dim);color:#e8e0d0d9;background:#0000002e;border-radius:.45rem;margin:.75rem 0 0;padding:.55rem .65rem;font-size:.78rem}.opening-panel-active strong{color:var(--panel-gold);font-size:1rem}.opening-panel-active-name{color:#e8e0d08c}.opening-panel-status,.opening-panel-error,.opening-panel-total{margin:.85rem 0 0}.opening-panel-error{color:#e8a0a0}.opening-panel-total{color:#e8e0d099;font-size:.78rem}.opening-panel-name{align-items:baseline;gap:.5rem;margin-top:.85rem;font-weight:500;display:flex}.opening-eco{color:var(--panel-gold);font-family:ui-monospace,monospace;font-size:.78rem}.opening-move-list{margin:.75rem 0 0;padding:0;list-style:none}.opening-move{width:100%;color:inherit;cursor:pointer;font:inherit;text-align:left;background:0 0;border:1px solid #0000;border-radius:.45rem;padding:.5rem .55rem;transition:background .15s,border-color .15s;display:block}.opening-move:hover{background:#00000024;border-color:#c9a22738}.opening-move+.opening-move{margin-top:.3rem}.opening-move-selected{border-color:var(--panel-gold-dim);background:var(--panel-gold-glow);box-shadow:inset 0 0 0 1px #c9a2271f}.opening-move-header{justify-content:space-between;gap:.5rem;margin-bottom:.35rem;display:flex}.opening-move-san{color:var(--panel-cream);font-size:1rem;font-weight:600}.opening-move-selected .opening-move-san{color:var(--panel-gold)}.opening-move-games{color:#e8e0d080;font-size:.72rem}.opening-move-bar{background:#00000038;border:1px solid #00000040;border-radius:999px;height:.38rem;display:flex;overflow:hidden}.bar-white{background:linear-gradient(#f2ead8 0%,#d8ccb4 100%)}.bar-draw{background:linear-gradient(#d4b84a 0%,#a8882a 100%)}.bar-black{background:linear-gradient(#3f5f4a 0%,#243a30 100%)}.opening-move-stats{color:#e8e0d07a;justify-content:space-between;margin-top:.28rem;font-size:.66rem;display:flex}@media (width<=640px){.opening-panel{top:auto;bottom:.75rem;right:.75rem}.opening-panel-expanded{width:min(20rem,100vw - 1.5rem);max-height:min(52vh,28rem)}}