.app-body{--app-bar: #011829;--app-bg: #f4f7fa;--app-panel: #eaf0f5;--line: #d8e1e9;--field: #c4cfd9;--accent: #0974a2;--accent-hover: #08668f;--mu: #4a5868;--das: #0974a2;--dts: #b86e00;--npw: #1a7f5a;--leak: #c83d4b;--pipe: #bcd3e6;--card: #ffffff;--tx: #071923;margin: 0;overflow: hidden;background: var(--app-bg);color: var(--ink);font-size: 14px;line-height: 1.45}.app{height: 100vh;height: 100dvh;display: grid;grid-template-rows: 52px minmax(0, 1fr)}.app-btn{display: inline-flex;align-items: center;justify-content: center;gap: 8px;min-height: 36px;padding: 0 12px;border: 1px solid transparent;border-radius: 8px;font: 600 13px/1 var(--font);text-decoration: none;cursor: pointer;transition: background-color 160ms ease-out, border-color 160ms ease-out, transform 160ms ease-out}.app-btn svg{width: 18px;height: 18px;flex: none}.app-btn:active{transform: translateY(1px)}.app-btn--bar{color: #fff;border-color: rgb(255 255 255 / 28%);background: transparent}.app-btn--primary{color: #fff;background: var(--accent)}.app-btn--quiet{color: var(--ink);background: #fff;border-color: var(--field)}.app-btn--icon{width: 40px;min-height: 40px;padding: 0}.app-btn--large{width: 100%;min-height: 48px;font-size: 15px}.app-btn--large svg{width: 20px;height: 20px}.app-play-bar{display: none}.app-btn[disabled]{opacity: 0.5;cursor: not-allowed}@media (hover: hover) and (pointer: fine){.app-btn--bar:hover{background: rgb(255 255 255 / 10%)}.app-btn--primary:hover{background: var(--accent-hover)}.app-btn--quiet:hover{background: #eef3f7}}.app-bar{display: flex;align-items: center;gap: 16px;padding: 0 16px;background: var(--app-bar);color: #fff}.app-logo{display: block;height: 24px;width: auto}.app-logo-link{display: block;flex: none;border-radius: 4px;line-height: 0}.app-logo-link:focus-visible{outline: 3px solid var(--cyan, #3fccef);outline-offset: 4px}.app-bar h1{margin: 0;padding-left: 16px;border-left: 1px solid rgb(255 255 255 / 22%);font-size: 15px;font-weight: 700;line-height: 1.2;letter-spacing: 0;text-transform: none;color: #fff}.app-bar-actions{display: flex;gap: 8px;margin-left: auto}.app-work{display: grid;grid-template-columns: 304px minmax(0, 1fr);min-height: 0}.app-setup{padding: 20px 16px 0;overflow-y: auto;background: var(--app-panel);border-right: 1px solid var(--line)}.app-group + .app-group{margin-top: 24px}.app-group h2{margin: 0 0 12px;font-size: 13px;font-weight: 700;line-height: 1.3;letter-spacing: 0;text-transform: none;color: var(--ink)}.app-group-head{display: flex;align-items: baseline;justify-content: space-between;gap: 12px;margin-bottom: 12px}.app-group-head h2{margin: 0}.app-link-btn{padding: 8px 0;font: 600 12px/1 var(--font);color: var(--accent);background: none;border: 0;text-decoration: underline;text-underline-offset: 3px;cursor: pointer}@media (hover: hover) and (pointer: fine){.app-link-btn:hover{color: var(--accent-hover)}}.app-run-group{position: sticky;bottom: 0;margin: 24px -16px 0;padding: 12px 16px 16px;background: var(--app-panel);border-top: 1px solid var(--line)}.app-field + .app-field{margin-top: 16px}.app-field label{display: flex;justify-content: space-between;gap: 12px;margin-bottom: 6px;font-size: 13px;font-weight: 600}.app-field output{font-weight: 500;color: var(--mu);font-variant-numeric: tabular-nums}.app-field input[type=range], .app-timeline input[type=range]{width: 100%;min-height: 24px;accent-color: var(--accent)}.app-select{width: 100%;min-height: 40px;padding: 0 10px;font: 500 14px/1.2 var(--font);color: var(--ink);background: #fff;border: 1px solid var(--field);border-radius: 8px}.app-hint{margin: 6px 0 0;font-size: 12px;color: var(--mu)}.app-presets{display: grid;gap: 8px}.preset{position: relative;display: block;cursor: pointer}.preset input{position: absolute;inset: 0;margin: 0;opacity: 0;cursor: pointer}.preset span{display: block;padding: 10px 12px;background: #fff;border: 1px solid var(--field);border-radius: 8px;transition: border-color 160ms ease-out, box-shadow 160ms ease-out}.preset b{display: block;font-size: 13px;font-weight: 700}.preset small{display: block;font-size: 12px;color: var(--mu)}.preset input:checked + span{border-color: var(--accent);box-shadow: 0 0 0 1px var(--accent)}.preset input:focus-visible + span{outline: 3px solid var(--navy);outline-offset: 2px}@media (hover: hover) and (pointer: fine){.preset:hover input:not(:checked) + span{border-color: #8497a8}}.app-run{display: grid;grid-template-rows: auto minmax(0, 1fr) auto;min-height: 0;min-width: 0}.app-results{display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 12px;padding: 16px 16px 0}.method{min-width: 0;padding: 12px 14px;background: #fff;border: 1px solid var(--line);border-radius: 10px}.method-head{display: flex;align-items: center;gap: 8px}.method-dot{flex: none;width: 10px;height: 10px;border-radius: 50%}.method h3{margin: 0;font-size: 14px;font-weight: 700;line-height: 1.3}.method-state{margin-left: auto;padding: 2px 8px;font-size: 12px;font-weight: 700;color: var(--mu);background: #eef2f6;border-radius: 999px}.method[data-state=detected] .method-state{color: #145c40;background: #dff2e8}.method[data-state=missed] .method-state{color: #9b2231;background: #fbe4e7}.method dl{display: grid;grid-template-columns: 1fr 1fr;gap: 4px 12px;margin: 10px 0 0}.method dt{font-size: 12px;color: var(--mu)}.method dd{margin: 0;font-size: 18px;font-weight: 700;line-height: 1.3;font-variant-numeric: tabular-nums}.method-note{min-height: 16px;margin: 4px 0 0;font-size: 12px;color: var(--mu)}.app-chart{display: flex;flex-direction: column;gap: 8px;min-height: 0;padding: 16px;overflow-y: auto}.app-chart-card{flex: 1;min-height: 456px;padding: 8px;background: #fff;border: 1px solid var(--line);border-radius: 10px}.app-canvas{display: block;width: 100%;height: 100%}.app-foot{display: flex;flex-wrap: wrap;align-items: baseline;justify-content: space-between;gap: 4px 24px}.app-legend{display: flex;flex-wrap: wrap;gap: 4px 16px;font-size: 12px;color: var(--mu)}.app-legend i{display: inline-block;width: 14px;height: 8px;margin-right: 6px;vertical-align: middle;border-radius: 2px}.app-phase{flex: 1 1 320px;min-height: 20px;margin: 0;font-size: 13px;color: var(--ink)}.app-timeline{display: flex;align-items: center;gap: 12px;padding: 10px 16px;background: #fff;border-top: 1px solid var(--line)}.app-time{min-width: 96px;font-size: 13px;font-weight: 600;font-variant-numeric: tabular-nums}.app-timeline .app-select{width: 76px}.app-hint-keys{font-size: 12px;color: var(--mu);white-space: nowrap}kbd{display: inline-block;min-width: 20px;padding: 1px 6px;font: 600 11px/1.5 var(--font);text-align: center;color: var(--ink);background: #eef2f6;border: 1px solid var(--field);border-radius: 4px}.app-dialog{width: min(640px, calc(100vw - 32px));max-height: calc(100dvh - 48px);padding: 0;color: var(--ink);background: #fff;border: 0;border-radius: 12px;box-shadow: 0 24px 60px -12px rgb(1 24 41 / 45%), 0 4px 12px rgb(1 24 41 / 18%)}.app-dialog::backdrop{background: rgb(1 24 41 / 55%)}.app-dialog-head{display: flex;align-items: center;justify-content: space-between;gap: 16px;padding: 16px 20px;border-bottom: 1px solid var(--line)}.app-dialog-head h2{margin: 0;font-size: 16px;font-weight: 700;letter-spacing: 0;text-transform: none}.app-dialog-body{max-height: calc(100dvh - 140px);padding: 16px 20px 20px;overflow-y: auto}.app-dialog-body h3{margin: 20px 0 6px;font-size: 14px;font-weight: 700}.app-dialog-body h3:first-child{margin-top: 0}.app-dialog-body p{margin: 0 0 8px;font-size: 14px;line-height: 1.6;color: var(--text);max-width: 68ch}.app-tabs{display: none}@media (max-width: 899px){.app{grid-template-rows: 52px minmax(0, 1fr) 56px}.app-bar{gap: 12px;padding: 0 12px}.app-bar h1{padding-left: 12px;font-size: 14px}.app-logo{height: 20px}.app-bar-actions{gap: 6px}.app-btn--bar{padding: 0 10px}.app-btn--bar span{display: none}.app-work{grid-template-columns: minmax(0, 1fr)}.app-setup, .app-run{grid-column: 1;grid-row: 1}.app[data-pane=run] .app-setup, .app[data-pane=setup] .app-run{display: none}.app-run{grid-template-rows: auto auto auto;overflow-y: auto;align-content: start}.app-results{gap: 8px;padding: 12px 12px 0}.method{padding: 10px}.method-head{flex-wrap: wrap;row-gap: 6px}.method-state{margin-left: 0}.method dl{grid-template-columns: 1fr;gap: 6px}.method dt{font-size: 11px}.method dd{font-size: 15px;white-space: nowrap}.method-note{display: none}.app-chart{padding: 12px}.app-chart{min-height: auto;overflow: visible}.app-chart-card{flex: none;min-height: 0}.app-canvas{height: 640px}.app-timeline{position: sticky;bottom: 0;flex-wrap: wrap;row-gap: 8px;padding: 10px 12px}.app-timeline input[type=range]{order: 3;flex: 1 1 100%}.app-timeline .app-select{margin-left: auto}.app-hint-keys{display: none}.app-play-bar{display: inline-flex}.app-tabs{display: grid;grid-template-columns: 1fr 1fr;background: #fff;border-top: 1px solid var(--line)}.app-tabs button{display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 2px;font: 600 12px/1 var(--font);color: var(--mu);background: transparent;border: 0;border-top: 2px solid transparent;cursor: pointer}.app-tabs button svg{width: 20px;height: 20px}.app-tabs button[aria-pressed=true]{color: var(--accent);border-top-color: var(--accent)}}@media (max-width: 400px){.app-bar{gap: 8px;padding: 0 8px}.app-bar h1{font-size: 12.5px;line-height: 1.15}.app-btn--bar{min-height: 34px;padding: 0 8px}.app-bar-actions{gap: 4px}}@media (max-width: 340px){.app-logo{display: none}}@media (prefers-reduced-motion: reduce){.app-btn, .preset span{transition: none}}