:root {
  --paper: #f4eedd;
  --card: #f9f3e4;
  --ink: #20261e;
  --muted: #5d6453;
  --line: #e2d7b9;
  --green: #24452f;        
  --green-2: #3f6b47;      
  --green-soft: #e1ead5;   
  --red: #9b3a2c;
  --red-soft: #f5e0d8;
  --sky: #2b6466;          
  --sky-soft: #dbeae6;
  --gold: #8a6a1f;         
  --gold-line: #c9a14c;    
  --gold-soft: #f3e6c3;
  --radius: 16px;
  --serif: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --shadow: 0 1px 2px rgba(40, 35, 15, .06), 0 6px 18px rgba(40, 35, 15, .07);
  
  --flower: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104' viewBox='0 0 60 104'%3E%3Cg fill='none' stroke='%23b48f3c' stroke-opacity='.13' stroke-width='1'%3E%3Ccircle cx='0' cy='0' r='30'/%3E%3Ccircle cx='60' cy='0' r='30'/%3E%3Ccircle cx='30' cy='52' r='30'/%3E%3Ccircle cx='0' cy='104' r='30'/%3E%3Ccircle cx='60' cy='104' r='30'/%3E%3Ccircle cx='30' cy='-52' r='30'/%3E%3Ccircle cx='30' cy='156' r='30'/%3E%3C/g%3E%3C/svg%3E");
  
  --vesica: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-16 -11 32 22'%3E%3Cg fill='none' stroke='%23c9a14c' stroke-width='1.6'%3E%3Ccircle cx='-5' r='9.5'/%3E%3Ccircle cx='5' r='9.5'/%3E%3C/g%3E%3Ccircle r='1.8' fill='%23c9a14c'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 86px; }
body {
  margin: 0; color: var(--ink);
  font: 17px/1.62 "Segoe UI", system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(255, 252, 240, .9), transparent 60%),
    radial-gradient(ellipse at 100% 100%, rgba(63, 107, 71, .10), transparent 55%),
    var(--flower) 0 0 / 60px 104px,
    var(--paper);
  background-attachment: fixed;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; letter-spacing: .005em; }
h1 { font-size: 2.3rem; margin: .2rem 0 .5rem; color: var(--green); }
h2 { font-size: 1.6rem; margin: 0 0 .8rem; color: var(--green); display: flex; align-items: center; gap: .55rem; }
h2::before { content: ""; flex: none; width: 1.35em; height: .95em; background: var(--vesica) center / contain no-repeat; }
h3 { font-size: 1.18rem; margin: 1.1rem 0 .4rem; color: var(--green-2); }
a { color: var(--sky); }
img { max-width: 100%; display: block; }
button, select, input, textarea { font: inherit; }


