@charset "UTF-8";
:root {
  --ink: #222;
  --muted: #666;
  --line: #d5d5d5;
  --shade: #f3f3f3;
  --paper: #fff;
  --radius: 3px;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  font-size: 14px;
  font-synthesis: none;
  color: var(--ink);
  background: var(--paper);
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font: inherit; }
button, a, input, select { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .42; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid #222;
  outline-offset: 4px;
}
a { color: var(--ink); text-underline-offset: 3px; }
[hidden] { display: none !important; }
.shell { max-width: 1240px; margin: auto; padding: 40px 40px 48px; }
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 28px; align-items: start; }
#content { min-width: 0; outline: none; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: 24px; font-weight: 600; line-height: 1.7; margin-bottom: 18px; }
h2 { font-size: 21px; font-weight: 600; line-height: 1.6; }
h3 { font-size: 16px; font-weight: 600; line-height: 1.6; }
p { font-size: 14px; line-height: 1.9; }
.muted { color: var(--muted); }
.eyebrow { font-size: 12px; color: var(--muted); }
.intro-lead { color: #444; margin-bottom: 30px; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.card + .card { margin-top: 18px; }
.section-label { font-size: 14px; margin-bottom: 13px; }
.conditions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 24px; }
.condition { position: relative; appearance: none; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 12px; min-height: 137px; color: var(--ink); }
.condition[aria-pressed=true] { border: 2px solid #222; padding: 15px 11px; background: var(--shade); }
.condition .number { display: block; color: var(--muted); font-size: 11px; margin-bottom: 14px; }
.condition strong { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.condition small { font-size: 11px; color: var(--muted); line-height: 1.8; display: block; }
.condition .check { position: absolute; top: 13px; right: 11px; font-size: 13px; }
.settings-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 18px 0; }
.field-label { font-size: 12px; display: block; color: var(--muted); margin-bottom: 8px; }
select, input[type=text], input[type=number] { width: 100%; min-height: 42px; background: white; color: var(--ink); border: 1px solid #bbb; border-radius: var(--radius); padding: 9px 11px; font-size: 12px; }
.checkbox-row { display: flex; align-items: center; gap: 9px; font-size: 12px; line-height: 1.8; margin: 14px 0; }
.checkbox-row input { accent-color: #222; width: 16px; height: 16px; flex-shrink: 0; }
.button { border: 1px solid #222; border-radius: var(--radius); padding: 13px 20px; background: #222; color: white; font-size: 13px; font-weight: 400; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 45px; text-decoration: none; }
.button:hover:not(:disabled) { background: #444; }
.button.secondary { background: #fff; color: var(--ink); border-color: #aaa; }
.button.secondary:hover:not(:disabled) { background: var(--shade); }
.button.ghost { color: var(--muted); background: transparent; border-color: transparent; padding: 11px 5px; }
.button.ghost:hover:not(:disabled) { background: var(--shade); color: var(--ink); }
.button.small { font-size: 11px; min-height: 34px; padding: 8px 12px; }
.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 25px; }
.actions.end { justify-content: space-between; }
.fine-print { font-size: 11px; color: var(--muted); line-height: 1.8; margin-bottom: 0; }
.divider { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }
.details { font-size: 12px; color: var(--muted); margin-top: 24px; }
.details summary { cursor: pointer; line-height: 1.8; }
.details p { font-size: 12px; margin: 12px 0 0; }
.agent-panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); overflow: hidden; position: sticky; top: 20px; }
.agent-title { padding: 20px 23px 12px; }
.agent-title h2 { font-size: 20px; font-weight: 400; margin: 0; }
.avatar-host { height: 356px; position: relative; overflow: hidden; background: #fff; margin: 0 12px; }
.avatar-host canvas { width: 100%; height: 100%; display: block; }
.avatar-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; flex-direction: column; padding: 28px; gap: 12px; background: var(--shade); }
.avatar-placeholder strong { font-size: 13px; font-weight: 400; }
.avatar-placeholder p { font-size: 11px; color: var(--muted); margin: 0; }
.loader { display: block; width: 30px; height: 30px; border: 2px solid #ddd; border-top-color: #555; border-radius: 50%; animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.agent-caption { font-size: 12px; color: var(--muted); text-align: center; padding: 13px 0; }
.speech { font-size: 13px; line-height: 1.9; background: var(--shade); border-radius: var(--radius); margin: 0 20px 17px; padding: 17px; min-height: 84px; }
.avatar-note { font-size: 10px; color: var(--muted); margin: 0 22px 18px; line-height: 1.7; }
.flow { display: flex; justify-content: space-between; gap: 20px; margin: 0 0 24px; align-items: center; }
.flow-steps { display: flex; gap: 21px; font-size: 12px; color: var(--muted); }
.flow-step.active { color: #111; }
.flow-step .dot { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid var(--line); font-size: 11px; margin-right: 7px; }
.flow-step.active .dot { background: #222; color: white; border-color: #222; }
.progress-meta { font-size: 12px; white-space: nowrap; color: var(--muted); }
.progress-track { height: 3px; background: #e5e5e5; margin-bottom: 27px; overflow: hidden; }
.progress-fill { height: 100%; background: #333; transition: width .3s; }
.record-header { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 23px; }
.record-type { font-size: 12px; color: var(--muted); }
.record-id { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.history-title { font-size: 23px; font-weight: 600; line-height: 1.7; margin: 0 0 11px; }
.history-explain { font-size: 13px; line-height: 1.85; color: var(--muted); margin-bottom: 27px; }
.allocation-result { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0; }
.allocation-value { border: 1px solid var(--line); border-radius: var(--radius); padding: 17px; text-align: center; background: #fff; }
.allocation-value.self { background: var(--shade); }
.allocation-value span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.allocation-value strong { font-size: 32px; font-weight: 400; font-variant-numeric: tabular-nums; }
.allocation-value small { font-size: 13px; font-weight: 400; margin-left: 5px; }
.svo-chart { padding: 23px 12px 18px; background: #fafafa; border-radius: var(--radius); border: 1px solid var(--line); }
.svo-legend { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--muted); margin: 0 4px 15px; }
.svo-options { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 3px; position: relative; }
.svo-option { text-align: center; position: relative; padding: 8px 0; z-index: 1; }
.svo-option.selected { background: #e4e4e4; box-shadow: inset 0 0 0 1px #bdbdbd; }
.svo-option .amount { font-size: 13px; display: block; font-variant-numeric: tabular-nums; line-height: 1.6; }
.svo-option .other-amount { color: #555; }
.svo-option .rail { height: 33px; display: flex; align-items: center; justify-content: center; position: relative; }
.svo-option .rail:before { content: ""; height: 2px; background: #aaa; position: absolute; left: -2px; right: -2px; }
.svo-option .point { width: 3px; height: 9px; background: #999; z-index: 1; }
.svo-option.selected .point { width: 18px; height: 18px; border-radius: 50%; background: #222; border: 3px solid white; box-shadow: 0 0 0 1px #222; }
.svo-option .choice-number { display: block; font-size: 10px; color: var(--muted); margin-top: 9px; }
.selected-label { text-align: center; font-size: 12px; color: var(--ink); margin: 17px 0 0; }
.observation-note { padding: 14px 16px; background: var(--shade); border-left: 2px solid #aaa; font-size: 12px; color: #555; line-height: 1.8; margin-top: 20px; }
.record-strip { display: flex; gap: 5px; justify-content: center; margin: 22px 0 0; flex-wrap: wrap; }
.record-dot { width: 25px; height: 4px; border: 0; background: #ddd; padding: 0; min-height: 4px; }
.record-dot.seen { background: #999; }
.record-dot.active { background: #222; }
button.record-dot { height: 14px; min-height: 14px; background-clip: content-box; padding: 5px 0; }
.food-display { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--line); background: #fafafa; border-radius: var(--radius); padding: 22px; margin: 22px 0; min-height: 235px; }
.food-display svg { width: 180px; height: 150px; }
.food-display h3 { font-size: 20px; font-weight: 400; margin: 10px 0 0; }
.food-display .food-context { font-size: 11px; color: var(--muted); margin-top: 7px; }
.reaction { display: flex; gap: 16px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); padding: 19px; margin-top: 18px; }
.reaction .reaction-icon { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: var(--shade); }
.reaction strong { font-size: 16px; font-weight: 600; display: block; margin-bottom: 6px; }
.reaction small { font-size: 11px; color: var(--muted); }
.food-list { display: flex; gap: 6px; flex-wrap: wrap; margin: 20px 0; }
.food-chip { font-size: 11px; padding: 7px 10px; background: var(--shade); color: #555; }
.preview-toolbar { padding: 12px 15px; background: var(--shade); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 15px; display: flex; gap: 10px; align-items: center; justify-content: space-between; font-size: 12px; }
.test-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 22px 0; }
.test-choice { text-align: left; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; color: var(--ink); min-height: 120px; }
.test-choice[aria-pressed=true] { border: 2px solid #222; padding: 17px; background: var(--shade); }
.test-choice .option-letter { display: inline-flex; width: 24px; height: 24px; border: 1px solid #aaa; align-items: center; justify-content: center; font-size: 12px; margin-bottom: 15px; }
.test-choice p { font-size: 14px; line-height: 1.8; margin: 0; }
.test-choice svg { display: block; width: 100%; height: 90px; margin-bottom: 10px; }
.confidence-block { border-top: 1px solid var(--line); margin-top: 26px; padding-top: 23px; }
.confidence-title { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: 14px; }
.confidence-value { font-size: 25px; font-variant-numeric: tabular-nums; font-weight: 400; }
.confidence-block input { width: 100%; accent-color: #222; margin: 23px 0 8px; cursor: pointer; height: 22px; }
.range-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
.empty-confidence { color: var(--muted); font-size: 12px; font-weight: 400; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 22px 0; }
.stat { background: var(--shade); border-radius: var(--radius); padding: 16px; text-align: center; }
.stat strong { display: block; font-size: 23px; font-weight: 400; margin-bottom: 8px; }
.stat span { font-size: 11px; color: var(--muted); }
.summary-table { border-collapse: collapse; width: 100%; font-size: 12px; margin-top: 15px; }
.summary-table th, .summary-table td { text-align: left; padding: 12px 7px; border-bottom: 1px solid var(--line); }
.summary-table th { color: var(--muted); font-weight: 400; }
.warning { font-size: 12px; color: #444; background: var(--shade); border: 1px solid #bbb; padding: 12px 15px; border-radius: var(--radius); line-height: 1.9; }
.intro-points { padding: 0; list-style: none; margin: 22px 0; }
.intro-points li { display: flex; gap: 12px; font-size: 13px; line-height: 1.9; margin: 14px 0; }
.intro-points .step-index { flex: 0 0 24px; height: 24px; background: var(--shade); display: grid; place-items: center; font-size: 12px; }
.exit-link { display: block; margin-top: 20px; }
#toast { position: fixed; bottom: 25px; left: 50%; transform: translateX(-50%); background: #222; color: white; border-radius: var(--radius); padding: 13px 20px; font-size: 12px; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 10; max-width: 90vw; }
#toast.visible { opacity: 1; }
@media (min-width: 1200px) { .avatar-host { height: 390px; } }
@media (max-width: 960px) {
  .shell { padding-left: 24px; padding-right: 24px; }
  .workspace { grid-template-columns: minmax(0, 1fr) 270px; gap: 18px; }
  .card { padding: 23px; }
  .avatar-host { height: 310px; }
  .agent-title { padding: 20px 17px 12px; }
  .condition { padding: 13px 8px; }
  .condition[aria-pressed=true] { padding: 12px 7px; }
  .condition strong { font-size: 12px; }
  .conditions { gap: 7px; }
  .svo-option .amount { font-size: 11px; }
  .flow-steps { gap: 10px; }
  .flow-step .dot { margin-right: 4px; }
}
@media (max-width: 740px) {
  .shell { padding: 20px 16px 32px; }
  .workspace { display: flex; flex-direction: column-reverse; gap: 17px; }
  .agent-panel { position: relative; top: auto; width: 100%; display: grid; grid-template-columns: 135px 1fr; grid-template-rows: auto auto; overflow: hidden; min-height: 190px; }
  .agent-title { grid-column: 2; grid-row: 1; padding: 17px 15px 7px; align-self: start; }
  .agent-title h2 { font-size: 18px; }
  .avatar-host { grid-column: 1; grid-row: 1/4; height: 210px; margin: 0; }
  .agent-caption { grid-column: 2; grid-row: 2; text-align: left; padding: 0 15px 10px; }
  .speech { grid-column: 2; grid-row: 3; font-size: 12px; line-height: 1.7; margin: 0 12px 12px; padding: 12px; min-height: 60px; }
  .avatar-note { display: none; }
  .avatar-placeholder { padding: 10px; gap: 10px; }
  .avatar-placeholder p { display: none; }
  .avatar-placeholder strong { font-size: 10px; }
  .avatar-placeholder .loader { width: 20px; height: 20px; }
  #content { width: 100%; }
  .card { padding: 22px 18px; }
  h1 { font-size: 22px; }
  .conditions { gap: 8px; }
  .condition strong { font-size: 12px; }
  .condition small { font-size: 10px; }
  .condition { min-height: 134px; }
  .settings-row { gap: 10px; }
  .flow { flex-wrap: wrap; margin-bottom: 17px; gap: 12px; }
  .flow-steps { gap: 14px; font-size: 10px; }
  .progress-meta { font-size: 11px; }
  .history-title { font-size: 21px; }
  .svo-chart { padding: 18px 6px 15px; }
  .allocation-value strong { font-size: 29px; }
  .svo-option .amount { font-size: 12px; }
  .svo-legend { font-size: 10px; }
  .button { font-size: 12px; padding: 13px 16px; }
  .test-choice { padding: 15px; }
  .test-choice[aria-pressed=true] { padding: 14px; }
  .test-choice p { font-size: 12px; }
  .food-display { min-height: 210px; }
  .food-display svg { height: 130px; }
  .stat-grid { gap: 7px; }
  .stat { padding: 14px 7px; }
  .stat strong { font-size: 20px; }
  .confidence-title { font-size: 12px; }
  .preview-toolbar { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }