:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}body{color:#6b6353;background:#f3ede1;margin:0;font-family:Georgia,Times New Roman,serif;line-height:1.55}#app{padding:4vmin 24px 12vmin}#view{max-width:980px;margin:0 auto}#view.wide{max-width:1240px}nav{letter-spacing:.18em;text-transform:uppercase;justify-content:center;gap:26px;margin-bottom:3vmin;font-size:12px;display:flex}nav a{color:#a39a86;padding-bottom:2px;text-decoration:none}nav a:hover{color:#6b6353}nav a.current{color:#6b6353;border-bottom:1px solid #ccc0a6}header{text-align:center;margin-bottom:4vmin}h1{margin:0 0 .4em;font-size:30px;font-weight:400}header p{color:#857b68;max-width:46ch;margin:0 auto;font-size:16px}h2{letter-spacing:.18em;text-transform:uppercase;color:#a39a86;text-align:center;margin:8vmin 0 4vmin;font-size:13px;font-weight:400}.controls{flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:18px;margin-bottom:5vmin;display:flex}.field{flex-direction:column;gap:4px;display:flex}.field span{letter-spacing:.16em;text-transform:uppercase;color:#a39a86;font-size:10px}select,input,button{font:inherit;color:inherit;background:#faf6ee;border:1px solid #ded4c0;border-radius:3px;padding:5px 8px;font-size:14px}input[type=number]{width:8ch}button{cursor:pointer;background:#e8dfcc}button:hover{background:#ded4c0}figure{margin:0}figure svg{width:100%;height:auto;display:block}.hero{max-width:520px;margin:0 auto}figcaption{letter-spacing:.14em;text-transform:uppercase;color:#a39a86;text-align:center;margin-top:.9em;font-size:12px}.grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));align-items:end;gap:5vmin 4vmin;display:grid}.grid figure{cursor:pointer}.grid figure:hover svg{outline-offset:4px;outline:2px solid #ccc0a6}input[type=range].age{accent-color:#8fae66;width:160px;padding:0}.grid.lifetime{grid-template-columns:repeat(4,1fr);gap:4vmin 3vmin}@media (width<=620px){.grid.lifetime{grid-template-columns:repeat(2,1fr)}}a{color:#7d6d4f;text-underline-offset:3px;text-decoration-color:#ccc0a6}a:hover{color:#4f4636}.crumb{letter-spacing:.14em;text-transform:uppercase;margin:0 0 2vmin;font-size:12px}.button-link{background:#e8dfcc;border:1px solid #ded4c0;border-radius:3px;padding:5px 10px;font-size:14px;text-decoration:none;display:inline-block}.button-link:hover{background:#ded4c0}.badge{letter-spacing:.14em;text-transform:uppercase;color:#faf6ee;vertical-align:middle;border-radius:8px;padding:1px 6px 0;font-size:9px;display:inline-block}.badge-authored{background:#b8663f}.badge-derived{background:#55783c}.badge-default{background:#a39a86}.badge-measured{background:#5f7d8b}.badge-yours{background:#8a6bab}.aside,.hint{color:#857b68;max-width:68ch;font-size:13px}.aside{text-align:center;margin:-2vmin auto 3vmin}.swatch{vertical-align:-2px;border:1px solid #3c321e40;border-radius:50%;width:13px;height:13px;margin:0 2px;display:inline-block}.swatches{flex-wrap:wrap;gap:3px;margin:6px 0 10px;display:flex}.swatches .swatch{border-radius:3px;width:22px;height:22px;margin:0}#app.fullscreen{flex-direction:column;height:100vh;padding:0;display:flex;overflow:hidden}#app.fullscreen nav{margin:12px 0 10px}#app.fullscreen #view{box-sizing:border-box;flex:1;width:100%;max-width:none;min-height:0;margin:0;padding:0 14px 14px}.lab-app{grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(270px,330px) minmax(0,1fr) minmax(320px,400px);gap:12px 14px;height:100%;min-height:0;display:grid}.lab-bar{border-bottom:1px solid #e3dac6;grid-column:1/-1;align-items:flex-end;gap:16px;padding:0 2px 10px;display:flex}.lab-col{overscroll-behavior:contain;min-width:0;min-height:0;overflow-y:auto}.lab-stage{flex-direction:column;gap:10px;display:flex;overflow:hidden}.lab-figure{flex-direction:column;flex:1;width:100%;max-width:560px;min-height:0;margin:0 auto;display:flex}.lab-canvas{flex:1;justify-content:center;align-items:center;min-height:0;display:flex}.lab-canvas svg{width:auto;max-width:100%;height:auto;max-height:100%;display:block}.lab-tabs{gap:6px;margin-bottom:10px;display:flex}.lab-tab{letter-spacing:.14em;text-transform:uppercase;color:#a39a86;background:0 0;border-color:#0000;flex:1;padding:5px 4px;font-size:11px}.lab-tab:hover{background:#ece4d4}.lab-tab.current{color:#6b6353;background:#f7f2e7;border-color:#e3dac6}.film-strip{scroll-snap-type:x proximity;align-items:flex-end;gap:6px;padding:4px 2px 8px;display:flex;overflow-x:auto}.film-frame{cursor:pointer;scroll-snap-align:center;background:0 0;border-color:#0000;flex:none;padding:4px 5px 2px}.film-frame:hover{background:#ece4d4}.film-frame.current{background:#f1f4e4;border-color:#8fae66}.film-plant svg{width:auto;height:100%;display:block}.film-age{letter-spacing:.12em;color:#a39a86;text-align:center;font-size:10px;display:block}.play{width:100%;margin-top:4px}.colour-editor{border-top:1px solid #ddd3bf;flex-direction:column;gap:9px;margin-top:16px;padding-top:12px;display:flex}.colour-editor .hint{margin:0;font-size:12px}.colour-editor .swatches{margin:0 0 2px}.colour-inputs{gap:6px;display:flex}.colour-well{cursor:pointer;flex:none;width:42px;height:30px;padding:2px}.colour-hex{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.slider-field input[type=range]{accent-color:#8fae66;background:0 0;border:none;width:100%;padding:0}.slider-field{gap:2px}.linky{color:#7f8a5c;text-align:left;cursor:pointer;background:0 0;border:none;width:fit-content;padding:0;font-size:12px;text-decoration:underline}.remix-again{width:100%;margin:2px 0 10px}.remix-controls{flex-direction:column;gap:5px;margin-bottom:12px;display:flex}.track-row{flex-wrap:wrap;align-items:center;gap:4px;display:flex}.track-label{letter-spacing:.12em;text-transform:uppercase;color:#a39a86;flex:none;width:78px;font-size:10px}.track-chip{cursor:pointer;padding:2px 8px;font-size:11px}.track-chip.held{color:#a39a86;background:0 0;border-style:dashed;text-decoration:line-through}.track-chip.current{background:#f1f4e4;border-color:#8fae66}.remix-grid{grid-template-columns:1fr 1fr;gap:6px;display:grid}.remix-cell{cursor:pointer;background:0 0;border-color:#0000;flex-direction:column;align-items:center;gap:4px;padding:5px 4px 4px;display:flex}.remix-cell:hover,.remix-cell:focus-visible{background:#ece4d4;outline:none}.remix-thumb{justify-content:center;align-items:flex-end;width:100%;height:136px;display:flex}.remix-thumb svg{width:auto;max-width:100%;height:auto;max-height:100%;display:block}.remix-what{letter-spacing:.1em;color:#a39a86;text-align:center;word-break:break-word;font-size:10px}.lab-side .chain{flex-direction:column}.lab-side .chain-card{flex:none}.lab-side .chain-arrow{display:none}.panel{background:#f7f2e7;border:1px solid #e3dac6;border-radius:4px;min-width:0;padding:16px 18px 18px}.panel h3{letter-spacing:.18em;text-transform:uppercase;color:#a39a86;margin:0 0 .6em;font-size:12px;font-weight:400}.panel h4{letter-spacing:.16em;text-transform:uppercase;color:#a39a86;margin:1.4em 0 .6em;font-size:11px;font-weight:400}.composition .field{margin-bottom:12px}.composition select{width:100%;min-width:0}.axis.crossed select,.figure.crossed input{background:#f1f4e4;border-color:#8fae66}.figures{grid-template-columns:1fr 1fr;gap:10px 14px;display:grid}.figures input{box-sizing:border-box;width:100%;min-width:0}.pair-inputs{gap:6px;display:flex}.reset{width:100%;margin-top:14px}.lab-notes{text-align:center;color:#a3764a;font-size:12px;font-style:italic}.readout{gap:3vmin;display:grid}.chain{flex-wrap:wrap;align-items:stretch;gap:8px;display:flex}.chain-card{background:#faf6ee;border:1px solid #e3dac6;border-radius:3px;flex:150px;min-width:140px;padding:10px 12px}.chain-head{justify-content:space-between;align-items:baseline;gap:6px;display:flex}.chain-title{letter-spacing:.14em;text-transform:uppercase;color:#a39a86;font-size:11px}.chain-value{font-variant-numeric:tabular-nums;margin:4px 0 2px;font-size:21px}.chain-note{color:#857b68;margin:0;font-size:12px;line-height:1.45}.chain-arrow{color:#ccc0a6;align-self:center;font-size:18px}.chain-foot{color:#857b68;margin:.9em 0 0;font-size:13px}.readout-table{border-collapse:collapse;width:100%;font-size:14px}.readout-table th{letter-spacing:.16em;text-transform:uppercase;color:#a39a86;text-align:left;padding:4px 10px 6px 0;font-size:10px;font-weight:400}.readout-table td{vertical-align:top;border-top:1px dashed #ded4c0;padding:7px 10px 7px 0}.readout-table td.num{font-variant-numeric:tabular-nums;white-space:nowrap}.readout-table td.choice{white-space:nowrap}.shelf{margin:0;padding:0;list-style:none}.shelf li{border-top:1px dashed #ded4c0;padding:8px 10px;font-size:14px}.shelf li.chosen{background:#f1f4e4;border-left:3px solid #8fae66}.shelf .pot-suits{color:#857b68;font-size:13px}.shelf em{color:#6b6353}header .note{color:#857b68;max-width:58ch;margin:.5em auto 0;font-size:15px}.species-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.grid.ages-row{grid-template-columns:repeat(5,1fr);gap:3vmin 2vmin}.parts-table td:first-child,.numbers-table td:first-child{white-space:nowrap;color:#857b68}.pipeline-wrap{margin-bottom:4vmin}.pipeline{flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 8px;margin:0 0 2.4em;display:flex}.pipeline-step{background:#faf6ee;border:1px solid #e3dac6;border-radius:3px;padding:3px 9px;font-size:13px}.diff-list{margin:0;padding-left:1.2em;font-size:14px}.diff-list li{margin-bottom:.7em}.differences .aside{text-align:left;margin:0 0 1.2em}.recipe-source{background:#faf6ee;border:1px solid #e3dac6;border-radius:3px;padding:14px 16px;font-size:12px;line-height:1.5;overflow-x:auto}@media (width<=1080px){#app.fullscreen{height:auto;padding:0 0 12vmin;overflow:visible}#app.fullscreen #view{padding:0 16px}.lab-app{flex-direction:column;height:auto;display:flex}.lab-stage{order:1}.lab-left{order:2}.lab-side{order:3}.lab-col{margin-bottom:4vmin;overflow:visible}.lab-stage{margin-bottom:5vmin;overflow:visible}.lab-figure{flex:none}.lab-canvas svg{width:100%;max-height:none}.lab-bar{flex-wrap:wrap;justify-content:center;margin-bottom:4vmin}}@media (width<=620px){.grid.ages-row{grid-template-columns:repeat(3,1fr)}.figures{grid-template-columns:1fr}.readout-table{font-size:13px}.readout-table td.choice{white-space:normal}nav{gap:16px}}.picker{position:relative}.picker-button{text-align:left;background:#faf6ee;justify-content:space-between;align-items:center;gap:8px;width:100%;display:flex}.picker-button .picker-current{letter-spacing:normal;text-transform:none;color:inherit;text-overflow:ellipsis;white-space:nowrap;font-size:14px;overflow:hidden}.picker-button .picker-caret{color:#a39a86;letter-spacing:normal;font-size:11px}.axis.crossed .picker-button{background:#f1f4e4;border-color:#8fae66}.picker-panel{z-index:20;background:#f7f2e7;border:1px solid #d8cdb4;border-radius:4px;flex-direction:column;padding:10px;display:flex;position:fixed;box-shadow:0 18px 42px -14px #3c321e73}.picker-search{box-sizing:border-box;width:100%;margin-bottom:8px}.picker-body{overscroll-behavior:contain;min-height:0;overflow-y:auto}.picker-group{letter-spacing:.16em;text-transform:uppercase;color:#a39a86;margin:8px 0 4px;font-size:10px}.picker-grid{grid-template-columns:repeat(3,1fr);gap:4px;display:grid}.picker-cell{cursor:pointer;background:0 0;border-color:#0000;flex-direction:column;align-items:center;gap:2px;padding:4px 3px;display:flex}.picker-cell:hover,.picker-cell:focus-visible{background:#ece4d4;outline:none}.picker-cell.current{background:#f1f4e4;border-color:#8fae66}.picker-thumb{justify-content:center;align-items:flex-end;height:74px;display:flex}.picker-thumb svg{width:auto;max-width:100%;height:auto;max-height:100%;display:block}.picker-label{color:#857b68;text-align:center;word-break:break-word;font-size:10px;line-height:1.25}.lab-figure figcaption{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.lab-figure figcaption.previewing{color:#8a6bab;font-style:italic}button:disabled{opacity:.45;cursor:default}button:disabled:hover{background:#e8dfcc}.lab-side .readout-table tr{border-top:1px dashed #ded4c0;grid-template-columns:1fr auto;align-items:baseline;gap:2px 10px;padding:8px 0;display:grid}.lab-side .readout-table tr:first-child{display:none}.lab-side .readout-table td{white-space:normal;border:none;padding:0}.lab-side .readout-table td:first-child{color:#857b68;grid-area:1/1}.lab-side .readout-table td:nth-child(2){text-align:right;grid-area:1/2}.lab-side .readout-table td:nth-child(3){text-align:right;grid-area:2/2}.lab-side .readout-table td:nth-child(4){grid-area:2/1;font-size:13px}
