body.radix-page {
  color-scheme: light;
  --radix-page: #f4f6f8;
  --radix-surface: #ffffff;
  --radix-surface-soft: #f6f8fa;
  --radix-border: #d0d7de;
  --radix-text: #1f2328;
  --radix-muted: #57606a;
  --radix-accent: #0969da;
  --radix-accent-hover: #0757b5;
  --radix-success: #1a7f37;
  --radix-warning: #9a6700;
  --radix-danger: #cf222e;
  --radix-notice-text: #0550ae;
  --radix-notice-bg: #ddf4ff;
  --radix-notice-border: #b6e3ff;
  --radix-focus-ring: rgba(9, 105, 218, 0.24);
  --radix-shadow: 0 14px 36px rgba(31, 35, 40, 0.07);
  --radix-radius: 12px;
  --radix-control-radius: 8px;
  --radix-control-height: 39px;
  --radix-panel-padding: 18px;
  --radix-grid-gap: 12px;
  --radix-border-rule: 1px solid var(--radix-border);
  --radix-code-font-family: "Cascadia Code", Consolas, monospace;
  --radix-input-area-height: 116px;
  --radix-result-area-height: 76px;
  min-block-size: 100vh;
  margin: 0;
  color: var(--radix-text);
  background: var(--radix-page);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ページ全体 */
.radix-page,
.radix-page * {
  box-sizing: border-box;
}

.radix-main {
  inline-size: min(1380px, calc(100% - 32px));
  margin-inline: auto;
  padding-block: 38px;
}

.radix-page-header {
  margin-block-end: 18px;
}

.radix-page-header h1 {
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
}

.radix-page-header > p,
.radix-panel-heading > p {
  margin-block: 7px 0;
  color: var(--radix-muted);
  line-height: 1.65;
}

.radix-page .breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-block-end: 12px;
  color: var(--radix-muted);
  font-size: 0.9rem;
}

.radix-page a {
  color: var(--radix-accent);
  font-weight: 700;
  text-decoration: none;
}

.radix-page a:is(:hover, :focus-visible) {
  text-decoration: underline;
}

/* 通知と共通パネル */
.radix-notice,
.radix-panel {
  margin-block-end: 16px;
  border: var(--radix-border-rule);
  border-radius: var(--radix-radius);
  background: var(--radix-surface);
  box-shadow: var(--radix-shadow);
}

.radix-notice {
  padding: 12px 14px;
  border-color: var(--radix-notice-border);
  color: var(--radix-notice-text);
  background: var(--radix-notice-bg);
  line-height: 1.65;
}

.radix-panel {
  padding: var(--radix-panel-padding);
}

.radix-panel-heading {
  margin-block-end: 14px;
}

.radix-panel :is(h2, h3) {
  margin-block-start: 0;
}

.radix-panel h2 {
  margin-block-end: 0;
  font-size: 1.1rem;
}

/* フォームコントロール */
.radix-field {
  display: grid;
  align-content: start;
  gap: 6px;
  color: var(--radix-muted);
  font-weight: 700;
}

.radix-control,
.radix-button {
  border: var(--radix-border-rule);
  border-radius: var(--radix-control-radius);
  color: var(--radix-text);
  background: var(--radix-surface);
  font: inherit;
}

.radix-control:is(input, select) {
  inline-size: 100%;
  min-block-size: var(--radix-control-height);
  padding: 7px 10px;
}

.radix-input-field textarea {
  inline-size: 100%;
  block-size: var(--radix-input-area-height);
  min-block-size: var(--radix-input-area-height);
  max-block-size: var(--radix-input-area-height);
  padding: 12px;
  resize: none;
  font: 14px/1.6 var(--radix-code-font-family);
}

.radix-button {
  min-block-size: var(--radix-control-height);
  padding: 7px 13px;
  background: var(--radix-surface-soft);
  font-weight: 700;
  cursor: pointer;
}

.radix-button:hover:not(:disabled) {
  border-color: var(--radix-accent);
  color: var(--radix-accent);
}

