:root{--page-bg: #f4f6fb;--sidebar-bg: #ffffff;--nav-bg: #1c2233;--nav-text: #c7cee0;--nav-active-bg: #0a1a40;--border: #d8dde8;--text: #0a1a40;--btn-bg: #0a1a40;--btn-text: #ffffff}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;padding:0}body{background:var(--page-bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;overflow:hidden}.layout{display:flex;flex-direction:row;height:100vh;width:100vw}.content{flex:1 1 auto;min-width:0;min-height:0;overflow:hidden;position:relative;display:flex;flex-direction:column}.content>div{height:100%;min-height:0}.app-nav{display:flex;flex-direction:column;width:140px;flex-shrink:0;background:var(--nav-bg);padding:18px 10px;gap:4px;border-right:1px solid var(--border)}.app-nav .nav-link{display:block;padding:10px 14px;font-size:.95rem;font-weight:600;color:var(--nav-text);text-decoration:none;border-radius:6px;border:1px solid transparent;transition:background .12s ease,color .12s ease}.app-nav .nav-link:hover{color:#fff;background:#ffffff0f}.app-nav .nav-link.active{color:#fff;background:var(--nav-active-bg)}.game-layout{display:flex;flex-direction:row;height:100%}.game-center{flex:1 1 auto;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;padding:16px}.grid-wrap{position:relative;container-type:inline-size;aspect-ratio:1 / 1;height:100%;max-width:100%}.game-canvas{display:block;width:100%;height:100%;border:1px solid #c7cee0;cursor:pointer;image-rendering:pixelated;user-select:none;-webkit-user-select:none}.game-canvas.cursor-zoom{cursor:zoom-in}.game-canvas.cursor-zoom-out{cursor:zoom-out}.game-canvas.cursor-grab{cursor:grab}.game-canvas.cursor-grabbing{cursor:grabbing}.loading,.error{width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;border:1px dashed #c7cee0;border-radius:6px}.error{color:#8a1f2b}.fps-overlay{position:absolute;color:red;font-weight:700;line-height:1;padding:2px 4px;pointer-events:none;-webkit-user-select:none;user-select:none;font-variant-numeric:tabular-nums}.game-sidebar{width:320px;flex-shrink:0;background:var(--sidebar-bg);border-left:1px solid var(--border);overflow-y:auto;padding:16px}.game-title{margin:0 0 12px;font-size:1.05rem;font-weight:700}.controls{display:flex;flex-direction:column;gap:8px;align-items:stretch;margin:0 0 14px;padding:0 0 14px;border-bottom:1px solid #eef1f7}.controls:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.controls button{padding:8px 14px;font-size:.95rem;font-weight:600;color:var(--btn-text);background:var(--btn-bg);border:none;border-radius:6px;cursor:pointer;transition:opacity .15s ease}.controls button:hover:not(:disabled){opacity:.85}.controls button:disabled{opacity:.4;cursor:not-allowed}.speed-field,.dim-field,.color-field,.algo-field,.wrap-field{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.95rem;font-weight:600;color:var(--text)}.wrap-field{justify-content:flex-start;cursor:pointer}.speed-field input,.dim-field input[type=number],.algo-field select{width:96px;padding:6px 8px;font-size:.95rem;border:1px solid var(--border);border-radius:6px;background:#fff;color:var(--text)}.algo-field select{cursor:pointer}.speed-hint{font-weight:400;font-size:.8rem;color:#6b7280;min-width:70px;text-align:right}.dim-field input[type=range]{flex:1 1 auto}.color-field input[type=color]{width:40px;height:28px;padding:2px;border:1px solid var(--border);border-radius:6px;background:#fff;cursor:pointer}.wrap-field input[type=checkbox]{width:16px;height:16px;cursor:pointer}.color-field input:disabled,.wrap-field input:disabled,.algo-field select:disabled,.dim-field input:disabled,.speed-field input:disabled{opacity:.4;cursor:not-allowed}.page{height:100%;overflow-y:auto;padding:32px 40px}.page>*{max-width:800px;margin-left:auto;margin-right:auto}.page-title{margin:8px auto 0;font-size:1.6rem;font-weight:700}.page-section{margin:24px auto 0;width:100%}.page-section h2{margin:0 0 8px;font-size:1.15rem;font-weight:600}.page-section h3{margin:18px 0 6px;font-size:1rem;font-weight:600;color:#2d3650}.page-section p,.page-section li{margin:0 0 8px;line-height:1.55;font-size:1rem}.page-section a{color:var(--btn-bg);text-decoration:underline;text-underline-offset:2px}.page-section a:hover{text-decoration-thickness:2px}.page-section ol,.page-section ul{margin:0 0 8px 1.25rem;padding:0}.page-section code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;background:#eef1f7;padding:1px 5px;border-radius:4px}.page-section .code-block{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85rem;line-height:1.45;background:#1c2233;color:#e6e9f2;padding:12px 14px;border-radius:6px;margin:8px 0 12px;overflow-x:auto;white-space:pre}.gen-overlay{position:absolute;color:#0a1a40;font-weight:700;line-height:1;padding:2px 4px;pointer-events:none;-webkit-user-select:none;user-select:none;font-variant-numeric:tabular-nums}