:root{--color-brand: #0052cc;--color-brand-strong: #0747a6;--color-brand-soft: #deebff;--color-bg: #f4f5f7;--color-surface: #ffffff;--color-surface-subtle: #fafbfc;--color-border: #dfe1e6;--color-text: #172b4d;--color-text-subtle: #5e6c84;--color-text-inverse: #ffffff;--color-success: #36b37e;--color-warning: #ffab00;--color-warning-bg: #fffae6;--color-danger: #de350b;--color-danger-bg: #ffebe6;--color-info-bg: #deebff;--color-axis-x: #de350b;--color-axis-y: #36b37e;--color-axis-z: #0052cc;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 16px;--shadow-card: 0 1px 2px rgba(9, 30, 66, .08), 0 0 1px rgba(9, 30, 66, .31);--shadow-card-strong: 0 4px 8px rgba(9, 30, 66, .12), 0 0 1px rgba(9, 30, 66, .31);--font-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif;--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%}body{background-color:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}#root{min-height:100%;display:flex;flex-direction:column}.app{width:100%;max-width:480px;margin:0 auto;padding:16px;padding-bottom:env(safe-area-inset-bottom,16px);display:flex;flex-direction:column;gap:16px}.app__header{text-align:center;padding:16px 8px 8px}.app__title{margin:0;font-size:24px;font-weight:600;color:var(--color-text);letter-spacing:.02em}.app__subtitle{margin:4px 0 0;font-size:13px;color:var(--color-text-subtle)}.app__main{display:flex;flex-direction:column;gap:16px}.app__actions{display:grid;grid-template-columns:2fr 1fr;gap:8px}.app__footer{margin-top:8px;font-size:11px;color:var(--color-text-subtle);text-align:center}.app__footer p{margin:2px 0}.button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid transparent;border-radius:var(--radius-md);padding:12px 16px;font-size:15px;font-weight:600;font-family:inherit;cursor:pointer;transition:background-color .12s ease,box-shadow .12s ease,transform 80ms ease;min-height:48px;white-space:nowrap}.button:active{transform:scale(.98)}.button:disabled{cursor:not-allowed;opacity:.5}.button--primary{background-color:var(--color-brand);color:var(--color-text-inverse)}.button--primary:hover:not(:disabled){background-color:var(--color-brand-strong)}.button--secondary{background-color:var(--color-surface);color:var(--color-text);border-color:var(--color-border)}.button--secondary:hover:not(:disabled){background-color:var(--color-surface-subtle)}.button--danger{background-color:var(--color-danger);color:var(--color-text-inverse)}.button--danger:hover:not(:disabled){background-color:#bf2600}.step-card{background:linear-gradient(135deg,var(--color-brand) 0%,#2684ff 100%);color:var(--color-text-inverse);border-radius:var(--radius-lg);padding:20px 16px;box-shadow:var(--shadow-card-strong);text-align:center}.step-card__label{margin:0;font-size:13px;letter-spacing:.08em;text-transform:uppercase;opacity:.85}.step-card__value{margin:8px 0 16px;font-size:56px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}.step-card__unit{font-size:18px;font-weight:500;margin-left:4px;opacity:.85}.step-card__metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding-top:16px;border-top:1px solid rgba(255,255,255,.25)}.step-card__metric-unit{font-size:11px;font-weight:500;margin-left:3px;opacity:.85}.step-card__metric{margin:0;min-width:0}.step-card__metric dt{font-size:11px;opacity:.85;letter-spacing:.04em;white-space:nowrap;word-break:keep-all}.step-card__metric dd{margin:4px 0 0;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sensor-readout{background-color:var(--color-surface);border-radius:var(--radius-md);padding:16px;box-shadow:var(--shadow-card);border:1px solid var(--color-border)}.sensor-readout__header{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}.sensor-readout__header h2{margin:0;font-size:16px;font-weight:600}.sensor-readout__meta{margin:0;font-size:11px;color:var(--color-text-subtle)}.sensor-readout__vertical,.sensor-readout__magnitude{background-color:var(--color-surface-subtle);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:12px;display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:12px;row-gap:8px;margin-bottom:12px}.sensor-readout__vertical-label{grid-column:1;font-size:12px;color:var(--color-text-subtle)}.sensor-readout__vertical-value{grid-column:2;text-align:right;font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--color-brand)}.vertical-bar{grid-column:1 / -1;position:relative;height:14px;background-color:var(--color-border);border-radius:999px;overflow:hidden}.vertical-bar__zero{position:absolute;top:0;bottom:0;left:50%;width:1px;background-color:#ffffffb3;z-index:2}.vertical-bar__threshold{position:absolute;top:0;bottom:0;width:2px;z-index:1}.vertical-bar__threshold--peak{background-color:#36b37e99}.vertical-bar__threshold--trough{background-color:#ffab00b3}.vertical-bar__fill{position:absolute;top:0;bottom:0;border-radius:999px;transition:left 80ms linear,width 80ms linear;z-index:0}.vertical-bar__fill--pos{background:linear-gradient(90deg,var(--color-brand),#36b37e)}.vertical-bar__fill--neg{background:linear-gradient(90deg,var(--color-warning),var(--color-brand))}.sensor-readout__magnitude-label{grid-column:1;font-size:12px;color:var(--color-text-subtle)}.sensor-readout__magnitude-value{grid-column:2;text-align:right;font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--color-brand)}.sensor-readout__unit{font-size:12px;font-weight:500;margin-left:4px;color:var(--color-text-subtle)}.sensor-readout__bar{grid-column:1 / -1;height:6px;background-color:var(--color-border);border-radius:999px;overflow:hidden}.sensor-readout__bar-fill{height:100%;background:linear-gradient(90deg,var(--color-brand),#2684ff);border-radius:999px;transition:width 80ms linear}.sensor-readout__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media (max-width: 360px){.sensor-readout__grid{grid-template-columns:1fr}}.axis-group{background-color:var(--color-surface-subtle);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:12px}.axis-group__title{margin:0 0 8px;font-size:12px;font-weight:600;color:var(--color-text-subtle);text-transform:uppercase;letter-spacing:.04em}.axis-group__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}.axis-group__list li{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-mono);font-size:13px}.axis-group__axis{display:inline-block;width:22px;height:22px;border-radius:50%;text-align:center;line-height:22px;font-weight:700;color:var(--color-text-inverse);font-family:var(--font-sans);font-size:12px}.axis-group__axis--x{background-color:var(--color-axis-x)}.axis-group__axis--y{background-color:var(--color-axis-y)}.axis-group__axis--z{background-color:var(--color-axis-z)}.axis-group__value{font-variant-numeric:tabular-nums;font-weight:600;color:var(--color-text)}.axis-group__empty{margin:0;font-size:12px;color:var(--color-text-subtle)}.notice{border-radius:var(--radius-md);padding:12px 14px;border:1px solid var(--color-border);background-color:var(--color-surface);display:flex;flex-direction:column;gap:4px}.notice--info{background-color:var(--color-info-bg);border-color:var(--color-brand-soft)}.notice--warning{background-color:var(--color-warning-bg);border-color:var(--color-warning)}.notice--error{background-color:var(--color-danger-bg);border-color:var(--color-danger)}.notice__title{font-size:14px;font-weight:600}.notice__body{margin:0;font-size:13px;color:var(--color-text-subtle)}