@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600;700&family=Literata:opsz,wght@600;700&display=swap');
.option-tabs{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:0 0 2rem;padding:0 0 1.2rem;border-bottom:1px solid var(--line)}.option-tabs span{width:100%;font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.option-tab{border:1px solid var(--line);border-radius:9px;background:var(--panel);padding:.55rem .8rem;color:var(--ink)}.option-tab[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:#fff}.option-tab:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

:root{color-scheme:light;--paper:#f2f6f7;--panel:#fff;--ink:#1d2527;--muted:#66706e;--line:#d2dcdd;--blue:#164fb8;--blue-dark:#113b88;--rating:#e06d35;--focus:#e06d35;--shadow:0 14px 30px rgb(25 43 47 / .08)}
*{box-sizing:border-box}html{background:var(--paper)}body{margin:0;background:var(--paper);color:var(--ink);font-family:'IBM Plex Sans',system-ui,sans-serif;line-height:1.5}button,textarea{font:inherit}button{cursor:pointer}.skip-link{position:absolute;left:1rem;top:-4rem;background:var(--ink);color:white;padding:.7rem;z-index:9}.skip-link:focus{top:1rem}.site-header{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;max-width:1280px;margin:auto;padding:1.5rem 2rem;border-bottom:1px solid var(--line)}.brand{font:700 clamp(1.25rem,3vw,1.7rem)/1 Literata,Georgia,serif;color:var(--ink);text-decoration:none}.brand span{color:var(--blue)}.site-header p{margin:0;color:var(--muted);font-size:.9rem}main{max-width:1280px;margin:auto;padding:clamp(2.5rem,6vw,5rem) 2rem}.intro{max-width:46rem;margin-bottom:2.5rem}.intro h1,.test-heading h1{font:700 clamp(2.25rem,6vw,4.5rem)/.96 Literata,Georgia,serif;letter-spacing:-.035em;margin:0 0 1rem}.intro p,.test-heading p{font-size:1.08rem;color:var(--muted);margin:0}.test-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}.test-card{display:flex;flex-direction:column;justify-content:space-between;min-height:210px;padding:1.4rem;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}.test-card h2{font:600 1.45rem/1.1 Literata,Georgia,serif;margin:0 0 .65rem}.test-card p{color:var(--muted);margin:0 0 1.25rem}.button,.test-card a,.save-rating{display:inline-flex;align-items:center;justify-content:center;width:max-content;border:0;border-radius:10px;padding:.72rem 1rem;background:var(--blue);color:white;text-decoration:none;font-weight:700;transition:background .18s ease,transform .18s ease}.button:hover,.test-card a:hover,.save-rating:hover{background:var(--blue-dark);transform:translateY(-1px)}.back{background:transparent;color:var(--blue);padding:0;margin-bottom:1.8rem}.test-heading{margin-bottom:2.5rem}.test-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,320px);gap:2rem;align-items:start}.section-title{font:600 1.45rem/1.15 Literata,Georgia,serif;margin:0 0 .85rem}.option-picker{display:flex;gap:.6rem;flex-wrap:wrap;margin:0 0 1.25rem}.option-picker label{display:flex;align-items:center;gap:.45rem;padding:.55rem .7rem;background:var(--panel);border:1px solid var(--line);border-radius:9px;font-size:.9rem}.comparison-grid{display:grid;grid-template-columns:repeat(var(--columns,1),minmax(0,1fr));gap:1rem}.option-panel{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}.option-head{padding:1rem 1rem .75rem;border-bottom:1px solid var(--line)}.option-head h3{font:600 1.2rem/1.15 Literata,Georgia,serif;margin:0}.option-head p{margin:.3rem 0 0;color:var(--muted);font-size:.8rem}.option-content{min-height:270px;background:#fff}.option-content iframe{width:100%;height:400px;border:0;display:block}.image-content{width:100%;height:400px;object-fit:contain;background:#e9f0f1;display:block}.copy-content{margin:0;padding:1.4rem;white-space:pre-wrap;font:400 .94rem/1.65 'DM Mono',monospace;overflow:auto}.link-content{display:grid;place-items:center;min-height:270px;padding:2rem;text-align:center}.link-content a{color:var(--blue);font-weight:700}.rating{padding:1rem}.rating-buttons{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:.5rem}.score{width:2.3rem;height:2.3rem;border:1px solid var(--line);border-radius:50%;background:var(--panel);color:var(--ink);font-weight:700}.score[aria-pressed=true]{background:var(--rating);border-color:var(--rating);color:#fff}.rating label{display:block;font-size:.86rem;font-weight:700;margin-top:1rem}.rating label span{color:var(--muted);font-weight:400}.rating textarea{width:100%;margin-top:.35rem;padding:.7rem;border:1px solid var(--line);border-radius:8px;background:#fff;font:inherit;resize:vertical}.rating textarea:focus,.score:focus-visible,.button:focus-visible,a:focus-visible,.save-rating:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.rating-status{min-height:1.4rem;margin:.4rem 0;color:var(--muted);font-size:.82rem}.save-rating{width:100%;margin-top:.8rem}.ranking{position:sticky;top:1rem;padding:1.2rem;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}.ranking ol{padding:0;margin:0;list-style:none;counter-reset:rank}.ranking li{counter-increment:rank;display:grid;grid-template-columns:2rem 1fr auto;gap:.55rem;align-items:center;padding:.7rem 0;border-top:1px solid var(--line)}.ranking li:first-child{border-top:0}.ranking li::before{content:counter(rank,decimal-leading-zero);font:500 .72rem 'DM Mono',monospace;color:var(--blue)}.ranking strong{font-size:.9rem}.ranking span{font:500 .78rem 'DM Mono',monospace;color:var(--muted);text-align:right}.empty,.error{padding:1rem;border-radius:10px;background:#e6edef;color:var(--muted)}.error{background:#fee9df;color:#8a3312}@media(max-width:850px){.test-layout{grid-template-columns:1fr}.ranking{position:static;order:-1}.comparison-grid{grid-template-columns:1fr!important}.site-header{padding-inline:1.25rem}main{padding-inline:1.25rem}}@media(max-width:520px){.site-header{display:block}.site-header p{margin-top:.6rem}.intro h1,.test-heading h1{font-size:2.4rem}.option-content iframe,.image-content{height:320px}}