:root{--ink:#0a0a0a;--ink-2:#1c1c1c;--paper:#fff;--grey-1:#f3f3f2;--grey-2:#e5e4e2;--grey-3:#c7c5c2;--grey-4:#8a8783;--grey-5:#57534f;--line:#dedcd8;--good:#1f7a3d;--good-bg:#e6f4ea;--bad:#b3261e;--bad-bg:#fbe9e7;--radius:14px;--sans:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;--ease:cubic-bezier(.2, .7, .3, 1)}*{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;margin:0}button{font-family:inherit}a{color:inherit}img{max-width:100%;display:block}.screen{max-width:640px;min-height:100%;margin:0 auto;padding:20px 18px 48px}.app-header h1{letter-spacing:-.01em;margin:6px 0 8px;font-size:30px;font-weight:700}.app-header p{color:var(--grey-5);max-width:46ch;margin:0 0 22px;font-size:14.5px;line-height:1.5}.stage-list{flex-direction:column;gap:12px;display:flex}.stage-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);padding:16px}.stage-card.stage-locked{background:var(--grey-1);color:var(--grey-4)}.stage-card-top{align-items:center;gap:12px;display:flex}.stage-num{background:var(--ink);width:30px;height:30px;color:var(--paper);border-radius:50%;flex:none;place-items:center;font-size:13px;font-weight:600;display:grid}.stage-locked .stage-num{background:var(--grey-3);color:var(--grey-5)}.stage-card-text{flex:1;min-width:0}.stage-card-text h2{margin:0 0 2px;font-size:16px;font-weight:600}.stage-card-text p{color:var(--grey-5);margin:0;font-size:12.5px}.stage-badge{width:24px;height:24px;color:var(--grey-5);border-radius:50%;flex:none;place-items:center;display:grid}.stage-badge-pass{background:var(--good-bg);color:var(--good)}.stage-card-actions{gap:10px;margin-top:14px;display:flex}.stage-hint{color:var(--grey-4);margin:10px 0 0;font-size:12.5px}.home-row{margin-top:14px}.home-row.two{grid-template-columns:1fr 1fr;gap:10px;display:grid}.btn-primary,.btn-secondary,.btn-ghost,.btn-wide{cursor:pointer;transition:transform .12s var(--ease), opacity .12s var(--ease);border:none;border-radius:999px;padding:11px 18px;font-size:14.5px;font-weight:600}.btn-primary:active,.btn-secondary:active,.btn-ghost:active,.btn-wide:active{transform:scale(.97)}.btn-primary{background:var(--ink);color:var(--paper);flex:1}.btn-primary:disabled{background:var(--grey-3);color:var(--grey-5);cursor:not-allowed}.btn-secondary{background:var(--grey-1);color:var(--ink);border:1px solid var(--line)}.btn-ghost{color:var(--ink);border:1px solid var(--line);background:0 0;flex:1}.btn-danger{color:var(--bad);border-color:var(--bad-bg)}.btn-danger-solid{background:var(--bad);color:#fff;cursor:pointer;border:none;border-radius:999px;padding:11px 18px;font-weight:600}.btn-wide{background:var(--grey-1);border:1px solid var(--line);justify-content:center;align-items:center;gap:8px;width:100%;display:flex}.btn-wide:disabled{color:var(--grey-4);cursor:not-allowed}.btn-wide i{color:var(--grey-4);font-size:11px;font-style:normal}.btn-icon{cursor:pointer;color:var(--ink);background:0 0;border:none;border-radius:50%;margin:-6px;padding:6px}.btn-icon:focus-visible,.btn-primary:focus-visible,.btn-secondary:focus-visible,.btn-ghost:focus-visible,.option-btn:focus-visible,.chip:focus-visible,input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.topbar{align-items:center;gap:10px;margin-bottom:16px;display:flex}.topbar-title{color:var(--grey-5);font-size:14px;font-weight:600}.fish-photo{aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);background:var(--grey-1);width:100%}.fish-photo-fallback{color:var(--grey-4);flex-direction:column;justify-content:center;align-items:center;gap:8px;font-size:12.5px;display:flex}.learn-card{flex-direction:column;gap:14px;display:flex}.learn-photo{aspect-ratio:3/2}.learn-body h2{margin:0 0 2px;font-size:22px}.learn-names{color:var(--grey-5);margin:0 0 10px;font-size:14px}.learn-names i{font-style:italic}.learn-note{margin:0 0 14px;font-size:14px;line-height:1.5}.fact-list{gap:10px;margin:0 0 14px;display:grid}.fact-list dt{text-transform:uppercase;letter-spacing:.04em;color:var(--grey-4);margin-bottom:2px;font-size:11.5px}.fact-list dd{margin:0;font-size:14px;line-height:1.5}.learn-nav{gap:10px;margin-top:18px;display:flex}.quiz-progress{background:var(--grey-2);border-radius:2px;height:4px;margin-bottom:16px;overflow:hidden}.quiz-progress-bar{background:var(--ink);height:100%;transition:width .24s var(--ease)}.quiz-photo{aspect-ratio:4/3;margin-bottom:18px}.question-prompt{text-align:center;margin:0 0 14px;font-size:16px;font-weight:600}.option-list{gap:10px;margin-bottom:18px;display:grid}.option-btn{border:1px solid var(--line);background:var(--paper);text-align:left;cursor:pointer;transition:background .12s var(--ease), border-color .12s var(--ease);border-radius:12px;justify-content:space-between;align-items:center;gap:10px;padding:13px 16px;font-size:14.5px;display:flex}.option-btn:disabled{cursor:default}.option-correct{background:var(--good-bg);border-color:var(--good);color:var(--good)}.option-wrong{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}.reveal-block h2{margin:4px 0 2px;font-size:22px}.reveal-verdict{margin:10px 0 16px;font-size:14px;font-weight:600}.summary-card{text-align:center;padding-top:20px}.summary-card h1{margin:0 0 6px;font-size:48px}.summary-pass{color:var(--good);font-weight:600}.summary-fail{color:var(--grey-5);font-weight:600}.summary-list{text-align:left;gap:8px;margin:22px 0;padding:0;list-style:none;display:grid}.summary-list li{background:var(--grey-1);border-radius:10px;align-items:center;gap:8px;padding:10px 14px;font-size:14px;display:flex}.summary-ok{color:var(--good)}.summary-miss{color:var(--bad)}.search-row{border:1px solid var(--line);color:var(--grey-4);border-radius:999px;align-items:center;gap:8px;margin-bottom:12px;padding:10px 14px;display:flex}.search-row input{color:var(--ink);background:0 0;border:none;outline:none;flex:1;font-size:14.5px}.chip-row{gap:8px;margin-bottom:16px;padding-bottom:4px;display:flex;overflow-x:auto}.chip{border:1px solid var(--line);background:var(--paper);cursor:pointer;color:var(--grey-5);border-radius:999px;flex:none;padding:7px 14px;font-size:12.5px}.chip-active{background:var(--ink);border-color:var(--ink);color:var(--paper)}.catalogue-grid{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}@media (width>=460px){.catalogue-grid{grid-template-columns:repeat(3,1fr)}}.cat-tile{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);cursor:pointer;text-align:left;flex-direction:column;gap:6px;padding:8px;display:flex}.cat-photo{aspect-ratio:1;border-radius:10px}.cat-name{font-size:12.5px;font-weight:600;line-height:1.3}.cat-locked{aspect-ratio:.85;background:var(--grey-1);color:var(--grey-4);cursor:default;flex-direction:column;justify-content:center;align-items:center;gap:6px;display:flex}.cat-locked-glyph{opacity:.5}.mastery-dots,.mastery-bar{gap:3px;display:flex}.dot-on,.dot-off{border-radius:50%;width:6px;height:6px}.dot-on{background:var(--ink)}.dot-off{background:var(--grey-3)}.empty-state{text-align:center;color:var(--grey-4);padding:40px 0;font-size:14px}.detail-photo{aspect-ratio:4/3;margin-bottom:8px}.photo-credit{color:var(--grey-4);margin:0 0 18px;font-size:11.5px}.photo-credit a{text-decoration:underline}.detail-facts{margin-top:16px}.sources-block{color:var(--grey-5);margin-top:20px;font-size:13px}.sources-block summary{cursor:pointer;font-weight:600}.sources-block ul{margin:10px 0 0;padding-left:18px}.sources-block a{text-decoration:underline}.progress-stats{grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px;display:grid}.progress-stats div{border:1px solid var(--line);text-align:center;border-radius:12px;padding:12px 8px}.progress-stats b{font-size:20px;display:block}.progress-stats span{color:var(--grey-5);font-size:11px}.progress-list{gap:2px;margin:0 0 24px;padding:0;list-style:none;display:grid}.progress-list li{border-bottom:1px solid var(--grey-1);justify-content:space-between;align-items:center;padding:9px 4px;font-size:13.5px;display:flex}.progress-locked-name{color:var(--grey-4);align-items:center;gap:5px;display:inline-flex}.progress-locked-note{color:var(--grey-4);font-size:11.5px}.reset-block{border-top:1px solid var(--line);padding-top:18px}.reset-confirm p{color:var(--grey-5);margin:0 0 12px;font-size:13px}@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}
