/* Typography is kept local so the field journal stays quick and dependable offline. */

:root{color-scheme:light;--paper:#e8e3d7;--paper-light:#f0ece2;--ink:#26352c;--muted:#768074;--line:#c9c8b8;--forest:#2c5942;--leaf:#678254;--clay:#b65e45;--sun:#cfac5d;--serif:'Instrument Serif',Georgia,serif;--sans:'DM Sans',Arial,sans-serif;--mono:'DM Mono',monospace}
*{box-sizing:border-box}
html{min-width:320px;background:var(--paper)}
body{margin:0;color:var(--ink);font-family:var(--sans);font-size:14px;background:var(--paper);-webkit-font-smoothing:antialiased}
button,input{font:inherit}
button{color:inherit}
.page-shell{max-width:1540px;margin:0 auto;padding:0 54px}
.masthead{height:74px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.wordmark{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:27px var(--serif);letter-spacing:-1px}
.wordmark-dot{color:var(--clay)}
.mark{width:25px;height:25px;position:relative;display:inline-block;border-left:2px solid var(--forest);margin-left:6px}
.mark i{position:absolute;width:10px;height:6px;border:1.5px solid var(--forest);border-radius:9px 1px 9px 1px;transform:rotate(-30deg);left:-2px;top:4px}
.mark i:nth-child(2){top:10px;left:4px;transform:rotate(20deg) scaleX(-1)}
.mark i:nth-child(3){top:17px;left:-2px}
.masthead-note,.github-link{font:10px var(--mono);letter-spacing:.04em;color:var(--muted)}
.live-dot,.canvas-status span{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--leaf);margin-right:8px;vertical-align:1px}
.slash{color:#aaa997;margin:0 9px}
.github-link{text-decoration:none;border-bottom:1px solid var(--line);padding:8px 0;color:var(--ink)}
.github-link span{color:var(--clay);margin-left:6px}
.intro{padding:43px 0 34px;display:flex;align-items:flex-end;justify-content:space-between}
.kicker,.eyebrow,.stamp-line{font:9px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.kicker{margin:0 0 13px}.kicker span{color:var(--clay);margin-left:10px}
h1,h2,h3,p{margin-top:0}
h1{font:clamp(46px,6vw,76px)/.88 var(--serif);letter-spacing:-.035em;margin:0;color:var(--ink);font-weight:400}
h1 em,.fieldnotes-panel h2 em{font-weight:400;color:var(--forest)}
.intro-text{margin:17px 0 0;color:#626e61;font-size:13px}
.specimen-stamp{width:97px;height:97px;border:1px solid #a5aa97;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-9deg);margin:0 5.5% 4px 20px;color:var(--muted)}
.specimen-stamp strong{font:32px/.95 var(--serif);color:var(--clay);font-weight:400;margin:5px 0}
.stamp-line{font-size:7px;letter-spacing:.08em}
.workbench{display:grid;grid-template-columns:276px minmax(400px,1fr) 274px;min-height:585px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.controls-panel{padding:25px 23px 23px 0;border-right:1px solid var(--line)}
.panel-heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:22px}
.panel-heading h2{font:25px var(--serif);font-weight:400;margin:5px 0 0;letter-spacing:-.02em}
.reset-button{border:0;border-bottom:1px solid var(--line);background:none;padding:3px 0 4px;color:var(--muted);font:10px var(--mono);cursor:pointer}
.reset-button:hover{color:var(--clay);border-color:var(--clay)}
.species-picker{padding:0 0 17px;margin:0 0 14px;border:0;border-bottom:1px solid var(--line);min-width:0}
.species-picker legend{padding:0;margin-bottom:11px;font-size:11px;color:#596557}
.species-options{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.species-button{border:1px solid transparent;border-radius:2px;background:transparent;padding:7px 2px 6px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;color:#657061;font-size:9px;transition:background .22s,border-color .22s,color .22s}
.species-button:hover{background:#dedfd2}
.species-button.is-active{border-color:#a4ae94;background:#dce1d4;color:var(--ink)}
.species-glyph{width:24px;height:25px;position:relative;display:block}
.species-glyph:before,.species-glyph:after{content:"";position:absolute;background:var(--leaf)}
.oak-glyph:before{width:4px;height:18px;left:10px;bottom:0;background:#785e46;border-radius:2px}
.oak-glyph:after{width:18px;height:16px;left:3px;top:0;border-radius:48% 48% 40% 40%;box-shadow:0 -3px 0 -1px #82936b}
.birch-glyph:before{width:3px;height:23px;left:11px;bottom:0;background:#eee9dc;border-left:1px solid #7c8173}
.birch-glyph:after{width:18px;height:18px;left:4px;top:0;border-radius:52% 48% 42% 48%;background:#9aaa79;box-shadow:5px 5px 0 -2px #748b62}
.fern-glyph:before{width:2px;height:20px;left:11px;bottom:0;background:#66794e;transform:rotate(-12deg)}
.fern-glyph:after{width:6px;height:13px;left:4px;top:2px;border-radius:100% 0 100% 0;transform:rotate(-22deg);box-shadow:7px 3px 0 -1px #78905a,13px 7px 0 -1px #8a9b6d}
.monstera-glyph:before{width:14px;height:17px;left:5px;top:1px;border-radius:70% 10% 65% 20%;transform:rotate(-18deg);background:#526f4c}
.monstera-glyph:after{width:1px;height:16px;left:12px;top:3px;background:#d9dfcb;transform:rotate(-18deg)}
.slider-group{padding:11px 0 13px;border-bottom:1px solid #d2d0c3}
.slider-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.slider-label label{font-size:11px;color:#4e5b4f}.slider-label output{font:10px var(--mono);color:var(--forest)}
input[type=range]{display:block;width:100%;height:14px;margin:0;background:transparent;appearance:none;-webkit-appearance:none;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,var(--forest) 0 var(--fill,50%),#c5c6b8 var(--fill,50%) 100%)}
input[type=range]::-moz-range-track{height:2px;background:#c5c6b8}input[type=range]::-moz-range-progress{height:2px;background:var(--forest)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;border:2px solid var(--paper-light);border-radius:50%;background:var(--forest);box-shadow:0 0 0 1px var(--forest);margin-top:-5.5px;transition:transform .15s}
input[type=range]::-moz-range-thumb{width:9px;height:9px;border:2px solid var(--paper-light);border-radius:50%;background:var(--forest);box-shadow:0 0 0 1px var(--forest)}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.2)}input[type=range]:focus-visible{outline:1px solid var(--clay);outline-offset:5px}
.range-ends{display:flex;justify-content:space-between;color:#929789;font:8px var(--mono);margin-top:4px}
.control-note{font-size:10px;line-height:1.6;color:#697464;margin:16px 0 0;padding-left:19px;position:relative}.note-mark{position:absolute;left:0;top:0;color:var(--clay);font-size:15px}
.specimen-panel{padding:0 22px 17px;min-width:0;display:flex;flex-direction:column}
.canvas-toolbar{height:51px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);flex:none}
.specimen-name{display:flex;align-items:center;gap:10px}.specimen-name strong{font:italic 15px var(--serif);font-weight:400}
.specimen-index{font:8px var(--mono);color:var(--clay);border-right:1px solid var(--line);padding-right:10px}
.canvas-actions{display:flex;align-items:center;gap:15px}.canvas-status{font:9px var(--mono);color:#697464}.canvas-status span{width:5px;height:5px;margin-right:5px}
.icon-button{width:27px;height:27px;border:1px solid var(--line);background:transparent;border-radius:50%;font:16px var(--sans);cursor:pointer;color:var(--forest);transition:background .2s,color .2s}.icon-button:hover{background:var(--forest);color:var(--paper-light)}
.canvas-wrap{position:relative;flex:1;min-height:355px;overflow:hidden;background:#e1e4d6;border-bottom:1px solid #c4cbb9}
#plantCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.canvas-coordinate{position:absolute;z-index:1;font:8px var(--mono);letter-spacing:.05em;color:#74816e;pointer-events:none}.canvas-coordinate span{margin-left:11px;color:#909887}.coordinate-top{top:16px;left:17px}.coordinate-bottom{bottom:14px;left:17px}
.light-indicator{position:absolute;right:18px;top:16px;display:flex;align-items:center;gap:7px;color:#a47736;font:8px var(--mono);letter-spacing:.08em;transform-origin:center}
.light-indicator i{display:block;width:18px;height:18px;border-radius:50%;background:#e9c579;box-shadow:0 0 0 5px #e9c57930,0 0 18px #dcac5a7a}
.growth-footer{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding-top:12px}
.growth-caption{display:flex;flex-direction:column;gap:4px}.growth-caption .eyebrow{font-size:8px}.growth-caption>span:last-child{font-size:10px;color:#4c5b4d}
.growth-meter{height:2px;background:#c8cbbc}.growth-meter i{display:block;height:100%;width:50%;background:var(--forest);transition:width .3s}
.growth-age{font:9px var(--mono);color:var(--muted)}
.fieldnotes-panel{padding:25px 0 20px 23px;border-left:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
.notes-head{display:flex;justify-content:space-between;align-items:center}.notes-number{font:9px var(--mono);color:#a1a493}
.fieldnotes-panel h2{font:31px/.93 var(--serif);font-weight:400;letter-spacing:-.02em;margin:17px 0 20px}.fieldnotes-panel h2 em{color:var(--clay)}
.note-tabs{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.note-tab{font:9px var(--mono);color:#858b7d;border:0;border-bottom:2px solid transparent;padding:9px 2px;background:transparent;cursor:pointer;transition:color .2s,border-color .2s}
.note-tab:hover{color:var(--ink)}.note-tab.is-active{color:var(--forest);border-color:var(--clay)}
.note-content{padding-top:18px;min-height:202px;animation:note-in .35s ease both}
@keyframes note-in{from{opacity:.35;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.note-symbol{width:34px;height:34px;border:1px solid #b8beac;border-radius:50%;display:grid;place-items:center;color:var(--forest);font:19px var(--serif);margin-bottom:14px}
.note-content h3{font:19px var(--serif);font-weight:400;margin:0 0 8px}.note-content p{font-size:11px;line-height:1.7;color:#697365;margin:0;max-width:235px}
.formula{margin-top:15px;border-left:2px solid #a2ad90;padding:5px 0 5px 9px;font:11px var(--mono);color:var(--forest)}.formula span{display:block;font:8px var(--sans);color:#899082;margin-top:4px}
.measured-values{margin-top:auto;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.measured-values div{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0}.measured-values div+div{border-top:1px solid #d5d3c7}.measured-values span{font-size:10px;color:#7c8577}.measured-values strong{font:16px var(--serif);font-weight:400;color:var(--forest)}
.model-caption{font-size:9px;line-height:1.55;color:#929789;margin:12px 0 0}
.page-footer{height:55px;display:flex;align-items:center;justify-content:space-between;color:#81897c;font:9px var(--mono)}.page-footer span:nth-child(2){color:#737e70}.page-footer a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:3px}
@media(min-width:1500px){.page-shell{padding:0 74px}.workbench{grid-template-columns:300px minmax(440px,1fr) 300px}.controls-panel{padding-right:26px}.fieldnotes-panel{padding-left:27px}.specimen-panel{padding-left:25px;padding-right:25px}}
@media(max-width:1100px){.page-shell{padding:0 30px}.workbench{grid-template-columns:245px minmax(340px,1fr)}.fieldnotes-panel{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding:19px 0;display:grid;grid-template-columns:1fr 1.2fr 1fr;column-gap:22px;align-items:start}.notes-head{grid-column:1}.fieldnotes-panel h2{grid-column:1;grid-row:2;margin:8px 0}.note-tabs{grid-column:2;grid-row:1}.note-content{grid-column:2;grid-row:2;min-height:170px;padding-top:10px}.measured-values{grid-column:3;grid-row:2;margin-top:0}.model-caption{grid-column:3;grid-row:3}.notes-number{display:none}}
@media(max-width:720px){.page-shell{padding:0 19px}.masthead{height:62px}.masthead-note{font-size:8px}.github-link{font-size:9px}.intro{padding:35px 0 25px}.intro h1{font-size:clamp(47px,11vw,69px)}.intro-text{font-size:12px;max-width:280px;line-height:1.6}.specimen-stamp{width:74px;height:74px;margin-right:0}.specimen-stamp strong{font-size:25px}.stamp-line{font-size:6px}.workbench{display:flex;flex-direction:column}.controls-panel{border-right:0;padding:20px 0 18px}.species-options{grid-template-columns:repeat(4,minmax(58px,1fr));max-width:380px}.slider-group{padding:10px 0}.specimen-panel{padding:0 0 16px;min-height:480px}.canvas-wrap{min-height:330px}.fieldnotes-panel{display:flex;padding:19px 0}.notes-number{display:block}.fieldnotes-panel h2{margin:12px 0 15px;font-size:29px}.note-content{min-height:0;padding-bottom:12px}.note-content p{max-width:none}.measured-values{margin-top:auto}.model-caption{margin-top:10px}.growth-footer{gap:9px}.page-footer{height:auto;min-height:62px;gap:10px;flex-wrap:wrap;padding:14px 0}.page-footer span:nth-child(2){display:none}}
@media(max-width:390px){.page-shell{padding:0 14px}.masthead-note{max-width:130px}.masthead-note .slash,.masthead-note:not(.live-dot){font-size:0}.masthead-note .live-dot{font-size:initial}.github-link{font-size:8px}.specimen-stamp{width:62px;height:62px}.specimen-stamp strong{font-size:21px}.canvas-coordinate{font-size:7px}.canvas-wrap{min-height:300px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Silva field journal: a folded working sheet with ink, bark and pollen tones. */
:root{
  color-scheme:light;
  --paper:#d9d5c7;
  --paper-light:#f0ecdf;
  --ink:#26342b;
  --muted:#707a6d;
  --line:#b8b8a7;
  --forest:#31513d;
  --leaf:#647b4e;
  --clay:#9e563c;
  --sun:#c6a254;
  --serif:'Palatino Linotype','Book Antiqua',Georgia,serif;
  --sans:'Trebuchet MS',Verdana,sans-serif;
  --mono:'Courier New',monospace;
}
html,body{background:#d2cebf}
body{background:
  radial-gradient(ellipse at 12% 12%,rgba(255,255,255,.45),transparent 35%),
  repeating-linear-gradient(0deg,rgba(67,72,52,.018) 0 1px,transparent 1px 5px),
  #d2cebf}
.page-shell{max-width:1480px;padding:0 clamp(24px,5.2vw,78px);background:var(--paper-light);box-shadow:0 0 0 1px rgba(55,64,47,.12),10px 0 0 -5px rgba(94,79,51,.13),20px 0 0 -10px rgba(94,79,51,.1);position:relative}
.page-shell:before{content:"";position:absolute;top:0;bottom:0;left:13px;width:1px;background:rgba(158,86,60,.28);pointer-events:none}
.masthead{height:78px;border-color:#b6b6a6}
.wordmark{font-size:30px;letter-spacing:-1.8px}
.mark{border-color:var(--forest)}
.masthead-note,.github-link{font:11px var(--sans);letter-spacing:.015em}
.github-link{border-bottom-color:#8f9a85}
.github-link span{font-size:13px}
.intro{padding:52px 0 42px;align-items:center;position:relative}
.intro:after{content:"";position:absolute;right:17%;bottom:44px;width:120px;height:36px;border-bottom:1px solid #9ca58e;border-radius:50%;transform:rotate(-8deg);opacity:.62;pointer-events:none}
.kicker,.eyebrow,.stamp-line{font:10px var(--sans);letter-spacing:.045em;text-transform:none}
.kicker{margin-bottom:16px}
.kicker span{font-family:var(--serif);font-size:14px;font-style:italic}
h1{font-size:clamp(54px,6.8vw,88px);line-height:.91;letter-spacing:-.055em;max-width:780px}
h1 em{display:inline-block;transform:rotate(-1.2deg);transform-origin:left center;color:var(--forest);text-decoration:underline;text-decoration-color:#b3a16e;text-decoration-thickness:1px;text-underline-offset:9px}
.intro-text{max-width:445px;font:15px/1.55 var(--serif);color:#606b5e;margin-top:20px}
.specimen-stamp{width:112px;height:112px;border:1px solid #8e9981;outline:1px dashed #9ca48d;outline-offset:5px;transform:rotate(7deg);margin-right:7%;color:#6c786a;position:relative}
.specimen-stamp:after{content:"";position:absolute;inset:5px;border:1px solid rgba(142,153,129,.35);border-radius:50%}
.specimen-stamp strong{font-size:35px;color:var(--clay)}
.workbench{grid-template-columns:minmax(235px,270px) minmax(390px,1fr) minmax(230px,265px);min-height:610px;border:1px solid #87917f;border-left:0;border-right:0;position:relative}
.workbench:before,.workbench:after{content:"";position:absolute;left:-10px;width:7px;height:7px;border-radius:50%;background:#b4b09f;box-shadow:0 1px 1px rgba(31,41,29,.18);z-index:2}
.workbench:before{top:26px}.workbench:after{bottom:26px}
.controls-panel{padding:28px 21px 25px 0;border-right:1px solid #c6c4b5}
.panel-heading{margin-bottom:18px}
.panel-heading h2{font-size:29px}
.eyebrow{color:#788274}
.reset-button{font:11px var(--sans);color:var(--clay);border-bottom-style:dotted}
.species-picker{border-bottom:1px dashed #b9bcad;padding-bottom:16px;margin-bottom:7px}
.species-picker legend{font:italic 15px var(--serif);color:#52604f;margin-bottom:10px}
.species-options{gap:3px}
.species-button{border:0;border-bottom:1px solid transparent;border-radius:0;padding:8px 3px 7px;color:#626f5f;font:10px var(--sans);transition:color .22s,border-color .22s,transform .35s cubic-bezier(.2,.75,.25,1)}
.species-button:hover{background:transparent;color:var(--clay);transform:translateY(-3px)}
.species-button.is-active{border-color:var(--clay);background:rgba(185,174,133,.19);color:var(--ink)}
.species-glyph{transition:transform .45s cubic-bezier(.2,.75,.25,1)}
.species-button:hover .species-glyph{transform:rotate(-8deg) scale(1.13)}
.slider-group{padding:13px 0 14px;border-bottom:1px dashed #b9bcad}
.slider-label{margin-bottom:8px}
.slider-label label{font:italic 15px var(--serif);color:#48594a}
.slider-label output{font:11px var(--sans);color:var(--clay)}
input[type=range]{height:21px;touch-action:pan-y}
input[type=range]::-webkit-slider-runnable-track{height:3px;background:linear-gradient(to right,var(--forest) 0 var(--fill,50%),#b8b9a8 var(--fill,50%) 100%)}
input[type=range]::-moz-range-track{height:3px;background:#b8b9a8}input[type=range]::-moz-range-progress{height:3px;background:var(--forest)}
input[type=range]::-webkit-slider-thumb{width:15px;height:15px;border:2px solid var(--paper-light);background:var(--clay);box-shadow:0 0 0 1px var(--clay);margin-top:-6px}
input[type=range]::-moz-range-thumb{width:11px;height:11px;border:2px solid var(--paper-light);background:var(--clay);box-shadow:0 0 0 1px var(--clay)}
.range-ends{font:9px var(--sans);color:#777f70}
.control-note{font:12px/1.55 var(--serif);color:#626d5d;margin-top:17px;padding-left:21px}
.note-mark{font:italic 19px var(--serif);color:var(--clay)}
.specimen-panel{padding:0 20px 18px;min-height:610px}
.canvas-toolbar{height:58px;border-color:#c6c4b5}
.specimen-name{gap:12px}.specimen-name strong{font:italic 19px var(--serif);color:#394b3a}
.specimen-index{font:10px var(--sans);color:var(--clay);border-color:#b7b9a9}
.canvas-status{font:10px var(--sans);color:#687563}
.canvas-status span{background:#758853;box-shadow:0 0 0 3px rgba(117,136,83,.15)}
.icon-button{width:32px;height:32px;border-radius:0;border-color:#a4aa98;background:#e4e0d3;font-size:18px}
.icon-button:hover{background:var(--forest);color:var(--paper-light);transform:translateY(-2px)}
.canvas-wrap{min-height:380px;background:#dbe0cf;border:1px solid #a4ae99;border-top:0;box-shadow:inset 0 0 0 5px rgba(243,240,226,.5),inset 0 0 0 6px rgba(107,124,87,.28);}
.canvas-wrap:before{content:"";position:absolute;z-index:1;inset:14px;border:1px solid rgba(90,111,76,.18);pointer-events:none}
.canvas-wrap:after{content:"";position:absolute;z-index:1;top:0;bottom:0;left:0;width:10px;background:linear-gradient(90deg,rgba(43,56,40,.1),transparent);pointer-events:none}
#plantCanvas{transform-origin:50% 82%}
.canvas-wrap.is-growing #plantCanvas{animation:plant-settle .38s cubic-bezier(.2,.75,.25,1) both}
@keyframes plant-settle{from{opacity:.48;transform:translateY(5px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
.canvas-coordinate{font:9px var(--sans);letter-spacing:.025em;color:#5e715b}
.canvas-coordinate span{color:#7c8874}
.coordinate-top{top:23px;left:25px}.coordinate-bottom{bottom:22px;left:25px}
.light-indicator{top:24px;right:26px;font:9px var(--sans);color:#96702f}
.light-indicator i{width:15px;height:15px;background:#d5b35e;box-shadow:0 0 0 4px rgba(213,179,94,.2),0 0 0 9px rgba(213,179,94,.09);animation:greenhouse-sun 5s ease-in-out infinite}
@keyframes greenhouse-sun{50%{box-shadow:0 0 0 7px rgba(213,179,94,.18),0 0 0 14px rgba(213,179,94,.06)}}
.growth-footer{gap:13px;padding-top:16px}
.growth-caption .eyebrow{font-size:9px}
.growth-caption>span:last-child{font:italic 14px var(--serif);color:#48594a}
.growth-meter{height:3px;background:#c0c2b2}.growth-meter i{background:var(--clay);transition:width .65s cubic-bezier(.2,.75,.25,1)}
.growth-age{font:10px var(--sans);color:#707a6d;white-space:nowrap}
.fieldnotes-panel{padding:30px 0 21px 24px;border-color:#c6c4b5}
.notes-head{padding-bottom:9px;border-bottom:1px dotted #b5b8a7}
.notes-number{font:italic 12px var(--serif);color:var(--clay)}
.fieldnotes-panel h2{font-size:36px;line-height:.96;margin:20px 0 23px;letter-spacing:-.035em}
.fieldnotes-panel h2 em{color:var(--forest);text-decoration:underline;text-decoration-color:#c5a65c;text-decoration-thickness:1px;text-underline-offset:5px}
.note-tabs{border-color:#b8b8a7}
.note-tab{font:11px var(--sans);color:#747c70;padding:11px 2px;border-bottom-width:1px}
.note-tab.is-active{color:var(--clay);border-color:var(--clay)}
.note-content{padding-top:20px;min-height:205px;animation:note-in .48s cubic-bezier(.2,.75,.25,1) both}
@keyframes note-in{from{opacity:0;transform:translateY(9px) rotate(-.5deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
.note-symbol{width:39px;height:39px;border-radius:50% 46% 52% 43%;border:1px solid #9ca78f;background:#e7e4d7;color:var(--forest);font-style:italic;margin-bottom:13px;box-shadow:2px 2px 0 #c7c3b2}
.note-content h3{font:23px var(--serif);color:#394b3a;margin-bottom:8px}
.note-content p{font:13px/1.62 var(--serif);color:#626c5f}
.formula{margin-top:14px;border-left:2px solid var(--clay);padding-left:10px;font:13px var(--serif);color:var(--forest)}
.formula span{font:10px var(--sans);color:#808779}
.measured-values{border-color:#b9bcad}
.measured-values div{padding:12px 0}.measured-values div+div{border-color:#d2d0c1}
.measured-values span{font:12px var(--serif);color:#697364}.measured-values strong{font:20px var(--serif);color:var(--clay)}
.model-caption{font:11px/1.55 var(--serif);color:#838779}
.page-footer{font:10px var(--sans);color:#737d6f}
.page-footer span:nth-child(2){font:italic 13px var(--serif);color:#677260}
.page-footer a{border-bottom-style:dotted}
button:focus-visible,a:focus-visible{outline:2px solid var(--clay);outline-offset:4px}

@media(max-width:1100px){
  .page-shell{padding:0 34px}
  .workbench{grid-template-columns:minmax(220px,255px) minmax(0,1fr)}
  .controls-panel{padding-right:18px}
  .specimen-panel{padding-right:0;padding-left:18px}
  .fieldnotes-panel{grid-template-columns:.85fr 1.2fr .85fr;column-gap:18px;padding:22px 0}
  .intro:after{right:25%;bottom:24px}
}
@media(max-width:760px){
  body{background:#d2cebf}
  .page-shell{padding:0 21px;box-shadow:none}
  .page-shell:before{left:8px}
  .masthead{height:66px}
  .wordmark{font-size:26px}
  .masthead-note{max-width:145px;font:10px/1.25 var(--sans);text-align:center}
  .github-link{font-size:10px;white-space:nowrap}
  .intro{padding:35px 0 30px;align-items:flex-start}
  .intro:after{right:8px;bottom:15px;width:82px}
  h1{font-size:clamp(48px,12vw,72px);line-height:.94}
  .intro-text{max-width:300px;font-size:14px;margin-top:16px}
  .specimen-stamp{width:76px;height:76px;flex:none;margin:14px 10px 0 8px}
  .specimen-stamp strong{font-size:24px;margin:3px 0}
  .stamp-line{font-size:6px}
  .workbench{display:flex;flex-direction:column;min-height:0;border-top:1px solid var(--ink)}
  .workbench:before,.workbench:after{left:-8px;width:5px;height:5px}
  .controls-panel{border:0;padding:23px 0 20px}
  .panel-heading h2{font-size:27px}
  .species-options{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none;gap:6px}
  .species-button{min-height:58px;gap:5px;font-size:11px}
  .slider-group{padding:12px 0}
  .slider-label label{font-size:17px}
  .slider-label output{font-size:12px}
  .range-ends{font-size:10px}
  .control-note{font-size:13px;margin-top:14px}
  .specimen-panel{padding:0 0 22px;min-height:0}
  .canvas-toolbar{height:52px}
  .canvas-wrap{flex:none;height:clamp(310px,105vw,470px);min-height:0}
  .growth-footer{grid-template-columns:1fr auto;gap:8px 12px;padding:13px 2px 0}
  .growth-meter{grid-column:1/-1;grid-row:2}
  .fieldnotes-panel{display:flex;padding:22px 0 19px;border-top:1px dashed #aeb3a2;border-left:0}
  .notes-number{display:block}
  .fieldnotes-panel h2{font-size:34px;margin:15px 0 18px}
  .note-content{min-height:0;padding-bottom:15px}
  .note-content p{max-width:48ch}
  .measured-values{margin-top:10px}
  .page-footer{min-height:65px;height:auto;padding:13px 0;gap:10px;flex-wrap:wrap}
  .page-footer span:nth-child(2){display:block}
}
@media(max-width:390px){
  .page-shell{padding:0 15px}
  .page-shell:before{left:5px}
  .masthead-note{max-width:82px;font:8px/1.25 var(--sans)!important;text-align:center}
  .masthead-note .slash{display:none}
  .github-link{font-size:9px}
  .intro{display:flex;flex-direction:column;align-items:flex-start;gap:0}
  .intro-copy{width:100%}
  h1{font-size:46px}
  .specimen-stamp{width:54px;height:54px;align-self:flex-end;margin:10px 3px 0 0}
  .specimen-stamp strong{font-size:20px}
  .stamp-line{font-size:5px}
  .canvas-coordinate{font-size:8px}
  .coordinate-top{left:19px}.coordinate-bottom{left:19px}
  .canvas-actions{gap:8px}.canvas-status{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  .light-indicator i{animation:none}
  .species-button,.species-glyph,.growth-meter i{transition:none}
}