*{box-sizing:border-box;margin:0;padding:0}body{font-family:Poppins,sans-serif;background:#faf3e0;color:#000;min-height:100vh}:root{--cell-size: 36px;--label-w: 36px;--label-h: 20px}.grid-wrapper{display:inline-flex;flex-direction:column;border:2px solid var(--primary);background:var(--bg);overflow:auto;max-width:calc(100vw - 48px);max-height:80vh}.grid-top{display:flex;position:sticky;top:0;z-index:2;background:var(--bg);border-bottom:1px solid #ccc;flex-shrink:0}.grid-corner{width:var(--label-w);height:var(--label-h);flex-shrink:0;position:sticky;left:0;z-index:3;background:var(--bg)}.col-labels-bar{position:relative;height:var(--label-h);flex-shrink:0}.grid-body-row{display:flex}.row-labels-bar{position:relative;width:var(--label-w);flex-shrink:0;position:sticky;left:0;z-index:1;background:var(--bg);border-right:1px solid #ccc}.axis-tick{position:absolute;font-size:8px;font-family:Courier New,monospace;color:var(--primary);font-weight:600;line-height:1;white-space:nowrap;pointer-events:none}.col-tick{top:4px;left:calc(var(--pos) * var(--cell-size));transform:translate(-50%)}.row-tick{right:3px;top:calc(var(--pos) * var(--cell-size))}.grid-cells{display:grid;grid-template-columns:repeat(var(--cols, 100),var(--cell-size));cursor:crosshair;-webkit-user-select:none;user-select:none}.cell{width:var(--cell-size);height:var(--cell-size);border-right:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0;box-sizing:border-box;position:relative}.cell:before{content:attr(data-label);position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:9px;font-family:Courier New,monospace;pointer-events:none;line-height:1}.cell--white{background:#fff}.cell--white:before{color:#ccc}.cell--black{background:#000}.cell--black:before{color:#fff6}.cell:hover{opacity:.7}.grid-wrapper--preview .cell--black{background:#4a4a9e}.grid-wrapper--preview .cell--black:before{color:#ffffff80}.controls{display:flex;flex-direction:column;gap:14px;width:100%}.controls-error{background:var(--error-bg);color:var(--error-fg);border:1px solid var(--error-fg);padding:8px 12px;font-size:.72rem;letter-spacing:.02em;line-height:1.4}.slider-row{display:flex;align-items:center;gap:10px}.slider-bound{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}.time-slider{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;background:#ccc;outline:none;cursor:pointer;border-radius:2px}.time-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:var(--primary);border-radius:50%;cursor:pointer}.time-slider:disabled{opacity:.5;cursor:not-allowed}.duration-badge{font-size:.75rem;font-weight:700;letter-spacing:.1em;color:var(--primary);min-width:42px;text-align:right}.button-row{display:flex;gap:10px}.btn{font-family:Poppins,sans-serif;font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:10px 20px;border:2px solid var(--primary);cursor:pointer;transition:background .1s,color .1s;white-space:nowrap}.btn:disabled{opacity:.45;cursor:not-allowed}.btn--ai{background:var(--primary);color:#fff;flex:1}.btn--ai:hover:not(:disabled){background:#000;border-color:#000}.btn--stop{background:#000;color:#fff;border-color:#000;flex:1}.btn--stop:hover:not(:disabled){background:#333;border-color:#333}.btn--clear{background:transparent;color:var(--primary)}.btn--clear:hover:not(:disabled){background:var(--primary);color:#fff}.btn--save,.btn--load{flex:1;background:transparent;color:var(--primary)}.btn--save:hover:not(:disabled),.btn--load:hover:not(:disabled){background:var(--primary);color:#fff}.history-panel{flex:1;min-width:260px;max-width:380px;border:2px solid var(--primary);background:var(--white);display:flex;flex-direction:column;max-height:calc(100vh - 120px)}.history-heading{font-size:.75rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--primary);padding:10px 14px;border-bottom:1px solid #ccc;background:var(--bg);flex-shrink:0}.history-loading{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid #eee;background:var(--bg)}.history-spinner{display:inline-block;width:14px;height:14px;border:2px solid #ccc;border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}@keyframes spin{to{transform:rotate(360deg)}}.history-loading-text{font-size:.7rem;font-family:Courier New,monospace;color:var(--muted);letter-spacing:.05em}.history-empty{padding:20px 14px;font-size:.78rem;color:var(--muted);letter-spacing:.04em;line-height:1.6}.history-list{list-style:none;overflow-y:auto;flex:1;padding:0}.history-entry{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;border-bottom:1px solid #eee}.history-entry:last-child{border-bottom:none}.entry-cell{font-size:1rem;font-weight:700;font-family:Courier New,monospace;background:var(--primary);color:#fff;padding:4px 7px;border-radius:3px;flex-shrink:0;line-height:1.2;letter-spacing:.05em}.entry-cell--human{background:transparent;color:var(--primary);border:2px solid var(--primary)}.entry-reasoning--human{color:var(--muted);font-style:italic}.history-entry:hover{background:#f5f5f5;cursor:default}.entry-body{flex:1;min-width:0}.entry-meta{display:flex;align-items:baseline;gap:8px;margin-bottom:4px;flex-wrap:wrap}.entry-model{font-size:.68rem;font-weight:700;font-family:Courier New,monospace;color:var(--primary);word-break:break-all}.entry-time{font-size:.65rem;color:var(--muted);margin-left:auto;white-space:nowrap}.entry-reasoning{font-size:.72rem;line-height:1.5;color:#333;letter-spacing:.01em}@media(max-width:900px){.history-panel{max-width:100%;max-height:320px}}:root{--bg: #FAF3E0;--primary: #002FA7;--black: #000000;--white: #ffffff;--border: #002FA7;--muted: #888;--error-bg: #ffe0e0;--error-fg: #c00}.app{min-height:100vh;background:var(--bg);display:flex;flex-direction:column}.app-header{padding:24px 32px 16px;border-bottom:2px solid var(--primary);background:var(--bg)}.app-title{font-size:2rem;font-weight:700;letter-spacing:.15em;color:var(--primary);text-transform:uppercase}.app-subtitle{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:4px}.app-explainer{margin-top:10px;font-size:.8rem;color:#444;line-height:1.6;max-width:560px}.app-main{display:flex;flex-direction:row;gap:32px;padding:24px 32px;align-items:flex-start;flex:1}.canvas-column{display:flex;flex-direction:column;gap:20px;flex-shrink:0}@media(max-width:900px){.app-main{flex-direction:column;padding:16px}}