:root{font-family:Calibri,Carlito,Arial,sans-serif;color:#16181d;background:#dedbd2}*{box-sizing:border-box}body{margin:0}header{padding:24px 30px 10px}header span{letter-spacing:.15em;font-size:12px}h1{font-size:32px;margin:8px 0}p{line-height:1.5}header p{margin:4px 0}main{display:grid;grid-template-columns:280px minmax(0,1fr);gap:18px;padding:18px 24px}aside{padding:18px;background:#f4f1ea;border-radius:12px}label{display:block;font-size:14px;margin:0 0 17px}select{width:100%;font:inherit;padding:8px;border:1px solid #aaa;border-radius:6px;background:white;margin-top:6px}input[type=range]{width:100%;accent-color:#2d6fd1;margin-top:9px}output{font-weight:bold}.buttons{display:flex;gap:6px;flex-wrap:wrap}button{font:inherit;padding:8px;border:1px solid #aaa;background:white;border-radius:6px;cursor:pointer}button:hover{background:#f2c200}.notice{font-size:14px;border-left:3px solid #e8901b;padding-left:10px}.small{font-size:12px}.workspace{min-width:0}.scene{height:490px;position:relative;border-radius:12px;overflow:hidden;background:#f4f1ea;border:1px solid #c9c6bd}#view{width:100%;height:100%;touch-action:none;cursor:grab}.hint{position:absolute;bottom:12px;left:12px;font-size:12px;background:#f4f1eade;padding:6px;pointer-events:none}#status{position:absolute;top:12px;left:12px;font-size:13px;background:#f4f1eadd;padding:7px;max-width:90%}.cuts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}figure{margin:0;background:#f4f1ea;border-radius:10px;padding:14px;min-width:0}h2{font-size:18px;margin:0 0 12px}figure canvas{width:100%;height:260px}figcaption{font-size:12px;line-height:1.4}#legend{font-size:12px;line-height:1.45}.key{display:flex;gap:7px;margin:5px 0}.swatch{width:14px;height:14px;flex:none;margin-top:2px}.point{margin-top:14px;background:#f4f1ea;border-radius:12px;padding:18px}.point label{max-width:280px}#profile{width:100%;height:260px}#details{font-size:14px;margin-bottom:10px}footer{padding:20px 30px;font-size:13px;max-width:1000px}a{color:#1953a1}canvas{display:block} @media(max-width:850px){main{grid-template-columns:1fr;padding:12px}aside{display:grid;grid-template-columns:1fr 1fr;gap:12px}aside label{margin:0}aside .notice,aside #legend,aside .small{grid-column:1/-1}.scene{height:400px}}@media(max-width:560px){.cuts{grid-template-columns:1fr}header{padding:18px}h1{font-size:26px}aside{grid-template-columns:1fr}.scene{height:350px}}
:root{color-scheme:light}
@media(max-width:850px){.workspace{display:contents}.scene{grid-row:1}aside{grid-row:2}.cuts{grid-row:3}.point{grid-row:4}}

.scene{height:690px}.cuts{position:absolute;left:-10000px;top:0;width:1100px;visibility:hidden;pointer-events:none}.cuts canvas{height:400px}.point{max-width:640px}#profile{width:480px;max-width:100%;height:750px}.toggle{font-weight:bold;color:#78499c}.toggle input,.toggles input{accent-color:#9158b8}dialog{width:min(1100px,94vw);max-height:92vh;overflow:auto;border:1px solid #aaa;border-radius:12px;background:#f4f1ea;padding:20px}dialog::backdrop{background:#16181d66}.dialogBar{display:flex;justify-content:space-between;gap:20px;align-items:center;position:sticky;top:-20px;background:#f4f1ea;padding:10px 0}.dialogBar h2{margin:0}#dialogCanvas{width:100%;height:auto;max-width:100%}#plotDialog:has(#dialogTitle[data-profile]){width:600px}#dialogCaption{font-size:14px}#legend{max-height:290px;overflow:auto}@media(max-width:850px){.workspace{display:contents}.scene{grid-row:1;height:440px}aside{grid-row:2}.point{grid-row:3}.cuts{display:block}.toggle,.toggles{grid-column:1/-1}}@media(max-width:560px){.scene{height:360px}.point{max-width:100%}dialog{padding:12px}}

dialog{position:fixed;top:18px;right:18px;left:auto;margin:0;z-index:100;box-shadow:0 12px 60px #16181d66}#dialogCanvas{max-width:100%}

.cuts{width:2200px}.cuts canvas{height:460px}

#tourHelp{margin-top:12px}.toggle{color:#16181d}#tour[hidden]{display:none}#tour{position:fixed;inset:0;z-index:1000;overflow:hidden}#tourSpot{position:fixed;border:3px solid #f2c200;border-radius:8px;box-shadow:0 0 0 300vmax #16181da8;pointer-events:none}#tourCard{position:fixed;background:#f4f1ea;border-radius:12px;padding:22px;box-shadow:0 8px 40px #0005;max-height:calc(100vh - 32px);overflow:auto}#tourCount{font-size:12px;letter-spacing:.08em;color:#555}#tourTitle{font-size:22px;margin:10px 0}#tourText{font-size:16px;line-height:1.5;margin:12px 0 20px}.tourActions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}#tourSkip{margin-right:auto;background:transparent}#tourNext{background:#f2c200;border-color:#f2c200;font-weight:bold}button:focus-visible{outline:3px solid #2d6fd1;outline-offset:3px}button:disabled{opacity:.4;cursor:default}

.soilButton{width:100%;text-align:left;background:transparent;padding:8px;border:1px solid #cfcbc2;align-items:flex-start;font-size:13px}.soilButton span:nth-child(2){flex:1}.soilButton:hover{background:#fff4bf;border-color:#9b8000}#soilDialog{width:min(760px,94vw);z-index:1100}#soilDialog table{width:100%;border-collapse:collapse;font-size:14px;margin:14px 0}#soilDialog th,#soilDialog td{padding:10px 8px;text-align:left;border-bottom:1px solid #ccc}#soilDialog thead{background:#dedbd2}#soilDialog th[scope=row]{font-weight:normal}#soilDialog caption{text-align:left;font-weight:bold;margin-bottom:10px}#soilDialog .small{line-height:1.5}.soilTableWrap{overflow-x:auto}@media(max-width:560px){#soilDialog{right:3vw;top:12px}#soilDialog .dialogBar h2{font-size:17px}#soilDialog th,#soilDialog td{padding:8px 5px;font-size:12px}}

.soilRow{display:flex;gap:4px;align-items:stretch;margin:5px 0}.soilRow .soilButton{margin:0;flex:1;min-width:0}.soilInfo{padding:6px}.soilButton[aria-pressed=true]{border:2px solid #2d6fd1;background:#fff4bf;font-weight:bold}#clearSoil{margin-bottom:10px}