.radix-button--primary {
  border-color: var(--radix-accent);
  color: #ffffff;
  background: var(--radix-accent);
}

.radix-button--primary:hover:not(:disabled) {
  border-color: var(--radix-accent-hover);
  color: #ffffff;
  background: var(--radix-accent-hover);
}

.radix-page :is(.radix-button, input, select, textarea):focus-visible {
  outline: 3px solid var(--radix-focus-ring);
  outline-offset: 2px;
}

.radix-page :is(input, select):disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* 複数セクションで使用するグリッドの共通骨格 */
.radix-settings-grid,
.radix-results-grid,
.radix-twos-grid,
.radix-about-grid {
  display: grid;
}

.radix-settings-grid,
.radix-results-grid,
.radix-twos-grid {
  gap: var(--radix-grid-gap);
}

.radix-results-grid,
.radix-twos-grid,
.radix-about-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 変換設定と操作 */
.radix-settings-grid {
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  margin-block-start: 14px;
}

.radix-settings-grid--twos {
  grid-template-columns: repeat(2, minmax(200px, 320px));
}

.radix-check-field {
  display: flex;
  align-items: center;
  align-self: end;
  gap: 8px;
  min-block-size: var(--radix-control-height);
  padding: 8px 10px;
  border: var(--radix-border-rule);
  border-radius: var(--radix-control-radius);
  color: var(--radix-muted);
  background: var(--radix-surface-soft);
  font-weight: 700;
}

.radix-check-field input {
  inline-size: 17px;
  block-size: 17px;
  margin: 0;
  accent-color: var(--radix-accent);
}

.radix-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.radix-actions--end {
  justify-content: flex-end;
  margin-block-start: 14px;
}

.radix-message {
  min-block-size: 22px;
  margin-block: 10px 0;
  color: var(--radix-muted);
  font-size: 0.9rem;
}

.radix-message[data-type="success"] { color: var(--radix-success); }
.radix-message[data-type="warning"] { color: var(--radix-warning); }
.radix-message[data-type="error"] { color: var(--radix-danger); }

/* 変換結果 */
.radix-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 16px;
  border-block-start: 1px solid var(--radix-border);
  border-inline-start: 1px solid var(--radix-border);
}

.radix-stats > div {
  min-inline-size: 0;
  padding: 10px 12px;
  border-block-end: 1px solid var(--radix-border);
  border-inline-end: 1px solid var(--radix-border);
}

.radix-stats dt {
  color: var(--radix-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.radix-stats dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  font-weight: 700;
}

.radix-result-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 12px;
  border: var(--radix-border-rule);
  border-radius: 10px;
  background: var(--radix-surface-soft);
}

.radix-result-card label {
  align-self: center;
  font-weight: 800;
}

.radix-result-card > .radix-button--copy {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

.radix-result-value {
  grid-column: 1 / -1;
  inline-size: 100%;
  block-size: var(--radix-result-area-height);
  min-block-size: var(--radix-result-area-height);
  max-block-size: var(--radix-result-area-height);
  padding: 10px;
  resize: none;
  overflow-wrap: anywhere;
  font: 13px/1.55 var(--radix-code-font-family);
}

/* 2の補数 */
.radix-twos-grid {
  margin-block-start: 16px;
}

.radix-code-output {
  font: 13px/1.5 var(--radix-code-font-family);
}

/* ツール説明 */
.radix-about > p,
.radix-about li {
  line-height: 1.7;
}

.radix-about-grid {
  gap: 24px;
  margin-block-start: 18px;
}

/* レスポンシブ表示 */
@media (max-width: 900px) {
  .radix-settings-grid,
  .radix-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .radix-main {
    inline-size: min(100% - 24px, 1380px);
    padding-block: 24px;
  }

  .radix-panel {
    --radix-panel-padding: 14px;
  }

  .radix-settings-grid,
  .radix-settings-grid--twos,
  .radix-stats,
  .radix-results-grid,
  .radix-twos-grid,
  .radix-about-grid {
    grid-template-columns: 1fr;
  }
}