*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --green:       #008D36;
  --green-light: #E8F5E9;
  --red:         #E1000F;
  --text:        #1A1A1A;
  --muted:       #757575;
  --border:      #E0E0E0;
  --bg:          #F4F4F4;
  --radius:      8px;
}

body { font-family: 'Arial', 'Helvetica Neue', sans-serif; color: var(--text); background: var(--bg); line-height: 1.6; }
a    { color: var(--green); }

.page { max-width: 800px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }

.hero { text-align: center; margin-bottom: 2.5rem; }
.hero h1 { font-size: 2rem; font-weight: 700; margin-bottom: .4rem; }
.hero h1 span { color: var(--green); }
.hero p { color: var(--muted); font-size: .95rem; }

#support-banner {
  padding: .75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 2rem;
  font-size: .875rem;
  font-weight: 600;
  text-align: center;
  display: none;
}
#support-banner.supported   { background: var(--green-light); color: var(--green); border: 1px solid #c8e6c9; }
#support-banner.unsupported { background: #fff3e0; color: #e65100; border: 1px solid #ffcc80; }

.section { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 1.25rem; overflow: hidden; }
.section-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: .6rem; }
.section-header h2 { font-size: 1rem; font-weight: 700; }
.section-body { padding: 1.25rem; }

.tool-grid { display: grid; gap: 1rem; }
.tool-card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.tool-name { font-family: monospace; font-size: .85rem; font-weight: 700; padding: .6rem .9rem; background: var(--bg); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: .5rem; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot-read  { background: var(--green); }
.dot-write { background: var(--red); }
.tool-body { padding: .75rem .9rem; }
.tool-desc { font-size: .85rem; color: var(--muted); margin-bottom: .6rem; }

.param { font-size: .8rem; margin-bottom: .4rem; }
.param code { font-family: monospace; background: var(--bg); padding: .1rem .35rem; border-radius: 4px; }

.tool-run { display: flex; gap: .5rem; align-items: center; margin-top: .75rem; flex-wrap: wrap; }
.tool-run input { flex: 1; min-width: 120px; padding: .4rem .6rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: .85rem; font-family: inherit; }

.run-btn { padding: .4rem .9rem; background: var(--green); color: #fff; border: none; border-radius: var(--radius); font-size: .85rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.run-btn:hover { opacity: .88; }
.run-btn-write { background: var(--red); }

.tool-result { margin-top: .6rem; padding: .6rem .75rem; background: #1A1A1A; color: #C3E88D; border-radius: var(--radius); font-family: monospace; font-size: .78rem; line-height: 1.6; white-space: pre-wrap; display: none; }
.tool-result.visible { display: block; }

pre { background: #1A1A1A; color: #E0E0E0; border-radius: var(--radius); padding: 1.25rem; font-size: .8rem; line-height: 1.75; overflow-x: auto; margin-top: 1.25rem; }
.kw   { color: #C792EA; }
.fn   { color: #82AAFF; }
.str  { color: #C3E88D; }
.cm   { color: #546E7A; font-style: italic; }
.prop { color: #F07178; }

.footer-note { text-align: center; margin-top: 2.5rem; font-size: .8rem; color: var(--muted); }
.footer-note a { color: var(--green); }