:root{font-family:sans-serif;color:#f4f4f5;background-color:#101014;--button-radius: 4px;--sidebar-width: 320px}*{box-sizing:border-box;font-family:inherit}body{margin:0;min-height:100vh;background:radial-gradient(circle at top,#1f2937,#0a0a0f 60%)}#app{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem;position:relative}.customize-trigger{position:fixed;left:1rem;top:1rem;z-index:50;width:48px;height:48px;padding:0;border:1px solid #3f3f46;border-radius:var(--button-radius);background:#27272a;color:#fafafa;cursor:pointer;display:flex;align-items:center;justify-content:center}.customize-trigger:hover{background:#3f3f46}.customize-trigger svg{width:22px;height:22px}.customize-panel{position:fixed;left:calc(1.75rem + 48px);top:1rem;width:min(320px,calc(100vw - 5rem));max-height:min(88vh,640px);overflow-y:auto;z-index:49;background:#18181b;border:1px solid #3f3f46;border-radius:12px;padding:1rem;box-shadow:0 12px 40px #00000073}.customize-panel[hidden]{display:none!important}.customize-panel h2{margin:0 0 .5rem;font-size:1rem;color:#e4e4e7}.customize-panel h2:not(:first-child){margin-top:1.25rem}.customize-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}.customize-option{appearance:none;border:2px solid #3f3f46;border-radius:var(--button-radius);padding:.45rem;background:#27272a;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.35rem;color:#a1a1aa;font-size:.72rem;text-align:center}.customize-option:hover{border-color:#71717a;background:#3f3f46}.customize-option.active{border-color:#2563eb;background:#1e3a5f;color:#e4e4e7}.mini-board{width:100%;aspect-ratio:1;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);border-radius:4px;overflow:hidden;border:1px solid #52525b}.mini-board .mb{width:100%;height:100%}.piece-theme-swatch{width:100%;min-height:48px;display:flex;align-items:center;justify-content:center;font-size:1.75rem;line-height:1;background:#3f3f46;border-radius:4px}.piece-theme-swatch .piece{width:100%;height:100%}.layout{width:min(1240px,calc(100% - var(--sidebar-width) - 2.5rem));display:grid;gap:1.25rem;grid-template-columns:minmax(560px,760px) minmax(360px,1fr);align-items:start;margin-right:calc(var(--sidebar-width) + 1.25rem)}.board-wrap{display:flex;justify-content:center}.board{width:min(88vw,760px);aspect-ratio:1 / 1;border:8px solid var(--board-border, #3f3f46);border-radius:12px;overflow:hidden;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr)}.square{width:100%;height:100%;border:0;border-radius:0;padding:0;display:flex;align-items:center;justify-content:center;font-size:clamp(1.6rem,2.6vw,2.8rem);line-height:1;-webkit-user-select:none;user-select:none;cursor:pointer}.square.light{background:var(--sq-light, #f0d9b5)}.square.dark{background:var(--sq-dark, #b58863)}.square.selected{box-shadow:inset 0 0 0 4px #10b981}.square.legal{box-shadow:inset 0 0 0 4px #3b82f6bf}.panel{background:#18181b;border:1px solid #3f3f46;border-radius:12px;min-height:100%;padding:1.25rem}.sidebar{position:fixed;right:0;top:0;bottom:0;width:var(--sidebar-width);background:#18181b;border:1px solid #3f3f46;border-right:0;border-radius:0;padding:1.1rem .9rem;display:flex;flex-direction:column;gap:.65rem;z-index:2000}.nav-button{appearance:none;border:1px solid #3f3f46;border-radius:var(--button-radius);width:100%;text-align:left;padding:.85rem .9rem;background:#27272a;color:#fafafa;font-weight:600;font-size:1.15rem;cursor:pointer}.nav-button:hover{background:#3f3f46}.nav-button.active{border-color:#2563eb;background:#1d4ed8}.panel h1{margin-top:0;margin-bottom:.75rem;font-size:1.35rem}.status{margin:.25rem 0;line-height:1.45;word-break:normal}.controls{margin-top:1rem;display:flex;gap:.5rem}.controls button{appearance:none;border:1px solid #3f3f46;border-radius:var(--button-radius);padding:.5rem .75rem;background:#27272a;color:#fafafa;font-weight:600;cursor:pointer}.controls button:hover{background:#3f3f46}.controls input{flex:1;min-width:0;border:1px solid #3f3f46;border-radius:var(--button-radius);padding:.5rem .6rem;background:#111217;color:#fafafa}.piece{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%}.piece img{width:100%;height:100%;display:block;object-fit:contain}.board .piece img{width:90%;height:90%}.board[data-piece-theme="0"] .piece img{filter:drop-shadow(0 0 1px rgba(17,24,39,.9)) drop-shadow(0 0 1px rgba(17,24,39,.7))}.board[data-piece-theme="0"] .piece img[src*="/b"]{filter:drop-shadow(0 0 1px rgba(248,250,252,.95)) drop-shadow(0 0 1px rgba(248,250,252,.8))}.openings-table{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;align-items:flex-start}.opening-item{width:clamp(140px,42vw,200px);min-width:132px;max-width:200px;background:#27272a;border:1px solid #3f3f46;border-radius:8px;padding:.6rem;margin-bottom:.55rem;line-height:1.2;font-size:.75rem;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;cursor:pointer;box-shadow:0 1px 3px #00000059;transition:transform .15s ease,box-shadow .15s ease}.opening-item:hover{transform:translateY(-1px);box-shadow:0 4px 10px #00000073}.opening-item h3{margin:0;font-size:.72rem;line-height:1.15;min-height:2.2rem;text-align:center;word-break:break-word;white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.mini-opening-board{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);width:min(100%,120px);max-width:120px;aspect-ratio:1;border:1px solid #3f3f46;border-radius:4px;overflow:hidden;margin:.4rem 0;cursor:pointer}.mini-square{width:100%;height:100%;font-size:.6rem;display:flex;align-items:center;justify-content:center}.mini-piece{line-height:1;pointer-events:none;font-size:14px}.mini-piece-white{color:#fcfcfc}.mini-piece-black{color:#181818}.opening-item button{appearance:none;border:1px solid #3f3f46;border-radius:var(--button-radius);padding:.3rem .4rem;background:#27272a;color:#fafafa;font-weight:600;cursor:pointer;margin-top:.4rem;width:100%;font-size:.71rem}.opening-item button:hover{background:#3f3f46}.opening-nav{display:flex;justify-content:center;gap:.5rem;margin-bottom:.5rem}.opening-nav button{appearance:none;border:1px solid #3f3f46;border-radius:var(--button-radius);padding:.25rem .5rem;background:#27272a;color:#fafafa;cursor:pointer;font-size:1.2rem}.opening-nav button:hover{background:#3f3f46}.result-overlay{position:fixed;inset:0;background:#0000008c;display:flex;align-items:center;justify-content:center;z-index:100}.result-card{min-width:280px;max-width:92vw;background:#18181b;border:1px solid #3f3f46;border-radius:12px;padding:1rem 1.1rem;text-align:center}.result-card h2{margin:0 0 .9rem;font-size:1.6rem;color:#fafafa}.result-card button{appearance:none;border:1px solid #3f3f46;border-radius:var(--button-radius);padding:.45rem .9rem;background:#27272a;color:#fafafa;cursor:pointer}@media(max-width:900px){.layout{grid-template-columns:1fr;width:100%;margin-right:0;padding-right:0}.sidebar{position:static;width:100%;border-radius:12px;border-right:1px solid #3f3f46}.customize-panel{left:1rem;right:1rem;top:calc(1rem + 52px);width:auto;max-height:70vh}.openings-table{display:flex;flex-wrap:wrap;justify-content:start}.opening-item{width:48%;min-width:100px;background:#27272a;border:1px solid #3f3f46;border-radius:8px;padding:.75rem;margin-bottom:.75rem}.mini-opening-board{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);width:100%;max-width:12px;aspect-ratio:1;margin:.5rem 0;border:1px solid #3f3f46}.mini-square{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:8px}.mini-square img{display:none}.opening-item button{appearance:none;border:1px solid #3f3f46;border-radius:var(--button-radius);padding:.5rem .75rem;background:#27272a;color:#fafafa;font-weight:600;cursor:pointer;margin-top:.5rem}.opening-item button:hover{background:#3f3f46}}