.pt-page { color: #17324d; margin: 1rem 0 2.5rem; }
.pt-breadcrumb { margin-bottom: .8rem; }
.pt-breadcrumb a { color: #0f766e; font-weight: 700; text-decoration: none; }
.pt-header { align-items: end; display: flex; gap: 1.5rem; justify-content: space-between; }
.pt-header h1 { color: #102a43; font-size: clamp(1.75rem, 4vw, 2.45rem); line-height: 1.1; margin: .1rem 0 .4rem; }
.pt-header p { color: #52616f; margin: 0; }
.pt-eyebrow { color: #0f766e !important; font-size: .76rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.pt-search { color: #334e68; display: grid; flex: 0 1 320px; font-size: .78rem; font-weight: 800; gap: .3rem; }
.pt-search input { background: #fff; border: 1px solid #b8c5cf; border-radius: 7px; color: #102a43; font: inherit; font-size: .95rem; min-height: 42px; padding: .55rem .7rem; }
.pt-search input:focus { border-color: #0f766e; box-shadow: 0 0 0 3px rgba(15,118,110,.14); outline: 0; }
.pt-legend { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.25rem; }
.pt-legend button { background: var(--family-bg); border: 1px solid var(--family-border); border-radius: 999px; color: #243b53; cursor: pointer; font-size: .72rem; font-weight: 800; padding: .3rem .62rem; }
.pt-legend button[aria-pressed="true"] { box-shadow: 0 0 0 2px #102a43; }
.pt-help { color: #627d98; font-size: .78rem; margin: .55rem 0 .85rem; }
.pt-workspace { align-items: start; display: grid; gap: 1rem; grid-template-columns: minmax(760px, 1fr) 230px; }
.pt-scroll { min-width: 0; overflow-x: auto; padding: 0 2px .6rem; }
.pt-groups, .pt-grid { display: grid; gap: 3px; grid-template-columns: repeat(18, minmax(39px, 1fr)); min-width: 760px; }
.pt-groups { color: #829ab1; font-size: .65rem; margin-bottom: 3px; text-align: center; }
.pt-grid { grid-template-rows: repeat(9, minmax(58px, auto)); }
.pt-element { background: var(--family-bg); border: 1px solid var(--family-border); border-radius: 4px; color: #102a43; cursor: pointer; display: grid; grid-template-areas: "num mass" "symbol symbol" "name name"; grid-template-columns: 1fr auto; min-width: 0; padding: 3px; text-align: left; transition: opacity .15s, transform .1s, box-shadow .1s; }
.pt-element:hover, .pt-element:focus-visible, .pt-element.is-selected { box-shadow: 0 0 0 2px #102a43; outline: 0; transform: translateY(-1px); z-index: 2; }
.pt-element.is-muted { opacity: .16; }
.pt-number { font-size: .58rem; grid-area: num; }
.pt-mass { font-size: .48rem; grid-area: mass; overflow: hidden; text-overflow: ellipsis; }
.pt-symbol { align-self: center; font-size: clamp(.82rem, 1.5vw, 1.18rem); font-weight: 900; grid-area: symbol; line-height: 1; text-align: center; }
.pt-name { font-size: .48rem; grid-area: name; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.pt-series-label { align-self: center; color: #486581; font-size: .58rem; font-weight: 800; padding-left: .15rem; }
.pt-details { background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 9px; min-height: 245px; padding: 1rem; position: sticky; top: 1rem; }
.pt-detail-placeholder { color: #627d98; text-align: center; }
.pt-detail-placeholder span { display: block; font-size: .75rem; text-align: left; }.pt-detail-placeholder strong { color: #0f766e; display: block; font-size: 4rem; line-height: 1.15; }
.pt-detail-top { align-items: start; display: flex; gap: .75rem; }.pt-detail-tile { background: var(--family-bg); border: 1px solid var(--family-border); border-radius: 6px; display: grid; min-width: 72px; padding: .4rem; text-align: center; }.pt-detail-tile span { font-size: .7rem; text-align: left; }.pt-detail-tile strong { font-size: 2rem; line-height: 1.1; }.pt-detail-top h2 { font-size: 1.2rem; margin: .15rem 0; }.pt-detail-top p { color: #627d98; font-size: .76rem; margin: 0; text-transform: capitalize; }
.pt-facts { border-top: 1px solid #d9e2ec; display: grid; gap: .5rem; margin: .85rem 0 0; padding-top: .75rem; }.pt-facts div { display: flex; font-size: .78rem; justify-content: space-between; gap: 1rem; }.pt-facts dt { color: #627d98; }.pt-facts dd { font-weight: 800; margin: 0; text-align: right; }
.pt-reading { background: #f4f8fb; border-radius: 9px; margin-top: 1.25rem; padding: 1rem 1.2rem; }.pt-reading h2 { font-size: 1.08rem; margin: 0 0 .7rem; }.pt-reading > div { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }.pt-reading p { color: #486581; font-size: .85rem; line-height: 1.55; margin: 0; }
@media (max-width: 1050px) { .pt-workspace { grid-template-columns: 1fr; }.pt-details { position: static; }.pt-details { min-height: 0; }.pt-facts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 650px) { .pt-header { align-items: stretch; flex-direction: column; }.pt-search { flex-basis: auto; }.pt-reading > div { grid-template-columns: 1fr; }.pt-facts { grid-template-columns: 1fr; } }