:root{--deep:#071c20;--gold:#d49a35;--teal:#087d85;--ink:#33291f;--cream:#fcf6e9;--orange:#cf5635;--purple:#91648d}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:"Source Sans 3",sans-serif}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit}button{font:inherit}button,a{touch-action:manipulation}:focus-visible{outline:3px solid #cb5435;outline-offset:5px}
.topbar{min-height:84px;background:#061315;display:flex;align-items:center;padding:16px max(24px,4vw);gap:28px;position:sticky;top:0;z-index:10;border-bottom:1px solid #d8a44944}
.brand{text-decoration:none;color:#f0bd4d;text-align:center;font-family:"Cormorant Garamond",serif;line-height:.85;flex:none}.brand b{display:block;font-size:43px}.brand span{font-size:14px;font-weight:700;letter-spacing:.06em}
nav{display:flex;gap:23px;margin-left:auto;align-items:center}nav a{color:#eee6d6;text-decoration:none;font-size:15px;white-space:nowrap}nav a.active,nav a:hover{color:#efb847}.student{background:#e7aa3c;color:#15120b;text-decoration:none;border-radius:24px;padding:11px 20px;font-weight:700;white-space:nowrap}.menu-toggle{display:none}
.intro{background:radial-gradient(ellipse at 85% 10%,#17444a 0,transparent 65%),var(--deep);color:#f9efd7;padding:35px max(24px,4vw) 30px;border-bottom:3px solid var(--gold)}.intro-inner{max-width:1328px;margin:auto;display:flex;justify-content:space-between;align-items:center;gap:38px}.eyebrow{font-size:12px;letter-spacing:.19em;font-weight:700;color:#ecc57c;margin:0 0 9px}h1{font:700 64px/.95 "Cormorant Garamond",serif;margin:0 0 12px;color:#fff0c9}.intro p:last-child{margin:0;font-size:18px;color:#c7d9d5}.intro-note{border-left:1px solid #bf995455;padding-left:26px;font-size:15px;line-height:1.6;color:#dce6dc;flex:none}.intro-note strong{display:block;color:#edbd65;font-weight:600}
.filterbar{max-width:1328px;margin:0 auto;padding:23px 0 18px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #cdb99080}.filters{display:flex;flex-wrap:wrap;gap:8px}.filters button{border:1px solid #bca783;background:#fffaf0;border-radius:30px;padding:8px 17px;font-weight:600;color:#524331;cursor:pointer;min-height:40px;transition:background .15s}.filters button.on{background:var(--teal);color:#fff;border-color:var(--teal)}.filters button:hover{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal)}.result-count{font-size:14px;color:#79664e;white-space:nowrap}
main{max-width:1440px;margin:auto;padding:0 4vw 36px}.trainer-row{--accent:var(--teal);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:48px;align-items:center;padding:36px 0 40px;border-bottom:1px solid #c9b58b88;position:relative}.trainer-row[hidden]{display:none!important}.trainer-row.reverse{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);--accent:var(--orange)}.trainer-row:nth-child(3n){--accent:var(--purple)}.trainer-row.reverse .preview{order:2}.trainer-row.reverse .info{order:1}
.preview{position:relative;min-width:0;padding-top:87px}.mascot{position:absolute;z-index:2;width:188px;height:auto;top:0;left:calc(50% - 94px);pointer-events:none;filter:drop-shadow(0 3px 2px #45290818)}.trainer-row:nth-child(3n+1) .mascot{left:28px}.trainer-row:nth-child(3n+2) .mascot{left:auto;right:28px;transform:scaleX(-1)}
.screenshot-frame{position:relative;background:#f7dfac url('assets/parchment-texture.webp') center/cover;border:3px solid #9b6430;border-radius:8px;padding:17px;box-shadow:0 3px 0 #d3a05a,inset 0 0 0 3px #e6b967,0 12px 24px #6b4b2022}.screenshot-frame:before,.screenshot-frame:after{content:"✦";position:absolute;color:#9f692f;font-size:13px;top:0;pointer-events:none}.screenshot-frame:before{left:3px}.screenshot-frame:after{right:3px}.screenshot-button{display:block;padding:0;border:0;background:transparent;width:100%;cursor:zoom-in;line-height:0;border-radius:3px}.shot{display:block;width:100%;height:auto;border:1px solid #b7a58e;border-radius:3px;box-shadow:0 2px 5px #55381520}.preview-note{margin:12px 0 0;text-align:center;font-size:12px;color:#88724e;letter-spacing:.04em}
.info{min-width:0;position:relative;padding:28px 32px 26px;background:linear-gradient(90deg,#fff9e9d9,#fff8e4df),url('assets/parchment-texture.webp') center/cover;border:1px solid #ceb384;border-top:3px solid var(--accent);border-radius:3px 15px 4px 15px;box-shadow:0 10px 25px #7253230c}.info:after{content:"";position:absolute;pointer-events:none;inset:8px;border:1px solid #d6bf913b;border-radius:2px 10px 2px 10px}.tags{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}.tags span{font-size:10px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;border:1px solid #c7b287;border-radius:4px;padding:4px 8px;background:#fffaf0}.tags span:first-child{color:var(--teal);border-color:#87ac9e;background:#edf2de}h2{font:700 38px/1.04 "Cormorant Garamond",serif;margin:0 0 13px;color:#273b35;text-wrap:balance}.info p{font-size:16px;line-height:1.5;margin:0 0 13px}.practice{font-weight:600;color:#534332}.advice{font-style:italic;color:#806045;border-left:2px solid var(--accent);padding-left:14px;font-size:15px!important}.actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:18px;position:relative;z-index:1}.actions a{text-decoration:none;font-weight:700;font-size:15px;padding:10px 18px;border-radius:5px;min-height:43px}.open{background:var(--teal);color:#fff;box-shadow:0 2px 0 #03545b}.open:hover{background:#06646c}.more{background:#fffbef;border:1px solid #b99b6c;color:#60482e}.more:hover{background:#f1e3c8}footer{background:#061315;color:#d8c99e;text-align:center;padding:28px;font-size:14px}
.screenshot-dialog{border:1px solid #bb975c;border-radius:10px;padding:20px;background:var(--cream);max-width:96vw;width:1200px;max-height:94vh;overflow:auto;box-shadow:0 20px 80px #0008}.screenshot-dialog::backdrop{background:#031416df;backdrop-filter:blur(4px)}.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:20px;position:sticky;top:-20px;padding:8px 0 15px;background:var(--cream);z-index:1}.dialog-title{font:700 28px "Cormorant Garamond",serif;margin:0}.dialog-close{border:1px solid #bfa57c;border-radius:5px;padding:7px 14px;background:#fffbef;cursor:pointer;flex:none}.dialog-shot{display:block;width:100%;height:auto}
@media(min-width:1700px){main{padding-left:56px;padding-right:56px}}
@media(max-width:1150px){.topbar{flex-wrap:wrap;justify-content:space-between;gap:15px}.student{margin-left:auto}.menu-toggle{display:block;border:1px solid #bd994b77;background:none;color:#f5e0ac;border-radius:5px;padding:8px 12px;cursor:pointer;font-size:15px;min-height:40px}nav{display:none;width:100%;margin:0;padding:12px 0 3px;flex-wrap:wrap}nav.open{display:flex}.intro-note{display:none}.trainer-row,.trainer-row.reverse{gap:30px}.info{padding:25px}h2{font-size:34px}.filters button{padding:8px 14px}.filterbar{flex-wrap:wrap}}
@media(max-width:850px){.trainer-row,.trainer-row.reverse{grid-template-columns:minmax(0,1fr);gap:24px;padding:30px 0 34px}.trainer-row.reverse .preview,.trainer-row.reverse .info{order:initial}.preview{max-width:660px;width:100%;margin:auto;padding-top:67px}.mascot{width:145px;left:calc(50% - 72px)}.info{width:100%;padding:25px 30px}main{padding:0 24px 30px}.filterbar{margin:0 24px}.intro{padding:30px 24px}.intro h1{font-size:55px}.screenshot-frame{padding:14px}.info h2{font-size:37px}.info p{font-size:17px}.preview-note{margin-top:10px}.result-count{margin-left:auto}}
@media(max-width:450px){.topbar{padding:14px 18px;min-height:76px;gap:12px}.brand b{font-size:35px}.brand span{font-size:11px}.topbar .student{display:none}.menu-toggle{margin-left:auto}nav{gap:16px 22px}nav a{font-size:16px;white-space:normal}.intro{padding:27px 18px}.intro h1{font-size:49px}.intro p:last-child{font-size:17px}.eyebrow{font-size:10px;letter-spacing:.15em}.filterbar{margin:0 18px;padding-top:19px;gap:10px}.filters{gap:7px}.filters button{font-size:14px;padding:7px 13px;min-height:38px}.result-count{font-size:12px}main{padding:0 18px 24px}.preview{padding-top:48px}.mascot{width:110px;left:calc(50% - 55px)}.trainer-row:nth-child(3n+1) .mascot{left:20px}.trainer-row:nth-child(3n+2) .mascot{right:20px}.screenshot-frame{padding:10px;border-width:2px}.info{padding:22px 20px}.info h2{font-size:32px}.info p{font-size:16px}.actions{gap:9px}.actions a{padding:10px 15px}.preview-note{font-size:11px}.trainer-row,.trainer-row.reverse{padding:24px 0 30px;gap:19px}.screenshot-dialog{padding:12px}.dialog-header{top:-12px}.dialog-title{font-size:24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
.dialog-controls{display:flex;gap:8px;flex:none}.dialog-zoom{border:1px solid #bfa57c;border-radius:5px;padding:7px 14px;background:#fffbef;cursor:pointer}.dialog-canvas{overflow:auto;max-height:74vh}.dialog-canvas.zoomed .dialog-shot{width:auto;max-width:none}.dialog-header{flex-wrap:wrap}.dialog-title{flex:1;min-width:160px}
@media(max-width:450px){.dialog-header{gap:10px}.dialog-controls{margin-left:auto}.dialog-zoom,.dialog-close{padding:8px 12px}}
@media(max-width:450px){.preview{padding-top:53px}}