.mcp-page{max-width:1140px;margin:0 auto}.mcp-header{width:auto;margin:0 0 20px;padding-top:0}.mcp-header h1{font-size:32px;font-weight:700;color:var(--text);margin:0 0 10px}.mcp-header p{color:var(--text);font-size:15px;line-height:1.7;margin:0}.mcp-container{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start}.board-wrapper{position:relative;background:var(--card-bg);border-radius:var(--card-radius);padding:16px;box-shadow:var(--card-shadow)}#mcpCanvas{display:block;background:#f4faf9;border-radius:12px;width:100%;height:auto;max-width:480px;aspect-ratio:1 / 1;margin:0 auto}.board-legend{display:flex;justify-content:center;gap:18px;margin-top:12px}.legend-item{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--text-sub)}.legend-dot{width:12px;height:12px;border-radius:50%}.legend-in{background:#2a9d8f}.legend-out{background:#e76f51}.controls{display:flex;flex-direction:column;gap:20px}.control-section{background:var(--card-bg);border-radius:var(--card-radius);padding:20px;box-shadow:var(--card-shadow)}.control-section h3{margin:0 0 15px;font-size:1.05rem;color:var(--text)}.btn-big{display:block;width:100%;padding:16px;border:none;border-radius:14px;background:var(--accent);color:#fff;font-size:16px;font-weight:700;cursor:pointer;transition:transform .15s ease,background .2s ease,box-shadow .2s ease;box-shadow:0 4px 12px #2a9d8f59}.btn-big:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 6px 16px #2a9d8f66}.btn-big:active{transform:translateY(0) scale(.98)}.btn-big.raining{background:var(--card-bg);color:var(--danger);border:2px solid var(--danger);box-shadow:none}.speed-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin:14px 0}.speed-label{font-size:13px;font-weight:700;color:var(--text-sub);margin-right:2px}.speed-row label{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:700;color:var(--text);cursor:pointer}.speed-row input[type=radio]{accent-color:var(--accent);cursor:pointer}.button-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}.btn-mid{display:block;width:100%;padding:10px;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;background:var(--card-bg);color:var(--accent);border:2px solid var(--accent);transition:all .15s ease}.btn-mid:hover{background:var(--accent-soft);color:var(--accent-hover)}.btn-mid:active{transform:scale(.98)}.btn-wide{margin-bottom:8px}.btn-reset{color:var(--text-sub);border-color:var(--card-border)}.btn-reset:hover{background:#f4f7f7;color:var(--danger);border-color:var(--danger)}.play-hint{font-size:13px;color:var(--text-sub);line-height:1.8;margin:10px 0 0}.pi-value{text-align:center;font-variant-numeric:tabular-nums;font-size:40px;font-weight:700;color:var(--accent);line-height:1.2}.pi-target{text-align:center;font-size:13px;color:var(--text-sub);margin:4px 0 16px}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.stat-cell{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;background:var(--accent-soft, rgba(42, 157, 143, .08));border-radius:10px}.stat-label{font-size:12px;color:var(--text-sub)}.stat-num{font-size:16px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}.graph-section{margin-top:32px;padding:28px;background:var(--card-bg);border-radius:var(--card-radius);box-shadow:var(--card-shadow)}.graph-section h2{width:auto;margin:0 0 6px;font-size:1.25rem;color:var(--text)}.graph-lead{font-size:14px;color:var(--text-sub);line-height:1.7;margin:0 0 16px}.graph-wrapper{overflow-x:auto}#mcpGraph{display:block;width:100%;height:auto;max-width:640px;aspect-ratio:640 / 280;margin:0 auto}.record-section{margin-top:32px;padding:28px;background:var(--card-bg);border-radius:var(--card-radius);box-shadow:var(--card-shadow)}.record-header{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px;margin-bottom:14px}.record-header h2{width:auto;margin:0;font-size:1.25rem;color:var(--text)}.record-note{font-size:13px;color:var(--text-sub)}.record-table-wrapper{overflow-x:auto}.record-table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}.record-table th,.record-table td{border:1px solid var(--card-border, #dbe6e5);padding:8px 14px;text-align:center;color:var(--text);white-space:nowrap}.record-table th{background:var(--accent-soft, rgba(42, 157, 143, .08));font-weight:700}.record-table td:nth-child(3){font-weight:700;color:var(--accent)}.record-table tr.filled td{background:#fbfefe}.sound-toggle{position:absolute;top:24px;right:24px;width:40px;height:40px;border-radius:50%;border:1px solid var(--card-border, #dbe6e5);background:var(--card-bg);font-size:18px;line-height:1;cursor:pointer;box-shadow:var(--card-shadow);z-index:6;transition:transform .15s ease,opacity .15s ease}.sound-toggle:hover{transform:scale(1.08)}.sound-toggle.is-muted{opacity:.55}@media (max-width: 900px){.mcp-page{padding:0 14px}.mcp-container{grid-template-columns:1fr}}@media (max-width: 480px){.mcp-header h1{font-size:24px}.board-wrapper{padding:10px}.record-section,.graph-section{padding:20px}.pi-value{font-size:34px}.sound-toggle{top:16px;right:16px;width:36px;height:36px;font-size:16px}}.pi-formula{text-align:center;font-size:13px;color:var(--text-sub);margin:0 0 16px}