.pt-body{margin:0;background:#091722;color:#e6f2fa;font-family:system-ui,-apple-system,Segoe UI,sans-serif}.pt-page{box-sizing:border-box;max-width:1560px;margin:auto;padding:calc(var(--zt-nav-h,48px) + 32px) 22px 64px}.pt-hero{text-align:center;margin-bottom:30px}.pt-eyebrow{color:#71ddc2;font:600 .85rem ui-monospace,monospace;letter-spacing:.16em}.pt-hero h1{font-size:clamp(1.8rem,4vw,3rem);margin:12px 0}.pt-hero p{color:#b5ccdc;max-width:800px;margin:auto;line-height:1.6}.pt-toolbar{display:grid;grid-template-columns:minmax(200px,2fr) minmax(160px,1fr) minmax(160px,1fr);gap:14px;background:#102534;border:1px solid #294454;padding:20px;border-radius:16px}.pt-filter{min-width:0}.pt-filter label{display:block;color:#c9e0ed;font-size:.86rem;margin-bottom:7px}.pt-filter input,.pt-filter select{box-sizing:border-box;width:100%;min-height:44px;padding:10px 12px;background:#091b29;color:#f1f8ff;border:1px solid #557082;border-radius:8px;font:inherit}.pt-body button{min-height:44px;border:1px solid #49687b;border-radius:8px;background:#183647;color:#eaf6ff;padding:9px 14px;font:600 .88rem system-ui,sans-serif;cursor:pointer}.pt-body button:hover{background:#234b60}.pt-body button:disabled{opacity:.45;cursor:default}.pt-body :is(button,input,select,a):focus-visible{outline:3px solid #ffe194;outline-offset:3px}.pt-actions{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap}.pt-body .pt-primary{background:#6cddc0;border-color:#92ffe0;color:#05241e}.pt-viewbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:20px 0 8px;flex-wrap:wrap}.pt-viewbar [role=group]{display:flex;gap:6px}.pt-body button[aria-pressed=true]{border-color:#7ce6c9;background:#235b59;color:#edfff9}.pt-viewbar p,.pt-hint{font-size:.85rem;color:#9ebaca;line-height:1.6}.pt-viewbar p{margin:0}.pt-table{max-width:100%;overflow-x:auto;border:1px solid #294454;border-radius:14px;padding:12px;box-sizing:border-box;background:#0b1d29;scrollbar-color:#496c7f #0b1d29;scrollbar-width:thin}.pt-grid{display:grid;grid-template-columns:20px repeat(18,minmax(46px,1fr));grid-template-rows:22px repeat(7,minmax(86px,auto)) 14px repeat(2,minmax(86px,auto));gap:5px;min-width:1020px}.pt-body .pt-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;padding:6px 3px;border-radius:5px;border:1px solid #355162;border-top:3px solid var(--accent);background:#142b3b;position:relative;transition:background .15s,transform .15s}.pt-body .pt-cell:hover{background:#234455;transform:translateY(-2px)}.pt-cell .pt-number{align-self:flex-start;color:#b8d0df;font-size:.66rem}.pt-cell strong{color:var(--accent);font-size:1.42rem;line-height:1.25}.pt-cell .pt-name{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.58rem;font-weight:400;line-height:1.5}.pt-cell small{color:#91afc2;font-size:.6rem;font-weight:400}.pt-axis,.pt-series,.pt-placeholder{display:flex;align-items:center;justify-content:center;color:#8eacbe;font-size:.7rem}.pt-series{justify-content:flex-end;padding-right:10px}.pt-placeholder{border:1px dashed #496274;border-radius:5px;font-size:.62rem}.pt-grid .pt-cell[hidden],.pt-empty[hidden]{display:none}.pt-table[data-view=cards] .pt-grid{min-width:0;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));grid-template-rows:none;gap:9px}.pt-table[data-view=cards] :is(.pt-axis,.pt-series,.pt-placeholder){display:none}.pt-table[data-view=cards] .pt-cell{grid-column:auto!important;grid-row:auto!important;min-height:115px;padding:10px 6px}.pt-table[data-view=cards] .pt-name{font-size:.74rem}.pt-table[data-view=cards] .pt-cell strong{font-size:1.8rem}.pt-table[data-view=cards] .pt-cell small{font-size:.73rem}.pt-empty{text-align:center;color:#ffdb94;padding:20px}.pt-legend{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 18px;margin:20px 0 34px}.pt-legend>span{display:flex;align-items:center;gap:7px;font-size:.78rem;color:#b3ccdd}.pt-legend i{width:10px;height:10px;border-radius:3px;background:var(--accent)}[data-family=alkali]{--accent:#ffa19b}[data-family=alkaline]{--accent:#f6c979}[data-family=transition]{--accent:#86bfff}[data-family=post]{--accent:#a4c5e3}[data-family=metalloid]{--accent:#84e1c5}[data-family=nonmetal]{--accent:#b4e88b}[data-family=halogen]{--accent:#e6c3ff}[data-family=noble]{--accent:#f3a9d4}[data-family=lanthanoid]{--accent:#88e3e8}[data-family=actinoid]{--accent:#d2b1f2}.pt-about,.pt-sources{max-width:850px;margin:28px auto;line-height:1.8}.pt-about h2,.pt-sources h2{font-size:1.4rem;color:#d5f1ee}.pt-about p,.pt-sources p{color:#a9c2d4}.pt-body a{color:#85d9f3;text-underline-offset:3px}.pt-body a:visited{color:#c7b8f1}.pt-body a:hover{color:#c4f5ff}.pt-sources{border-top:1px solid #294454;padding-top:12px;font-size:.84rem}.pt-body dialog{box-sizing:border-box;max-width:780px;width:calc(100% - 32px);max-height:88dvh;padding:0;color:#e6f2fa;background:#0e2433;border:1px solid #5e8397;border-radius:18px;box-shadow:0 24px 100px #000b;overflow-y:auto}.pt-body dialog::backdrop{background:#020b13cc;backdrop-filter:blur(4px)}.pt-dialog-head{position:sticky;top:0;z-index:1;background:#102b3b;border-bottom:1px solid #32566b;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 22px}.pt-dialog-head h2{margin:4px 0;font-size:clamp(1.3rem,4vw,1.8rem);overflow-wrap:anywhere}.pt-badge{color:#8eebd2;font-size:.78rem}.pt-dialog-content{padding:20px 24px}.pt-element-hero{display:flex;align-items:center;gap:20px;padding-bottom:18px}.pt-element-hero strong{font-size:4rem;color:#83e3c9;line-height:1}.pt-element-hero span{font:600 1.5rem ui-monospace,monospace;color:#accbdc}.pt-properties{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}.pt-properties>div{background:#142f40;border:1px solid #2c4d60;border-radius:9px;padding:11px;min-width:0}.pt-properties dt{font-size:.76rem;color:#94b6ca;margin-bottom:6px}.pt-properties dd{margin:0;color:#edf8ff;overflow-wrap:anywhere;font-size:.94rem}.pt-history,.pt-rarity{margin-top:22px;border-top:1px solid #2b4b5d;padding-top:4px}.pt-history h3,.pt-rarity h3{font-size:1.05rem;color:#d3f8ef}.pt-rarity>strong{color:#ffdb99}.pt-note{font-size:.78rem;line-height:1.7;color:#99b6c8}.pt-detail-links{display:flex;flex-wrap:wrap;gap:14px;font-size:.86rem}.pt-dialog-nav{display:flex;justify-content:space-between;gap:12px;margin-top:22px}.pt-dialog-nav button{flex:1}.pt-body.pt-modal-open{overflow:hidden}
@media(max-width:700px){.pt-page{padding:calc(var(--zt-nav-h,48px) + 20px) 10px 45px}.pt-hero{margin-bottom:20px}.pt-toolbar{grid-template-columns:1fr 1fr;padding:14px;gap:12px}.pt-search{grid-column:1/-1}.pt-toolbar .pt-filter label{font-size:.76rem}.pt-filter select{font-size:.84rem;padding:9px 6px}.pt-actions button{flex:1}.pt-table{padding:8px}.pt-table[data-view=cards] .pt-grid{grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:7px}.pt-legend{justify-content:flex-start;gap:10px 14px}.pt-body dialog{width:calc(100% - 16px);max-height:92dvh;border-radius:14px}.pt-dialog-head{padding:12px}.pt-dialog-content{padding:15px 12px}.pt-properties{gap:7px}.pt-properties>div{padding:9px}.pt-dialog-nav button{font-size:.78rem;padding:9px}.pt-about{padding:0 5px}.pt-about p{font-size:.93rem}.pt-body .pt-cell{touch-action:manipulation}}
@media(max-width:380px){.pt-properties{grid-template-columns:1fr}.pt-viewbar [role=group]{width:100%}.pt-viewbar [role=group] button{flex:1;font-size:.8rem}.pt-hero h1{font-size:1.7rem}.pt-dialog-head button{font-size:.78rem;padding:8px}.pt-legend>span{font-size:.72rem}}
/* Keep native form controls at 16px to avoid focus zoom on iOS. */
@media(max-width:700px){.pt-filter input,.pt-filter select{font-size:16px}.pt-body dialog{overscroll-behavior:contain;max-height:92vh;max-height:92dvh}.pt-dialog-head>div{min-width:0}.pt-dialog-head button{flex-shrink:0}}
@media(max-width:480px){.pt-toolbar{grid-template-columns:minmax(0,1fr)}.pt-filter label{overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){.pt-body .pt-cell{transition:none}.pt-body .pt-cell:hover{transform:none}}