:root{--bg: #ffffff;--fg: #111111;--muted: #6B7280;--grid: #EDEDED;--accent: #CBBF9D;--line: #DADADA;--ok: #16a34a;--error: #dc2626;--warning: #f59e0b;--transition: .2s ease}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:var(--bg);color:var(--fg);height:100vh;overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.navbar{position:fixed;top:0;left:0;right:0;height:60px;background:#fffc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--grid);display:flex;align-items:center;justify-content:space-between;padding:0 2rem;z-index:1000}.nav-left{display:flex;align-items:center;gap:1.5rem}.nav-brand{display:flex;align-items:center;gap:.5rem}.wordmark{font-size:18px;font-weight:700;color:var(--fg)}.pearl-icon{width:12px;height:12px;background:var(--accent);border-radius:50%;box-shadow:inset 0 1px 2px #0000001a}.online-status{display:flex;align-items:center;gap:.5rem;font-size:12px;font-weight:500;color:var(--ok);text-transform:uppercase;letter-spacing:.5px}.online-dot{width:8px;height:8px;background:var(--ok);border-radius:50%;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.nav-center{display:flex;gap:2rem}.nav-item{background:none;border:none;font-size:14px;font-weight:500;color:var(--fg);text-transform:uppercase;letter-spacing:.5px;cursor:pointer;padding:.5rem 0;position:relative;transition:var(--transition)}.nav-item:after{content:"";position:absolute;bottom:0;left:50%;width:0;height:1px;background:var(--accent);transition:all var(--transition);transform:translate(-50%)}.nav-item:hover:after,.nav-item.active:after{width:100%}.nav-item:hover{color:var(--accent)}.nav-right{display:flex;align-items:center;gap:1rem}.social-btn{display:flex;align-items:center;gap:.25rem;padding:.5rem .75rem;background:none;border:1px solid var(--line);border-radius:6px;color:var(--fg);text-decoration:none;font-size:14px;font-weight:500;transition:var(--transition)}.social-btn:hover{background:var(--grid);border-color:var(--accent)}.x-icon{font-size:12px}.ca-badge{background:none;border:1px solid var(--line);border-radius:6px;padding:.5rem .75rem;font-size:12px;font-family:Monaco,Menlo,monospace;color:var(--muted);cursor:pointer;transition:var(--transition)}.ca-badge:hover{background:var(--grid);color:var(--fg)}.settings-btn{background:none;border:none;padding:.5rem;cursor:pointer;color:var(--muted);transition:var(--transition)}.settings-btn:hover{color:var(--fg)}.gear-icon{font-size:16px}.mobile-menu-btn{display:none;flex-direction:column;gap:3px;background:none;border:none;padding:.5rem;cursor:pointer}.mobile-menu-btn span{width:20px;height:2px;background:var(--fg);transition:var(--transition)}.mobile-menu{position:fixed;top:60px;left:0;right:0;background:#fffffff2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transform:translateY(-100%);transition:transform var(--transition);z-index:999}.mobile-menu.active{transform:translateY(0)}.mobile-menu-content{padding:2rem;display:flex;flex-direction:column;gap:1rem}.main-container{display:flex;flex-direction:column;height:100vh;padding-top:60px}.hero-section{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:10;pointer-events:none}.hero-section>*{pointer-events:auto}.pawl-image{margin-bottom:2rem;cursor:pointer;position:relative}.pawl-logo{width:120px;height:120px;-o-object-fit:contain;object-fit:contain;transition:transform var(--transition);filter:drop-shadow(0 4px 8px rgba(0,0,0,.1))}.pawl-image:hover .pawl-logo{transform:scale(1.05)}@keyframes wagTail{0%,to{transform:translateY(-50%) rotate(0)}25%{transform:translateY(-50%) rotate(15deg)}75%{transform:translateY(-50%) rotate(-15deg)}}.hero-links{display:flex;gap:2rem;justify-content:center}.hero-link{background:none;border:1px solid var(--line);border-radius:6px;padding:.75rem 1.5rem;font-size:16px;font-weight:500;color:var(--fg);cursor:pointer;transition:var(--transition)}.hero-link:hover{background:var(--accent);border-color:var(--accent);color:#fff}.grid-container{flex:1;position:relative;background-image:repeating-linear-gradient(0deg,var(--grid) 0px,var(--grid) 1px,transparent 1px,transparent 10px),repeating-linear-gradient(90deg,var(--grid) 0px,var(--grid) 1px,transparent 1px,transparent 10px),repeating-linear-gradient(0deg,var(--line) 0px,var(--line) 1px,transparent 1px,transparent 50px),repeating-linear-gradient(90deg,var(--line) 0px,var(--line) 1px,transparent 1px,transparent 50px);overflow:hidden}.grid-canvas{width:100%;height:100%;cursor:crosshair}.tooltip-card{position:absolute;top:2rem;right:2rem;background:#fff;border:1px solid var(--line);border-radius:8px;padding:1rem;box-shadow:0 4px 12px #0000001a;max-width:250px;z-index:20}.tooltip-tab{position:absolute;top:-8px;right:1rem;background:#fff;border:1px solid var(--line);border-bottom:none;border-radius:4px 4px 0 0;padding:.25rem .5rem;font-size:12px}.tooltip-content{font-size:14px;color:var(--muted)}.grid-guide-btn{position:absolute;bottom:2rem;right:2rem;background:var(--accent);border:none;border-radius:20px;padding:.75rem 1.5rem;color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:var(--transition);z-index:20}.grid-guide-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #cbbf9d4d}.control-cluster{position:absolute;top:50%;right:2rem;transform:translateY(-50%);display:flex;flex-direction:column;gap:.5rem;z-index:20}.control-btn{width:40px;height:40px;background:#fff;border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition);font-size:16px}.control-btn:hover{background:var(--grid);border-color:var(--accent)}.game-score{position:absolute;top:2rem;left:2rem;background:#fff;border:1px solid var(--line);border-radius:8px;padding:1rem;font-weight:600;z-index:20}.tennis-ball{position:absolute;font-size:24px;pointer-events:none;z-index:30;opacity:0}.tennis-ball.bouncing{opacity:1;animation:bounceBall 3s cubic-bezier(.25,.46,.45,.94) forwards}@keyframes bounceBall{0%{transform:translate(0)}25%{transform:translate(25vw,-10vh)}50%{transform:translate(50vw,5vh)}75%{transform:translate(75vw,-15vh)}to{transform:translate(100vw,10vh);opacity:0}}.panel{position:fixed;top:60px;bottom:0;width:460px;background:#fff;border:1px solid var(--line);box-shadow:0 4px 24px #0000001a;z-index:500;transform:translate(-100%);transition:transform var(--transition)}.panel-right{right:0;transform:translate(100%)}.panel-left{left:0;transform:translate(-100%)}.panel.active{transform:translate(0)}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem 2rem;border-bottom:1px solid var(--line)}.panel-header h2{font-size:18px;font-weight:600}.panel-close{background:none;border:none;font-size:24px;cursor:pointer;color:var(--muted);transition:var(--transition)}.panel-close:hover{color:var(--fg)}.panel-content{padding:2rem;height:calc(100% - 80px);overflow-y:auto}.dash-card{background:var(--grid);border-radius:8px;padding:1.5rem;margin-bottom:1rem}.dash-card h3{font-size:16px;font-weight:600;margin-bottom:.5rem}.dash-card p{color:var(--muted);margin-bottom:.5rem}.latency{font-family:Monaco,Menlo,monospace;font-size:14px}.dash-actions{display:flex;gap:1rem;margin-top:2rem}.btn{background:var(--accent);border:none;border-radius:6px;padding:.75rem 1.5rem;color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:var(--transition)}.btn:hover{background:#b8a882}.chat-messages{height:calc(100% - 60px);overflow-y:auto;margin-bottom:1rem}.chat-message{margin-bottom:1rem;padding:.75rem;border-radius:8px;background:var(--grid)}.chat-message.system{background:#f0f9ff;border-left:3px solid var(--accent)}.chat-message.user{background:var(--accent);color:#fff;margin-left:2rem}.timestamp{font-size:12px;color:var(--muted);margin-right:.5rem}.chat-input-container{display:flex;gap:.5rem}.chat-input{flex:1;padding:.75rem;border:1px solid var(--line);border-radius:6px;font-size:14px}.chat-send{background:var(--accent);border:none;border-radius:6px;padding:.75rem 1.5rem;color:#fff;font-weight:500;cursor:pointer;transition:var(--transition)}.chat-send:hover{background:#b8a882}.modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:all var(--transition)}.modal.active{opacity:1;visibility:visible}.modal-content{background:#fff;border-radius:12px;max-width:680px;width:90%;max-height:80vh;overflow:hidden;box-shadow:0 20px 40px #0003}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:2rem;border-bottom:1px solid var(--line)}.modal-header h2{font-size:20px;font-weight:600}.modal-close{background:none;border:none;font-size:24px;cursor:pointer;color:var(--muted);transition:var(--transition)}.modal-close:hover{color:var(--fg)}.modal-body{padding:2rem;overflow-y:auto;max-height:calc(80vh - 120px)}.about-icon{font-size:48px;text-align:center;margin-bottom:1.5rem}.modal-body p{margin-bottom:1rem;line-height:1.6}.credits{text-align:center;color:var(--muted);font-style:italic}.about-links{display:flex;gap:1rem;justify-content:center;margin-top:2rem}.logs-actions{margin-bottom:1.5rem}.logs-table-container{overflow-x:auto}.logs-table{width:100%;border-collapse:collapse}.logs-table th,.logs-table td{padding:.75rem;text-align:left;border-bottom:1px solid var(--line)}.logs-table th{background:var(--grid);font-weight:600}.logs-table td{font-size:14px}.terminal-drawer{position:fixed;bottom:0;left:0;right:0;height:50vh;background:#1a1a1a;color:#0f0;font-family:Monaco,Menlo,monospace;transform:translateY(100%);transition:transform var(--transition);z-index:600}.terminal-drawer.active{transform:translateY(0)}.terminal-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;background:#2a2a2a;border-bottom:1px solid #444}.terminal-close{background:none;border:none;color:#0f0;font-size:18px;cursor:pointer}.terminal-content{padding:1rem 1.5rem;height:calc(100% - 120px);overflow-y:auto;font-size:14px;line-height:1.4}.terminal-line{margin-bottom:.5rem}.terminal-prompt{color:#0f0;margin-right:.5rem}.terminal-text{color:#fff}.terminal-input-line{display:flex;align-items:center;padding:1rem 1.5rem;background:#2a2a2a;border-top:1px solid #444}.terminal-input{flex:1;background:none;border:none;color:#fff;font-family:inherit;font-size:14px;outline:none;margin-left:.5rem}.docs-section{margin-bottom:2rem}.docs-section h3{font-size:16px;font-weight:600;margin-bottom:1rem}.docs-section p{margin-bottom:1rem;line-height:1.6}.docs-section ul{margin-left:1.5rem;margin-bottom:1rem}.docs-section li{margin-bottom:.5rem}kbd{background:var(--grid);border:1px solid var(--line);border-radius:3px;padding:.25rem .5rem;font-size:12px;font-family:Monaco,Menlo,monospace}.copy-btn{background:var(--grid);border:1px solid var(--line);border-radius:6px;padding:.5rem 1rem;font-size:12px;cursor:pointer;transition:var(--transition)}.copy-btn:hover{background:var(--accent);color:#fff}.settings-popover{position:absolute;top:60px;right:2rem;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 4px 12px #0000001a;z-index:1001;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all var(--transition)}.settings-popover.active{opacity:1;visibility:visible;transform:translateY(0)}.settings-content{padding:1.5rem;min-width:200px}.settings-content h3{font-size:16px;font-weight:600;margin-bottom:1rem}.setting-group{margin-bottom:1rem}.setting-group label{display:block;font-size:14px;font-weight:500;margin-bottom:.5rem}.setting-group select,.setting-group input{width:100%;padding:.5rem;border:1px solid var(--line);border-radius:4px;font-size:14px}.toast-container{position:fixed;top:80px;right:2rem;z-index:2000}.toast{background:var(--accent);color:#fff;padding:1rem 1.5rem;border-radius:8px;margin-bottom:.5rem;box-shadow:0 4px 12px #0000001a;transform:translate(100%);transition:transform var(--transition)}.toast.show{transform:translate(0)}@media (max-width: 1024px){.nav-center{gap:1rem}.nav-item{font-size:12px}.panel{width:100%}.control-cluster{right:1rem}.tooltip-card{right:1rem;max-width:200px}}@media (max-width: 768px){.navbar{padding:0 1rem}.nav-center{display:none}.mobile-menu-btn{display:flex}.hero-links{flex-direction:column;gap:1rem}.hero-link{padding:1rem 2rem}.ascii-dog .dog-face{font-size:20px}.control-cluster{bottom:2rem;right:1rem;top:auto;transform:none;flex-direction:row}.tooltip-card{top:1rem;right:1rem;left:1rem;max-width:none}.grid-guide-btn{bottom:1rem;right:1rem;left:1rem;text-align:center}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}button:focus,input:focus,select:focus{outline:2px solid var(--accent);outline-offset:2px}@media (prefers-contrast: high){:root{--bg: #ffffff;--fg: #000000;--muted: #333333;--accent: #8B7355;--line: #666666}}