@layer theme{:root{--max-height-octave: var(--size-12);--max-height-debug: var(--size-13);--min-width-value: var(--size-10);--min-width-octave-value: var(--size-9);--min-width-canvas-container: var(--size-12);--control-gap: var(--size-1);--control-padding: var(--size-2);--modal-max-width: var(--size-content-3);--button-padding-block: var(--size-1);--button-padding-inline: var(--size-2);--input-padding: var(--size-2);--remove-button-padding-inline: var(--size-1);--help-button-size: var(--size-7);--basin-tree-indent: var(--size-5);--brand-light: var(--orange-6);--brand-dark: var(--orange-6);--text-1-light: var(--gray-8);--text-2-light: var(--gray-7);--text-3-light: var(--gray-6);--text-1-dark: var(--gray-0);--text-2-dark: var(--gray-1);--text-3-dark: var(--gray-2);--surface-1-light: var(--gray-0);--surface-2-light: var(--gray-1);--surface-3-light: var(--gray-2);--surface-4-light: var(--gray-3);--surface-1-dark: var(--gray-9);--surface-2-dark: var(--gray-10);--surface-3-dark: var(--gray-11);--surface-4-dark: var(--gray-12);--border-color-1-light: var(--gray-5);--border-color-2-light: var(--gray-6);--border-color-1-dark: var(--gray-8);--border-color-2-dark: var(--gray-7);color-scheme:light dark;--brand: light-dark(var(--brand-light), var(--brand-dark));--text-1: light-dark(var(--text-1-light), var(--text-1-dark));--text-2: light-dark(var(--text-2-light), var(--text-2-dark));--text-3: light-dark(var(--text-3-light), var(--text-3-dark));--surface-1: light-dark(var(--surface-1-light), var(--surface-1-dark));--surface-2: light-dark(var(--surface-2-light), var(--surface-2-dark));--surface-3: light-dark(var(--surface-3-light), var(--surface-3-dark));--surface-4: light-dark(var(--surface-4-light), var(--surface-4-dark));--border-color-1: light-dark(var(--border-color-1-light), var(--border-color-1-dark));--border-color-2: light-dark(var(--border-color-2-light), var(--border-color-2-dark));accent-color:var(--brand);--legend-selected-bg: rgb(from var(--brand) r g b / .2);--legend-hover-bg: rgb(from var(--brand) r g b / .1);--legend-selected-border-color: var(--brand);--legend-selected-border-width: var(--border-size-3);--basin-active-bg: color-mix(in srgb, var(--green-6) 8%, transparent);--basin-active-border: color-mix(in srgb, var(--green-6) 60%, transparent);--basin-active-text: var(--green-9);--basin-highlighted-bg: color-mix(in srgb, var(--orange-6) 12%, transparent);--basin-highlighted-border: color-mix(in srgb, var(--orange-6) 80%, transparent);--basin-highlighted-text: var(--orange-9);--pump-active-color: var(--blue-7);--pump-inactive-color: var(--gray-5);--pump-inlet-color: var(--red-7);--pump-outlet-color: var(--green-7);--basin-stack-border: var(--gray-5);--basin-stack-hover-bg: var(--surface-2);--basin-stack-hover-border: var(--link);--basin-stack-hover-text: var(--link);--basin-stack-active-bg: var(--blue-2);--basin-stack-active-border: var(--blue-6);--basin-stack-active-text: var(--blue-8);--remove-button-bg: var(--red-6);--remove-button-bg-hover: var(--red-7);--remove-button-bg-active: var(--red-8);--remove-button-text: var(--gray-0);--help-button-bg: var(--brand);--help-button-text: var(--gray-0);--button-hover-border: var(--border-color-2);--delete-button-bg: var(--red-2);--delete-button-text: var(--red-9);--delete-button-border: var(--red-4);--delete-button-bg-hover: var(--red-3);--delete-button-border-hover: var(--red-5);--modal-backdrop-bg: rgb(0 0 0 / var(--modal-backdrop-opacity));--modal-backdrop-opacity: .5;--code-bg: var(--border-color-1);--total-size-color: var(--blue-7);--transition-standard: all var(--animation-speed-normal) ease;--transition-fast: all .15s ease;--hover-brightness: 1.5}}@layer base{html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}body{font-family:var(--font-sans),system-ui,Arial,sans-serif;margin:var(--size-2);display:flex;gap:var(--size-2);block-size:calc(100vh - var(--size-4));overflow:hidden}.col-span-full{grid-column:1 / -1}}@layer layout{main{display:flex;flex-direction:column;gap:var(--size-2)}#canvasContainer{border:var(--border-size-1) solid var(--border-color-1);max-block-size:100%;overflow:hidden;& canvas{display:block}}#controls{display:flex;flex-direction:column;row-gap:var(--control-gap);flex:1;min-inline-size:var(--min-width-canvas-container)}#topControls,#bottomControls{display:flex;gap:var(--control-gap);align-items:stretch}#debugContainer{display:flex;gap:var(--control-gap);flex:1;min-block-size:0}}@layer components{.control-box{display:flex;flex-direction:column;padding:var(--control-padding);border:var(--border-size-1) solid var(--border-color-1);border-radius:var(--radius-1);background:var(--surface-2);min-inline-size:min-content;& h4{margin:0 0 var(--size-2) 0;font-size:var(--font-size-0);font-weight:700;color:var(--text-1);display:flex;justify-content:space-between;align-items:center}}.value-display{min-inline-size:var(--min-width-value);text-align:end;font-family:var(--font-mono),"Courier New",monospace;font-size:var(--font-size-0);color:var(--text-2)}.control-item{display:flex;align-items:center;gap:var(--size-1);margin-inline-end:var(--size-2);line-height:var(--line-height-1);font-size:var(--font-size-0);margin-block-start:var(--size-relative-1)}.control-section{display:flex;align-items:center;gap:var(--size-2);font-size:var(--font-size-0)}button,select{padding:var(--button-padding-block) var(--button-padding-inline);cursor:pointer}}@layer modules{#noiseControls{flex:3;& label{display:flex;align-items:center;justify-content:space-between;font-size:var(--font-size-0);margin:var(--size-1) 0;& input[type=range]{flex:1;margin:0 var(--size-2)}}}#noiseControlsContainer{display:flex;gap:var(--size-3);align-items:stretch;height:100%;min-height:0}#noiseMainControls{display:flex;flex-direction:column;gap:var(--size-1);margin-bottom:var(--size-2);flex:1 1 0;min-height:0}#octaveControlsContainer{flex:1 1 0;max-block-size:100%;overflow-y:auto;border:var(--border-size-1) solid var(--border-color-1);background:var(--surface-1);padding:var(--size-1);position:relative;min-inline-size:fit-content}#octaveControls{position:absolute;inset:0;padding:inherit;min-inline-size:fit-content}.octave-controls{border:var(--border-size-1) solid var(--border-color-2);padding:var(--size-1);margin:var(--size-1) 0;background:var(--surface-1);border-radius:var(--radius-2);& h5{margin:0 0 var(--size-1) 0;font-size:var(--font-size-0);font-weight:700;color:var(--text-2)}& label{display:flex;align-items:center;justify-content:space-between;font-size:var(--font-size-0);margin:var(--size-1) 0}& input[type=range]{flex:1;margin:0 var(--size-1)}.value-display{min-inline-size:var(--min-width-octave-value);font-size:var(--font-size-0)}}}@layer modules{#buttons{flex:1;display:flex;flex-direction:column;.action-buttons{display:flex;flex-direction:column;gap:var(--control-gap);flex-wrap:wrap;block-size:100%}.button-row{display:flex;gap:var(--control-gap);>button{flex:1}}}#tickCounterDisplay{font-weight:400;font-size:inherit}.depth-buttons-grid{display:flex;flex-wrap:wrap;gap:var(--size-1);flex:1}.legend-item{display:flex;flex-direction:column;align-items:center;font-size:var(--font-size-0);gap:var(--size-1);background:none;border:none;padding:var(--size-1);cursor:pointer;transition:all var(--animation-speed-normal) ease;&:hover{background-color:var(--legend-hover-bg)}&.legend-item-selected{background-color:var(--legend-selected-bg);border-block-end:var(--legend-selected-border-width) solid var(--legend-selected-border-color);font-weight:700}}.legend-color-box{inline-size:var(--size-3);block-size:var(--size-3);border:var(--border-size-1) solid var(--border-color-2);background-color:var(--legend-color)}#brushControl{& input[type=range]{flex:1}.value-display{min-inline-size:var(--size-6);text-align:end}}#insights{flex:1;display:flex;flex-direction:column;position:relative;min-inline-size:fit-content;.insights-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--size-1);column-gap:var(--size-2);font-size:var(--font-size-0)}.help-button{position:absolute;inset-block-start:var(--size-1);inset-inline-end:var(--size-1);inline-size:var(--size-5);block-size:var(--size-5);font-size:var(--font-size-0)}}.insight-item{display:flex;justify-content:space-between;align-items:center;& span:last-child{font-family:var(--font-mono);color:var(--text-1);font-weight:400}}.insight-label{font-weight:700;color:var(--text-2);margin-inline-end:var(--size-1)}.help-button{background:var(--help-button-bg);color:var(--help-button-text);border:none;border-radius:var(--radius-2);block-size:var(--help-button-size);font-size:var(--font-size-2);font-weight:700;cursor:pointer;transition:var(--transition-standard);display:flex;align-items:center;justify-content:center;margin-block-start:auto;&:hover{filter:brightness(var(--hover-brightness))}}}@layer modules{#basinsDebug,#reservoirsDebug{flex:1;& h4{margin:0 0 var(--size-2) 0;border-block-end:var(--border-size-1) solid var(--border-color-1);padding-block-end:var(--size-1);flex-shrink:0}}#basinsText,#reservoirsText{flex:1;overflow-y:auto;line-height:var(--line-height-2);font-family:var(--font-mono),"Courier New",monospace;min-block-size:0;font-size:var(--font-size-0)}#basinsText{overflow-x:auto;white-space:nowrap;min-width:0;max-width:100%}.basin-tree{list-style:none;padding:0;margin:0}.basin-item{list-style:none;margin:0;& details{margin:0;& summary{cursor:pointer;padding:var(--size-1) var(--size-2);border-radius:var(--radius-1);transition:background var(--transition-standard);list-style:none;user-select:none;&:hover{background:var(--surface-2)}&::marker,&::-webkit-details-marker{display:none}&:after{content:"▶";display:inline-block;margin-inline-start:auto;transition:transform var(--transition-standard);font-size:var(--font-size-0);color:var(--text-3)}}&[open]>summary:after{transform:rotate(90deg)}&.leaf-node>summary:after{content:"";margin-inline-end:0}}}.basin-summary{display:flex;align-items:center;gap:var(--size-1);font-size:var(--font-size-0);line-height:var(--line-height-2)}.basin-id{font-weight:var(--font-weight-7);color:var(--text-1)}.basin-info{color:var(--text-2)}.basin-children{list-style:none;padding-inline-start:var(--basin-tree-indent);margin:0}.basin-item.active-node{background:var(--basin-active-bg);border-inline-start:var(--border-size-2) solid var(--basin-active-border);padding:var(--size-1);margin:var(--size-1) 0;border-radius:var(--radius-2);.basin-id{font-weight:var(--font-weight-7);color:var(--basin-active-text)}& summary{background:transparent}}.basin-item.basin-highlighted{background:var(--basin-highlighted-bg);border-inline-start:var(--border-size-2) solid var(--basin-highlighted-border);border-radius:var(--radius-2);.basin-id{font-weight:var(--font-weight-7);color:var(--basin-highlighted-text)}& summary{background:transparent}}.reservoir-table{inline-size:100%;margin-block-end:var(--size-3);border:var(--border-size-1) solid var(--border-color-1);border-radius:var(--radius-2);border-spacing:0;background:var(--surface-1);font-size:var(--font-size-0);overflow:hidden}.reservoir-header{background:var(--surface-2);border-block-end:var(--border-size-1) solid var(--border-color-1);& th{padding:var(--size-2);text-align:start;font-weight:var(--font-weight-6)}}.reservoir-title{color:var(--text-1);font-weight:var(--font-weight-6)}.reservoir-debug-info{color:var(--text-2);font-size:var(--font-size-0);text-align:end;white-space:nowrap}.reservoir-actions{text-align:end;inline-size:1%;white-space:nowrap}.reservoir-pumps{& tr:not(:last-child){border-block-end:var(--border-size-1) solid var(--border-color-1)}}.pump-item{& td{padding:var(--size-2);vertical-align:middle}}.pump-active-cell{inline-size:1%;text-align:center;white-space:nowrap}.pump-active-indicator{font-weight:700;font-size:var(--font-size-2);line-height:1;&[data-active=true]{color:var(--pump-active-color)}&[data-active=false]{color:var(--pump-inactive-color)}}.pump-coords{color:var(--text-1);font-size:var(--font-size-0);font-variant-numeric:tabular-nums;white-space:nowrap}.pump-badge-cell{inline-size:1%;white-space:nowrap}.pump-badge{display:inline-flex;align-items:center;gap:var(--size-1);font-size:var(--font-size-0);font-weight:var(--font-weight-7);&.inlet-badge{color:var(--pump-inlet-color)}&.outlet-badge{color:var(--pump-outlet-color)}}.pump-arrow{font-size:var(--font-size-1);font-weight:700}.pump-basin-cursors{display:flex;gap:var(--size-2);font-size:var(--font-size-0);color:var(--text-2)}.pump-basin-stack{display:flex;font-size:var(--font-size-0);align-items:center}.basin-stack-item{padding:var(--size-1) var(--size-1);border:var(--border-size-1) solid var(--basin-stack-border);border-radius:var(--radius-1);color:var(--text-2);cursor:pointer;transition:var(--transition-fast);white-space:nowrap;font-size:var(--font-size-0);&:hover{background:var(--basin-stack-hover-bg);border-color:var(--basin-stack-hover-border);color:var(--basin-stack-hover-text)}&.active{background:var(--basin-stack-active-bg);border-color:var(--basin-stack-active-border);color:var(--basin-stack-active-text);font-weight:var(--font-weight-6)}}.basin-stack-arrow{color:var(--text-3);font-size:var(--font-size-0);padding:0 2px}.pump-cursor-lowest,.pump-cursor-active{display:inline-flex;gap:2px;align-items:center}.cursor-label{color:var(--text-2);font-weight:var(--font-weight-5)}.basin-cursor-link{color:var(--link);text-decoration:underline;cursor:pointer;&:hover{color:var(--link-visited)}}.pump-actions{text-align:end;inline-size:1%;white-space:nowrap}.pipe-system-input-label{font-weight:400;font-size:var(--font-size-0);margin-inline-start:var(--size-2);display:flex;align-items:center;gap:var(--size-1)}#reservoirInput{inline-size:var(--size-9);padding:var(--size-1);border:var(--border-size-1) solid var(--border-color-1);border-radius:var(--radius-1);background:var(--surface-1);color:var(--text-1);font-size:var(--font-size-0)}.remove-btn{padding:2px var(--remove-button-padding-inline);font-size:var(--font-size-0);line-height:var(--font-lineheight-1);font-weight:var(--font-weight-8);background:var(--remove-button-bg);color:var(--remove-button-text);border:none;border-radius:var(--radius-1);cursor:pointer;transition:var(--transition-standard);text-transform:uppercase;&:before{content:"×";margin-inline-end:var(--size-1)}&:hover{background:var(--remove-button-bg-hover)}&:active{background:var(--remove-button-bg-active)}}}@layer modules{dialog.save-load-modal,dialog.help-modal{border:none;border-radius:var(--radius-2);box-shadow:var(--shadow-4);background:var(--surface-1);color:var(--text-1);max-inline-size:var(--modal-max-width);inline-size:90vw;max-block-size:80vh;padding:0;&::backdrop{background:var(--modal-backdrop-bg)}}.modal-content{display:flex;flex-direction:column;block-size:100%}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:var(--size-3);border-block-end:var(--border-size-1) solid var(--border-color-2);background:var(--surface-2);& h3{margin:0;font-size:var(--font-size-2)}}.close-btn{background:none;border:none;font-size:var(--font-size-3);cursor:pointer;color:var(--text-2);inline-size:var(--size-7);block-size:var(--size-7);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-1);transition:var(--transition-standard);&:hover{background:var(--surface-3);color:var(--text-1)}}.modal-body{flex:1;padding:var(--size-3);overflow-y:auto}.modal-footer{padding:var(--size-3);border-block-start:var(--border-size-1) solid var(--border-color-2);background:var(--surface-2);text-align:end;& button{padding:var(--button-padding-block) var(--size-3);border:var(--border-size-1) solid var(--border-color-1);border-radius:var(--radius-1);background:var(--surface-1);color:var(--text-1);cursor:pointer;font-size:var(--font-size-0);transition:var(--transition-standard);&:hover{background:var(--surface-3);border-color:var(--button-hover-border)}}}.load-options,.export-options{display:flex;flex-direction:column;gap:var(--size-4)}.load-option,.export-option{border:var(--border-size-1) solid var(--border-color-1);border-radius:var(--radius-2);padding:var(--size-3);background:var(--surface-2);& h4{margin:0 0 var(--size-2) 0;font-size:var(--font-size-1);color:var(--text-1)}}.encoding-options{margin-block-end:var(--size-4);padding:var(--size-3);background-color:var(--surface-1);border-radius:var(--radius-2);border:var(--border-size-1) solid var(--border-color-1)}.encoding-section{margin-block-end:var(--size-3);display:grid;grid-template-columns:var(--size-content-1) var(--size-12) 1fr;align-items:center;gap:var(--size-3);&:last-of-type{margin-block-end:0}& label{font-weight:var(--font-weight-6);justify-self:start}& select{padding:var(--size-1) var(--size-2);border:var(--border-size-1) solid var(--border-color-1);border-radius:var(--radius-2);background-color:var(--surface-2)}}.size-info{font-size:var(--font-size-0);color:var(--text-1);font-family:var(--font-mono);white-space:nowrap;justify-self:start}.total-size-section{margin-block-start:var(--size-2);padding-block-start:var(--size-2);border-block-start:var(--border-size-1) solid var(--border-color-2);text-align:center;& span{font-family:var(--font-mono);color:var(--total-size-color)}}.saved-maps-list{display:flex;flex-direction:column;gap:var(--size-2);max-block-size:var(--size-12);overflow-y:auto}.saved-map-item{display:flex;justify-content:space-between;align-items:center;padding:var(--size-2);border:var(--border-size-1) solid var(--border-color-1);border-radius:var(--radius-1);background:var(--surface-1)}.saved-map-info{display:flex;flex-direction:column;gap:var(--size-1)}.saved-map-name{font-weight:700;color:var(--text-1)}.saved-map-date{font-size:var(--font-size-0);color:var(--text-2)}.saved-map-actions{display:flex;gap:var(--size-1);& button{padding:var(--button-padding-block) var(--size-3);border:var(--border-size-1) solid var(--border-color-1);border-radius:var(--radius-1);background:var(--surface-1);color:var(--text-1);cursor:pointer;font-size:var(--font-size-0);transition:var(--transition-standard);&:hover{background:var(--surface-3);border-color:var(--button-hover-border)}&.delete-btn{background:var(--delete-button-bg);color:var(--delete-button-text);border-color:var(--delete-button-border);&:hover{background:var(--delete-button-bg-hover);border-color:var(--delete-button-border-hover)}}}}.no-saves{color:var(--text-2);font-style:italic;text-align:center;margin:var(--size-2) 0}.json-input-methods{display:flex;flex-direction:column;gap:var(--size-3)}.input-method{display:flex;flex-direction:column;gap:var(--size-2);& label{font-weight:700;color:var(--text-1)}}.save-to-browser{display:flex;gap:var(--size-2);align-items:center}.export-actions{display:flex;gap:var(--size-2);margin-block-start:var(--size-2)}#saveNameInput,#jsonTextInput,#exportJsonOutput{padding:var(--input-padding);border:var(--border-size-1) solid var(--border-color-1);border-radius:var(--radius-1);background:var(--surface-1);color:var(--text-1);font-family:var(--font-mono);font-size:var(--font-size-0);resize:vertical}#saveNameInput{flex:1;font-family:var(--font-sans)}#exportJsonOutput{inline-size:100%;background:var(--surface-3)}.help-sections{display:flex;flex-direction:column;gap:var(--size-4)}.help-section{border:var(--border-size-1) solid var(--border-color-1);border-radius:var(--radius-2);padding:var(--size-3);background:var(--surface-2);& h4{margin:0 0 var(--size-2) 0;font-size:var(--font-size-1);color:var(--brand);font-weight:700}.control-item{margin-inline-end:0;& code{background:var(--code-bg);padding:var(--size-1) var(--size-3);border-radius:var(--radius-2);font-family:var(--font-mono),"Courier New",monospace;font-size:var(--font-size-0);display:inline-block;text-align:center}}}}