* { box-sizing: border-box; }
.card { margin:0; padding:26px 18px 38px; text-align:left; font-family:"Segoe UI",Arial,sans-serif; font-size:19px; line-height:1.55; color:#eaf5f6; background:#071924; }
.ocean-card { max-width:720px; margin:0 auto; border:1px solid #244654; border-radius:22px; overflow:hidden; background:#0d2531; box-shadow:0 20px 50px rgba(0,0,0,.18); }
.masthead { padding:18px 26px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid #244654; color:#7bcfc9; font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; }
.serial { color:#9aafb7; letter-spacing:1px; white-space:nowrap; }
.content { padding:28px 30px; }
.eyebrow { color:#8fc7ce; font-size:12px; letter-spacing:2px; text-transform:uppercase; font-weight:600; }
.prompt { margin:13px 0 26px; color:#f2f8f7; font-size:25px; line-height:1.35; font-weight:600; }
.name-fr { color:#f4faf9; font-size:32px; font-weight:650; letter-spacing:-.7px; line-height:1.22; margin:10px 0; overflow-wrap:break-word; }
.name-la { color:#8cdbd1; font-family:Georgia,"Times New Roman",serif; font-style:italic; font-size:26px; line-height:1.3; margin:8px 0; }
.cue { padding:32px 0 40px; }
.cue .name-fr { font-size:36px; }
.cue .name-la { font-size:35px; }
.rule { width:44px; height:3px; border-radius:4px; background:#65cdbd; margin:26px 0 0; }
.visual { background:#f4f5f5; display:flex; align-items:center; justify-content:center; min-height:150px; padding:0; }
.visual img { display:block; width:auto; max-width:100%; max-height:380px; height:auto; object-fit:contain; margin:0 auto; }
.visual.photo { background:#061720; }
.caption { padding:10px 30px; color:#a7c0c8; background:#0a202b; font-size:12px; line-height:1.45; border-top:1px solid #244654; }
.answer { padding-bottom:23px; }
.facts { display:grid; grid-template-columns:1fr 1fr; gap:18px; border-top:1px solid #244654; margin-top:20px; padding-top:18px; font-size:16px; }
.label { display:block; color:#81a6b2; font-size:10px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; margin-bottom:5px; }
.aliases { margin-top:20px; color:#c5d9dd; font-size:16px; }
.note { margin-top:20px; padding:14px 16px; border-left:3px solid #dfb777; background:#17323a; color:#dce9e8; font-size:15px; line-height:1.55; border-radius:0 8px 8px 0; }
.taxon { margin-top:14px; color:#a6c2cc; font-size:14px; }
.footer { border-top:1px solid #244654; padding:17px 30px 20px; color:#9bb5bf; font-size:12px; }
.footer details { margin-top:8px; }
.footer summary { cursor:pointer; color:#9ccdcf; padding:4px 0; }
.footer p { margin:9px 0; overflow-wrap:anywhere; }
a { color:#82d8cd; text-decoration:none; border-bottom:1px solid #3c6d70; }
.no-image { padding:40px; text-align:center; color:#b1c6ce; font-size:16px; }
.nightMode.card,.night_mode.card { background:#071924; color:#eaf5f6; }
.nightMode .ocean-card,.night_mode .ocean-card { background:#0d2531; }
@media (max-width:520px) {
 .card {padding:10px 8px 25px; font-size:17px;}
 .ocean-card {border-radius:15px;}
 .masthead {padding:15px 18px; font-size:9px; letter-spacing:2px;}
 .content {padding:23px 21px;}
 .name-fr {font-size:28px;}
 .name-la {font-size:23px;}
 .cue .name-fr {font-size:30px;}
 .cue .name-la {font-size:29px;}
 .prompt {font-size:22px;}
 .visual img {max-height:290px;}
 .caption,.footer {padding-left:21px;padding-right:21px;}
 .facts {font-size:14px;gap:10px;}
}

:root{--bg:#061a23;--panel:#0b2530;--line:#294651;--ink:#eaf4f4;--muted:#9cb8c1;--mint:#9be0ce}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 85% 0,#123742 0,transparent 44%),var(--bg);color:var(--ink);font:15px/1.55 "Segoe UI",Arial,sans-serif}button,input,select{font:inherit}button,summary{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--mint);outline-offset:3px}button:disabled{opacity:.4;cursor:default}a{color:var(--mint)}button{border:1px solid var(--line);border-radius:10px;background:#102f3a;color:var(--ink);padding:10px 16px}button:hover{background:#19414b}button.primary{background:var(--mint);border-color:var(--mint);color:#08232a;font-weight:700}[hidden]{display:none!important}.shell{max-width:1120px;margin:auto;padding:30px 28px 40px}.top{display:flex;justify-content:space-between;align-items:center;gap:20px}.brand{display:flex;gap:12px;align-items:center;font-size:13px;letter-spacing:2px;text-transform:uppercase;font-weight:650}.brand svg{width:38px;height:38px;color:var(--mint)}.toplinks{display:flex;align-items:center;gap:12px}.toplinks a{font-size:12px;text-decoration:none;padding:9px}.toplinks button{font-size:12px}.hero{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end;padding:36px 0 27px}.eyebrow{color:var(--mint);text-transform:uppercase;letter-spacing:2px;font-size:10px;font-weight:700}.hero h1{font:49px/1.1 Georgia,serif;letter-spacing:-1.6px;margin:11px 0 13px}.hero h1 em{color:var(--mint);font-weight:400}.hero p{color:var(--muted);margin:0;max-width:600px;font-size:14px}.stats{display:flex;gap:22px;padding-bottom:3px}.stats strong{display:block;font-size:26px;line-height:1.2;font-weight:500}.stats span{font-size:11px;color:var(--muted)}.toolbar{border-top:1px solid var(--line);padding:24px 0 20px;display:flex;flex-wrap:wrap;gap:15px;align-items:center;justify-content:space-between}.modes{display:flex;flex-wrap:wrap;gap:6px}.modes button{background:transparent;font-size:12px;border-color:transparent;padding:10px 13px}.modes button.active{background:#19434b;border-color:#548c8e;color:#b6edde}.session-actions{display:flex;gap:8px}.session-actions button{font-size:12px}.filters{display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding-bottom:18px}.filters label{font-size:11px;color:var(--muted)}select{background:#0b2530;border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:7px 28px 7px 10px;font-size:12px;max-width:220px}.study{max-width:800px;margin:auto}.sessionline{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:11px;margin:4px 3px 11px}.meter{height:2px;background:#183945;margin-bottom:17px}.meter span{display:block;background:var(--mint);height:100%;transition:width .2s}.sample.card{background:transparent;padding:0}.sample .ocean-card{max-width:none;margin:0;box-shadow:0 12px 50px #0002}.sample .masthead{padding:15px 24px}.sample .visual{height:330px;background:#f7f8f7;display:flex;align-items:center;justify-content:center;margin:0 24px;border-radius:8px;overflow:hidden}.sample .visual.photo{background:#071923}.sample .visual img{width:100%;height:100%;max-height:330px;object-fit:contain;display:block}.sample .content{padding:23px 26px}.sample .content.question{padding-top:22px;padding-bottom:15px}.sample .prompt{font-size:19px;margin:6px 0}.sample .cue{min-height:170px;display:flex;justify-content:center;flex-direction:column}.sample .caption{padding:12px 24px;font-size:11px}.sample .name-fr{font-size:29px;line-height:1.2;overflow-wrap:anywhere}.sample .name-la{font-size:26px;overflow-wrap:anywhere}.sample .no-image{padding:55px 25px;text-align:center;color:var(--muted);border:1px dashed var(--line);margin:10px 24px 24px;border-radius:8px}.writing{padding:17px 2px 0}.toggle-write{display:inline-flex;align-items:center;gap:9px;color:#b6cdd3;font-size:12px;cursor:pointer}.toggle-write input{accent-color:var(--mint);width:15px;height:15px}.answer-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:13px 0 2px}.answer-fields.one{grid-template-columns:1fr}.answer-fields label{color:#b3ccd2;font-size:11px;display:block}.answer-fields input{display:block;margin-top:6px;width:100%;padding:11px 12px;border:1px solid #345664;background:#08222d;border-radius:9px;color:var(--ink);font-size:15px}.answer-fields input[readonly]{opacity:.75}.typing-note{color:var(--muted);font-size:11px;margin:8px 0 0}.feedback{font-size:12px;margin-top:9px;color:#b6edde}.review-bar{display:flex;justify-content:center;gap:10px;margin-top:20px}.review-bar .primary{flex:1;max-width:340px}.rating{display:flex;justify-content:center;gap:10px;margin-top:14px}.rating button{font-size:12px}.rating button.selected{border-color:var(--mint);color:var(--mint)}.hint{text-align:center;color:#7799a6;font-size:11px;margin:15px 0 0}.toast{color:#b7e7dc;text-align:center;min-height:20px;font-size:12px;margin:11px 0 0}.empty{border:1px dashed var(--line);border-radius:20px;text-align:center;padding:60px 25px;color:var(--muted)}.about{margin-top:38px;padding:20px 0;border-top:1px solid var(--line);color:var(--muted);font-size:12px}.about>summary{font-size:12px;list-style:none;color:#c2d8db;display:flex;justify-content:space-between}.about>summary::after{content:'+';color:var(--mint)}.about[open]>summary::after{content:'−'}.about p{max-width:900px;line-height:1.75}.about strong{color:#d6e5e7}.about-controls{display:flex;gap:9px;flex-wrap:wrap;margin:16px 0}.about-controls button{font-size:12px}.bottom{display:flex;justify-content:space-between;gap:20px;color:#7899a5;font-size:10px;margin-top:15px}.modal{position:fixed;inset:0;z-index:20;background:#03121dca;backdrop-filter:blur(7px);padding:35px;display:flex;align-items:center;justify-content:center}.library{width:730px;max-width:100%;max-height:86vh;border:1px solid #365862;border-radius:20px;background:#0b2530;display:flex;flex-direction:column;box-shadow:0 20px 80px #0005;overflow:hidden}.library-head{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line)}.library-head h2{font:27px Georgia,serif;margin:0}.library-head button{padding:7px 12px}.catalog-search{padding:15px 24px 13px}.catalog-search input{width:100%;padding:11px 13px;background:#071c26;border:1px solid #365862;border-radius:8px;color:var(--ink);font-size:14px}.results-count{font-size:11px;color:var(--muted);margin-top:8px}.species-list{overflow:auto;padding:0 12px 10px}.species{display:flex;justify-content:space-between;align-items:center;gap:15px;text-align:left;width:100%;border:0;border-bottom:1px solid #1d3c47;background:transparent;border-radius:7px;padding:13px 12px}.species strong{font-size:13px;font-weight:600;display:block}.species em{font:12px/1.4 Georgia,serif;display:block;color:#9dbac3;margin-top:3px}.species small{color:#89b1ba;font-size:10px;white-space:nowrap}.catalog-tip{padding:0 24px 15px;color:#85a7b2;font-size:11px}.footer p{overflow-wrap:anywhere}
@media(max-width:820px){.shell{padding:22px 18px}.hero{grid-template-columns:1fr;gap:23px;padding-top:27px}.stats{gap:30px}.hero h1{font-size:43px}.toolbar{gap:10px}.session-actions{margin-left:auto}.sample .visual{height:300px}.sample .visual img{max-height:300px}}@media(max-width:480px){.shell{padding:17px 13px}.brand{font-size:10px;letter-spacing:1.3px;gap:7px}.brand svg{width:29px;height:29px}.toplinks{gap:3px}.toplinks a{padding:5px;font-size:10px}.toplinks button{padding:7px 9px;font-size:10px}.hero h1{font-size:36px;letter-spacing:-1px}.hero p{font-size:12px}.hero{padding:26px 0 22px;gap:19px}.stats{gap:23px}.stats strong{font-size:23px}.stats span{font-size:10px}.toolbar{padding:14px 0;gap:12px}.modes{gap:2px;flex:1;width:100%}.modes button{font-size:10px;padding:8px 9px}.session-actions{margin-left:0}.session-actions button{font-size:11px;padding:8px 11px}.filters{gap:8px}.filters select{max-width:170px;font-size:11px}.filters label{font-size:10px}.sample .masthead{padding:12px 16px;font-size:9px}.sample .visual{height:230px;margin:0 14px}.sample .visual img{max-height:230px}.sample .content{padding:19px 17px}.sample .prompt{font-size:17px}.sample .name-fr{font-size:24px}.sample .name-la{font-size:23px}.sample .cue{min-height:145px}.answer-fields{grid-template-columns:1fr;gap:10px}.review-bar{gap:7px}.review-bar button{padding:10px 13px;font-size:12px}.rating button{padding:9px 14px}.modal{padding:12px}.library{max-height:94vh}.library-head{padding:17px}.catalog-search{padding:13px 17px}.species-list{padding:0 5px 10px}.species small{max-width:60px;white-space:normal;text-align:right}.bottom{flex-direction:column;gap:5px}.hint{font-size:10px}}
.sample .visual img{width:auto;height:auto;max-width:100%}
@media(max-width:480px){.modes{flex:1 0 100%;display:grid;grid-template-columns:1fr 1fr;gap:5px}.modes button{padding:9px 7px;text-align:center}.session-actions{width:100%;justify-content:flex-end}.filters{padding-bottom:14px}.hero{gap:15px}}

.shell{max-width:1360px}.learning-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:26px;align-items:start}.learning-layout.without-panel{grid-template-columns:minmax(0,1fr)}.learning-layout .study{width:100%;max-width:850px;min-width:0}.learning-panel{border:1px solid var(--line);border-radius:16px;padding:18px 12px;background:#0b2530;position:sticky;top:18px}.learning-panel h2{font-size:15px;line-height:1.4;margin:0 6px 8px}.learning-panel p{font-size:11px;color:var(--muted);margin:6px 6px 14px}.learning-list{max-height:450px;overflow:auto}.learning-item{display:flex;width:100%;text-align:left;padding:12px 10px;margin-top:5px;background:#0d2c37;border-color:#274b57;gap:10px;align-items:center}.learning-item b{color:var(--mint);font-size:12px;min-width:22px}.learning-item span{font-size:11px;line-height:1.4}.learning-item[aria-current="true"]{border-color:var(--mint);background:#17444a}.learning-empty{padding:12px 5px;color:var(--muted);font-size:12px}.toplinks{flex-wrap:wrap;justify-content:flex-end}.learning-tools{margin-top:14px;width:100%;font-size:11px}.keyboard-help{margin-top:12px;text-align:center;color:var(--muted);font-size:11px}.keyboard-help summary{display:inline-block}.key-list{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin:12px auto;max-width:740px}.key-list span{white-space:nowrap}kbd{font:11px "Segoe UI",sans-serif;border:1px solid #44636b;border-radius:4px;padding:2px 5px;color:#e7f8f1;background:#0f2b35}.gallery-tools{display:flex;align-items:center;justify-content:center;gap:12px;padding:13px 18px;border-top:1px solid #23434f}.gallery-tools button{font-size:11px;padding:7px 12px}.gallery-tools span{font-size:11px;color:var(--muted)}.feedback.success{padding:12px 14px;border:1px solid #418576;border-radius:9px;background:#123b3c}.rating button{min-height:44px}.rating button:first-child{max-width:255px}.study .toast{min-height:20px}.progress-notice{color:var(--muted);font-size:11px}.learning-toggle[aria-expanded="true"]{border-color:#69a99e;color:var(--mint)}.name-match{color:var(--mint)}
@media(max-width:1000px){.learning-layout{grid-template-columns:195px minmax(0,1fr);gap:18px}.learning-panel{padding:15px 8px}.learning-panel h2{font-size:14px}}
@media(max-width:800px){.learning-layout{grid-template-columns:1fr}.learning-panel{position:static}.learning-list{max-height:190px}.learning-panel h2{font-size:15px}.learning-panel p{margin-bottom:8px}.learning-tools{margin-top:8px}}
@media(max-width:480px){.top{align-items:flex-start;gap:7px}.toplinks{gap:5px}.toplinks button{font-size:10px;padding:7px 8px}.brand{white-space:nowrap}.toplinks .learning-toggle{max-width:140px}.rating{gap:8px}.rating button{font-size:11px;padding:9px 12px}.keyboard-help{font-size:10px}.gallery-tools{padding:10px 12px}}