.throwable-lab-page{ color-scheme:dark; --bg:#151718; --text:#eff1f1; --muted:#a5afb1; --border:#34393a; --cyan:#88d2ea; --yellow:#f2d18a; --green:#93d1a8; }
.throwable-lab-page *{ box-sizing:border-box; letter-spacing:0; }
.throwable-lab-page [hidden]{ display:none !important; }
.throwable-lab-page{ margin:0; background:var(--bg); color:var(--text); font:14px/1.6 system-ui,"Microsoft JhengHei",sans-serif; }
.throwable-lab-page h1, .throwable-lab-page h2, .throwable-lab-page h3, .throwable-lab-page p, .throwable-lab-page figure, .throwable-lab-page dl{ margin:0; } .throwable-lab-page h1{ font-size:24px; font-weight:650; } .throwable-lab-page h2{ font-size:16px; font-weight:650; } .throwable-lab-page h3{ font-size:14px; font-weight:650; }
.throwable-lab-page button, .throwable-lab-page input, .throwable-lab-page select{ font:inherit; color:inherit; } .throwable-lab-page button, .throwable-lab-page select, .throwable-lab-page input[type=number]{ background:#222627; border:1px solid #4d5658; border-radius:4px; min-height:38px; } .throwable-lab-page button{ cursor:pointer; padding:4px 12px; } .throwable-lab-page button:hover{ border-color:var(--cyan); } .throwable-lab-page select{ width:100%; padding:6px 28px 6px 9px; } .throwable-lab-page input[type=number]{ width:100%; padding:6px 9px; font-variant-numeric:tabular-nums; } .throwable-lab-page input[type=range], .throwable-lab-page input[type=checkbox]{ accent-color:var(--cyan); } .throwable-lab-page input[type=range]{ min-width:0; width:100%; margin:0; } .throwable-lab-page input[type=checkbox]{ width:16px; height:16px; flex:0 0 16px; } .throwable-lab-page :focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }
.throwable-lab-page .shell{ max-width:1320px; margin:auto; padding:22px 28px 40px; } .throwable-lab-page .page-heading{ padding-bottom:14px; } .throwable-lab-page .page-heading > div{ display:flex; gap:16px; align-items:baseline; flex-wrap:wrap; }
.throwable-lab-page .item-picker{ display:grid; gap:12px; min-width:0; padding-bottom:16px; border-bottom:1px solid var(--border); }
.throwable-lab-page .category-tabs{ display:flex; flex-wrap:wrap; gap:4px 12px; min-width:0; border-bottom:1px solid var(--border); }
.throwable-lab-page .category-tabs button{ padding:7px 2px; font-size:13px; border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; color:var(--muted); }
.throwable-lab-page .category-tabs button[aria-selected="true"]{ border-bottom-color:var(--cyan); color:var(--text); }
.throwable-lab-page .item-tabs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:6px; min-width:0; }
.throwable-lab-page .item-tab{ display:flex; align-items:center; gap:8px; width:100%; min-height:58px; padding:6px 9px; text-align:left; border:0; border-bottom:2px solid transparent; border-radius:0; background:#202425; color:#c6cecf; font-size:13px; }
.throwable-lab-page .item-tab[aria-selected="true"]{ border-bottom-color:var(--cyan); color:var(--text); background:#2c3435; }
.throwable-lab-page .item-tab:hover, .throwable-lab-page .category-tabs button:hover{ border-bottom-color:var(--cyan); }
.throwable-lab-page .item-tab img{ width:34px; height:34px; flex:0 0 34px; object-fit:contain; }
.throwable-lab-page .item-tab span{ min-width:0; overflow-wrap:anywhere; line-height:1.35; }
.throwable-lab-page .workspace{ display:grid; grid-template-columns:270px minmax(0,1fr); gap:32px; align-items:start; } .throwable-lab-page .workspace.read-only{ grid-template-columns:minmax(0,1fr); } .throwable-lab-page aside{ border-right:1px solid var(--border); padding-right:24px; min-width:0; min-height:0; } .throwable-lab-page #controls{ align-self:start; position:sticky; top:calc(var(--throwable-header-height, var(--app-header-height, 64px)) + 12px); height:fit-content; max-height:calc(100dvh - var(--throwable-header-height, var(--app-header-height, 64px)) - 24px); overflow-y:auto; overscroll-behavior-y:contain; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:#5a716b var(--bg); background:var(--bg); } .throwable-lab-page #controls::-webkit-scrollbar{ width:6px; } .throwable-lab-page #controls::-webkit-scrollbar-track{ background:var(--bg); } .throwable-lab-page #controls::-webkit-scrollbar-thumb{ background:#5a716b; border-radius:3px; } .throwable-lab-page #controls::-webkit-scrollbar-thumb:hover{ background:#88a89e; } .throwable-lab-page .settings{ padding:22px 0; border-bottom:1px solid var(--border); } .throwable-lab-page .settings h2{ margin-bottom:12px; } .throwable-lab-page .settings .section-heading h2{ margin:0; } .throwable-lab-page .settings label:not(.check){ display:block; margin-top:12px; font-size:13px; color:#c6cecf; } .throwable-lab-page .settings label > select, .throwable-lab-page .settings label > input{ display:block; margin-top:5px; }
.throwable-lab-page .distance-input{ display:grid; grid-template-columns:minmax(0,1fr) 80px; gap:12px; margin:10px 0 16px; align-items:center; } .throwable-lab-page .check{ display:flex; align-items:center; gap:7px; font-size:13px; margin:12px 0; cursor:pointer; } .throwable-lab-page .check input{ margin:0; } .throwable-lab-page .checks{ display:grid; grid-template-columns:1fr 1fr; gap:2px 10px; } .throwable-lab-page .checks .check{ margin:6px 0; } .throwable-lab-page .two-cols{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .throwable-lab-page fieldset{ border:0; padding:0; margin:12px 0 0; min-width:0; } .throwable-lab-page legend{ color:var(--muted); font-size:13px; padding:0 0 6px; } .throwable-lab-page #materialLayers{ display:grid; gap:7px; } .throwable-lab-page .muted, .throwable-lab-page .hint{ color:var(--muted); font-size:12px; } .throwable-lab-page .hint{ margin-top:12px; }
.throwable-lab-page .results{ min-width:0; } .throwable-lab-page .item-heading{ display:grid; grid-template-columns:76px minmax(0,1fr) auto; align-items:center; gap:18px; padding:22px 0; border-bottom:1px solid var(--border); } .throwable-lab-page .item-heading img{ width:76px; height:76px; object-fit:contain; } .throwable-lab-page .item-heading h2{ font-size:22px; overflow-wrap:anywhere; } .throwable-lab-page .eyebrow{ color:var(--muted); font-size:12px; } .throwable-lab-page .item-heading output{ color:var(--cyan); font-size:19px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.throwable-lab-page .result-section{ padding:22px 0; border-bottom:1px solid var(--border); } .throwable-lab-page .result-section:last-child{ border:0; } .throwable-lab-page .section-heading{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; } .throwable-lab-page .body-layout{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:22px; align-items:start; } .throwable-lab-page .body-figure{ min-width:0; text-align:center; } .throwable-lab-page #bodyCanvas{ display:block; width:220px; max-width:100%; height:auto; aspect-ratio:220/420; margin:auto; filter:drop-shadow(0 0 1px #899194); } .throwable-lab-page .body-figure figcaption{ color:var(--muted); font-size:12px; padding-top:10px; } .throwable-lab-page .body-values{ min-width:0; }
.throwable-lab-page .damage-table{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; font-size:13px; table-layout:fixed; } .throwable-lab-page .damage-table th{ color:var(--muted); font-size:11px; font-weight:400; padding:8px 4px 12px; text-align:right; border-bottom:1px solid var(--border); } .throwable-lab-page .damage-table th:first-child{ text-align:left; width:20%; } .throwable-lab-page .damage-table th:nth-child(2){ width:34%; } .throwable-lab-page .damage-table th:nth-child(3), .throwable-lab-page .damage-table th:nth-child(4), .throwable-lab-page .damage-table th:nth-child(5){ width:16%; } .throwable-lab-page .damage-table td{ padding:13px 4px; border-bottom:1px solid #2d3233; text-align:right; } .throwable-lab-page .damage-table td:first-child{ text-align:left; } .throwable-lab-page .damage-table td small{ display:block; color:var(--muted); font-size:11px; } .throwable-lab-page .damage-amount{ color:var(--yellow); font-weight:650; } .throwable-lab-page .spread-amount{ color:var(--cyan); font-weight:650; }
.throwable-lab-page .spread-example{ margin-top:12px; border-top:1px solid #303638; } .throwable-lab-page .spread-example summary{ padding:10px 0; color:var(--cyan); cursor:pointer; font-size:12px; } .throwable-lab-page .spread-example-body{ display:grid; gap:8px; padding:2px 0 4px; color:var(--muted); font-size:12px; } .throwable-lab-page .spread-example-body p{ margin:0; } .throwable-lab-page .spread-example-body code{ color:var(--text); font-variant-numeric:tabular-nums; } .throwable-lab-page .spread-formula{ color:var(--text); } .throwable-lab-page .spread-example-table{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; } .throwable-lab-page .spread-example-table th, .throwable-lab-page .spread-example-table td{ padding:5px 4px; border-bottom:1px solid #2d3233; text-align:right; } .throwable-lab-page .spread-example-table th:first-child{ text-align:left; color:var(--text); font-weight:400; } .throwable-lab-page .spread-example-table td{ color:var(--cyan); }
.throwable-lab-page #spreadRatios{ display:block; margin-top:4px; }
.throwable-lab-page .spread-example-table{ table-layout:fixed; }
.throwable-lab-page .spread-example-table th:first-child{ width:30%; }
.throwable-lab-page .spread-example-table td code{ white-space:normal; overflow-wrap:anywhere; }
.throwable-lab-page .armor-results{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px; padding:9px 0; border-bottom:1px solid #2d3233; }
.throwable-lab-page .armor-row{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; min-width:0; font-size:12px; overflow-wrap:anywhere; }
.throwable-lab-page .armor-row strong{ color:var(--yellow); font-variant-numeric:tabular-nums; } .throwable-lab-page .armor-row strong span{ white-space:nowrap; }
.throwable-lab-page .armor-coverage .checks{ display:flex; flex-wrap:wrap; gap:6px 16px; }
.throwable-lab-page .body-hp-controls{ display:grid; grid-template-columns:1fr; gap:8px; }
.throwable-lab-page .settings label.body-hp-row{ display:grid; grid-template-columns:minmax(0,1fr) 88px; align-items:center; gap:8px; margin:0; }
.throwable-lab-page .settings label.body-hp-row input{ min-height:34px; margin:0; }
.throwable-lab-page .body-hp-row small{ color:var(--muted); margin-left:5px; }
.throwable-lab-page .health-warning{ margin-top:12px; padding-left:10px; border-left:2px solid var(--yellow); color:var(--yellow); font-size:12px; }
.throwable-lab-page .facts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 32px; margin-top:8px; } .throwable-lab-page .fact{ padding:16px 0; border-bottom:1px solid #2d3233; } .throwable-lab-page .fact dt{ color:var(--muted); font-size:12px; } .throwable-lab-page .fact dd{ margin:4px 0 0; font-size:19px; color:var(--cyan); overflow-wrap:anywhere; font-variant-numeric:tabular-nums; } .throwable-lab-page .fact small{ display:block; color:var(--muted); font-size:12px; } .throwable-lab-page .part-damage-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; } .throwable-lab-page .part-damage{ border-left:2px solid #586164; padding-left:12px; } .throwable-lab-page .part-damage span{ display:block; color:var(--muted); font-size:12px; } .throwable-lab-page .part-damage strong{ color:var(--yellow); font-size:22px; } .throwable-lab-page .part-damage small{ color:var(--muted); font-size:12px; }
.throwable-lab-page .gas-stages{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; } .throwable-lab-page .gas-stage{ border-left:3px solid var(--green); padding-left:16px; } .throwable-lab-page .gas-stage.inactive{ border-color:#596164; } .throwable-lab-page .gas-stage h3{ margin-bottom:8px; } .throwable-lab-page .gas-stage .stage-time{ color:var(--yellow); font-size:20px; } .throwable-lab-page .gas-stage p{ color:var(--muted); font-size:12px; } .throwable-lab-page .gas-stage ul{ padding-left:18px; margin:12px 0 0; font-size:13px; } .throwable-lab-page .damage-highlight{ display:flex; align-items:baseline; gap:10px; margin-top:12px; } .throwable-lab-page .damage-highlight strong{ font-size:34px; color:var(--yellow); font-variant-numeric:tabular-nums; } .throwable-lab-page .damage-highlight span{ color:var(--muted); }
.throwable-lab-page .effect-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 24px; }
.throwable-lab-page .gas-stage{ min-width:0; }
.throwable-lab-page .gas-curve-heading{ margin:18px 0 8px; font-size:13px; font-weight:600; line-height:1.5; }
.throwable-lab-page .gas-time-curve{ margin-bottom:12px; }
.throwable-lab-page .effect{ min-width:0; display:grid; align-content:start; gap:8px; border-top:1px solid #303638; padding:16px 0; }
.throwable-lab-page .effect-name{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; min-width:0; }
.throwable-lab-page .effect-name h3{ font-size:13px; overflow-wrap:anywhere; }
.throwable-lab-page .effect-note{ color:var(--muted); font-size:12px; min-height:3.2em; overflow-wrap:anywhere; }
.throwable-lab-page .effect strong{ color:var(--green); text-align:right; font-variant-numeric:tabular-nums; font-size:16px; }
.throwable-lab-page .effect.inactive strong{ color:#9ba4a6; }
.throwable-lab-page .effect-meter{ min-width:0; }
.throwable-lab-page .effect-meter-track{ position:relative; height:8px; overflow:hidden; border:1px solid #485254; border-radius:999px; background:#202526; }
.throwable-lab-page .effect-meter-fill{ display:block; height:100%; min-width:0; border-radius:inherit; background:var(--green); }
.throwable-lab-page .effect.inactive .effect-meter-fill{ background:#6b7475; }
.throwable-lab-page .effect-bounds{ display:flex; justify-content:space-between; gap:12px; margin-top:5px; color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.throwable-lab-page .effect-bounds span:last-child{ text-align:right; }
.throwable-lab-page .effect-distance{ color:var(--yellow); font-variant-numeric:tabular-nums; font-size:13px; min-height:1.6em; margin-bottom:2px; }
.throwable-lab-page .chart-picker{ display:flex; align-items:center; gap:10px; min-width:0; font-size:12px; } .throwable-lab-page .chart-picker select{ width:205px; max-width:100%; } .throwable-lab-page svg[role=img]{ display:block; width:100%; height:225px; background:#1c1f20; } .throwable-lab-page svg text{ fill:#b5bfc1; font-size:13px; } .throwable-lab-page .chart-axis{ stroke:#596366; stroke-width:1; } .throwable-lab-page .chart-grid{ stroke:#343b3c; stroke-width:1; } .throwable-lab-page .chart-line{ fill:none; stroke:var(--cyan); stroke-width:3; } .throwable-lab-page .chart-marker{ stroke:var(--yellow); stroke-width:1; stroke-dasharray:4 4; } .throwable-lab-page .chart-dot{ fill:var(--yellow); stroke:var(--bg); stroke-width:2; } .throwable-lab-page .chart-hit-area{ fill:transparent; cursor:crosshair; } .throwable-lab-page svg[data-adjustable-distance="true"] .chart-hit-area{ cursor:pointer; } .throwable-lab-page .chart-hover{ pointer-events:none; } .throwable-lab-page .chart-hover-line{ stroke:var(--yellow); stroke-width:1; stroke-dasharray:3 3; } .throwable-lab-page .chart-hover-dot{ fill:var(--yellow); stroke:var(--bg); stroke-width:2; } .throwable-lab-page .chart-tooltip-box{ fill:#111516; stroke:var(--yellow); stroke-width:1; } .throwable-lab-page .chart-tooltip-text{ fill:var(--text); font-size:13px; } .throwable-lab-page .chart-tooltip-distance{ fill:var(--muted); font-size:12px; }
.throwable-lab-page .chart-line.chart-series-secondary{ stroke:var(--yellow); stroke-dasharray:7 5; }
.throwable-lab-page #armorChart .chart-dot, .throwable-lab-page #armorChart .chart-hover-dot{ fill:var(--cyan); }
.throwable-lab-page #armorChart .chart-series-secondary{ fill:var(--yellow); } .throwable-lab-page #armorChart path.chart-series-secondary{ fill:none; }
.throwable-lab-page .chart-legend{ display:flex; flex-wrap:wrap; gap:8px 18px; }
.throwable-lab-page .chart-legend-item{ display:inline-flex; align-items:center; gap:7px; }
.throwable-lab-page .chart-legend-item::before{ content:""; width:18px; border-top:3px solid var(--cyan); }
.throwable-lab-page .chart-legend-secondary::before{ border-color:var(--yellow); border-top-style:dashed; }
@media(max-width:1100px) { .throwable-lab-page .workspace{ grid-template-columns:230px minmax(0,1fr); gap:22px; } .throwable-lab-page aside{ padding-right:18px; } .throwable-lab-page .body-layout{ grid-template-columns:170px minmax(0,1fr); gap:14px; } .throwable-lab-page .body-figure{ padding-top:25px; } }
@media(max-width:1100px) { .throwable-lab-page .effect-list{ grid-template-columns:minmax(0,1fr); } }
@media(max-width:850px) { .throwable-lab-page .body-layout{ grid-template-columns:1fr; } .throwable-lab-page .body-figure{ padding:0; } .throwable-lab-page #bodyCanvas{ width:160px; } .throwable-lab-page .facts{ gap:0 18px; } }
@media(max-width:650px) { .throwable-lab-page .shell{ padding:16px 14px 28px; } .throwable-lab-page .page-heading > div{ justify-content:space-between; } .throwable-lab-page .item-tabs{ grid-template-columns:repeat(2,minmax(0,1fr)); } .throwable-lab-page .item-tab{ min-height:70px; padding:5px; font-size:12px; gap:5px; } .throwable-lab-page .category-tabs{ gap:3px 10px; } .throwable-lab-page .workspace{ display:block; } .throwable-lab-page aside{ border:0; padding:0; } .throwable-lab-page #controls{ top:var(--throwable-header-height, var(--app-header-height, 64px)); z-index:20; max-height:min(65dvh, calc(100dvh - var(--throwable-header-height, var(--app-header-height, 64px)) - 12px)); border-bottom:1px solid var(--border); padding:0 0 8px; margin-bottom:16px; } .throwable-lab-page .settings{ padding:16px 0; } .throwable-lab-page .item-heading{ grid-template-columns:58px minmax(0,1fr); gap:12px; } .throwable-lab-page .item-heading img{ width:58px; height:58px; } .throwable-lab-page .item-heading h2{ font-size:19px; } .throwable-lab-page .item-heading output{ grid-column:2; font-size:16px; } .throwable-lab-page .result-section{ padding:20px 0; } .throwable-lab-page .body-layout{ grid-template-columns:1fr; } .throwable-lab-page #bodyCanvas{ width:180px; } .throwable-lab-page .gas-stages{ grid-template-columns:1fr; gap:24px; } .throwable-lab-page .fact dd{ font-size:17px; } .throwable-lab-page .part-damage-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .throwable-lab-page .chart-picker{ width:100%; } .throwable-lab-page .chart-picker select{ flex:1; width:0; } }
@media(max-width:650px) { .throwable-lab-page .body-hp-controls{ grid-template-columns:repeat(2,minmax(0,1fr)); } .throwable-lab-page .settings label.body-hp-row{ display:block; } .throwable-lab-page .body-hp-row input{ margin-top:4px !important; } }
.throwable-lab-page .damage-table tbody th{ color:var(--text); font-size:13px; font-weight:400; padding:13px 4px; }
.throwable-lab-page .damage-table tbody td, .throwable-lab-page .damage-table tbody th{ overflow-wrap:anywhere; }
.throwable-lab-page .damage-table tbody td small{ margin-top:2px; }
.throwable-lab-page .damage-table th:first-child{ width:14%; }
.throwable-lab-page .damage-table th:nth-child(2){ width:23%; }
.throwable-lab-page .damage-table th:nth-child(3){ width:23%; }
.throwable-lab-page .damage-table th:nth-child(4){ width:20%; }
.throwable-lab-page .damage-table th:nth-child(5){ width:20%; }
.throwable-lab-page fieldset:disabled{ opacity:.45; }
.throwable-lab-page .read-only .facts{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media(max-width:850px) { .throwable-lab-page .read-only .facts{ grid-template-columns:repeat(2,minmax(0,1fr)); } }