@font-face{font-family:DTMSans;src:url('../assets/fonts/DTM-Sans.otf') format('opentype');font-display:swap}
@font-face{font-family:ProphecyType;src:url('../assets/fonts/PROPHECYTYPE.ttf') format('truetype');font-display:swap}
.panels-page{--blue:#68afff;--muted:#a5afc1;--line:#28364a;margin:0;background:#030508;color:#f0f3fa;font:16px/1.7 DTMSans,monospace;color-scheme:dark}
.panels-page *{box-sizing:border-box}
.panels-page [hidden]{display:none!important}
.panels-page a{color:var(--blue);text-underline-offset:4px}
.panels-page a:hover{color:#fff}
.panels-page :focus-visible{outline:3px solid #b2d9ff;outline-offset:5px}
.panels-page button,.panels-page input{font:inherit}
.panels-page button{cursor:pointer}
.panels-page .skip-link{position:absolute;left:16px;top:-100px;z-index:10;background:#fff;color:#000;padding:10px 16px}
.panels-page .skip-link:focus{top:10px}
.panels-page .site-header{max-width:1120px;margin:auto;padding:24px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line)}
.panels-page .site-brand{font-size:14px;letter-spacing:2px;line-height:1.35;color:#fff;text-decoration:none}
.panels-page .site-brand span{display:block;font-size:10px;letter-spacing:1px;color:var(--muted);margin-top:5px}
.panels-page nav{display:flex;gap:22px;flex-wrap:wrap;font-size:13px}
.panels-page nav a{text-decoration:none}
.panels-page nav [aria-current]{color:#fff;border-bottom:2px solid var(--blue)}
.panels-page main{max-width:1064px;margin:auto;padding:0 24px}
.panels-page .panel-intro{max-width:750px;padding:64px 0 44px}
.panels-page .eyebrow{font-size:11px;letter-spacing:2px;color:var(--blue);margin:0 0 14px}
.panels-page h1{font-family:ProphecyType,serif;color:var(--blue);font-size:clamp(30px,4.6vw,48px);line-height:1.2;margin:0 0 24px;font-weight:normal}
.panels-page .intro-lead{font-size:clamp(23px,3.4vw,34px);line-height:1.4;letter-spacing:-1px;margin:0 0 20px}
.panels-page .intro-lead span{color:var(--muted)}
.panels-page .panel-intro>p:not(.intro-lead):not(.eyebrow){font-size:14px;max-width:690px}
.panels-page .scope-note{border-left:2px solid #796a9e;padding:12px 16px;background:#0c0d16;color:#b7bdcf;margin-top:24px}
.panels-page h2{font-size:22px;line-height:1.4;font-weight:normal;margin:0 0 16px}
.panels-page .collection-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:18px}
.panels-page .collection-heading h2{margin:0}
.panels-page .collection-total{font-size:10px;letter-spacing:1px;color:var(--muted)}
.panels-page .panel-filters{padding:24px;background:#0b1019;border:1px solid var(--line);margin:0 0 26px}
.panels-page .search-field label,.panels-page legend{display:block;font-size:12px;color:#c4ccda;margin-bottom:8px}
.panels-page input[type=search]{width:100%;min-height:48px;border:1px solid #43536b;background:#030508;color:#fff;padding:10px 14px;border-radius:0;font-size:14px}
.panels-page input::placeholder{color:#858fa4;opacity:1}
.panels-page fieldset{padding:0;border:0;margin:18px 0 0;min-width:0}
.panels-page legend{padding:0}
.panels-page .style-filters{display:flex;flex-wrap:wrap;gap:8px}
.panels-page .style-filters label{position:relative;cursor:pointer}
.panels-page .style-filters input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.panels-page .style-filters span{display:block;border:1px solid #35445b;color:#aebbd0;padding:9px 13px;min-height:44px;font-size:12px}
.panels-page .style-filters input:checked+span{background:#102642;border-color:var(--blue);color:#fff}
.panels-page .style-filters input:focus-visible+span{outline:3px solid #b2d9ff;outline-offset:3px}
.panels-page .filter-status{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:16px}
.panels-page .filter-status p{margin:0;font-size:12px;color:var(--muted)}
.panels-page .filter-status button{font-size:12px;min-height:44px;padding:8px 0;border:0;background:none;color:var(--blue);text-decoration:underline;text-underline-offset:4px}
.panels-page .panel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.panels-page .panel-card{--card-accent:#71b6ff;border:1px solid var(--line);background:#080d15;display:flex;flex-direction:column;min-width:0}
.panels-page .panel-card[data-style=susie]{--card-accent:#c9a4ff}
.panels-page .panel-card[data-style=final]{--card-accent:#ff929e}
.panels-page .panel-card:focus-within{border-color:var(--card-accent)}
.panels-page .panel-art{aspect-ratio:199/124;background:#000;display:grid;place-items:center;border-bottom:1px solid #192333;padding:16px;overflow:hidden}
.panels-page .panel-art img{display:block;width:199px;height:124px;max-width:100%;object-fit:contain;image-rendering:pixelated}
.panels-page .panel-content{padding:20px;display:flex;flex:1;flex-direction:column}
.panels-page .panel-style{font-size:10px;color:var(--card-accent);letter-spacing:.4px;margin-bottom:10px}
.panels-page h3{font-size:16px;font-weight:normal;line-height:1.5;margin:0 0 14px;overflow-wrap:anywhere}
.panels-page .panel-quote{font-size:12px;line-height:1.8;color:#c2ccdb;margin:0 0 20px}
.panels-page .panel-note{font-family:Arial,sans-serif;color:#a9b3c5;font-size:13px;line-height:1.6;margin:0 0 20px}
.panels-page .panel-use{display:flex;justify-content:space-between;gap:12px;color:var(--card-accent);text-decoration:none;border-top:1px solid var(--line);padding-top:14px;min-height:44px;margin-top:auto;font-size:12px}
.panels-page .panel-use:hover{text-decoration:underline}
.panels-page .empty-state{border:1px dashed #43536b;padding:48px 20px;text-align:center}
.panels-page .empty-state p{font-size:14px;color:var(--muted)}
.panels-page .empty-state button{min-height:44px;border:1px solid var(--blue);background:#102642;color:#fff;padding:10px 20px;font-size:13px}
.panels-page .panel-guide{margin-top:56px;padding:32px;border:1px solid var(--line);background:#0b1019;display:grid;grid-template-columns:1.5fr 1fr;gap:36px}
.panels-page .panel-guide p:not(.eyebrow),.panels-page .reference-note p{font-size:13px;color:#b8c2d2}
.panels-page .guide-links{display:flex;flex-direction:column;justify-content:center;gap:12px}
.panels-page .guide-links a{display:flex;justify-content:space-between;gap:10px;border:1px solid #35445b;padding:14px;text-decoration:none;font-size:12px}
.panels-page .reference-note{max-width:790px;margin:40px 0 50px}
.panels-page .reference-note h2{font-size:17px}
.panels-page .site-footer{max-width:1064px;border-top:1px solid var(--line);margin:auto;padding:24px;color:#8996ac;font-size:11px}
.panels-page .site-footer p{margin:0 0 12px}
.panels-page .no-script{font-size:13px;color:var(--muted)}
@media(max-width:800px){.panels-page .site-header{align-items:flex-start;flex-direction:column;gap:20px}.panels-page .panel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.panels-page .panel-guide{grid-template-columns:1fr;gap:20px}.panels-page .panel-intro{padding-top:42px}}
@media(max-width:520px){.panels-page main{padding:0 18px}.panels-page .site-header{padding:20px 18px}.panels-page nav{gap:18px;font-size:11px}.panels-page .panel-grid{grid-template-columns:1fr}.panels-page .panel-art{aspect-ratio:auto;min-height:178px}.panels-page .panel-filters{padding:18px}.panels-page .collection-heading{align-items:flex-start;flex-direction:column;gap:4px}.panels-page .panel-guide{padding:22px}.panels-page .style-filters{gap:8px}.panels-page .style-filters span{font-size:11px;padding:9px 10px}}