.top {
  position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.6rem;
  padding: .6rem 1.5rem; color: #fff;
  background:
    var(--flower) 0 0 / 40px 69px,
    linear-gradient(120deg, #172d20 0%, #24452f 45%, #3a5f3f 100%);
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--gold-line) 20%, #f0d58a 50%, var(--gold-line) 80%, transparent) 1;
  box-shadow: 0 3px 14px rgba(10, 25, 15, .25);
}
.brand { color: #fff; text-decoration: none; display: flex; align-items: center; gap: .7rem; }
.brand .emblem { width: 46px; height: 46px; color: #e2c170; flex: none; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.brand:hover .emblem { transform: rotate(60deg); } 
.brand-text { font: 600 1.4rem var(--serif); letter-spacing: .02em; display: flex; flex-direction: column; line-height: 1.05; }
.brand-text small { font: 400 .78rem "Segoe UI", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #d9c998; margin-top: .2rem; }
.top nav { display: flex; flex-wrap: wrap; gap: .2rem; }
.top nav a { color: #eef3e6; text-decoration: none; padding: .38rem .85rem; border-radius: 999px; font-size: .95rem; border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: .4rem; }
.ico { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.top nav a .ico { color: #e2c170; }
h1 .h1ico { width: .95em; height: .95em; color: var(--gold-line); margin-right: .4em; vertical-align: -.1em; stroke-width: 1.4; }
.top nav a.on .ico { color: var(--gold); }
.top nav a:hover { border-color: rgba(226, 193, 112, .55); background: rgba(255,255,255,.06); }
.top nav a.on { background: #f7efd4; color: var(--green); font-weight: 600; border-color: #e2c170; }

main { max-width: 1500px; margin: 0 auto; padding: 1.5rem 1.5rem 4rem; }
.loading { color: var(--muted); }
.lede { font-size: 1.15rem; color: var(--muted); max-width: 70ch; margin: 0 0 1.2rem; }
.answer {
  background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--green);
  border-radius: var(--radius); padding: 1rem 1.3rem; margin: 0 0 1.5rem; box-shadow: var(--shadow); font-size: 1.08rem;
}


.chips { display: flex; flex-wrap: wrap; gap: .45rem; margin: .5rem 0; }
.chip {
  display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .75rem; border-radius: 999px;
  background: var(--green-soft); color: var(--green); font-size: .9rem; border: 1px solid transparent;
}
.chip.red { background: var(--red-soft); color: var(--red); }
.chip.sky { background: var(--sky-soft); color: var(--sky); }
.chip.gold { background: var(--gold-soft); color: var(--gold); }
.chip.plain { background: #efeadc; color: var(--muted); }
button.chip { cursor: pointer; }
button.chip.pick { border-color: var(--line); background: var(--card); color: var(--ink); }
button.chip.pick.on { background: var(--green); color: #fff; border-color: var(--green); }
.dot { width: .6rem; height: .6rem; border-radius: 50%; display: inline-block; background: #3b8a4d; }
.dot.away { background: #b9b09b; }


.search { width: 100%; max-width: 480px; padding: .65rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 1.1rem; margin: 1rem 0 2.2rem; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  text-decoration: none; color: inherit; box-shadow: var(--shadow); display: flex; flex-direction: column;
  transition: transform .12s ease, box-shadow .12s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(40,35,20,.12); }
.card .pic { aspect-ratio: 4 / 3; background: #e9e3d3 center / cover no-repeat; }
.card .body { padding: .75rem .9rem .9rem; }
.card .name { font: 600 1.1rem Georgia, serif; }
.card .sub { color: var(--muted); font-size: .88rem; margin-top: .15rem; }
.card .glance { font-size: .9rem; margin-top: .45rem; }
.section-title { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.section-title .count { color: var(--muted); font-size: 1rem; }


.bird { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 2rem; align-items: start; }
.rail { position: sticky; top: 80px; display: flex; flex-direction: column; gap: .15rem; font-size: .95rem; }
.rail a { text-decoration: none; color: var(--muted); padding: .3rem .7rem; border-radius: 8px; border-left: 3px solid transparent; }
.rail a:hover { background: #ece6d6; color: var(--ink); }
.rail a.on { color: var(--green); border-left-color: var(--green); background: var(--green-soft); font-weight: 600; }
.rail .back { margin-bottom: .6rem; color: var(--sky); }
.hero { display: grid; grid-template-columns: minmax(260px, 420px) 1fr; gap: 1.6rem; align-items: start; margin-bottom: 1.6rem; }
.hero .pic { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: #e9e3d3; }
.hero .pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hero .sci { font-style: italic; color: var(--muted); margin: 0; }
.hero .glance { font-size: 1.2rem; margin: .8rem 0; }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.btn {
  border: 1px solid var(--green); background: var(--green); color: #fff; border-radius: 999px;
  padding: .5rem 1.1rem; cursor: pointer; font-weight: 600; text-decoration: none; display: inline-block;
}
.btn.ghost { background: transparent; color: var(--green); }
.btn.small { padding: .25rem .8rem; font-size: .9rem; font-weight: 500; }
.btn.warn { border-color: var(--red); color: var(--red); background: transparent; }
.block {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.5rem;
  margin-bottom: 1.4rem; box-shadow: var(--shadow);
}
.block p { margin: .35rem 0 .7rem; max-width: 85ch; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 1.2rem; }
.plumage { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.plumage .photos { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--line); }
.plumage .photos.one { grid-template-columns: 1fr; }
.plumage .photos img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #e9e3d3; }
.plumage .txt { padding: .8rem 1rem 1rem; }
.plumage h3 { margin: 0 0 .3rem; }
.credit { font-size: .74rem; color: var(--muted); line-height: 1.35; padding: .35rem .6rem 0; }
.credit a { color: var(--muted); }
.nophoto { padding: 2rem 1rem; text-align: center; color: var(--muted); background: #f1ecdf; font-size: .9rem; }
.twocol { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: .6rem 2rem; }
.kv { margin: .2rem 0 .9rem; }
.kv b { display: block; color: var(--green); font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; }
ul.tidy { margin: .3rem 0 .8rem; padding-left: 1.2rem; }
ul.tidy li { margin: .25rem 0; }
.mnemonic { font: italic 1.3rem Georgia, serif; color: var(--red); margin: .2rem 0 .8rem; }


.clips { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: .8rem; margin-bottom: 1rem; }
.clip { border: 1px solid var(--line); border-radius: 12px; padding: .7rem .9rem; background: #fff; }
.clip .what { font-weight: 600; }
.clip .where { color: var(--muted); font-size: .88rem; }
.clip audio { width: 100%; margin: .45rem 0 .2rem; height: 38px; }
.clip .notes { font-size: .85rem; color: var(--ink); margin-top: .3rem; }
.kindhead { display: flex; align-items: baseline; gap: .6rem; margin: 1.1rem 0 .5rem; }
.kindhead h3 { margin: 0; }
.kindhead span { color: var(--muted); font-size: .9rem; }

.quiz { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.quiz .row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: .8rem; }
.choice {
  display: flex; flex-direction: column; border: 2px solid var(--line); border-radius: 12px; overflow: hidden;
  background: #fff; cursor: pointer; padding: 0; text-align: left;
}
.choice img, .choice .ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #e9e3d3; }
.choice span { padding: .5rem .7rem; font-weight: 600; }
.choice.right { border-color: #3b8a4d; box-shadow: 0 0 0 3px #cfe6d3; }
.choice.wrong { border-color: var(--red); opacity: .7; }
.feedback { font-size: 1.1rem; }
.score { font: 600 1.1rem Georgia, serif; color: var(--green); }
table.lib, table.plain { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; }
table.lib td, table.lib th, table.plain td, table.plain th { padding: .6rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
table.lib th, table.plain th { background: var(--green-soft); color: var(--green); font-size: .9rem; }
table.lib audio { width: 100%; min-width: 220px; height: 34px; }
table.lib .nm { font-weight: 600; white-space: nowrap; }
table.lib .nm a { color: var(--ink); text-decoration: none; }


.yardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); gap: .6rem; }
.yardpic { display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; background: #fff; border: 1px solid var(--line);
  text-decoration: none; color: var(--muted); font-size: .78rem; }
.yardpic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #1f1d19; }
.yardpic span { padding: .25rem .45rem; }


.camgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 1rem; margin-top: 1rem; }
.camcard { border: 2px solid var(--gold-soft); border-radius: 12px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.camcard.tagged { border-color: var(--green-soft); }
.camcard.flash { box-shadow: 0 0 0 4px var(--gold); transition: box-shadow 2s; }
.vidwrap { position: relative; aspect-ratio: 16 / 9; background: #1f1d19; }
.vidwrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.playbtn { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(20, 30, 22, .72); color: #fff; font-size: 1.6rem; padding-left: 5px; box-shadow: 0 2px 12px rgba(0,0,0,.35); }
.playbtn:hover { background: var(--green); }
.camcard video, .camcard img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #1f1d19; display: block; }
.camcard .txt { padding: .7rem .8rem .8rem; display: flex; flex-direction: column; gap: .45rem; }
.camcard .where { color: var(--muted); font-size: .82rem; word-break: break-all; }
.camcard select, .camcard input { padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: .92rem; min-width: 0; }
.saw { background: var(--green-soft); border-radius: 8px; padding: .5rem .6rem; font-size: .92rem; display: flex; flex-direction: column; gap: .35rem; }
.saw.muted { background: #f1ecdf; color: var(--muted); }
.vbar { position: relative; height: 14px; background: #fff; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.vbar span { position: absolute; top: 0; bottom: 0; cursor: pointer; background: #7fb48a; }
.vbar span.n2 { background: #4f955e; } .vbar span.n3 { background: #2f6f3f; } .vbar span.n4 { background: #1d4a29; }
.frames { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.frames img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; cursor: pointer; background: #1f1d19; }
.ai { background: #fff; border-radius: 8px; padding: .45rem .6rem; display: flex; flex-direction: column; gap: .3rem; }
.hours { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; height: 110px; align-items: end; margin: .6rem 0 .3rem; max-width: 760px; }
.hbar { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.hbar span { width: 100%; background: var(--green); border-radius: 3px 3px 0 0; min-height: 2px; }
.hbar em { position: absolute; bottom: -1.3rem; font-size: .72rem; font-style: normal; color: var(--muted); }
.heard { background: var(--sky-soft); border-radius: 8px; padding: .5rem .6rem; font-size: .92rem; display: flex; flex-direction: column; gap: .3rem; }
.heard.muted { background: #f1ecdf; color: var(--muted); }
.heard .hrow { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.btn[disabled] { opacity: .5; cursor: default; }
.tagrow { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.tagrow select { flex: 1; }


.spectro { position: relative; height: 170px; margin: .4rem 0 .25rem; border-radius: 8px; overflow: hidden; background: #0c0e12; }
.spec-scroll { position: absolute; inset: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: #55705b #0c0e12; }
.spec-inner { position: relative; height: 100%; display: inline-block; min-width: 100%; cursor: pointer; vertical-align: top; }
.spec-inner img { height: 100%; width: auto; min-width: 100%; display: block; } 
.spectro .head, .specbox .head { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: #fff; box-shadow: 0 0 6px #fff; pointer-events: none; }
.spectro .khz { position: absolute; left: 0; top: 0; bottom: 0; width: 30px; pointer-events: none; background: linear-gradient(90deg, rgba(12,14,18,.75), transparent); }
.spectro .khz b { position: absolute; left: 4px; transform: translateY(-50%); font: 600 .66rem "Segoe UI", sans-serif; color: rgba(255,255,255,.8); text-shadow: 0 0 3px #000; }
.spectro .spec-note { position: absolute; inset: 0; display: grid; place-items: center; color: #cfd6cf; font-size: .85rem; pointer-events: none; }
.spectro.ready .spec-note { display: none; }
.spectro.failed { height: 30px; }
.spec-big { position: absolute; right: 6px; top: 6px; border: 0; border-radius: 999px; padding: .2rem .65rem; cursor: pointer;
  background: rgba(20,30,22,.75); color: #fff; font: 600 .78rem "Segoe UI", sans-serif; }
.spec-big:hover { background: var(--green); }
.spectro.failed .spec-big { display: none; }
.spec-help { background: var(--sky-soft); border-radius: 8px; padding: .5rem .8rem; font-size: .92rem; }
.camcard .spectro { margin: 0; border-radius: 0; height: 120px; }
.livecard .spectro { height: 150px; }


.specbox { position: fixed; inset: 0; z-index: 50; background: rgba(10, 14, 12, .82); display: grid; place-items: center; padding: 2vh 2vw; }
.sb-panel { background: var(--card); border-radius: var(--radius); width: min(1500px, 96vw); padding: 1rem 1.2rem; box-shadow: 0 10px 40px rgba(0,0,0,.4); }
.sb-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .7rem; font: 600 1.15rem Georgia, serif; }
.sb-body { display: grid; grid-template-columns: 58px 1fr; height: min(64vh, 560px); }
.sb-axis { position: relative; }
.sb-axis b { position: absolute; right: 8px; transform: translateY(-50%); font: 600 .78rem "Segoe UI", sans-serif; color: var(--muted); white-space: nowrap; }
.sb-scroll { overflow-x: auto; overflow-y: hidden; background: #0c0e12; border-radius: 8px; padding-bottom: 22px; }
.sb-inner { position: relative; height: 100%; display: inline-block; min-width: 100%; cursor: crosshair; }
.sb-inner img { height: 100%; width: auto; min-width: 100%; display: block; }
.sb-grid { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed rgba(255,255,255,.18); pointer-events: none; }
.sb-ticks { position: absolute; left: 0; right: 0; bottom: -20px; height: 20px; pointer-events: none; }
.sb-ticks span { position: absolute; transform: translateX(-50%); font: .72rem "Segoe UI", sans-serif; color: #b8c4b8; }
.sb-ticks span::before { content: ""; position: absolute; left: 50%; top: -6px; height: 5px; border-left: 1px solid #b8c4b8; }


.switch { display: flex; gap: .6rem; align-items: flex-start; margin: .3rem 0 .8rem; cursor: pointer; }
.switch input { width: 1.2rem; height: 1.2rem; margin-top: .2rem; accent-color: var(--green); }
.latest ul.tidy li { margin: .35rem 0; }
.meter { height: 10px; max-width: 420px; background: #e9e3d3; border-radius: 5px; overflow: hidden; margin: .4rem 0 .2rem; }
.meter span { display: block; height: 100%; background: linear-gradient(90deg, #6fae5a, #e8d25b 70%, #c2571a); transition: width .6s; }
.livegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 1rem; }
.livecard { border: 1px solid var(--line); border-radius: 12px; padding: .7rem .8rem; background: #fff; display: flex; flex-direction: column; gap: .5rem; }
.lc-head { display: flex; gap: .7rem; align-items: center; }
.lc-head img, .lc-head .ph { width: 76px; height: 76px; object-fit: cover; border-radius: 10px; background: #e9e3d3; flex: none; }
.lc-head .name { font: 600 1.1rem Georgia, serif; }
.livecard .clip { padding: .4rem .5rem; }
.nowgrid { display: flex; flex-wrap: wrap; gap: .8rem; }
.nowcard { display: flex; gap: .6rem; align-items: center; padding: .5rem .8rem .5rem .5rem; border-radius: 999px; background: var(--green-soft); text-decoration: none; color: var(--ink); animation: pop .5s ease; }
.nowcard img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
@keyframes pop { from { transform: scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nowcard { animation: none; } .meter span { transition: none; } }
.clockwrap { display: grid; grid-template-columns: minmax(280px, 560px) 1fr; gap: 1.5rem; align-items: center; }
.clock { width: 100%; height: auto; }
.clock .ring { fill: none; stroke: #e2dccb; stroke-width: 1; }
.clock .night { fill: #1f2a44; opacity: .08; }
.clock .sunline { stroke: #d9a520; stroke-width: 2; stroke-dasharray: 4 3; }
.clock text { font: 12px "Segoe UI", sans-serif; fill: var(--muted); }
.clock text.sun { fill: #9a6b12; font-weight: 600; }
.clock text.mid { font: 600 16px Georgia, serif; fill: var(--green); }
.clock text.mid2 { font-size: 11px; }
.legend { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .35rem; }
.legend .sw { display: inline-block; width: .9rem; height: .9rem; border-radius: 50%; margin-right: .45rem; vertical-align: -2px; }
@media (max-width: 900px) { .clockwrap { grid-template-columns: 1fr; } }


form.log { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: .8rem 1rem; align-items: end; }
form.log label { display: flex; flex-direction: column; font-size: .9rem; color: var(--muted); gap: .25rem; }
form.log input, form.log select, form.log textarea { padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }
form.log .wide { grid-column: 1 / -1; }
.entry { display: grid; grid-template-columns: 110px 1fr auto; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); align-items: start; }
.entry .date { color: var(--muted); font-size: .9rem; }
.entry .who { font-weight: 600; }
.saved { color: var(--green); font-size: .9rem; margin-left: .6rem; }




.block, .answer {
  border: 1px solid rgba(201, 161, 76, .45);
  box-shadow: inset 0 0 0 4px var(--card), inset 0 0 0 5px rgba(201, 161, 76, .22), var(--shadow);
  position: relative;
}
.answer { border-left: 1px solid rgba(201, 161, 76, .45); background: linear-gradient(100deg, #fbf6e6, var(--card) 40%); }
.answer::before { 
  content: ""; position: absolute; right: 12px; top: 10px; width: 34px; height: 34px; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-30 -30 60 60'%3E%3Cg fill='none' stroke='%23c9a14c' stroke-width='1.4'%3E%3Ccircle r='9'/%3E%3Ccircle cx='9' r='9'/%3E%3Ccircle cx='-9' r='9'/%3E%3Ccircle cx='4.5' cy='7.79' r='9'/%3E%3Ccircle cx='-4.5' cy='7.79' r='9'/%3E%3Ccircle cx='4.5' cy='-7.79' r='9'/%3E%3Ccircle cx='-4.5' cy='-7.79' r='9'/%3E%3Ccircle r='18'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.answer { padding-right: 3.6rem; }
.block::after { 
  content: ""; position: absolute; right: 10px; bottom: 10px; width: 42px; height: 26px; opacity: .35; pointer-events: none;
  
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 165.8 104'%3E%3Cg fill='none' stroke='%23c9a14c' stroke-width='2.2'%3E%3Crect width='161.8' height='100'/%3E%3Cpath stroke-width='1.2' d='M100 0V100M100 61.8H161.8M123.6 61.8V100M100 76.4H123.6M114.6 61.8V76.4'/%3E%3Cpath d='M0 100A100 100 0 0 1 100 0A61.8 61.8 0 0 1 161.8 61.8A38.2 38.2 0 0 1 123.6 100A23.6 23.6 0 0 1 100 76.4A14.6 14.6 0 0 1 114.6 61.8'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}


.section-title { align-items: center; }
.section-title::after { content: ""; flex: 1; min-width: 40px; height: 1px; background: linear-gradient(90deg, var(--gold-line), transparent); }


.card { border-color: rgba(201, 161, 76, .35); border-radius: 22px 22px var(--radius) var(--radius); }
.card .pic { border-radius: 120px 120px 0 0 / 70px 70px 0 0; margin: 8px 8px 0; border: 1px solid rgba(201, 161, 76, .5); }
.card .name { font-family: var(--serif); font-size: 1.2rem; color: var(--green); }
.card:hover { box-shadow: 0 0 0 2px rgba(201, 161, 76, .55), 0 10px 26px rgba(40, 35, 15, .14); transform: translateY(-3px); }


.btn { border-color: var(--green); background: linear-gradient(180deg, #2f5a3c, var(--green)); letter-spacing: .01em; }
.btn:hover { box-shadow: 0 0 0 2px rgba(226, 193, 112, .7); }
.btn.ghost { background: rgba(255, 252, 242, .8); }
.chip { border-color: rgba(201, 161, 76, .25); }
button.chip.pick.on { background: var(--green); border-color: #e2c170; }


.rail a.on { border-left-color: var(--gold-line); background: linear-gradient(90deg, var(--gold-soft), transparent); color: var(--green); }


.hero .pic { border-radius: 200px 200px var(--radius) var(--radius) / 120px 120px var(--radius) var(--radius); border: 1px solid rgba(201, 161, 76, .6); }
.hero .pic img { border-radius: inherit; }


.spectro { box-shadow: 0 0 0 1px rgba(201, 161, 76, .45); }
.clock .ring { stroke: rgba(201, 161, 76, .45); }

.autonote { background: var(--red-soft); border-left: 3px solid var(--red); border-radius: 8px; padding: .5rem .8rem; font-size: .92rem; margin: .4rem 0; }


ol.facts { margin: .2rem 0; padding-left: 1.4rem; display: flex; flex-direction: column; gap: .75rem; }
ol.facts li { padding-left: .3rem; }
ol.facts li::marker { color: var(--gold); font: 600 1.05rem var(--serif); }
ol.facts li > div { font-size: 1.06rem; }
.heat { display: grid; grid-template-columns: minmax(140px, 190px) 1fr; gap: 3px 10px; align-items: center; overflow-x: auto; }
.heat .hl { font-size: .9rem; text-align: right; white-space: nowrap; }
.heat .hl a { color: var(--ink); text-decoration: none; }
.heat .hh, .heat .hc { display: grid; grid-template-columns: repeat(24, minmax(16px, 1fr)); gap: 3px; min-width: 460px; }
.heat .hh span { font-size: .7rem; color: var(--muted); }
.heat .hc i { height: 22px; border-radius: 4px; background: rgba(36, 69, 47, var(--a)); border: 1px solid rgba(201, 161, 76, .25); }
.heat .hc.all i { background: rgba(138, 106, 31, var(--a)); }
.daybars { display: grid; grid-template-columns: repeat(60, 1fr); gap: 2px; height: 150px; align-items: end; overflow-x: auto; }
.daybars > div { height: 100%; display: flex; flex-direction: column-reverse; position: relative; min-width: 6px; }
.daybars i { display: block; width: 100%; }
.daybars i.c { background: var(--green-2); border-radius: 2px 2px 0 0; }
.daybars i.s { background: var(--gold-line); }
.daybars em { position: absolute; bottom: -1.2rem; left: 0; font-size: .66rem; font-style: normal; color: var(--muted); white-space: nowrap; }
.daybars + p { margin-top: 1.6rem; }
.key { display: inline-block; width: .8rem; height: .8rem; border-radius: 2px; vertical-align: -1px; }
.key.c { background: var(--green-2); } .key.s { background: var(--gold-line); }
.ainotes { background: linear-gradient(100deg, #fbf6e6, var(--card)); border-left: 3px solid var(--gold-line); padding: .6rem 1rem; border-radius: 8px; }


.replist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: .8rem; }
.repcard { display: flex; flex-direction: column; gap: .3rem; padding: .8rem 1rem; border-radius: 12px; text-decoration: none; color: var(--ink);
  background: #fff; border: 1px solid rgba(201, 161, 76, .45); }
.repcard:hover { box-shadow: 0 0 0 2px rgba(201, 161, 76, .5); }
.repcard b { font-family: var(--serif); color: var(--green); font-size: 1.05rem; }
.rep-head { display: grid; grid-template-columns: 1fr 150px; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.rep-head svg { width: 150px; height: 150px; }
.rep-head .geo-lines { stroke: var(--gold-line); }
.rep-head .phyllo circle { fill: var(--gold-line); }
.rep-head .geo-spiral { stroke: var(--gold); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: .8rem; margin-bottom: 1.4rem; }
.tiles div { background: var(--card); border: 1px solid rgba(201, 161, 76, .45); border-radius: 14px; padding: .7rem 1rem; display: flex; flex-direction: column; }
.tiles b { font: 600 2rem var(--serif); color: var(--green); line-height: 1.1; }
.tiles span { color: var(--muted); font-size: .88rem; }
.tiles .wait b { color: var(--gold); }
ul.obs { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .8rem; }
ul.obs li { display: grid; grid-template-columns: 2rem 1fr; gap: .4rem; }
ul.obs .oi { font-size: 1.2rem; text-align: center; color: var(--gold); }
@media print {
  .top, .noprint, .rail { display: none !important; }
  body { background: #fff; }
  .block, .answer { box-shadow: none; break-inside: avoid; }
  .phyllo, .phyllo circle, .geo-spiral { animation: none; stroke-dashoffset: 0; }
}


.geo-hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 360px); align-items: center; gap: 1rem 2rem;
  margin: .2rem 0 1.4rem; padding: 1.6rem 1.8rem; border-radius: 24px; overflow: hidden; color: #f6f0dc;
  background:
    var(--flower) 0 0 / 50px 86.7px,
    radial-gradient(ellipse at 80% 50%, rgba(226, 193, 112, .18), transparent 60%),
    linear-gradient(125deg, #172d20, #24452f 55%, #3f6b47);
  border: 1px solid rgba(226, 193, 112, .55);
  box-shadow: inset 0 0 0 5px rgba(23, 45, 32, .9), inset 0 0 0 6px rgba(226, 193, 112, .3), var(--shadow);
}
.geo-hero h1 { color: #fbf3d8; font-size: 2.6rem; margin: 0 0 .4rem; }
.geo-hero p { margin: .3rem 0; font-size: 1.08rem; color: #e6e9d8; max-width: 62ch; }
.geo-hero b { color: #f3d98f; }
.geo-hero .motto { font: italic 1.02rem var(--serif); color: #d9c998; letter-spacing: .02em; }
.geo-hero svg { width: 100%; height: auto; max-height: 330px; }
.phyllo circle { fill: #e2c170; transform-box: fill-box; transform-origin: center; animation: seed-in .9s cubic-bezier(.2, .8, .3, 1.2) both; }
.phyllo { animation: turn 240s linear infinite; transform-origin: center; transform-box: fill-box; }
.geo-lines { fill: none; stroke: #e2c170; stroke-opacity: .55; stroke-width: 1; }
.geo-spiral { fill: none; stroke: #f3d98f; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: draw 5s ease-out .4s forwards; }
@keyframes seed-in { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes turn { to { transform: rotate(360deg); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .phyllo, .phyllo circle, .geo-spiral { animation: none; stroke-dashoffset: 0; }
  .brand .emblem { transition: none; }
}

@media (max-width: 900px) {
  .bird { grid-template-columns: 1fr; }
  .rail { position: static; flex-direction: row; flex-wrap: wrap; }
  .hero { grid-template-columns: 1fr; }
  main { padding: 1rem 1rem 3rem; }
  .entry { grid-template-columns: 1fr; gap: .2rem; }
  .geo-hero { grid-template-columns: 1fr; }
  .geo-hero svg { max-height: 220px; }
  .brand-text small { display: none; }
}



.yardpic { position: relative; }
button.yardpic { padding: 0; cursor: pointer; text-align: left; font: inherit; font-size: .78rem; }
.namebtn { position: absolute; top: .35rem; right: .35rem; border: 1px solid var(--gold-line); background: rgba(255, 252, 242, .92);
  color: var(--gold); border-radius: 999px; font: 600 .75rem var(--serif); padding: .15rem .5rem; cursor: pointer; }
.namebtn:hover { background: var(--gold-soft); }
.reghead { display: grid; grid-template-columns: minmax(140px, 240px) 1fr; gap: 1.2rem; align-items: start; }
.regface { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 120px 120px 12px 12px; border: 2px solid var(--gold-line); background: #1f1d19; }
.regnew { display: grid; grid-template-columns: minmax(140px, 260px) 1fr; gap: 1.2rem; align-items: start; }
.regform { display: grid; gap: .6rem; max-width: 520px; }
.regform label { display: grid; gap: .2rem; font-weight: 600; color: var(--green); }
.regform input { font: inherit; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.regstrip { display: flex; gap: .6rem; overflow-x: auto; padding-bottom: .4rem; }
.regstrip figure { flex: 0 0 160px; margin: 0; }
.regstrip img, .regsugg img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: #1f1d19; display: block; }
.regstrip figcaption, .regsugg figcaption { font-size: .78rem; color: var(--muted); padding-top: .2rem; }
.regsugg { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: .8rem; }
.regsugg figure { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .4rem; }
.regsugg .tagrow { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .3rem; }
.linkbtn { border: 0; background: none; cursor: pointer; color: var(--gold); padding: 0 .2rem; font-size: .85rem; }
@media (max-width: 640px) { .reghead, .regnew { grid-template-columns: 1fr; } .regface { max-width: 320px; } }


.learnstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: .7rem; margin: 1rem 0; }
.learnstats div { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .7rem .9rem; box-shadow: var(--shadow); }
.learnstats b { display: block; font: 700 1.6rem var(--serif); color: var(--green); }
.learnstats span { color: var(--muted); font-size: .85rem; }
.lask { font-size: 1.2rem; font-family: var(--serif); margin: .8rem 0; }
.lpic img { max-width: min(100%, 520px); max-height: 380px; border-radius: 12px; display: block; margin-bottom: .8rem; }
.textchoices { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.choice.text span { padding: .8rem 1rem; }
.choice.x { opacity: .55; }
.lexplain { margin: .5rem 0; padding: .6rem .8rem; background: var(--green-soft); border-radius: 10px; font-size: 1rem; }
.hidden-audio { display: none; }
.mastery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: .3rem 1.2rem; }
.mrow { display: grid; grid-template-columns: 1fr 110px 3rem; gap: .5rem; align-items: center; text-decoration: none; color: var(--ink); font-size: .9rem; }
.mrow i { height: .55rem; background: var(--gold-soft); border-radius: 99px; overflow: hidden; }
.mrow i b { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-line), var(--green)); }
.mrow em { font-style: normal; color: var(--muted); font-size: .8rem; text-align: right; }

.center { text-align: center; margin-top: 1rem; }


.fixbtn { right: auto; left: .35rem; }
.fixgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: .8rem; margin-top: 1rem; }
.fixcard { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .45rem; font-size: .85rem; }
.fixcard.fixed { border-color: var(--gold-line); box-shadow: 0 0 0 2px var(--gold-soft); }
.fixcard img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 9px; background: #1f1d19; display: block; }
.fixcard figcaption { display: grid; gap: .3rem; padding-top: .35rem; }
.fixcard select { max-width: 100%; flex: 1 1 140px; font: inherit; padding: .25rem; border-radius: 8px; border: 1px solid var(--line); }
.fixcard .tagrow { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; }
.fixcard { min-width: 0; overflow: hidden; }
.fixcard.picked { border-color: var(--green); box-shadow: 0 0 0 2px var(--green); }
.fixcard .agree { display: flex; gap: .4rem; align-items: center; cursor: pointer; background: #f3f6ee; border-radius: 8px; padding: .3rem .45rem; }
.fixcard .agree input { width: 1.15rem; height: 1.15rem; flex: none; accent-color: var(--green); }
.batchbar { position: sticky; top: .5rem; z-index: 5; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: 1rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .55rem .8rem; box-shadow: var(--shadow); }
.batchbar .grow { flex: 1 1 auto; }

.reelwrap { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: 1rem; align-items: start; }
.reelwrap video { width: 100%; border-radius: 12px; background: #111; display: block; }
.reelch { margin: 0; padding-left: 1.3rem; display: grid; gap: .35rem; font-size: .92rem; }
.reelch li { padding: .15rem .3rem; border-radius: 8px; }
.reelch li.now { background: var(--gold-soft); }
.reelch .linkbtn { text-align: left; }
.reelch a.where { margin-left: .3rem; font-size: .8rem; }
@media (max-width: 760px) { .reelwrap { grid-template-columns: 1fr; } }
.migr .chip { margin: .15rem .1rem; }
.webcamprev { margin: .5rem 0 0; max-width: 640px; }
.webcamprev img { width: 100%; border-radius: 12px; display: block; background: #111; }
.setrow { display: flex; margin: .55rem 0; }

.reelgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .8rem; margin: .4rem 0 1rem; }
.reelcard { font: inherit; text-align: left; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card);
  cursor: pointer; display: flex; flex-direction: column; box-shadow: var(--shadow); color: var(--ink); }
.reelcard:hover { border-color: var(--gold-line); }
.reelcard.reelday-on { border-color: var(--green); box-shadow: 0 0 0 2px var(--green); }
.suggcard { display: flex; flex-direction: column; gap: .4rem; }
.suggcard .reelcard { flex: 1; }
.suggcard .tagrow { display: flex; gap: .4rem; }
.suggcard .tagrow .btn { flex: 1; justify-content: center; }
.rc-pic { position: relative; aspect-ratio: 16 / 9; background: #1f1d19; display: block; }
.rc-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-pic i { position: absolute; right: 6px; bottom: 6px; font: 600 .74rem/1 sans-serif; font-style: normal; color: #fff; background: rgba(0, 0, 0, .55); padding: .25rem .45rem; border-radius: 999px; }
.rc-body { display: flex; flex-direction: column; gap: .15rem; padding: .45rem .6rem .55rem; }
.rc-body b { color: var(--green); }
.rc-body .where { font-size: .78rem; }
.rc-who { font-size: .78rem; color: var(--ink); }
#reelGallery h2 .count { font: 400 .85rem var(--sans, sans-serif); color: var(--muted); margin-left: .4rem; }
@media (max-width: 600px) { .reelgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.nb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 164px)); gap: .9rem; margin: .4rem 0 .6rem; }
.nb-grid-small { grid-template-columns: repeat(auto-fill, minmax(104px, 118px)); gap: .7rem; }
.nb-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow); min-width: 0; }
.nb-card a { text-decoration: none; color: inherit; }
.nb-card.nb-have { border-color: var(--gold-line); }
.nb-pic { position: relative; display: grid; place-items: center; aspect-ratio: 1; background: var(--gold-soft); color: var(--green); }
.nb-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nb-pic .ico { width: 38%; height: 38%; opacity: .6; }
.nb-tick { position: absolute; top: 6px; right: 6px; font-style: normal; font: 700 .8rem/1 sans-serif; background: var(--green); color: #fff; border-radius: 999px; padding: .25rem .4rem; }
.nb-body { display: flex; flex-direction: column; gap: .15rem; padding: .45rem .55rem .55rem; font-size: .85rem; overflow-wrap: anywhere; }
.nb-body b { color: var(--green); font-size: .95rem; line-height: 1.2; }
.nb-body .where { font-size: .76rem; line-height: 1.3; }
.nb-row { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; font-size: .78rem; margin-top: .15rem; }
.nb-row .chip { white-space: nowrap; font-size: .72rem; padding: .15rem .5rem; }
.nb-small .nb-body { padding: .35rem .45rem .45rem; }
.nb-small .nb-body b { font-size: .82rem; }
@media (max-width: 600px) { .nb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nb-grid-small { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fixcard figcaption { overflow-wrap: anywhere; }
.fixcard select { width: 100%; min-width: 0; flex-basis: 100%; }


.uprow { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.uprow label.btn { cursor: pointer; }
.uprow select, .uprow input { font: inherit; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; min-width: 0; flex: 1 1 220px; }
.upitem { display: grid; grid-template-columns: minmax(0, 1fr) 140px 7rem; gap: .6rem; align-items: center; font-size: .88rem; margin-top: .45rem; }
.upitem span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upitem i { height: .55rem; background: var(--gold-soft); border-radius: 99px; overflow: hidden; }
.upitem i b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-line), var(--green)); transition: width .2s; }
.upitem em { font-style: normal; color: var(--muted); }
.upitem.done em { color: var(--green); } .upitem.failed em { color: var(--red); }
@media (max-width: 640px) { .upitem { grid-template-columns: 1fr 5rem; } .upitem i { grid-column: 1 / -1; grid-row: 2; } }


.momgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: .9rem; margin-top: .8rem; }
.moment { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: .5rem; min-width: 0; overflow: hidden; }
.moment img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; display: block; background: #1f1d19; }
.moment figcaption { display: grid; gap: .35rem; padding-top: .45rem; font-size: .88rem; overflow-wrap: anywhere; }
.moment .mcap { font: 600 1.02rem var(--serif); color: var(--ink); }
.moment .tagrow { display: flex; flex-wrap: wrap; gap: .3rem; }
.moment.cand { border-style: dashed; }
.snaprow { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .35rem 0; }
.momdialog { max-width: 560px; display: grid; gap: .7rem; }
.momdialog img { width: 100%; max-height: 50vh; object-fit: contain; border-radius: 10px; background: #1f1d19; }
.momdialog label { display: grid; gap: .2rem; font-weight: 600; color: var(--green); }
.momdialog input { font: inherit; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 8px; }
.toast { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); background: var(--green); color: #fff; padding: .7rem 1.1rem;
  border-radius: 999px; box-shadow: var(--shadow); z-index: 60; }
.toast a { color: var(--gold-soft); }


.card .pic { overflow: hidden; }
.card .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }


body.public #liveStart, body.public #liveStop, body.public label:has(#micSel), body.public label:has(#liveAuto),
body.public section:has([data-sch]), body.public [data-del], body.public #learnReset, body.public [data-mdel],
body.public [data-act="forget"], body.public [data-fixundo] { display: none !important; }


.progrow { display: grid; grid-template-columns: 7rem minmax(0, 1fr) auto; gap: .7rem; align-items: center; margin: .45rem 0; }
.progrow i { height: .7rem; background: var(--gold-soft); border-radius: 99px; overflow: hidden; }
.progrow i b { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-line), var(--green)); }
.progrow em { font-style: normal; color: var(--muted); font-size: .88rem; }
@media (max-width: 640px) { .progrow { grid-template-columns: 6rem minmax(0, 1fr); } .progrow em { grid-column: 1 / -1; } }


#subnav { display: flex; gap: .3rem; flex-wrap: wrap; padding: .55rem clamp(16px, 3vw, 2rem); background: var(--gold-soft);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
#subnav a { color: var(--green); text-decoration: none; padding: .32rem .8rem; border-radius: 999px; font-size: .92rem; border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
#subnav a .ico { color: var(--gold); }
#subnav a:hover { border-color: var(--gold-line); }
#subnav a.on { background: var(--green); color: #fff; font-weight: 600; }
#subnav a.on .ico { color: #e2c170; }
.top nav a { display: inline-flex; align-items: center; gap: .35rem; }
.who-btn { margin-left: auto; margin-right: .6rem; background: rgba(255,255,255,.08); color: #f7efd4; border: 1px solid rgba(226,193,112,.55);
  border-radius: 999px; padding: .3rem .8rem; font: inherit; font-size: .88rem; cursor: pointer; }
.who-btn:empty { display: none; }

.garden-link { margin-left: auto; margin-right: .5rem; display: inline-flex; align-items: center; gap: .35rem; color: #f7efd4; text-decoration: none;
  border: 1px solid rgba(226,193,112,.55); border-radius: 999px; padding: .3rem .8rem; font-size: .88rem; background: rgba(255,255,255,.08); white-space: nowrap; }
.garden-link:hover { background: rgba(255,255,255,.16); }
.garden-link svg { width: 17px; height: 17px; fill: none; stroke: #e2c170; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.garden-link + .who-btn { margin-left: 0; }
@media (max-width: 520px) { .garden-link span { display: none; } .garden-link { padding: .3rem .5rem; } }

@media (max-width: 700px) {
  .top nav#nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
    background: var(--green); border-top: 1px solid #e2c170; padding: .2rem .2rem calc(.2rem + env(safe-area-inset-bottom)); }
  .top nav#nav a { flex-direction: column; gap: .1rem; font-size: .7rem; padding: .35rem .1rem; border-radius: 10px; justify-content: center; text-align: center; }
  .top nav#nav a .ico { width: 22px; height: 22px; }
  #subnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  body { padding-bottom: 4.6rem; }
}
.top { position: relative; } 
.learned { background: var(--gold-soft); border-radius: 8px; padding: .3rem .45rem; display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }


.singres { display: grid; gap: .5rem; margin: .4rem 0 .6rem; }
.singbird { display: flex; gap: .7rem; align-items: center; text-decoration: none; color: var(--ink); background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: .4rem; }
.singbird img { width: 72px; height: 54px; object-fit: cover; border-radius: 8px; }
.singbird span { display: flex; flex-direction: column; gap: .2rem; }


.wxbars { display: flex; gap: .8rem; align-items: flex-end; height: 170px; margin: .6rem 0 .2rem; }
.wxbar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; font-size: .82rem; }
.wxbar i { width: 70%; max-width: 60px; background: linear-gradient(0deg, var(--sky), #7fb3a8); border-radius: 8px 8px 2px 2px; min-height: 3px; }
.wxbar b { color: var(--green); } .wxbar span { color: var(--muted); text-align: center; }


.feedfx { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
body.public .feeddel { display: none; }


.yl-year    { --roof: #3f6b47; --roof-hi: #5f8c66; --roof-soft: #e8efe0; }
.yl-winter  { --roof: #4a6f8f; --roof-hi: #7197b4; --roof-soft: #e4ecf3; }
.yl-summer  { --roof: #b08a34; --roof-hi: #d3b25e; --roof-soft: #f6eed6; }
.yl-passing { --roof: #2b6466; --roof-hi: #52898a; --roof-soft: #dfece9; }
.yl-hunters { --roof: #5b6470; --roof-hi: #808997; --roof-soft: #e9ebee; }
.yl-sky     { --roof: #5a6496; --roof-hi: #7f88b8; --roof-soft: #e7e9f4; }
.yl-water   { --roof: #2f6f8f; --roof-hi: #5893ae; --roof-soft: #e0edf4; }
.yl-new     { --roof: #6a8a3c; --roof-hi: #8eab5e; --roof-soft: #eef3e0; }
.yl-animal  { --roof: #6c7a6a; --roof-hi: #919e8f; --roof-soft: #ebefe9; }
.yl-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; margin-bottom: .5rem; }
.yl-head h2 { margin: 0; }
.yl-legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .85rem; color: var(--muted); margin: .2rem 0 1rem; }
.yl-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.yl-legend i { width: 16px; height: 11px; background: var(--roof); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.yl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 184px)); justify-content: start; gap: 1.3rem 1rem; padding: .3rem .4rem .6rem; }
.yl-house { position: relative; display: flex; flex-direction: column; padding-top: 42px; text-decoration: none; color: var(--ink);
  filter: drop-shadow(0 4px 8px rgba(30, 45, 35, .12)); transition: transform .18s ease; }
.yl-house:hover { transform: translateY(-3px); }
.yl-house:focus-visible { outline: 3px solid var(--gold-line); outline-offset: 4px; border-radius: 6px; }
.yl-roof { position: absolute; z-index: 2; top: 0; left: -6px; right: -6px; height: 48px; clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: repeating-linear-gradient(180deg, transparent 0 14px, rgba(255, 255, 255, .16) 14px 16px), linear-gradient(var(--roof-hi), var(--roof)); }
.yl-num { position: absolute; z-index: 3; top: 22px; left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, .92); color: var(--green);
  font: 700 .75rem/1 var(--serif, Georgia, serif); padding: .2rem .45rem; border-radius: 999px; }
.yl-front { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center;
  background: var(--card); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px; padding: .6rem .55rem .65rem; }
.yl-fresh .yl-front { border-color: var(--gold-line); box-shadow: 0 0 0 2px var(--gold-soft); }
.yl-hole { width: 92%; aspect-ratio: 1; height: auto; border-radius: 18%; overflow: hidden; display: grid; place-items: center; flex: none;
  background: var(--roof-soft); color: var(--roof); border: 4px solid var(--card); box-shadow: 0 0 0 3px var(--roof), inset 0 3px 8px rgba(0, 0, 0, .25); }
.yl-hole img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yl-hole .ico { width: 42px; height: 42px; }
.yl-perch { width: 36px; height: 7px; border-radius: 999px; margin: -.05rem 0 .15rem; background: linear-gradient(var(--roof-hi), var(--roof)); }
.yl-name { font: 700 1rem/1.2 var(--serif, Georgia, serif); color: var(--green); }
.yl-new { font-size: .76rem; }
.yl-first { font-size: .84rem; color: var(--muted); }
.yl-first b { color: var(--ink); font-weight: 600; }
.yl-facts { width: 100%; display: flex; flex-direction: column; gap: .3rem; text-align: left; font-size: .78rem; line-height: 1.3;
  background: var(--roof-soft); border-radius: 10px; padding: .45rem .6rem; }
.yl-foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: .25rem; padding-top: .2rem; }
.yl-foot .chip { font-size: .76rem; }
.yl-count { font-size: .74rem; color: var(--muted); }
@media (max-width: 600px) {
  .yl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; gap: 1.1rem .8rem; padding: .2rem .3rem .5rem; }
  .yl-house { padding-top: 36px; }
  .yl-roof { height: 42px; left: -4px; right: -4px; }
  .yl-num { top: 18px; font-size: .68rem; }
  .yl-front { padding: .75rem .5rem .65rem; }
  .yl-hole { width: 94%; }
  .yl-name { font-size: .98rem; }
  .yl-facts { font-size: .78rem; padding: .4rem .45rem; }
}
@media (prefers-reduced-motion: reduce) { .yl-house { transition: none; } .yl-house:hover { transform: none; } }

.yl-roof, .yl-legend, .yl-perch { display: none; }
.yl-house, .yl-house:is(*) { padding-top: 0; }
.yl-front { border-top: 1px solid var(--line); border-radius: 12px; padding-top: .55rem; }
.yl-fresh .yl-front { border-top-color: var(--gold-line); }
.yl-num { top: 10px; left: 10px; transform: none; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.yl-hole { box-shadow: 0 0 0 1px var(--line); border-width: 0; margin-bottom: .15rem; }
.yl-house a { color: inherit; text-decoration: none; }
a.yl-name { color: var(--green); }
a.yl-name:hover { text-decoration: underline; }
.yl-pickbtn { font: inherit; font-size: .74rem; border: 1px solid var(--line); background: var(--card); color: var(--muted); border-radius: 999px;
  padding: .12rem .55rem; cursor: pointer; margin-top: -.1rem; }
.yl-pickbtn:hover { color: var(--green); border-color: var(--gold-line); }
.yl-regs { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem; }
.yl-regs .chip { font-size: .74rem; text-decoration: none; }
.yeartabs { margin: -.3rem 0 1rem; }
.guidetabs { margin: 0 0 .9rem; }
.yeartabs a.chip { text-decoration: none; font-size: .95rem; padding: .35rem .9rem; }

.pickpanel { max-height: 90vh; overflow: auto; }
.pickgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; margin-top: .6rem; }
.pickone { position: relative; padding: 0; border: 3px solid transparent; border-radius: 12px; overflow: hidden; background: #1f1d19; cursor: pointer; aspect-ratio: 1; }
.pickone img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pickone:hover { border-color: var(--gold-line); }
.pickone.on { border-color: var(--green); }
.pickone i { position: absolute; left: 6px; bottom: 6px; font: 600 .7rem/1 sans-serif; font-style: normal; background: rgba(255, 255, 255, .9); color: var(--green); padding: .2rem .4rem; border-radius: 999px; }
.topic code { font-size: 1.05rem; background: #fff; border: 1px solid var(--line); padding: .3rem .6rem; border-radius: 8px; user-select: all; }


:root { --rack-w: 236px; }
@media (min-width: 901px) { body { padding-left: var(--rack-w); } }
#side { position: fixed; left: 0; top: 0; bottom: 0; width: var(--rack-w); overflow-y: auto; z-index: 30; scrollbar-width: thin;
  background: var(--flower) 0 0 / 40px 69px, linear-gradient(180deg, #172d20 0%, #24452f 55%, #2f5536 100%);
  border-right: 2px solid #c9a14c; box-shadow: 3px 0 16px rgba(10, 25, 15, .3); }
.rack { position: relative; padding: .9rem 0 2.5rem; min-height: 100%; }
.rack::before { 
  content: ""; position: absolute; left: 26px; top: 0; bottom: 0; width: 12px; border-radius: 6px;
  background: linear-gradient(90deg, #5b3d1d, #9a6b35 40%, #c49256 55%, #7a5128); box-shadow: 2px 0 6px rgba(0,0,0,.35); }
.rack-foot { position: absolute; left: 12px; bottom: 0; width: 40px; height: 14px; border-radius: 8px 8px 0 0; background: #4a3218; }
.rack-sign { position: relative; margin: 1rem 0 .15rem 12px; }
.rack-sign span { display: inline-block; transform: rotate(-2.5deg); padding: .16rem .8rem .12rem; border-radius: 4px;
  font: 700 .82rem var(--serif); letter-spacing: .08em; text-transform: uppercase; color: #3b2410;
  background: linear-gradient(180deg, #dcb37a, #b98a4e); border: 1px solid #7a5428; box-shadow: 0 2px 4px rgba(0,0,0,.35); }
.rack-sign span::before, .rack-sign span::after { content: ""; position: absolute; top: 45%; width: 4px; height: 4px; border-radius: 50%; background: #4a3218; }
.rack-sign span::before { left: 5px; } .rack-sign span::after { right: 5px; }
.gourd-link { position: relative; display: flex; align-items: center; gap: .55rem; min-height: 62px; padding: 0 .6rem 0 40px;
  color: #eef3e6; text-decoration: none; border-radius: 12px 0 0 12px; }
.gourd-link .arm { position: absolute; left: 34px; top: 7px; width: 28px; height: 3px; border-radius: 2px; background: #3a2a16;
  box-shadow: 0 1px 0 rgba(255,255,255,.15); }
.gourd-link .arm::after { content: ""; position: absolute; right: -1px; top: 1px; width: 2px; height: 5px; background: #3a2a16; } 
.gourd { width: 44px; height: 59px; flex: none; margin-top: 4px; transform-origin: 50% 6%; transition: transform .6s cubic-bezier(.3,1.6,.5,1), filter .3s;
  filter: drop-shadow(1px 3px 3px rgba(0,0,0,.35)); }
.gourd .hole-rim { fill: #6d4a22; }
.gourd .hole { fill: #22170e; }
.gourd .gicon { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: #e2c170; }
.glabel { font-size: .98rem; line-height: 1.2; }
.gourd-link:hover .gourd { transform: rotate(-7deg); }
.gourd-link:hover .glabel { color: #fff; text-decoration: underline; text-decoration-color: rgba(226,193,112,.7); text-underline-offset: 3px; }
.gourd-link:focus-visible { outline: 2px solid #f0cf7a; outline-offset: -2px; }
.gourd-link.on { background: linear-gradient(90deg, transparent 30%, rgba(247, 239, 212, .14)); }
.gourd-link.on .gourd { --gourd-fill: url(#gourdGold); filter: drop-shadow(0 0 8px rgba(240, 207, 122, .75)); }
.gourd-link.on .gicon { color: #fff4c8; }
.gourd-link.on .glabel { color: #f7e3a3; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .gourd { transition: none; } .gourd-link:hover .gourd { transform: none; } }

.menu-btn { display: none; align-items: center; gap: .35rem; background: rgba(255,255,255,.08); color: #f7efd4; border: 1px solid rgba(226,193,112,.55);
  border-radius: 999px; padding: .2rem .8rem .2rem .4rem; font: inherit; font-size: .9rem; cursor: pointer; }
.menu-btn svg { width: 22px; height: 30px; }
#sideShade { display: none; }
@media (max-width: 900px) {
  body { padding-left: 0; padding-bottom: 0; }
  .menu-btn { display: inline-flex; order: -1; }
  #side { transform: translateX(-105%); transition: transform .28s ease; width: min(80vw, 280px); }
  body.side-open #side { transform: none; }
  body.side-open #sideShade { display: block; position: fixed; inset: 0; background: rgba(10, 18, 12, .45); z-index: 29; }
}


.gourd { --gourd-fill: url(#gourdSkin); }
.gourd-link { padding-left: 58px; }
.gourd-link .arm { left: 36px; width: 44px; top: 8px; }
.gourd-link .arm::before { content: ""; position: absolute; left: -3px; top: -3px; width: 8px; height: 9px; border-radius: 2px; background: #3a2a16; } 
.gourd-link.on .gourd { --gourd-fill: url(#gourdGold); }
.gourd { width: 50px; height: 67px; }
.gourd-link { min-height: 70px; }
.gourd-link .arm { width: 48px; }
@media (max-width: 900px) {
  .top { flex-wrap: nowrap; gap: .5rem; padding: .45rem .7rem; }
  .top .brand { min-width: 0; }
  .top .brand .emblem { width: 34px; height: 34px; }
  .top .brand-text { font-size: 1.1rem; white-space: nowrap; }
  .top .brand-text small { display: none; }
  .top .who-btn { margin-right: 0; flex: none; }
}
@media (max-width: 330px) { .top .brand-text { display: none; } }
.warnbox { background: var(--red-soft); border: 1px solid #d9a598; border-radius: 12px; padding: .6rem .8rem; margin: .4rem 0 .6rem; }


@media (max-width: 600px) { .block { padding-left: 1rem; padding-right: 1rem; } main { padding-left: .7rem; padding-right: .7rem; } }
body.public [data-drop] { display: none !important; } 
body.public #regFind { display: none !important; }


select { max-width: 100%; }
@media (max-width: 900px) {
  .rail { max-width: calc(100vw - 1.4rem); overflow-x: auto; scrollbar-width: none; }
  .bird { grid-template-columns: minmax(0, 1fr); }
  .bird > * { min-width: 0; }
}
.freshbar { position: sticky; top: .5rem; z-index: 15; background: var(--green); color: #fff; border-radius: 999px; padding: .4rem .5rem .4rem 1rem;
  display: flex; gap: .6rem; align-items: center; justify-content: space-between; box-shadow: var(--shadow); margin-bottom: .8rem; }
.freshbar .btn { background: #f7efd4; color: var(--green); }
.phyllo { animation-iteration-count: 1; } 


.tagchips { display: flex; flex-wrap: wrap; gap: .3rem; margin: .4rem 0 .3rem; }
.tagchips .chip { display: inline-flex; align-items: center; gap: .2rem; }
.tagchips .chip a { color: inherit; }
.tagchips .linkbtn { color: var(--red); font-size: .8rem; }
.camcard .tagrow select[data-f="bird"] { flex: 1 1 55%; min-width: 0; }
.camcard .tagrow select[data-f="who"] { flex: 1 1 30%; min-width: 0; }
.tagchips .where { overflow-wrap: normal; word-break: normal; }
.hours { margin-bottom: 1.6rem; } 


:root { --photo-r: 12px; }
.card .pic { border-radius: var(--photo-r); margin: 8px 8px 0; }
.hero .pic, .hero .pic img { border-radius: var(--photo-r); }
.regface { border-radius: var(--photo-r); }
.nowcard img { border-radius: 10px; }
.choice img, .choice .ph, .yardpic img, .camcard img, .camcard video, .vidwrap, .vidwrap img, .frames img { border-radius: 10px; }
.nb-pic, .rc-pic { border-radius: 10px; overflow: hidden; margin: 6px 6px 0; }
.lpic img, .regstrip img, .regsugg img, .moment img, .fixcard img, .pickone img, .singbird img { border-radius: 10px; }
.yl-hole { border-radius: var(--photo-r); }


.gm-filter { margin: .4rem 0 1rem; }
.gm-level h2 { color: var(--green); margin: 1.4rem 0 .6rem; flex-wrap: wrap; align-items: center; gap: .2rem .6rem; }
.gm-level h2 span { font: 400 .95rem/1.3 "Segoe UI", system-ui, sans-serif; color: var(--muted); }
.gm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: .9rem; }
.gm-card { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.1rem; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; transition: transform .15s, box-shadow .15s; }
.gm-card:hover, .gm-card:focus-visible { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--gold-line), var(--shadow); }
.gm-emoji { font-size: 2.3rem; line-height: 1; flex: none; width: 3.2rem; height: 3.2rem; display: grid; place-items: center; border-radius: 14px; background: var(--gold-soft); }
.gm-cbody { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.gm-cbody > b { font-family: var(--serif); font-size: 1.2rem; color: var(--green); }
.gm-desc { color: var(--muted); font-size: .95rem; line-height: 1.4; }
.gm-meta { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; margin-top: .3rem; font-size: .85rem; }
.gm-lv { display: inline-block; padding: .1rem .6rem; border-radius: 999px; font-weight: 600; font-size: .85rem; border: 1px solid; }
.gm-easy { background: #e3f1e1; border-color: #9fcb9a; color: #2d6a33; }
.gm-medium { background: #fbf3cf; border-color: #e3cf6f; color: #74620f; }
.gm-hard { background: #fde6d2; border-color: #ecae7c; color: #8a4a17; }
.gm-expert { background: #f8dcdc; border-color: #df9c9c; color: #8e2f2f; }
.gm-style { color: var(--muted); font-style: italic; }
.gm-best { margin-left: auto; color: var(--gold); }
.gm-best b { color: var(--green); }

.gm-top { margin-bottom: .6rem; }
.gm-intro { text-align: center; max-width: 640px; margin: 0 auto; }
.gm-bigemoji { font-size: 4rem; line-height: 1.1; }
.gm-lead { font-size: 1.15rem; }
.gm-start { font-size: 1.25rem; padding: .7rem 2.2rem; }

.gm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: .8rem; }
.gm-title { font-family: var(--serif); font-size: 1.35rem; color: var(--green); }
.gm-hud { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }
.gm-hud > span { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: .15rem .8rem; font-weight: 600; font-size: .95rem; }
.gm-hud > span:empty { display: none; }
.gm-hud > .gm-timer { background: var(--green-soft); border-color: transparent; }
.gm-hud > .gm-timer.low { background: var(--red-soft); }
.gm-stage { max-width: 980px; margin: 0 auto; display: grid; gap: 1rem; }
.gm-ask { font-size: 1.2rem; margin: 0; }
.gm-pts, .gm-timer { display: inline-block; margin-left: .4rem; padding: .05rem .7rem; border-radius: 999px; background: var(--green-soft); color: var(--green); font-weight: 700; font-size: 1rem; }
.gm-timer.low { background: var(--red-soft); color: var(--red); }
.gm-feedback { font-size: 1.08rem; }
.gm-feedback .where { display: block; margin-top: .3rem; }
.gm-next { margin-top: .4rem; }
.gm-tell { background: var(--gold-soft); border: 1px solid var(--gold-line); border-radius: 12px; padding: .7rem 1rem; line-height: 1.5; }
.gm-tell ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.gm-src { font-size: .9rem; color: var(--muted); }
.gm-stage audio { width: 100%; max-width: 520px; }

.gm-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 45%), 1fr)); gap: .7rem; }
.gm-choice { display: flex; flex-direction: column; border: 2px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff;
  cursor: pointer; padding: 0; text-align: left; font: inherit; color: var(--ink); min-height: 3.4rem; transition: border-color .15s, box-shadow .15s; }
.gm-choice:hover:not(:disabled) { border-color: var(--gold-line); }
.gm-choice img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #e9e3d3; border-radius: 10px 10px 0 0; }
.gm-choice span { padding: .55rem .8rem; font-weight: 600; }
.gm-choices.text .gm-choice { justify-content: center; }
.gm-choices.text .gm-choice span { padding: .8rem 1rem; font-size: 1.05rem; }
.gm-choice.right, .gm-tile.right, .gm-sz.right { border-color: #3b8a4d; box-shadow: 0 0 0 3px #cfe6d3; }
.gm-choice.wrong, .gm-tile.wrong, .gm-sz.wrong { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.gm-choice.x, .gm-tile.x { opacity: .55; }
.gm-choice:disabled { cursor: default; }


.gm-reveal, .gm-yardpic { position: relative; overflow: hidden; border-radius: var(--photo-r, 12px); background: #e9e3d3;
  max-width: 640px; width: 100%; margin: 0 auto; aspect-ratio: 4 / 3; box-shadow: var(--shadow); }
.gm-reveal img, .gm-yardpic img { width: 100%; height: 100%; object-fit: cover; display: block; will-change: transform, filter; }
.gm-yardpic img { object-fit: contain; background: #1f2a22; }
.gm-reveal.rapid { max-width: 520px; }


.gm-memgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; max-width: 760px; }
.gm-mem { position: relative; aspect-ratio: 1; border: 2px solid var(--line); border-radius: 12px; padding: 0; cursor: pointer; background: #fff; overflow: hidden; font: inherit; }
.gm-back { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2rem; background: linear-gradient(135deg, var(--green-soft), var(--sky-soft)); }
.gm-front { position: absolute; inset: 0; display: none; place-items: center; padding: .3rem; text-align: center; }
.gm-front img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.gm-front b { color: var(--green); font-family: var(--serif); font-size: 1.05rem; line-height: 1.2; }
.gm-mem.up .gm-front { display: grid; }
.gm-mem.up .gm-back { display: none; }
.gm-mem.up { border-color: var(--gold-line); }
.gm-mem.done { border-color: #3b8a4d; box-shadow: 0 0 0 3px #cfe6d3; cursor: default; }


.gm-bingo { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; max-width: 760px; }
.gm-sq { position: relative; display: flex; flex-direction: column; border: 2px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; padding: 0; cursor: pointer; font: inherit; color: var(--ink); text-align: left; }
.gm-sq img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px 10px 0 0; }
.gm-sq span { padding: .3rem .4rem; font-size: .85rem; font-weight: 600; line-height: 1.2; }
.gm-sq.on { border-color: #3b8a4d; background: #eef6ec; }
.gm-sq.on img { opacity: .75; }
.gm-sq.line { box-shadow: 0 0 0 3px var(--gold-line); }
.gm-sq i { position: absolute; top: .35rem; right: .35rem; font-style: normal; background: #fff; border-radius: 999px; width: 1.8rem; height: 1.8rem; display: grid; place-items: center; box-shadow: var(--shadow); color: #2d6a33; font-weight: 700; }
.gm-bingo-yes { font-size: 1.5rem; font-weight: 700; color: var(--green); text-align: center; background: var(--gold-soft); border: 1px solid var(--gold-line); border-radius: 12px; padding: .5rem; }


.gm-color { color: var(--c); text-shadow: 0 0 1px rgba(0, 0, 0, .5); letter-spacing: .04em; }
.gm-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; max-width: 700px; }
.gm-tile, .gm-sz { position: relative; border: 3px solid var(--line); border-radius: 12px; padding: 0; overflow: hidden; background: #fff; cursor: pointer; font: inherit; color: var(--ink); }
.gm-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border-radius: 9px; }
.gm-tile.on { border-color: var(--sky); box-shadow: 0 0 0 3px var(--sky-soft); }
.gm-tile.on::after { content: "\2713"; position: absolute; top: .3rem; right: .4rem; background: var(--sky); color: #fff; border-radius: 999px; width: 1.7rem; height: 1.7rem; display: grid; place-items: center; font-weight: 700; }
.gm-tile.missed { border-color: #e3cf6f; box-shadow: 0 0 0 3px #fbf3cf; }
.gm-tile i { position: absolute; left: 0; right: 0; bottom: 0; font-style: normal; font-size: .8rem; font-weight: 600; background: rgba(255, 252, 242, .92); padding: .15rem .3rem; }
.gm-tile i:empty { display: none; }
.gm-sizegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 45%), 1fr)); gap: .6rem; }
.gm-sz { display: flex; flex-direction: column; text-align: left; }
.gm-sz img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 9px 9px 0 0; }
.gm-sz span { padding: .4rem .6rem; font-weight: 600; font-size: .95rem; }
.gm-sz.on { border-color: var(--sky); }
.gm-sz i { position: absolute; top: .35rem; left: .35rem; font-style: normal; background: var(--sky); color: #fff; border-radius: 999px; width: 2rem; height: 2rem; display: grid; place-items: center; font-weight: 700; font-size: 1.1rem; }
.gm-sizeans { margin: .3rem 0; }


.gm-end { text-align: center; padding: 1rem 0; }
.gm-stars { font-size: 3rem; letter-spacing: .3rem; color: #d9cfb6; }
.gm-stars .on { color: #e0b43c; text-shadow: 0 1px 0 #b58a1e; }
.gm-end h2 { color: var(--green); margin: .3rem 0; }
.gm-final b { font-size: 2.6rem; color: var(--green); font-family: var(--serif); }
.gm-final span { color: var(--muted); }
.gm-endbtns { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: .6rem; }
.gm-endbtns .btn { font-size: 1.05rem; padding: .55rem 1.4rem; }

@media (max-width: 640px) {
  .gm-memgrid { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .gm-bingo { gap: .35rem; }
  .gm-sq span { font-size: .72rem; padding: .2rem .25rem; }
  .gm-choices { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .gm-choices.text .gm-choice span { padding: .6rem .7rem; font-size: .98rem; }
  .gm-choices.long { grid-template-columns: 1fr; }
  .gm-ask { font-size: 1.08rem; }
  .gm-hud { margin-left: 0; width: 100%; }
  .gm-best { margin-left: 0; }
  .gm-emoji { font-size: 1.9rem; width: 2.7rem; height: 2.7rem; }
}


.suggcard .tagrow .kept { font-weight: 600; color: var(--accent, #2f7d4f); align-self: center; margin-right: 6px; }
.hiddenfilms { margin-top: 18px; }
.hiddenfilms > summary { cursor: pointer; color: var(--muted, #667); padding: 6px 0; }
.hiddenfilms .reelcard { opacity: .7; }


.tablewrap { overflow-x: auto; }
table.hear { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.hear th, table.hear td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line, #e3e6ea); vertical-align: top; }
table.hear tr.unsure td { opacity: .75; }

.hear-card .hear-play { margin-top: .35rem; width: 100%; justify-content: center; }
.hear-card.hear-maybe { opacity: .8; }
.hear-maybes { margin-top: .8rem; }
.hear-maybes > summary { cursor: pointer; color: var(--muted, #667); padding: 6px 0; }
#p-hear h3 { margin: .9rem 0 .2rem; }


.dg-controls { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.dg-step { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.dg-step select { max-width: 100%; }
.dg-step b { min-width: min(12em, 60vw); text-align: center; }
.dg-step select { margin-left: .4rem; }
.dg-chart { display: flex; flex-direction: column; gap: 2px; margin: .6rem 0; }
.dg-row { display: grid; grid-template-columns: 180px 1fr 230px; gap: .7rem; align-items: center; min-height: 36px; }
.dg-row:not(.dg-axis):hover { background: var(--gold-soft, #f6f1e3); border-radius: 8px; }
.dg-name { display: flex; align-items: center; gap: .45rem; text-decoration: none; color: inherit; font-size: .88rem; min-width: 0; }
.dg-name img { width: 30px; height: 30px; object-fit: cover; border-radius: 8px; flex: none; }
.dg-name b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-track { position: relative; height: 22px; background: var(--card, #fff); border: 1px solid var(--line, #e3e6ea); border-radius: 6px; }
.dg-axis .dg-track { background: none; border: 0; height: 18px; }
.dg-axis em { position: absolute; transform: translateX(-50%); font: 600 .72rem/1 sans-serif; font-style: normal; color: var(--muted, #667); top: 2px; white-space: nowrap; }
.dg-track u { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--line, #e3e6ea); }
.dg-track s { position: absolute; top: -3px; bottom: -3px; border-left: 2px solid #d9534f; }
.dg-bar { position: absolute; top: 3px; bottom: 3px; background: var(--green, #2f6b4f); border-radius: 4px; min-width: 3px; }
.dg-heat { position: absolute; top: 3px; bottom: 3px; background: var(--green, #2f6b4f); opacity: var(--a); }
.dg-mark { position: absolute; top: -4px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; transform: translateX(-5px); }
.dg-mark.in { border-top: 7px solid #3a9d5d; }
.dg-mark.out { border-top: 7px solid #d9534f; }
.dg-stats { display: flex; flex-wrap: wrap; gap: .1rem .6rem; font-size: .78rem; color: var(--muted, #667); }
.dg-legend .chip { font-size: .8rem; }
@media (max-width: 760px) {
  .dg-row { grid-template-columns: 1fr; gap: .2rem; padding: .3rem 0; }
  .dg-axis > span { display: none; }
}


.pt-tiles { margin: .2rem 0 .4rem; }
.pt-tiles div { box-shadow: var(--shadow); }
.pt-how { margin: 0 0 1rem; }
.pt-top { margin: .2rem 0 1.2rem; display: flex; flex-direction: column; gap: .35rem; }
.pt-top h3 { margin: 0 0 .3rem; }
.pt-toprow { display: grid; grid-template-columns: 1.4rem 38px minmax(8rem, 13rem) 1fr 4.5rem; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); padding: .2rem .3rem; border-radius: 10px; }
.pt-toprow:hover { background: var(--gold-soft); }
.pt-rank { font: 600 1rem var(--serif); color: var(--gold); text-align: center; }
.pt-thumb { width: 38px; height: 38px; object-fit: cover; border-radius: 10px; display: grid; place-items: center; background: var(--gold-soft); }
.pt-topname { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-toprow > b { text-align: right; font-variant-numeric: tabular-nums; }
.pt-bar { display: block; height: 12px; background: rgba(201, 161, 76, .16); border-radius: 999px; overflow: hidden; }
.pt-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--green-2, #3d6b4c)); border-radius: 999px; }
.insights { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(225px, 100%), 1fr)); gap: .8rem; }
.insight { background: var(--card); border: 1px solid rgba(201, 161, 76, .45); border-radius: 14px; padding: .8rem 1rem; display: flex; flex-direction: column; gap: .45rem; box-shadow: var(--shadow); }
.in-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.in-ico { font-size: 1.3rem; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; background: var(--gold-soft); border-radius: 10px; }
.in-pics { display: flex; gap: .3rem; }
.in-pic { width: 44px; height: 44px; object-fit: cover; border-radius: 10px; display: grid; place-items: center; background: var(--gold-soft); }
.in-text { font-size: 1.02rem; line-height: 1.45; }
.insight > .where { font-size: .8rem; margin-top: auto; }
.pt-minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .6rem; margin: .3rem 0 .9rem; }
.pt-mini { display: flex; flex-direction: column; align-items: center; gap: .25rem; text-decoration: none; color: var(--ink); font-size: .76rem; text-align: center; line-height: 1.2; }
.pt-minipic { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; display: grid; place-items: center; background: var(--gold-soft); }
.pt-mini:hover .pt-minipic { box-shadow: 0 0 0 2px var(--gold-line); }
.heat .hl a { display: inline-flex; align-items: center; gap: .45rem; flex-direction: row; }
.hl-pic { width: 24px; height: 24px; object-fit: cover; border-radius: 6px; order: 2; }
.pairgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: .6rem; }
.paircard { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font-size: .9rem; }
.pair-pics { display: flex; }
.pair-pics img, .pair-pics span { width: 40px; height: 40px; object-fit: cover; border-radius: 10px; border: 2px solid var(--card); display: grid; place-items: center; background: var(--gold-soft); }
.pair-pics a + a { margin-left: -12px; }
.paircard b { color: var(--green); white-space: nowrap; font-size: .85rem; }
.pt-table td.pt-who a { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.pt-table td.pt-who img { width: 28px; height: 28px; object-fit: cover; border-radius: 7px; }
.pt-table td.shade { background: rgba(36, 69, 47, var(--a)); text-align: center; font-variant-numeric: tabular-nums; border-radius: 4px; }
.agree { display: flex; flex-direction: column; gap: .5rem; }
.agree-row { display: grid; grid-template-columns: minmax(12rem, 16rem) 1fr 3rem auto; align-items: center; gap: .7rem; }
.agree-row > b { color: var(--green); text-align: right; }
.mkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; }
.mkbtn { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .9rem .6rem; border: 1px solid rgba(201, 161, 76, .5); border-radius: 14px; background: var(--card); color: var(--green); font: 600 .95rem inherit; cursor: pointer; box-shadow: var(--shadow); }
.mkbtn span { font-size: 1.5rem; }
.mkbtn:hover:not([disabled]) { background: var(--gold-soft); }
.mkbtn[disabled] { opacity: .55; cursor: default; }
.rep-nums { display: flex; gap: 1rem; color: var(--muted); font-size: .85rem; }
.rep-nums em { font: 600 1.25rem var(--serif); font-style: normal; color: var(--green); margin-right: .2rem; }
.cellbar { display: inline-flex; align-items: center; gap: .5rem; min-width: 8rem; }
.cellbar i { display: block; height: 10px; background: var(--green); border-radius: 999px; min-width: 2px; }
@media (max-width: 700px) {
  .pt-toprow { grid-template-columns: 1.2rem 34px 1fr 3.5rem; }
  .pt-toprow .pt-bar { grid-column: 3 / 5; grid-row: 2; }
  .agree-row { grid-template-columns: 1fr 3rem; }
  .agree-row .pt-bar { grid-column: 1 / 3; }
}

#p-stand h3 .where, #p-going h3 .where, #p-hear h3 .where { font: 400 .82rem/1.3 system-ui, sans-serif; color: var(--muted); margin-left: .4rem; }


.wc-status { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem .8rem; border-radius: 12px; margin: .6rem 0; background: var(--gold-soft); border: 1px solid var(--line); }
.wc-status .wc-ico { font-size: 1.25rem; line-height: 1.2; }
.wc-status.wc-error, .wc-status.wc-blocked { background: #fbeaea; border-color: #e3b4b4; }
.wc-status.wc-dim { background: #fdf3dc; }
.wc-status.wc-watching, .wc-status.wc-recording { background: #e8f2ea; border-color: #b9d5c0; }
.wc-tools { margin: .3rem 0 .5rem; }
.wc-meter { display: flex; align-items: center; gap: .7rem; margin: .2rem 0 .6rem; }
.wc-meter-bar { position: relative; flex: 0 0 min(260px, 55%); height: 10px; border-radius: 999px; background: linear-gradient(90deg, #222, #888 40%, #f1e7c8); }
.wc-meter-bar i { position: absolute; left: 0; top: -3px; bottom: -3px; border-right: 3px solid var(--green); }
.wc-meter-bar b { position: absolute; top: -5px; bottom: -5px; border-left: 2px dashed #d9534f; }
.webcamprev { position: relative; }
.webcamprev.aiming img { box-shadow: 0 0 0 3px var(--gold-line); }
.wc-grid { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 16 / 9; pointer-events: none; border-radius: 12px;
  background: linear-gradient(90deg, transparent 33.1%, rgba(255,255,255,.55) 33.3%, transparent 33.5%, transparent 66.5%, rgba(255,255,255,.55) 66.7%, transparent 66.9%),
              linear-gradient(0deg, transparent 33.1%, rgba(255,255,255,.55) 33.3%, transparent 33.5%, transparent 66.5%, rgba(255,255,255,.55) 66.7%, transparent 66.9%); }


.listen2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1rem; align-items: stretch; margin-bottom: 1rem; }
.listen2 > .block { margin: 0; }
.lcard { display: flex; flex-direction: column; }
.lcard h2 { margin-top: .35rem; }
.lc-badge { align-self: flex-start; font-size: .78rem; font-weight: 600; color: var(--gold); background: var(--gold-soft); border-radius: 999px; padding: .2rem .7rem; }
.bigmic-wrap { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin: .6rem 0 .2rem; }
.bigmic { --p: 0; width: 112px; height: 112px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; font-size: 2.6rem;
  background: radial-gradient(circle, var(--card) 58%, transparent 59%), conic-gradient(#d9534f calc(var(--p) * 360deg), var(--gold-soft) 0);
  box-shadow: var(--shadow), 0 0 0 1px var(--gold-line) inset; transition: transform .15s; }
.bigmic:hover:not([disabled]) { transform: scale(1.04); }
.bigmic.rec span { animation: micpulse 1s ease-in-out infinite; }
.bigmic.think { opacity: .75; }
.bigmic[disabled] { cursor: default; }
@keyframes micpulse { 50% { transform: scale(1.15); } }
.bigmic-label { font-weight: 600; color: var(--green); }
.lc-state { display: inline-flex; align-items: center; gap: .5rem; font: 600 1.15rem var(--serif); color: var(--green); }
.lc-state i { width: 12px; height: 12px; border-radius: 50%; background: #aaa; }
.lc-state.on i { background: #3a9d5d; box-shadow: 0 0 0 0 rgba(58, 157, 93, .6); animation: livedot 1.6s infinite; }
.lc-state.err { color: #b33; } .lc-state.err i { background: #d9534f; }
@keyframes livedot { 70% { box-shadow: 0 0 0 9px rgba(58, 157, 93, 0); } 100% { box-shadow: 0 0 0 0 rgba(58, 157, 93, 0); } }
.center { text-align: center; }
@media (prefers-reduced-motion: reduce) { .bigmic.rec span, .lc-state.on i { animation: none; } }

.lc-sub { margin: 1rem 0 .3rem; font-size: 1rem; }
.lc-sub .where { font: 400 .8rem system-ui, sans-serif; margin-left: .3rem; }
.lc-more { margin-top: .9rem; border-top: 1px solid var(--line); padding-top: .6rem; }
.lc-more > summary { cursor: pointer; font-weight: 600; color: var(--green); }
.lc-more[open] > summary { margin-bottom: .6rem; }
.lc-more .kv { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .6rem; }
.lcard .nowgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }


.fieldguide { --paper: #f5eedc; --ink-soft: #3b3a30; }
.fg-rail-title { display: block; font: 600 .78rem var(--serif); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: .6rem 0 .3rem .7rem; }
.fieldguide .rail a .fg-num { display: inline-block; min-width: 2.1em; font: 600 .78rem var(--serif); color: var(--gold); }
.fg-cover { text-align: center; padding: 2.2rem 1.6rem 1.6rem; margin-bottom: 1.2rem; border-radius: 14px; background: var(--paper);
  border: 1px solid var(--gold-line); box-shadow: var(--shadow), inset 0 0 0 6px var(--paper), inset 0 0 0 7px rgba(201, 161, 76, .55); }
.fg-kicker { font: 600 .8rem var(--serif); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin: 0; }
.fg-cover h1 { font-size: clamp(1.8rem, 4vw, 2.7rem); margin: .4rem 0 .3rem; color: var(--green); }
.fg-sub { font-style: italic; color: var(--muted); margin: 0 auto; max-width: 42ch; }
.fg-rule { display: flex; align-items: center; gap: .8rem; max-width: 320px; margin: 1rem auto; color: var(--gold); }
.fg-rule::before, .fg-rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-line), transparent); }
.fg-intro { max-width: 62ch; margin: 0 auto 1.2rem; font-size: 1.05rem; line-height: 1.6; color: var(--ink-soft); }
.fg-four { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; max-width: 640px; margin: 0 auto; }
@media (max-width: 560px) { .fg-four { grid-template-columns: repeat(2, 1fr); } }
.fg-four a { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .7rem .4rem; border-radius: 12px; background: var(--card);
  border: 1px solid var(--line); text-decoration: none; color: var(--green); font: 600 .95rem var(--serif); }
.fg-four a span { font-size: 1.7rem; }
.fg-four a:hover { border-color: var(--gold-line); background: var(--gold-soft); }
.fg-contents { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.4rem; margin-bottom: 1.2rem; }
.fg-contents h2 { text-align: center; font-variant: small-caps; letter-spacing: .08em; margin: 0 0 .6rem; }
.fg-contents ol { list-style: none; margin: 0; padding: 0; columns: 2 280px; column-gap: 2rem; }
.fg-contents li { break-inside: avoid; }
.fg-contents a { display: flex; align-items: baseline; gap: .5rem; padding: .28rem 0; text-decoration: none; color: var(--ink); }
.fg-contents a:hover .fg-ctitle { color: var(--green); text-decoration: underline; }
.fg-contents .fg-num { min-width: 2.4em; font: 600 .85rem var(--serif); color: var(--gold); }
.fg-dots { flex: 1; border-bottom: 1px dotted var(--gold-line); transform: translateY(-.25em); }
.fg-chapter { background: var(--paper); }
.fg-chapno { font: 600 .74rem var(--serif); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin: 0 0 .1rem; }
.fg-chapter > h2 { font-variant: small-caps; letter-spacing: .03em; margin-top: 0; padding-bottom: .4rem; border-bottom: 1px solid rgba(201, 161, 76, .5); }
.fg-lead { font-size: 1.04rem; line-height: 1.65; max-width: 70ch; }
.fg-lead::first-letter { float: left; font: 600 3.1em/.85 var(--serif); color: var(--green); padding: .08em .12em 0 0; }
.fg-label { display: block; font: 600 .72rem var(--serif); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: .15rem; }
.fg-notes { border-left: 3px solid var(--gold-line); padding: .2rem 0 .2rem 1rem; margin: .6rem 0; }
.fg-notes ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: .55rem 1.6rem; }
.fg-notes li { position: relative; padding-left: 1.4rem; line-height: 1.55; }
.fg-notes li::before { content: "❧"; position: absolute; left: 0; top: -.05em; color: var(--green); }
.fg-entries { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(215px, 100%), 1fr)); gap: .8rem; margin-top: .8rem; }
.fg-entry { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .8rem .9rem; display: flex; flex-direction: column; gap: .45rem; }
.fg-entry h4 { margin: 0; font: 600 1.05rem var(--serif); color: var(--green); }
.fg-entry p { margin: 0; font-size: .92rem; line-height: 1.5; }
.fg-thumbs { display: flex; gap: .35rem; }
.fg-thumbs img { width: 42px; height: 42px; object-fit: cover; border-radius: 10px; display: block; box-shadow: 0 0 0 1px var(--line); }
.fg-plant-head { display: flex; gap: .6rem; align-items: center; }
.fg-plant-ico { font-size: 1.6rem; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; background: var(--gold-soft); border-radius: 10px; flex: none; }
.fg-tag { font-size: .74rem; color: var(--gold); font-weight: 600; }
.fg-spec-head { display: flex; align-items: center; gap: .7rem; }
.fg-spec-pic, .fg-spec-pic img { width: 58px; height: 58px; flex: none; object-fit: cover; border-radius: 12px; display: block; }
.fg-nopic { display: grid; place-items: center; background: var(--gold-soft); font-size: 1.6rem; }
.fg-entries.boxes { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.fg-spec dl { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; margin: .1rem 0 0; font-size: .88rem; padding-top: .45rem; border-top: 1px dotted var(--gold-line); }
.fg-spec dt { color: var(--muted); }
.fg-spec dd { margin: 0; font-weight: 600; }
.fg-year { list-style: none; margin: .8rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0; position: relative; }
.fg-year::before { content: ""; position: absolute; left: 1.15rem; top: .8rem; bottom: .8rem; width: 2px; background: linear-gradient(var(--gold-line), var(--green)); }
.fg-year li { display: grid; grid-template-columns: 2.3rem 1fr; gap: .8rem; padding: .5rem 0; position: relative; }
.fg-year-ico { width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--card); border: 1px solid var(--gold-line); display: grid; place-items: center; font-size: 1.1rem; z-index: 1; }
.fg-year b { font-family: var(--serif); color: var(--green); }
.fg-year p { margin: .15rem 0 0; }
.fg-colophon { text-align: center; color: var(--muted); font-style: italic; font-size: .88rem; margin: 1.4rem 0 .5rem; }


.vc-cover { margin-bottom: 1rem; }
.vc-tools { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: space-between; margin: 0 0 .8rem; }
.vc-tools input[type=search] { min-width: min(240px, 100%); padding: .45rem .8rem; border-radius: 999px; border: 1px solid var(--line); background: var(--card); }
.vcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: .9rem; }
.vcard { background: #f5eedc; border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1rem; display: flex; flex-direction: column; gap: .5rem; box-shadow: var(--shadow); }
.vcard p { margin: 0; font-size: .92rem; line-height: 1.5; }
.vc-head { display: flex; gap: .75rem; align-items: center; }
.vc-pic { width: 64px; height: 64px; flex: none; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: var(--gold-soft); font-size: 1.6rem; text-decoration: none; }
.vc-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vcard h3 { margin: 0; font: 600 1.12rem var(--serif); }
.vcard h3 a { color: var(--green); text-decoration: none; }
.vcard h3 a:hover { text-decoration: underline; }
.vc-mnemonic { font: italic 1.12rem/1.35 var(--serif); color: var(--gold); padding: .1rem 0 .1rem .7rem; border-left: 3px solid var(--gold-line); }
.vc-play { display: flex; gap: .5rem; }
.vplay { --t: 0; position: relative; overflow: hidden; flex: 1; display: flex; align-items: center; justify-content: center; gap: .45rem; padding: .55rem .6rem;
  border-radius: 999px; border: 1px solid var(--green); background: var(--card); color: var(--green); font: 600 .95rem inherit; cursor: pointer; }
.vplay:hover { background: #eef4ef; }
.vplay.on { background: var(--green); color: #fff; }
.vplay .vp-ico { width: 1.1em; text-align: center; }
.vplay .vp-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--t) * 100%); background: var(--gold-line); }
.vc-more summary { cursor: pointer; font-size: .85rem; color: var(--green); }
.vc-more p { margin-top: .3rem; }
.vc-credit { font-size: .76rem !important; color: var(--muted); margin-top: auto !important; }
#listenQuiz { margin-top: 1.4rem; }


.fg-entries.foods { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.fg-food { padding: 0 0 .9rem; overflow: hidden; }
.fg-food > h4, .fg-food > p, .fg-food > .fg-birds { margin-left: .95rem; margin-right: .95rem; }
.fg-food-pic { margin: 0 0 .2rem; position: relative; }
.fg-food-pic img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.fg-food-pic figcaption { position: absolute; right: 6px; bottom: 5px; font-size: .62rem; color: #fff; background: rgba(0,0,0,.45); padding: .05rem .4rem; border-radius: 999px; max-width: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fg-birds { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: .5rem; }
.fg-birds a { display: flex; flex-direction: column; align-items: center; gap: .2rem; text-decoration: none; color: var(--ink); font-size: .72rem; line-height: 1.15; text-align: center; }
.fg-birds img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; display: block; box-shadow: 0 0 0 1px var(--line); }
.fg-birds a:hover img { box-shadow: 0 0 0 2px var(--gold-line); }


.wc-picture { margin: .4rem 0 .7rem; border: 1px solid var(--line); border-radius: 12px; padding: .5rem .8rem; background: var(--card); max-width: 640px; }
.wc-picture > summary { cursor: pointer; font-weight: 600; color: var(--green); }
.wc-picture[open] > summary { margin-bottom: .6rem; }
.wc-pic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: .7rem 1.2rem; margin-bottom: .6rem; }
.wc-pic-grid label { display: flex; flex-direction: column; gap: .25rem; font-weight: 600; font-size: .92rem; }
.wc-pic-grid label .where { font-weight: 400; }
.wc-pic-grid input[type=range] { width: 100%; accent-color: var(--green); }
.wc-pic-grid .wc-auto { flex-direction: row; align-items: center; gap: .45rem; font-weight: 500; grid-column: 1 / -1; }


.home-hero { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.4rem; margin-bottom: 1rem; border-radius: 16px;
  background: linear-gradient(110deg, #f5eedc, var(--card) 55%); border: 1px solid rgba(201, 161, 76, .45); box-shadow: var(--shadow); }
.home-hero h1 { margin: .15rem 0 .3rem; }
.home-hero .fg-kicker { margin: 0; }
.home-sun { margin: 0; color: var(--muted); }
.home-hero svg { width: 120px; height: 120px; flex: none; }
.home-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: .7rem; margin-bottom: 1rem; }
@media (max-width: 1100px) { .home-tiles { grid-template-columns: repeat(3, 1fr); } }
.home-tiles a { display: flex; flex-direction: column; gap: .15rem; padding: .8rem .9rem; border-radius: 14px; background: var(--card); border: 1px solid var(--line);
  text-decoration: none; color: var(--ink); box-shadow: var(--shadow); transition: transform .12s; }
.home-tiles a:hover { transform: translateY(-2px); border-color: var(--gold-line); }
.home-tiles .ht-ico { font-size: 1.6rem; }
.home-tiles b { font-family: var(--serif); color: var(--green); font-size: 1.02rem; }
.home-tiles .where { font-size: .8rem; }
.home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 1rem; align-items: start; }
.home-grid > .block { margin: 0; }
.home-look { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
@media (max-width: 600px) { .home-hero svg { display: none; } .home-tiles { grid-template-columns: repeat(2, 1fr); } }


.wc-zone { position: absolute; border: 2px dashed #f0c14b; background: rgba(240, 193, 75, .12); border-radius: 6px; pointer-events: none; box-sizing: border-box; }
.wc-zone i { position: absolute; left: 4px; top: 2px; font: 600 .7rem system-ui, sans-serif; font-style: normal; color: #fff; text-shadow: 0 1px 2px #000; }
.webcamprev.drawing img { cursor: crosshair; touch-action: none; outline: 3px solid #f0c14b; }
.wc-zone-row { margin: .2rem 0 .7rem; display: flex; flex-direction: column; gap: .3rem; }


.lt-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.lt-head h2 { margin: 0; }
.lt-head .linkbtn { font-size: .85rem; color: var(--muted); white-space: nowrap; }
.lt-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: .8rem 0 .4rem; }
.lt-stats a { display: flex; flex-direction: column; align-items: flex-start; padding: .6rem .75rem; border-radius: 12px; background: #f5eedc;
  border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.lt-stats a:hover { border-color: var(--gold-line); }
.lt-stats span { font-size: 1.1rem; }
.lt-stats b { font: 600 1.7rem/1.1 var(--serif); color: var(--green); }
.lt-stats em { font-style: normal; font-size: .78rem; color: var(--muted); line-height: 1.25; }
.lt-sub { font-size: .95rem; margin: 1rem 0 .45rem; color: var(--green); }
.lt-birds { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: .55rem; }
.lt-bird { position: relative; display: flex; flex-direction: column; align-items: center; gap: .2rem; text-decoration: none; color: var(--ink); font-size: .74rem; text-align: center; line-height: 1.15; }
.lt-bird img, .lt-bird .lt-noimg { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; display: grid; place-items: center; background: var(--gold-soft); font-size: 1.4rem; }
.lt-bird em { position: absolute; top: 4px; right: 4px; font-style: normal; font-size: .68rem; font-weight: 700; color: #fff; background: rgba(36, 69, 47, .85); border-radius: 999px; padding: .05rem .4rem; }
.lt-clips { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: .55rem; }
.lt-clip { display: flex; gap: .6rem; padding: .45rem; border-radius: 12px; border: 1px solid var(--line); background: var(--card); text-decoration: none; color: var(--ink); }
.lt-clip:hover { border-color: var(--gold-line); }
.lt-thumb { width: 64px; height: 64px; flex: none; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--gold-soft); font-size: 1.4rem; }
.lt-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lt-clip-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; font-size: .82rem; }
.lt-clip-body b { color: var(--green); }
.lt-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); line-height: 1.3; }
.lt-tags { display: flex; flex-wrap: wrap; gap: .25rem; }
.lt-tags i { font-style: normal; font-size: .7rem; background: var(--gold-soft); border-radius: 999px; padding: .05rem .45rem; }



.lt-reports { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .55rem; flex-direction: unset; }
.lt-rep { position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: .1rem; padding: .7rem .75rem .6rem; border-radius: 12px; background: #f5eedc;
  border: 1px solid var(--line); text-decoration: none; color: var(--ink); min-height: 92px; }
.lt-rep:hover { border-color: var(--gold-line); box-shadow: var(--shadow); }
.lt-rep-ico { font-size: 1.2rem; }
.lt-rep b { font: 600 1rem/1.2 var(--serif); color: var(--green); }
.lt-rep em { font-style: normal; font-size: .74rem; color: var(--muted); }
.lt-rep-firsts { display: flex; align-items: center; gap: .25rem; margin-top: auto; padding-top: .4rem; font-size: .8rem; }
.lt-rep-firsts img { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; }


.fg-mention { position: relative; display: inline-flex; align-items: baseline; gap: .22em; text-decoration: none; color: var(--green); font-weight: 600; white-space: nowrap; }
.fg-mention > img { width: 1.35em; height: 1.35em; border-radius: .35em; object-fit: cover; align-self: center; box-shadow: 0 0 0 1px var(--line); }
.fg-mention > span { border-bottom: 1px dotted var(--gold-line); }
.fg-peek { display: none; position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); z-index: 20; width: 180px; padding: 6px;
  background: var(--card); border: 1px solid var(--gold-line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.18); flex-direction: column; gap: 4px; font-weight: 400; white-space: normal; text-align: center; }
.fg-peek img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; }
.fg-peek i { font-style: normal; font-size: .78rem; color: var(--ink); }
.fg-mention:hover .fg-peek, .fg-mention:focus .fg-peek { display: flex; }
@media (hover: none) { .fg-peek { display: none !important; } }


.pet-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: .8rem; }
.pet-group { display: flex; gap: .8rem; padding: .7rem; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: var(--shadow); }
.pet-main { width: 120px; height: 120px; flex: none; object-fit: cover; border-radius: 12px; }
.pet-body h3 { margin: 0 0 .2rem; font-family: var(--serif); color: var(--green); }
.pet-more { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.pet-more img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; }


.snipbox:empty { display: none; }
.snipbox { margin-top: .4rem; }
.snipbox audio { width: 100%; }
.hear-card .snipbox .where { font-size: .74rem; }


.heardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: .8rem; margin-top: .5rem; }
.heardcard { background: #f5eedc; border: 1px solid var(--line); border-radius: 14px; padding: .8rem .9rem; display: flex; flex-direction: column; gap: .5rem; }
.hc-head { display: flex; gap: .7rem; align-items: center; }
.heardcard h3 { margin: 0; font: 600 1.08rem var(--serif); }
.heardcard h3 a { color: var(--green); text-decoration: none; }
.heardcard .clip audio { width: 100%; }


.fieldguide .fg-search { margin: .2rem 0 1rem; }
.fg-contents .fg-count { font: 600 .8rem var(--serif); color: var(--gold); min-width: 2em; text-align: right; }
.fg-short { font-size: .95rem; }
.fg-short::first-letter { float: none; font: inherit; color: inherit; padding: 0; }
.fg-plates { margin-top: .6rem; }
.fg-species { background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 0 rgba(201, 161, 76, .25); }
.fg-species:hover { border-color: var(--gold-line); }
.fg-species .name { font-family: var(--serif); color: var(--green); font-size: 1.08rem; }
.fg-species .fg-sci { font: italic .82rem var(--serif); color: var(--muted); margin-top: -.1rem; }
.fg-species .pic { border-bottom: 1px solid rgba(201, 161, 76, .45); }


.species-page .hero { background: #f5eedc; border: 1px solid var(--gold-line); border-radius: 14px; padding: 1rem;
  box-shadow: var(--shadow), inset 0 0 0 5px #f5eedc, inset 0 0 0 6px rgba(201, 161, 76, .5); }
.species-page .hero .pic img { border-radius: 10px; box-shadow: 0 0 0 1px var(--line); }
.species-page .hero .credit { font-style: italic; }
.species-page .hero h1 { font-variant: small-caps; letter-spacing: .02em; margin-top: .1rem; }
.species-page .hero .sci { font-family: var(--serif); font-style: italic; color: var(--gold); letter-spacing: .02em; }
.species-page .hero .glance::first-letter { float: left; font: 600 2.9em/.85 var(--serif); color: var(--green); padding: .06em .1em 0 0; }
.species-page .hero .glance { font-size: 1.04rem; line-height: 1.6; }
.species-page section.block { background: #f5eedc; }
.species-page section.block > h2 { font-variant: small-caps; letter-spacing: .03em; padding-bottom: .35rem; border-bottom: 1px solid rgba(201, 161, 76, .5); }
.species-page .kv b { font-family: var(--serif); color: var(--green); }
.species-page .rail a.back { font-style: italic; }
.species-page .hero { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.species-page .hero h1 { overflow-wrap: anywhere; }


#app.book > h1, #app.book > .bird > div > h1:first-child { text-align: center; background: #f5eedc; border: 1px solid var(--gold-line); border-radius: 14px;
  padding: 1.5rem 1rem 1.3rem; margin: 0 0 .9rem; font-size: clamp(1.7rem, 4vw, 2.4rem);
  box-shadow: var(--shadow), inset 0 0 0 5px #f5eedc, inset 0 0 0 6px rgba(201, 161, 76, .5); }
#app.book > h1::before, #app.book > .bird > div > h1:first-child::before { content: var(--kicker); display: block; font: 600 .78rem var(--serif); letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold); margin-bottom: .45rem; }
#app.book > h1::after, #app.book > .bird > div > h1:first-child::after { content: "❦"; display: block; font-size: 1rem; color: var(--gold); margin-top: .5rem;
  background: linear-gradient(90deg, transparent, var(--gold-line) 30%, transparent 46%, transparent 54%, var(--gold-line) 70%, transparent) center / 70% 1px no-repeat; }
#app.book > h1 .h1ico, #app.book > .bird > div > h1:first-child .h1ico { display: none; }
#app.book .yeartabs { justify-content: center; }
#app.book section.block { background: #f5eedc; }
#app.book section.block h2 { font-variant: small-caps; letter-spacing: .03em; padding-bottom: .35rem;
  border-bottom: 1px solid rgba(201, 161, 76, .5); }
#app.book section.block > h3 { font-family: var(--serif); color: var(--green); }
#app.book .loading { text-align: center; font-style: italic; font-family: var(--serif); color: var(--muted); }


#app.book .home-hero.fg-plate { background: #f5eedc; border: 1px solid var(--gold-line);
  box-shadow: var(--shadow), inset 0 0 0 5px #f5eedc, inset 0 0 0 6px rgba(201, 161, 76, .5); padding: 1.4rem 1.6rem; }
#app.book .home-hero h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
#app.book .home-hero .home-sun { font-style: italic; font-family: var(--serif); }
#app.book .home-tiles a { background: #f5eedc; box-shadow: inset 0 0 0 3px #f5eedc, inset 0 0 0 4px rgba(201, 161, 76, .35); }
#app.book .home-tiles b { font-variant: small-caps; letter-spacing: .02em; }


.gourd { width: 38px; height: 50px; margin-top: 2px; }
.gourd-link { min-height: 48px; padding-left: 52px; }
.gourd-link .arm { left: 34px; width: 34px; top: 6px; }
.glabel { font-size: .95rem; }
.rack { padding: .5rem 0 1.2rem; }
.rack-sign { margin: .55rem 0 .05rem 12px; }
@media (max-height: 860px) {
  .gourd { width: 30px; height: 40px; }
  .gourd-link { min-height: 39px; padding-left: 46px; }
  .gourd-link .arm { width: 28px; top: 5px; }
  .glabel { font-size: .9rem; }
  .rack-sign { margin-top: .35rem; }
  .rack-sign span { font-size: .72rem; }
}
.gbadge { display: inline-block; margin-left: .4rem; padding: 0 .42rem; border-radius: 999px; background: #c9a14c; color: #1f2a17;
  font: 700 .72rem/1.45 system-ui, sans-serif; vertical-align: .1em; }
.gbadge[hidden] { display: none; }


.bird { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.rail { position: sticky; top: .5rem; z-index: 6; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: .3rem; align-items: center;
  padding: .4rem .5rem; background: rgba(245, 238, 220, .96); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); scrollbar-width: thin; font-size: .9rem; }
.rail a { white-space: nowrap; border-left: 0; border-radius: 999px; padding: .28rem .75rem; flex: none; }
.rail a.on { border-left: 0; background: var(--green); color: #fff; }
.rail .back { margin: 0 .3rem 0 0; padding-right: .9rem; border-right: 1px solid var(--line); border-radius: 999px 0 0 999px; }
.rail .fg-rail-title { display: none; }
.fieldguide .rail a .fg-num { min-width: 0; margin-right: .3rem; }
.rack-gap { height: .7rem; margin-left: 12px; }
.rack { padding-bottom: .3rem; }

.rail.more-right { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }


select.birdpick { appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit; padding-right: 1.9rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
select.birdpick.on { background-color: var(--green); color: #fff; }


.yardgrid.capped > .yardpic:nth-child(n+19) { display: none; }

.fieldguide figcaption { font-size: .74rem; }
.who-head { font-variant: small-caps; letter-spacing: .03em; margin: 1.2rem 0 .6rem; padding-bottom: .3rem; border-bottom: 1px solid rgba(201, 161, 76, .5); }
#app .h2emo { display: none; }
details.howto { margin: .2rem 0 .7rem; }
details.howto > summary { cursor: pointer; color: var(--gold); font: italic .9rem var(--serif); list-style: none; }
details.howto > summary::before { content: "▸ "; } details.howto[open] > summary::before { content: "▾ "; }
details.howto > p { margin: .4rem 0 0; color: var(--muted); font-size: .92rem; }
.lt-bird.maybe { opacity: .75; } .lt-bird.maybe i { font-weight: 400; color: var(--muted); }

.block::after { width: 48px; height: 30px; opacity: .45;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 165.8 104'%3E%3Cpath fill='none' stroke='%23c9a14c' stroke-width='3' stroke-linecap='round' d='M0 100A100 100 0 0 1 100 0A61.8 61.8 0 0 1 161.8 61.8A38.2 38.2 0 0 1 123.6 100A23.6 23.6 0 0 1 100 76.4A14.6 14.6 0 0 1 114.6 61.8'/%3E%3C/svg%3E") center / contain no-repeat; }

.entry .btn.warn { background: none; border-color: transparent; color: var(--muted); font-weight: 400; opacity: .55; }
.entry:hover .btn.warn, .entry .btn.warn:focus-visible { opacity: 1; border-color: currentColor; color: #a33; }
@media (hover: none) { .entry .btn.warn { opacity: .8; } }

#app input[type="checkbox"] { flex: none; width: 1.05rem; height: 1.05rem; accent-color: var(--green); }

a.chip.pick { text-decoration: none; color: var(--green); }
a.chip.pick.on { background: var(--green); color: #fff; border-color: #e2c170; font-weight: 600; }
.daybars em { font-size: .72rem; white-space: nowrap; }

@media (max-width: 600px) {
  .heat { grid-template-columns: 92px 1fr; gap: 3px 6px; }
  .heat .hl { font-size: .8rem; white-space: normal; line-height: 1.15; }
  .heat .hh, .heat .hc { grid-template-columns: repeat(24, minmax(11px, 1fr)); gap: 2px; min-width: 310px; }
}


.livegrid { align-items: start; }                       
.livecard { background: var(--card); }
.livecard .lc-head img, .livecard .lc-head .ph { width: 64px; height: 64px; }
.livecard .spectro { height: 110px; }
details.lc-recs { border-top: 1px dotted var(--gold-line); padding-top: .35rem; }
details.lc-recs > summary { cursor: pointer; color: var(--gold); font: italic .9rem var(--serif); list-style: none; }
details.lc-recs > summary::before { content: "▸ "; } details.lc-recs[open] > summary::before { content: "▾ "; }
details.lc-recs > .clip { margin-top: .4rem; }
.lcard .bigmic-wrap { margin: auto 0; }                  
#live-today { margin-top: 0; }
.clockwrap { grid-template-columns: minmax(240px, 420px) 1fr; }
.lc-silent { margin: .45rem 0; padding: .5rem .7rem; border-radius: 10px; background: #fbeee2; border: 1px solid #e3b58a; color: #7a3e12; font-size: .92rem; }

.credit-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: .1rem 1.4rem; margin-top: .6rem; }
details.credit-row { border-bottom: 1px dotted var(--gold-line); padding: .35rem 0; }
details.credit-row > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: .6rem; }
details.credit-row > summary b { font-family: var(--serif); color: var(--green); font-weight: 600; }
details.credit-row[open] { grid-column: 1 / -1; }
details.credit-row h3 { font-size: .95rem; margin: .5rem 0 .2rem; }
details.credit-row ul { font-size: .88rem; }

.card, .livecard, .fg-entry, .gm-card, .reelcard, .answer, .pt-mini, .heardcard { border-radius: 12px; }


#webcamBox { display: flex; flex-direction: column; }
#webcamBox > h2 { order: -3; }
#webcamBox > #webcamLive { order: -2; display: flex; flex-direction: column; gap: .5rem; }
#webcamLive > .webcamprev { order: -2; margin: 0 0 .2rem; }
#webcamLive > .webcamprev img { width: 100%; max-height: 72vh; object-fit: contain; }
#webcamLive > .wc-status { order: -1; }

.rack { padding-top: .3rem; }
.rack-gap { height: .35rem; }
@media (max-height: 860px) { .gourd-link { min-height: 38px; } }

@media (max-height: 860px) {
  .gourd-link { min-height: 36px; }
  .gourd { width: 28px; height: 37px; }
  .glabel { line-height: 1.1; }
  .rack-sign { margin: .2rem 0 0 12px; }
  .rack-sign span { padding: .08rem .7rem .06rem; }
}

.glabel { white-space: nowrap; }

@media (max-height: 740px) {
  .gourd-link { min-height: 32px; padding-left: 42px; }
  .gourd { width: 24px; height: 32px; margin-top: 0; }
  .gourd-link .arm { width: 24px; top: 4px; }
  .glabel { font-size: .85rem; }
  .rack-sign span { font-size: .68rem; }
  .rack-gap { height: .2rem; }
}

@media (min-height: 861px) and (max-height: 1000px) {
  .gourd-link { min-height: 42px; }
  .gourd { width: 32px; height: 43px; }
  .rack-sign { margin: .35rem 0 .05rem 12px; }
}

:root { --rack-w: 256px; }
#side { overflow-x: hidden; }
.glabel { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gourd-link { padding-right: .4rem; }

@media (min-height: 861px) and (max-height: 1000px) {
  .gourd-link { min-height: 39px; }
  .gourd { width: 30px; height: 40px; }
  .rack-sign { margin: .25rem 0 0 12px; }
  .rack { padding-bottom: .2rem; }
}


.gm-card.has-banner { flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
.gm-card.has-banner .gm-cbody { padding: .8rem 1rem 1rem; }
.gm-banner { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; height: 128px; width: 100%;
  background: #e9e3d3; overflow: hidden; border-bottom: 1px solid rgba(201, 161, 76, .45); }
.gm-banner img, .gm-noimg { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; display: block; min-width: 0; }
.gm-badge { position: absolute; left: .55rem; bottom: .5rem; width: 2.3rem; height: 2.3rem; display: grid; place-items: center;
  font-size: 1.35rem; border-radius: 50%; background: rgba(245, 238, 220, .92); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }

.gm-b-grid4 { grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; padding: 6px; gap: 6px; background: var(--green); }
.gm-b-grid4 img { border-radius: 6px; }

.gm-b-row img.dab { outline: 5px solid rgba(214, 69, 65, .75); outline-offset: -14px; border-radius: 50%; }

.gm-b-fog img { filter: blur(5px) brightness(1.08) saturate(.8); transform: scale(1.1); }
.gm-b-fog::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .15)); }

.gm-b-size { align-items: end; padding: 8px 10px 0; gap: 10px; background: linear-gradient(#f3ecd8, #e6dcc0); }
.gm-b-size img { border-radius: 10px 10px 0 0; }
.gm-b-size img:nth-child(1) { height: 42%; } .gm-b-size img:nth-child(2) { height: 70%; } .gm-b-size img:nth-child(3) { height: 100%; }

.gm-b-zoom img { transform: scale(2.8); transform-origin: 50% 38%; }

.gm-wave { position: absolute; left: 0; right: 0; bottom: 14px; height: 34px; width: 100%; }
.gm-wave path { fill: none; stroke: #fff; stroke-width: 3; opacity: .9; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }

.gm-vs { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--green); color: #fff;
  font: 700 .95rem var(--serif); padding: .3rem .55rem; border-radius: 50%; border: 2px solid #e2c170; }
.law-src { font-size: .82rem; color: var(--muted); margin-top: .6rem; line-height: 1.6; }
.law-src a { color: var(--gold); }
.wc-picture > h3 { margin: 0 0 .6rem; font-size: 1.05rem; color: var(--green); }

@media (min-height: 741px) and (max-height: 860px) { .gourd-link { min-height: 34px; } .gourd { width: 27px; height: 35px; } }
@media (min-height: 861px) and (max-height: 1000px) { .gourd-link { min-height: 37px; } .gourd { width: 29px; height: 38px; } }
@media (max-height: 740px) { .gourd-link { min-height: 30px; } .gourd { width: 23px; height: 30px; } }
@media (min-height: 741px) and (max-height: 860px) { .gourd-link { min-height: 33px; } .rack-sign { margin-top: .12rem; } }


.law-pic { float: right; width: min(38%, 300px); margin: .2rem 0 .8rem 1.2rem; }
.law-pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 10px; box-shadow: 0 0 0 1px var(--line), 0 2px 8px rgba(0,0,0,.12); }
.law-pic figcaption { font-size: .74rem; color: var(--muted); margin-top: .35rem; line-height: 1.35; font-style: italic; }
.law-pic figcaption span { font-style: normal; opacity: .85; }
#law-rare, .fg-chapter:has(.law-pic) { display: flow-root; }
.fg-chapter:has(.law-pic) .law-src { clear: both; }
@media (max-width: 640px) { .law-pic { float: none; width: 100%; margin: .4rem 0 .8rem; } }

.top .garden-link { flex: none; }
@media (max-width: 900px) { .top .brand-text { overflow: hidden; text-overflow: ellipsis; } }
@media (max-width: 430px) { .top .brand .emblem { display: none; } .top .brand-text { font-size: 1rem; } }


#liveStatus .meter span { transition: width .8s ease; }


.migr .mg-lede { margin: .2rem 0 .9rem; }
.mg-top { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 1.2rem; align-items: start; margin-bottom: .6rem; }
.mg-track { position: relative; height: 12px; border-radius: 999px; background: rgba(201, 161, 76, .18); box-shadow: inset 0 0 0 1px rgba(201, 161, 76, .35); margin-top: .5rem; }
.mg-peak { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, rgba(201, 161, 76, .55), rgba(201, 161, 76, .9), rgba(201, 161, 76, .55)); }
.mg-today { position: absolute; top: -5px; width: 4px; height: 22px; margin-left: -2px; border-radius: 2px; background: var(--green); box-shadow: 0 0 0 2px var(--paper, #f5eedc); }
.mg-ticks { display: flex; justify-content: space-between; font-size: .72rem; color: var(--muted); margin: .3rem 0 .4rem; }
.mg-nights { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.mg-night { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "when arrow" "word arrow" "wind wind" "why why"; align-items: center;
  padding: .6rem .75rem; border-radius: 12px; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px var(--line); border-top: 4px solid #b9b39f; }
.mg-night.busy { border-top-color: #3f8f5a; } .mg-night.fair { border-top-color: #c9a14c; } .mg-night.light { border-top-color: #9aa7b3; } .mg-night.quiet { border-top-color: #6d7f95; }
.mg-when { grid-area: when; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.mg-night b { grid-area: word; font: 700 1.25rem var(--serif); color: var(--green); }
.mg-night.light b, .mg-night.quiet b { color: #56657a; }
.mg-arrow { grid-area: arrow; width: 30px; height: 30px; fill: none; stroke: var(--green); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mg-wind { grid-area: wind; font-size: .82rem; margin-top: .15rem; }
.mg-why { grid-area: why; font-size: .75rem; color: var(--muted); line-height: 1.3; }
.mg-note { margin: .35rem 0 0; font-size: .74rem; }
.mg-group { margin-top: 1rem; }
.mg-group h3 { margin: 0 0 .5rem; font-size: 1.02rem; }
.mg-group h3 .where { font-weight: 400; font-size: .8rem; margin-left: .3rem; }
.mg-row { display: grid; grid-auto-flow: column; grid-auto-columns: 112px; gap: .6rem; overflow-x: auto; padding-bottom: .3rem; scrollbar-width: thin; }
.mg-row.wrap { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); overflow: visible; margin-top: .5rem; }
.mg-bird { display: flex; flex-direction: column; gap: .2rem; text-decoration: none; color: var(--ink); font-size: .78rem; line-height: 1.2; }
.mg-bird img, .mg-nopic { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; display: grid; place-items: center; font-size: 1.6rem;
  background: rgba(201, 161, 76, .12); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .15s, transform .15s; }
.mg-bird:hover img { box-shadow: 0 0 0 2px var(--gold-line, #c9a14c); transform: translateY(-1px); }
.mg-name { font-weight: 600; }
.mg-yard { font-size: .7rem; color: #3f7a52; font-weight: 600; }
.mg-more summary { cursor: pointer; font-size: .82rem; color: var(--muted); margin-top: .2rem; }
.mg-links { margin-top: 1rem; font-size: .85rem; }
@media (max-width: 900px) { .mg-top { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .mg-nights { grid-template-columns: 1fr; } .mg-row { grid-auto-columns: 96px; } }
.mg-season .where { font-size: .86rem; line-height: 1.45; margin: 0; }


.phone-steps { margin: .4rem 0 .8rem 1.2rem; line-height: 1.55; }
.phone-steps li { margin: .3rem 0; }
.phone-connect input { flex: 1 1 220px; min-width: 0; max-width: 320px; padding: .55rem .7rem; border-radius: 10px; border: 1px solid var(--line); font: inherit; background: #fff; }
#phoneBox .webcamprev img { width: 100%; display: block; border-radius: 10px; }


body {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(255, 250, 240, .75), transparent 60%),
    var(--flower) 0 0 / 60px 104px,
    linear-gradient(rgba(196, 146, 86, .34), rgba(196, 146, 86, .34)),
    #fdfaf4;
  background-attachment: fixed;
}
.phone-alt { margin: .8rem 0; padding-top: .7rem; border-top: 1px dashed var(--line); }
.phone-alt h3 { margin: 0 0 .3rem; font-size: 1.02rem; }
.phone-addr { font-family: Consolas, monospace; font-size: 1.05rem; background: rgba(201,161,76,.18); padding: .1rem .4rem; border-radius: 6px; white-space: nowrap; }
.phone-pic { margin-top: .9rem; padding-top: .7rem; border-top: 1px dashed var(--line); display: grid; gap: .45rem; max-width: 560px; }
.phone-pic h3 { margin: 0; font-size: 1.02rem; }
.phone-pic .kv { display: grid; grid-template-columns: 150px 1fr 3.2em; align-items: center; gap: .6rem; }
.phone-pic input[type=range] { width: 100%; }


details.storage { padding: .7rem 1.1rem; }
details.storage > summary { cursor: pointer; font-weight: 600; }
details.storage[open] > summary { margin-bottom: .5rem; }


.othercard .other-ico { display: grid; place-items: center; font-size: 1.9rem; background: rgba(201, 161, 76, .14); }


@media (min-width: 760px) {
  .listen2 { grid-template-columns: minmax(210px, 260px) minmax(0, 1fr); align-items: start; }
}
.sing.lcard { padding: .9rem 1rem; }
.sing.lcard h2 { font-size: 1.15rem; }
.sing.lcard > p { font-size: .88rem; margin: .2rem 0 .4rem; }
.sing.lcard .bigmic { width: 72px; height: 72px; font-size: 1.7rem; }
.sing.lcard .bigmic-wrap { margin: .4rem 0 .1rem; gap: .3rem; }
.sing.lcard .bigmic-label { font-size: .85rem; }


.notbird { display: block; margin-top: .25rem; color: var(--red); font-size: .82rem; text-align: left; }
.notbird-choices { display: grid; gap: .5rem; }
.notbird-choices .btn { text-align: left; }
.notbird-choices small { display: block; font-weight: 400; opacity: .85; }
.fixedline { margin-top: .8rem; }
body.public .notbird, body.public [data-fixback] { display: none !important; }


@media (min-width: 1100px) {
  .listen2 { grid-template-columns: minmax(200px, 240px) minmax(250px, 310px) minmax(0, 1fr); align-items: start; }
}
@media (min-width: 760px) and (max-width: 1099px) {
  .listen2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .listen2 .heardcard { grid-column: 1 / -1; }
}
.allday.lcard, .heardcard.lcard { padding: .9rem 1rem; }
.allday.lcard h2, .heardcard.lcard h2 { font-size: 1.15rem; }
.allday.lcard > p { font-size: .88rem; margin: .2rem 0 .5rem; }
.allday .lc-state { font-size: 1rem; }
.allday .lc-more { margin-top: .6rem; }
.heardcard .lc-sub { margin: .6rem 0 .3rem; font-size: .95rem; }
.heardcard .nowgrid { gap: .45rem; }
.heardcard .nowcard { padding: .3rem .7rem .3rem .3rem; font-size: .9rem; }
.heardcard .nowcard img { width: 38px; height: 38px; }
.tenlog { max-height: 250px; overflow-y: auto; border-top: 1px solid var(--line); scrollbar-width: thin; }
.tenrow { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: .5rem; padding: .28rem 0; border-bottom: 1px dotted var(--line); font-size: .9rem; }
.tenrow b { color: var(--green); font-weight: 600; white-space: nowrap; }
.tenrow i { font-style: normal; color: var(--muted); font-size: .82rem; }
.tenrow a { color: inherit; }


@media (min-width: 900px) {
  .listen2 { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .listen2 .heardcard { grid-column: auto; }
  .listen2 > .block { height: 100%; box-sizing: border-box; }
  
  .heardcard { min-height: 0; }
  .heardcard .tenlog { flex: 1 1 0; min-height: 96px; max-height: none; }
}
.allday #liveStatus { font-size: .9rem; }
.allday #liveStatus .where { font-size: .82rem; }
.allday .btn { font-size: .92rem; padding: .4rem .9rem; }
.sing.lcard, .allday.lcard, .heardcard.lcard { padding: .9rem 1rem; }
@media (min-width: 900px) { .listen2 > .block { min-height: 400px; } }
.heardcard .lc-sub { margin: .45rem 0 .2rem; }
.heardcard #rightNow p { margin: .2rem 0; font-size: .92rem; }
.heardcard h2, .allday h2 { margin-top: .35rem; }
.tenlog { scrollbar-color: var(--gold-line) transparent; }
.allday .lc-more > summary { font-size: .92rem; }


@media (min-width: 900px) {
  .listen2 { grid-template-columns: minmax(180px, 215px) minmax(215px, 250px) minmax(0, 1fr); }
  .sing.lcard > p, .allday.lcard > p { font-size: .84rem; }
  .allday #liveStatus .where { overflow-wrap: anywhere; }
  .tenrow { grid-template-columns: 4.8rem minmax(0, 1fr); font-size: .95rem; }
}


.wrongcall { font-size: .8rem; color: var(--muted, #6b7a6d); margin-top: .15rem; }
.wrongcall:hover { color: #a8352a; }
.hrow .wrongcall { margin: 0 0 0 .3rem; }
body.public .wrongcall, body.public [data-soundback] { display: none; }
.fixedones { margin-top: .5rem; }
.fixedones li { margin: .15rem 0; }


.shape-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .8rem; margin: .6rem 0; }
.shape-grid figure { margin: 0; }
.shape-grid figcaption { font-size: .85rem; line-height: 1.35; margin-top: .3rem; }
.shape-pic { width: 100%; display: block; }
.shape-pic > rect { fill: #14110f; }
.shape-pic path, .shape-pic line { stroke: #ffd166; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.shape-pic .fuzz rect { fill: #ffd166; opacity: .55; filter: blur(.8px); }


.vc-spec { display: flex; flex-direction: column; gap: .15rem; }
.vc-spec .spectro { margin: 0; cursor: pointer; }
.vc-spec .spectro { height: 120px; }


.spec-speed { position: absolute; left: 34px; bottom: 5px; display: flex; gap: 2px; z-index: 2; }
.spec-speed button { font: 600 .68rem "Segoe UI", sans-serif; padding: .08rem .38rem; border-radius: 6px; border: 1px solid rgba(255,255,255,.35); background: rgba(12,14,18,.7); color: #e8eee8; cursor: pointer; }
.spec-speed button.on { background: #ffd166; color: #1b1b1b; border-color: #ffd166; }
.spectro.failed .spec-speed { display: none; }
.spec-stats { font-size: .8rem; color: var(--muted, #5d6b5f); line-height: 1.35; margin: .1rem 0 .25rem; }
.recrow { display: flex; flex-wrap: wrap; gap: .2rem .8rem; align-items: center; }
.cmpbtn { font-size: .8rem; }
.kindchips { display: inline-flex; gap: 2px; }
.kindchips button { font-size: .72rem; padding: .05rem .45rem; border-radius: 999px; border: 1px solid var(--line, #cfd6cf); background: transparent; color: inherit; cursor: pointer; }
.kindchips button.on { background: var(--green, #2f5d3a); color: #fff; border-color: var(--green, #2f5d3a); }

.sb-panel.cmp { width: min(1200px, 96vw); max-height: 94vh; overflow-y: auto; display: grid; gap: .6rem; }
.cmp .spectro { height: 240px; }
.cmp .spec-inner, .cmp .spec-inner img { min-width: 0; }
.cmp-pick { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.cmp audio { width: 100%; max-width: 560px; }


.alikes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 1rem; }
.alike { display: flex; flex-direction: column; gap: .4rem; }
.alike p { margin: 0; font-size: .93rem; line-height: 1.45; }
.alike .spectro { height: 130px; }
.sq-choices { display: flex; flex-wrap: wrap; gap: .5rem; }

.scape { position: relative; border-radius: 8px; overflow: hidden; background: #0c0e12; }
.scape canvas { display: block; width: 100%; height: 176px; image-rendering: pixelated; cursor: crosshair; }
.scape .khz { position: absolute; left: 0; top: 0; bottom: 0; width: 30px; pointer-events: none; background: linear-gradient(90deg, rgba(12,14,18,.75), transparent); }
.scape .khz b { position: absolute; left: 4px; transform: translateY(-50%); font: 600 .66rem "Segoe UI", sans-serif; color: rgba(255,255,255,.8); text-shadow: 0 0 3px #000; }
.scape-sun { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed rgba(255, 209, 102, .85); pointer-events: none; }
.scape-hours { position: relative; height: 1.3rem; font-size: .72rem; color: var(--muted, #5d6b5f); }
.scape-hours span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.scape-hours span:first-child { transform: none; } .scape-hours span:last-child { transform: translateX(-100%); }


.labjump { margin: .4rem 0 .8rem; }
.labfacts li { margin: .35rem 0; line-height: 1.5; }
.labcal-wrap { overflow-x: auto; }
.labcal { min-width: 760px; width: 100%; display: block; font-family: "Segoe UI", sans-serif; }
.labcal .nm { font-size: 12px; fill: currentColor; }
.labcal .ax { font-size: 10.5px; fill: var(--muted, #5d6b5f); }
.labcal .tick { stroke: var(--line, #d9dfd6); stroke-width: 1; }
.labcal .spanline { fill: var(--line, #cfd6cf); }
.labcal .seen { fill: var(--green, #2f5d3a); }
.labcal .heard { fill: #9cc59f; }
.ebtable { border-collapse: collapse; margin: .5rem 0; width: 100%; }
.ebtable th, .ebtable td { text-align: left; padding: .25rem .5rem; border-bottom: 1px solid var(--line, #d9dfd6); vertical-align: middle; }
.labbars { display: flex; align-items: flex-end; gap: 4px; height: 150px; padding-bottom: 1.2rem; }
.labbars > div { flex: 1; height: 100%; display: flex; align-items: flex-end; gap: 1px; position: relative; }
.labbars i { flex: 1; border-radius: 3px 3px 0 0; }
.labbars i.low, .lg.low { background: #8a8f98; } .labbars i.bird, .lg.bird { background: var(--green, #2f5d3a); }
.labbars span { position: absolute; bottom: -1.15rem; left: 0; font-size: .68rem; white-space: nowrap; color: var(--muted, #5d6b5f); }
.lg { display: inline-block; width: .8rem; height: .8rem; border-radius: 2px; vertical-align: -1px; }
.labpairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); gap: 1rem; }
.labpair { display: grid; grid-template-columns: 180px 1fr; gap: .7rem; align-items: start; }
.labpair video { width: 100%; border-radius: 8px; background: #111; }
.labpair audio { width: 100%; margin-top: .3rem; }
.hintline { font-size: .82rem; background: #fff4d6; border: 1px solid #e7c873; color: #5b4300; border-radius: 6px; padding: .2rem .45rem; margin: .2rem 0; }


.home-hero.hh2 { position: relative; overflow: hidden; align-items: stretch; gap: 1.4rem; padding: 1.3rem 1.5rem; }
.home-hero.hh2 > svg { position: absolute; right: 215px; top: 50%; transform: translateY(-50%); width: 230px; height: 230px; opacity: .28; pointer-events: none; }
.hh-text { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: .55rem; }
.hh-day { display: grid; grid-template-columns: auto minmax(120px, 360px) auto; align-items: center; gap: .15rem .6rem; font-size: .88rem; color: var(--muted); max-width: 560px; }
.hh-day em { grid-column: 1 / -1; font-family: var(--serif); font-style: italic; }
.hh-track { position: relative; height: 8px; border-radius: 999px; background: rgba(47, 93, 58, .14); }
.hh-track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #f3d98f, #e2a93b); }
.hh-track b { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #f6c343; box-shadow: 0 0 0 3px rgba(246, 195, 67, .3), 0 1px 3px rgba(0, 0, 0, .25); }
.hh-day.night .hh-track b { background: #c9cfe0; box-shadow: 0 0 0 3px rgba(150, 160, 190, .3); }
.hh-day.night .hh-track i { background: linear-gradient(90deg, #cdd3e2, #9aa3bd); }
.hh-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.hh-pills a { display: inline-flex; align-items: baseline; gap: .3rem; padding: .28rem .7rem; border-radius: 999px; background: rgba(255, 255, 255, .6); border: 1px solid var(--gold-line); color: inherit; text-decoration: none; font-size: .86rem; transition: background .15s, transform .15s; }
.hh-pills a:hover { background: #fff; transform: translateY(-1px); }
.hh-pills b { font-family: var(--serif); font-size: 1.05rem; color: var(--green); }
.hh-star { position: relative; flex: none; width: 250px; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; display: block; background: #e9e1cb; box-shadow: 0 0 0 1px var(--gold-line), 0 0 0 5px #f5eedc, 0 0 0 6px var(--gold-line), 0 6px 18px rgba(60, 45, 10, .18); text-decoration: none; }
.hh-star img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.hh-star:hover img { transform: scale(1.04); }
.hh-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem .7rem .5rem; color: #fff; background: linear-gradient(transparent, rgba(15, 30, 20, .82)); display: flex; flex-direction: column; line-height: 1.25; }
.hh-cap em { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; font-style: normal; opacity: .85; }
.hh-cap b { font-family: var(--serif); font-size: 1.15rem; }
.hh-cap span { font-size: .8rem; opacity: .9; }
@media (max-width: 760px) { .home-hero.hh2 { flex-direction: column; } .hh-star { width: 100%; max-width: 420px; } .home-hero.hh2 > svg { right: -40px; } }

.home-tiles a { gap: .3rem; padding: .85rem .9rem .8rem; }
.home-tiles .ht-ico { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.3rem; background: rgba(47, 93, 58, .1); box-shadow: inset 0 0 0 1px rgba(47, 93, 58, .12); margin-bottom: .15rem; }
.home-tiles a:hover .ht-ico { background: rgba(226, 169, 59, .22); }
.home-tiles a:hover { box-shadow: 0 6px 16px rgba(60, 45, 10, .12); }
.hh-rise, .hh-set { white-space: nowrap; }

.okcall { font-size: .8rem; color: var(--green, #2f5d3a); font-weight: 600; }
body.public .okcall { display: none; }


.editclip { font-size: .82rem; }
.sb-panel.editdialog { max-width: 640px; max-height: 94vh; overflow-y: auto; }
.editdialog video, .editdialog img { width: 100%; max-height: 300px; object-fit: contain; border-radius: 10px; background: #111; }
.editdialog textarea, .editdialog input:not([type]) { width: 100%; font: inherit; padding: .45rem .55rem; border: 1px solid var(--line); border-radius: 8px; box-sizing: border-box; }
.editdialog label { display: grid; gap: .2rem; }
.lt-clip .editclip { display: block; margin-top: .2rem; text-align: left; }


html { scroll-behavior: smooth; }
.livecard, .vcard, .camcard, .alike, .labpair { transition: box-shadow .18s, transform .18s; }
.livecard:hover, .vcard:hover, .camcard:hover { box-shadow: 0 8px 22px rgba(60, 45, 10, .13); transform: translateY(-1px); }
.answer { border-left: 4px solid var(--gold, #c9a14c); }

.recrow { gap: .3rem .4rem; margin-top: .3rem; }
.recrow .linkbtn, .editclip, .cmpbtn, .wrongcall, .okcall { display: inline-flex; align-items: center; gap: .25rem; padding: .12rem .55rem; border-radius: 999px; border: 1px solid var(--line, #d9dfd6); background: rgba(255, 255, 255, .55); text-decoration: none; line-height: 1.5; transition: background .15s, border-color .15s; }
.recrow .linkbtn:hover, .editclip:hover, .cmpbtn:hover { background: #fff; border-color: var(--gold-line, #c9a14c); }
.wrongcall:hover { background: #fdecea; border-color: #e0a39c; }
.okcall { border-color: rgba(47, 93, 58, .45); background: rgba(47, 93, 58, .08); }
.kindchips button:hover { border-color: var(--green, #2f5d3a); }
.spec-stats { background: rgba(47, 93, 58, .06); border-radius: 6px; padding: .2rem .45rem; }

details.howto > summary, details.lc-recs > summary, details.lc-more > summary { cursor: pointer; padding: .2rem .1rem; border-radius: 6px; }
details.howto > summary:hover, details.lc-recs > summary:hover { background: rgba(201, 161, 76, .14); }
details.howto[open] > summary { margin-bottom: .3rem; }

.ebtable tbody tr:nth-child(odd) { background: rgba(255, 255, 255, .45); }
.ebtable tbody tr:hover { background: rgba(201, 161, 76, .16); }
.ebtable th { font-family: var(--serif); font-variant: small-caps; letter-spacing: .03em; color: var(--green, #2f5d3a); border-bottom: 2px solid var(--gold-line, #c9a14c); }

.labtiles { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: .7rem; }
.labtiles li { position: relative; padding: .75rem .9rem .8rem 3.5rem; border-radius: 12px; background: rgba(255, 255, 255, .5); border: 1px solid var(--line, #d9dfd6); line-height: 1.5; font-size: .93rem; }
.labtiles li > b { display: block; font-family: var(--serif); font-size: 1.02rem; color: var(--green, #2f5d3a); margin-bottom: .1rem; }
.labtiles .lt-ico { position: absolute; left: .8rem; top: .75rem; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.15rem; background: rgba(47, 93, 58, .1); }
.labjump { position: sticky; top: 0; z-index: 5; padding: .35rem 0; backdrop-filter: blur(6px); }
.labcal-wrap { background: rgba(255, 255, 255, .45); border-radius: 10px; padding: .4rem .5rem; }
.labpair { padding: .6rem; border-radius: 12px; background: rgba(255, 255, 255, .45); border: 1px solid var(--line, #d9dfd6); }

.hintline { line-height: 1.45; }

.alike { padding: .7rem; border-radius: 12px; background: rgba(255, 255, 255, .45); border: 1px solid var(--line, #d9dfd6); }
.cmp-pick { padding: .5rem .6rem; border-radius: 10px; background: rgba(47, 93, 58, .06); }

.tenlog, .spec-scroll, .labcal-wrap { scrollbar-width: thin; }
:focus-visible { outline: 2px solid var(--gold, #c9a14c); outline-offset: 2px; }


.ebdays { max-height: 7.2rem; overflow-y: auto; scrollbar-width: thin; }
details.ebday { margin: .5rem 0; padding: .35rem .6rem; border-radius: 10px; background: rgba(255, 255, 255, .45); border: 1px solid var(--line, #d9dfd6); }
details.ebday > summary { cursor: pointer; }


.rec-head { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin-bottom: .3rem; }
.rec-time { font-family: var(--serif); font-size: 1.05rem; color: var(--green, #2f5d3a); min-width: 4.6rem; }
.rec-tools { margin: .5rem 0; gap: .5rem .7rem; align-items: center; }
.allrecs .spectro { height: 120px; }

.livejump { margin: .2rem 0 .8rem; }


.home-tiles { grid-template-columns: repeat(3, 1fr); }
.home-tiles a { display: grid; grid-template-columns: auto 1fr; column-gap: .75rem; row-gap: 0; align-items: center; padding: .75rem .95rem; }
.home-tiles .ht-ico { grid-row: 1 / span 2; margin: 0; }
.home-tiles b { align-self: end; line-height: 1.2; }
.home-tiles .where { align-self: start; }
@media (max-width: 900px) { .home-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .home-tiles { grid-template-columns: 1fr; } }
.home-grid.one { grid-template-columns: 1fr; }
.lt-head h2 { white-space: nowrap; }
.lt-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0 1.6rem; align-items: start; }
.lt-cols.one { grid-template-columns: 1fr; }
@media (max-width: 900px) { .lt-cols { grid-template-columns: 1fr; } }
.lt-cols .lt-sub:first-child { margin-top: .6rem; }
.home-grid.one .reelwrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.home-grid.one .reelch { grid-template-columns: 1fr 1fr; gap: .3rem 1.6rem; align-content: start; }
@media (max-width: 900px) { .home-grid.one .reelwrap, .home-grid.one .reelch { grid-template-columns: 1fr; } }

.insights { display: block; columns: 3 250px; column-gap: .8rem; }
.insight { break-inside: avoid; margin: 0 0 .8rem; }
.insight > .where { margin-top: .2rem; }
.hear-play { font-size: .76rem; padding: .32rem .4rem; white-space: nowrap; }


.home-tiles { display: flex; flex-wrap: wrap; gap: .5rem; grid-template-columns: none; margin-bottom: .9rem; }
.home-tiles a { flex: 0 1 auto; padding: .4rem .85rem .4rem .45rem; column-gap: .55rem; border-radius: 999px; }
#app.book .home-tiles a { box-shadow: none; border: 1px solid var(--gold-line); }
.home-tiles .ht-ico { width: 2.1rem; height: 2.1rem; font-size: 1.1rem; }
.home-tiles b { font-size: .95rem; line-height: 1.15; }
.home-tiles .where { font-size: .74rem; line-height: 1.2; }
@media (max-width: 520px) { .home-tiles a { flex: 1 1 100%; } }

.ebtable { width: auto; min-width: min(560px, 100%); }
.ebtable th, .ebtable td { padding: .18rem .7rem .18rem .4rem; }


table.plain { width: auto; max-width: 100%; }
table.plain td, table.plain th { padding: .2rem .8rem; line-height: 1.3; vertical-align: middle; }
table.plain th { font-size: .82rem; }
.pt-table td.pt-who img { width: 22px; height: 22px; border-radius: 6px; }
.pt-table td.shade { min-width: 4rem; }
.pt-top { max-width: 860px; gap: .05rem; margin-bottom: .8rem; }
.pt-toprow { grid-template-columns: 1.3rem 28px minmax(8rem, 13rem) 1fr 4rem; padding: .08rem .3rem; gap: .5rem; }
.pt-thumb { width: 28px; height: 28px; border-radius: 7px; }
.pt-bar { height: 9px; }
.tiles.pt-tiles { display: flex; flex-wrap: wrap; gap: .45rem; }
.tiles.pt-tiles > div { flex: 0 1 auto; display: flex; align-items: baseline; gap: .4rem; padding: .3rem .85rem; border-radius: 999px; }
.tiles.pt-tiles > div b { font-size: 1.25rem; line-height: 1.2; }
.tiles.pt-tiles > div span { font-size: .82rem; }
.pt-how { margin: 0 0 .6rem; font-size: .9rem; }
.mkgrid { display: flex; flex-wrap: wrap; gap: .5rem; }
.mkbtn { flex-direction: row; align-items: center; gap: .4rem; padding: .35rem .95rem; border-radius: 999px; font-size: .92rem; }
.mkbtn span { font-size: 1.05rem; }
.replist { grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: .5rem; }
.repcard { padding: .5rem .75rem; gap: .12rem; border-radius: 10px; }
.repcard b { font-size: .95rem; line-height: 1.25; }
.rep-nums { gap: .8rem; font-size: .8rem; }
.rep-nums em { font-size: 1.05rem; }
.repcard .chip { font-size: .76rem; padding: .1rem .5rem; line-height: 1.3; }


#app.book > h1, #app.book > .bird > div > h1:first-child { padding: .8rem 1rem .6rem; margin-bottom: .7rem; font-size: clamp(1.5rem, 3.2vw, 2rem); }
#app.book > h1::before, #app.book > .bird > div > h1:first-child::before { margin-bottom: .2rem; font-size: .72rem; }
#app.book > h1::after, #app.book > .bird > div > h1:first-child::after { margin-top: .2rem; font-size: .85rem; }

.tiles.pt-tiles > div { flex-direction: row; }


body.public .camcard .tagrow, body.public .camcard .tagchips, body.public .camcard input[data-f], body.public .snaprow,
body.public form.log, body.public [data-use], body.public .editclip,
body.public [data-choosephoto], body.public .kindchips, body.public #gotIt, body.public #aiNotes, body.public .mkgrid { display: none !important; }
.lookonly { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 80; background: #24452f; color: #fff; padding: .55rem 1rem; border-radius: 999px; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); font-size: .92rem; }


.heldgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: .8rem; }
.heldcard { display: flex; flex-direction: column; gap: .35rem; }
.heldcard video, .heldcard img { width: 100%; max-height: 220px; object-fit: contain; border-radius: 10px; background: #111; }
.upitem.held em { color: #8a6a1f; }


body.static .who-btn, body.static .reelch a.where, body.static [data-keepfilm], body.static [data-skipfilm],
body.static [data-undofilm], body.static .suggcard .tagrow, body.static .cmpbtn, body.static [data-hearit], body.static .pt-how,
body.static #p-ai, body.static .rail a[data-sec="ai"], body.static .yl-pick, body.static [data-pick], body.static .yeartabs[hidden],
body.static #hhReports, body.static #logBtn, body.static #yardBtn.ghost, body.static .namebtn, body.static #s-yard > p:last-of-type,
body.static #app a[href^="#/journal"], body.static #app a[href^="#/settings"], body.static #s-cam:not(:has(.camcard)), body.static #lab-feed, body.static #app a[href^="#/regulars"], body.static #app a[href^="#/feeders"], body.static [data-use], body.static .snaprow, body.static #recFresh, body.static section.block:has([data-mk]), body.static section.block:has([data-sch]), body.static .kindchips, body.static .wrongcall, body.static .okcall, body.static #app a[href^="#/fix"], body.static [data-del], body.static .editclip, body.static [data-editclip], body.static .wrongbtn, body.static [data-wrong] { display: none !important; }

body.static [data-clip], body.static #yardBtn { pointer-events: none; cursor: default; }


.phzoom { align-items: center; flex-wrap: wrap; gap: .5rem; }
.phzoom input[type=range] { flex: 1 1 160px; min-width: 140px; }
.phzoom output { min-width: 3.2em; font-weight: 700; }
.phzoom #phIn, .phzoom #phOut { min-width: 2.6rem; font-size: 1.2rem; line-height: 1; }
#phoneImg.aimable { cursor: crosshair; }