@layer components{.types-preview-layout{grid-template-columns:1fr 1fr;align-items:center;gap:64px;display:grid}.home-types h2{margin:8px 0 12px}.home-types p{color:var(--muted);margin:0 0 24px;font-size:18px;line-height:1.6}.types-preview-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;display:grid}.type-tile{border:1px solid color-mix(in srgb,var(--type-color) 48%,transparent);border-radius:11px;justify-content:center;align-items:center;min-height:40px;font-size:13px;font-weight:700;transition:border-color .18s,background .18s;display:flex}.type-tile:hover,.type-tile:focus-visible{border-color:var(--type-color);outline:1px solid var(--type-color);outline-offset:1px}.types-page{padding-bottom:0}.types-page section{margin:40px 0}.types-page h2{margin-bottom:12px}.types-page p{color:var(--muted)}.type-rules{grid-template-columns:repeat(4,1fr);gap:12px;display:grid}.type-rule,.weather-card,.type-detail{border:1px solid var(--border);background:linear-gradient(140deg,#ffffff04,#ffffff01);border-radius:18px;padding:20px}.type-rule strong{color:var(--gold);font-size:28px;display:block}.type-rule h2{margin:5px 0;font-size:16px}.type-rule p,.weather-card p{margin:0;font-size:14px;line-height:1.65}.type-chart-scroll{border:1px solid var(--border);background:linear-gradient(135deg,#ffffff04,#ffffff01);border-radius:18px;width:100%;max-width:100%;margin-inline:auto;padding:12px 18px;container-type:inline-size}.type-chart{border-collapse:separate;border-spacing:3px;table-layout:fixed;text-align:center;width:100%;font-size:clamp(12px,1.3cqw,15px)}.type-chart caption{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.type-chart th{padding:0;font-weight:700}.type-chart th:first-child{width:10%;padding-right:7px}.type-chart thead th{height:clamp(30px,4cqw,45px)}.type-chart tbody th{text-align:center}.type-tile,.chart-type{background:var(--type-color);color:var(--type-ink)}.chart-type{border-radius:6px;padding:3px 0;font-weight:700;display:block}.type-chart tbody .chart-type{border-radius:999px;padding:1px 9px;line-height:clamp(20px,2.8cqw,32px);display:inline-block}.type-chart td{color:#6b789c;background:#ffffff09;border-radius:7px;padding:0}.type-chart td button{width:100%;height:clamp(28px,3.65cqw,42px);color:inherit;font:inherit;cursor:crosshair;background:0 0;border:0;border-radius:7px;padding:0;font-size:clamp(11px,1.2cqw,14px);font-weight:700;display:block}.type-chart td[data-value="1.6"]{color:#eafff4;background:#1f7a4d}.type-chart td[data-value="0.6"]{color:#ffe9ee;background:#7f2c3a}.type-chart td[data-value="0.3"]{color:#b9c4e0;background:#2b3350}.type-chart.has-selection td:not(.axis),.type-chart.has-selection th:not(.axis){opacity:.28}.type-chart td.axis:not([data-value="1"]){box-shadow:inset 0 0 0 2px #ffcb05d9}.type-chart th.axis .chart-type{outline-offset:2px;outline:2px solid #ffd33580}.type-chart td button:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}.chart-status{min-height:28px;font-size:14px;color:var(--gold)!important}.chart-legend{flex-wrap:wrap;gap:16px;margin:14px 0;font-size:13px;display:flex}@container (width<=550px){.type-chart{border-spacing:2px;font-size:clamp(6px,1.8cqw,11px)}.type-chart th:first-child{width:12%;padding-right:2px}.type-chart tbody .chart-type{padding:1px 2px;line-height:1.6}.type-chart td button{height:clamp(14px,4.2cqw,26px);font-size:clamp(6px,1.65cqw,10px)}.type-chart thead th{height:auto}.chart-type{padding:3px 0}}.weather-grid{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.weather-card h3{margin-bottom:8px}.type-details{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.type-detail{border-top:3px solid var(--type-color);scroll-margin-top:100px}.type-detail h3{color:var(--type-color);margin-bottom:10px}.type-detail p{margin:8px 0;font-size:14px}.type-detail strong{color:var(--text)}.types-tips{color:var(--muted);padding-left:22px}.types-tips li{margin:9px 0}.type-chart button.chart-type{font:inherit;cursor:crosshair;border:0;width:100%;font-weight:700}.type-chart tbody button.chart-type{width:auto}.type-chart button.chart-type:focus-visible{outline-offset:2px;outline:2px solid #ffcb05}.type-rule{cursor:default;transition:border-color .2s,background-color .2s}.type-rule:hover{background-color:#ffd33506;border-color:#8d7418}.weather-effects{gap:10px;margin-top:18px;display:grid}.weather-effect{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.weather-effect>strong,.weather-extra>strong{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-size:11px}.weather-type-list{flex-wrap:wrap;gap:6px;display:flex}.weather-type{background:var(--type-color);color:var(--type-ink);border-radius:999px;padding:2px 9px;font-size:12px;font-weight:700;line-height:1.6;display:inline-block}.weather-effects .weather-extra{font-size:12px;line-height:1.6}.weather-extra>strong{margin-right:6px}.weather-effects strong.effect-boosted{color:#72dfa0}.weather-effects strong.effect-weakened{color:#ff8797}}@layer responsive{@media (width<=800px){.types-preview-layout{grid-template-columns:1fr;gap:28px}.type-rules,.weather-grid,.type-details{grid-template-columns:repeat(2,1fr)}}@media (width<=480px){.type-details,.weather-grid{grid-template-columns:1fr}.types-preview-grid{gap:8px}.home-types p{font-size:16px}.type-rule{padding:15px}.type-rule strong{font-size:24px}}}