:root{--color-bg: #16010d;--input-color: #461e4e;--color-fg: #dd56ff;--color-line: #ffe588;--color-accent: #edebd4;--species2: #17e197;--species1: #f62a2a;--app-max-width: clamp(288px, 80vw, 1000px);--ui-font:"Share Tech Mono",monospace;--tight-gap: 1rem}html,body{font-family:var(--ui-font);font-style:bold}h1,h3{margin:0}h1{text-align:center;margin-bottom:2rem}.title-mark{position:relative;width:100%;aspect-ratio:1905.27 / 475.09;display:block;margin:0 0 2rem;isolation:isolate;z-index:2}.title-svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;fill:currentColor;pointer-events:none}.title-soft{color:var(--species1)}.title-hard{color:var(--species2);mix-blend-mode:screen}.title-version{position:absolute;right:.6rem;bottom:0rem;font-size:clamp(.6rem,1.6vw,.9rem);letter-spacing:.08em;text-transform:uppercase;color:var(--color-line);opacity:.9;pointer-events:none;text-shadow:0 0 6px rgba(0,0,0,.6);z-index:3}button.title-trigger{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;min-height:0;display:block;border:0;padding:0;background:transparent;cursor:pointer;z-index:2}button.title-trigger:hover,button.title-trigger:active{background:transparent;color:inherit;border:0;transform:none}button.title-trigger:focus-visible{outline:2px solid var(--color-line);outline-offset:4px}button.title-trigger:after{display:none}.color-picker-panel{position:absolute;right:.4rem;top:100%;margin-top:.4rem;display:flex;flex-direction:column;gap:.35rem;padding:.5rem .6rem;background:var(--input-color);border:3px solid var(--color-fg);box-shadow:0 6px 18px #00000059;opacity:0;transform:translateY(-.4rem);pointer-events:none;z-index:5}.color-picker-panel.is-open{opacity:1;transform:translateY(0);pointer-events:auto}.color-picker-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--color-line)}.color-picker-row label{cursor:pointer}.color-picker-row input[type=color]{width:2rem;height:2rem;border:2px solid var(--color-line);background:transparent;padding:0;cursor:pointer}.color-picker-row input[type=color]::-webkit-color-swatch-wrapper{padding:0}.color-picker-row input[type=color]::-webkit-color-swatch{border:none}.color-picker-row input[type=color]::-moz-color-swatch{border:none}body{margin:0;background:var(--color-bg);color:var(--color-fg);display:flex;flex-direction:column;align-items:center;padding:20px}.app-shell{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:clamp(1rem,3vw,2.5rem);padding:2rem;width:100%}.control-stack{flex:0 1 var(--app-max-width);width:min(100%,var(--app-max-width))}.control-panels{display:flex;flex-direction:column;gap:0;position:relative;z-index:1}.canvas-wrap{flex:1 1 clamp(520px,55vw,var(--app-max-width));min-width:clamp(520px,55vw,var(--app-max-width));max-width:var(--app-max-width);width:min(100%,var(--app-max-width));display:flex;justify-content:center;align-items:flex-start}*,*:before,*:after{box-sizing:border-box}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--color-line);color:var(--input-color);font-size:1rem;text-transform:uppercase;border-top:4px solid var(--color-bg);border-left:4px solid var(--color-bg);border-bottom:4px solid var(--color-fg);border-right:4px solid var(--color-fg);cursor:pointer;outline:none;box-sizing:border-box}input[type=text],input[type=number]{background-color:var(--color-line);color:var(--input-color);border-top:4px solid var(--color-bg);border-left:4px solid var(--color-bg);border-bottom:4px solid var(--color-fg);border-right:4px solid var(--color-fg);font-size:1rem}select,input[type=text],input[type=number],input[type=file]{min-height:2.2rem;padding:.5rem;line-height:1}button,input,select,textarea{font:inherit;font-weight:500;padding:.5rem}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}input[type=file]{display:none}.control-panel{margin:0 auto;max-width:var(--app-max-width);width:100%;padding:0;margin-bottom:var(--tight-gap)}.speed-panel{display:none}.control-row{display:grid;grid-template-columns:repeat(5,minmax(110px,1fr));grid-auto-rows:90px;align-items:stretch;justify-content:stretch;gap:var(--tight-gap);width:100%;padding:0}.control-row>*{min-width:0;align-self:stretch;display:flex;flex-direction:column;gap:.25rem;color:var(--color-fg);min-height:90px}.control-unit{flex:1 1 0;max-width:none;min-width:0;display:flex;font-size:1rem;flex-direction:column;gap:.5rem;background:var(--input-color);border:solid 7px var(--input-color);padding:.35rem;text-transform:uppercase;color:var(--color-fg);height:100%;min-height:90px;justify-content:space-between}.control-unit input{max-width:auto;font-size:1rem}.speed-control{flex-direction:row;align-items:center;justify-content:center;gap:.75rem}.speed-slider{flex:1 1 auto;max-width:240px;display:flex;align-items:center}.speed-control input[type=range]{width:100%}.speed-control input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:10px;background:var(--color-line);border:none}.speed-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:32px;height:32px;background:var(--color-fg);border:none;border-radius:0;transform:rotate(45deg);cursor:pointer}.speed-control input[type=range]::-moz-range-thumb{width:32px;height:32px;background:var(--color-fg);border:none;border-radius:0;transform:rotate(45deg);cursor:pointer}.speed-control input[type=range]::-moz-range-track{height:10px;background:var(--color-line);border:none}.speed-icon{width:3.2em;height:3.2em}.player-icon{width:3.2em;height:3.2em;display:block;margin:0 auto}.die-icon{width:2.97825em;height:2.97825em}.species1-fill{fill:var(--species1);color:var(--species1)}.species2-fill{fill:var(--species2);color:var(--species2)}.die-pair{display:inline-flex;align-items:center;gap:.25rem}.player-icon rect{stroke:none}.assign-icon{height:3.2em;width:auto;color:var(--color-fg);--assign-square: var(--color-fg)}.assign-icon .assign-arrow{fill:var(--color-fg)}.assign-icon .assign-square{fill:var(--assign-square)}.assign-icon.species1-fill{--assign-square: var(--species1)}.assign-icon.species2-fill{--assign-square: var(--species2)}.wrap-icon{height:3.2em;width:auto}#wrap .wrap-off,#wrap[data-state=off] .wrap-on{display:none}#wrap[data-state=off] .wrap-off{display:inline}.wrap-icon.wrap-on{height:3.52em;width:auto}.wrap-icon.wrap-off{height:2.72em;width:auto}.control-row button svg{display:block;margin:auto}.tight-row{display:grid;grid-template-columns:repeat(5,minmax(110px,1fr));gap:var(--tight-gap);grid-auto-rows:90px}.tight-row>*{min-width:0;width:100%;height:100%}.tight-row>button,.tight-row>.control-unit,.tight-row>.species-label{width:100%}.seven-cols{grid-template-columns:repeat(7,1fr)}.span-2{grid-column:span 2}.span-3{grid-column:span 3}.span-4{grid-column:span 4}.species-label{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;padding:0;background:none;border:none;color:inherit;text-transform:uppercase;cursor:pointer}.species-label:hover,.species-label:active{color:inherit;transform:none}.species-row{position:relative}.species-editors{display:contents}.genome-grid{display:grid;grid-template-columns:repeat(5,minmax(110px,1fr));grid-template-rows:repeat(2,90px);gap:var(--tight-gap)}.genome-list{display:flex;flex-direction:column;gap:.5rem;width:100%;height:100%}#genomeList{width:100%;min-height:0;flex:1 1 auto}#genomeList option:checked{background:var(--color-fg);color:var(--color-line)}.spacer{visibility:hidden}.modal.hidden{display:none}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:var(--color-bg);border:1px solid var(--color-line);border-radius:6px;padding:12px;min-width:280px;max-width:420px;box-shadow:0 4px 20px #0006}.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.modal-header h3{margin:0;font-size:18px}.modal-header button{background:none;border:none;color:var(--color-fg);font-size:20px;cursor:pointer}.modal-body{margin-bottom:12px}.modal-body select{width:100%}.modal-footer{display:flex;justify-content:flex-end;gap:8px}.modal-footer button{padding:6px 12px;min-height:auto;height:auto}.color-square{width:1em;height:1em;display:inline-block;margin-right:.5em}.species1{background-color:var(--species1)}.species2{background-color:var(--species2)}button{display:flex;align-items:center;justify-content:center;background:var(--input-color);color:var(--color-fg);padding:10px 12px;font-size:1.2rem;text-transform:uppercase;cursor:pointer;transition:background .2s ease;width:100%;height:100%;min-height:90px;position:relative;overflow:visible;border-top:5px solid var(--color-fg);border-left:5px solid var(--color-fg);border-bottom:5px solid var(--color-line);border-right:5px solid var(--color-line);box-sizing:border-box}button:active{background:var(--color-line);color:var(--input-color);border-top-color:var(--color-line);border-left-color:var(--color-line);border-bottom-color:var(--color-fg);border-right-color:var(--color-fg);transform:translateY(2px)}button.species-label{background:none;border:none;padding:0}button.species-label:hover,button.species-label:active{color:inherit;transform:none}button:is([aria-label],[data-tooltip]):after{position:absolute;left:50%;bottom:calc(100% + .6rem);transform:translate(-50%,6px);background:var(--color-line);color:var(--input-color);border:2px solid var(--color-fg);padding:.35rem .6rem;font-size:.8rem;line-height:1.1;letter-spacing:.02em;white-space:nowrap;opacity:0;pointer-events:none;z-index:20;transition:opacity .12s ease,transform .12s ease;transition-delay:0s}button[aria-label]:after{content:attr(aria-label)}button[data-tooltip]:after{content:attr(data-tooltip)}@media (hover: hover) and (pointer: fine){button:hover{background:var(--color-line);color:var(--input-color)}button:is([aria-label],[data-tooltip]):hover:after,button:is([aria-label],[data-tooltip]):focus-visible:after{opacity:1;transform:translate(-50%);transition-delay:1s}}@media (hover: none) and (pointer: coarse){button:focus,button:focus-visible{outline:none}button:is([aria-label],[data-tooltip]):after{display:none}}button svg{width:3.2em;height:3.2em}canvas{width:100%;max-width:var(--app-max-width);height:auto;aspect-ratio:1 / 1;display:block;margin-bottom:var(--tight-gap);border:none;outline:5px solid var(--color-line);outline-offset:0}canvas.wrap-unbound{outline-color:transparent}@media (max-width: 1100px){.canvas-wrap{flex-basis:100%;min-width:0}canvas{width:min(100%,calc(100vw - 2rem));min-width:0}}@media (max-width: 768px){:root{--tight-gap: .6rem}body{padding:10px}.app-shell{padding:.4rem 1rem 1rem;gap:var(--tight-gap)}.control-panel{margin-bottom:var(--tight-gap)}.control-stack{display:contents}.title-mark,.canvas-wrap,.control-panels{width:min(100%,var(--app-max-width));flex:0 1 var(--app-max-width)}.title-mark{width:calc(100% + 2rem);max-width:calc(100% + 2rem);margin-left:-1rem;margin-right:-1rem;flex:0 0 auto;margin-bottom:var(--tight-gap);transform:scale(.95);transform-origin:center top}.title-mark{order:1}.canvas-wrap{order:2}.control-panels{order:3}.control-row,.tight-row{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(56px,auto)}.species-row{grid-template-columns:70px 1fr;grid-auto-rows:minmax(56px,auto)}.settings-row,.seven-cols{grid-template-columns:repeat(3,minmax(0,1fr))}.player-controls-panel .control-row{grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:minmax(56px,auto)}.genome-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:auto}.speed-panel.is-active{display:block}.sprinkle-panel{display:none}.genome-grid>*{grid-column:auto!important;grid-row:auto!important}.genome-list{grid-column:1 / -1!important;min-height:0;height:auto}#genomeStatus,#browseBtn,#clearGenomes,#wrap,#fade{display:none}#genomeList{-moz-appearance:auto;appearance:auto;-webkit-appearance:menulist;font-size:1rem;line-height:normal;padding:.4rem .5rem;min-height:2.2rem;height:auto;max-height:none}.player-controls-panel{order:-1}.assign-icon.species1-fill{color:var(--species1)}.assign-icon.species2-fill{color:var(--species2)}.assign-icon .assign-arrow{fill:currentColor}.assign-icon .assign-square{display:none}button.species-toggle{grid-column:2 / 3;background:var(--input-color);border-top:5px solid var(--color-fg);border-left:5px solid var(--color-fg);border-bottom:5px solid var(--color-line);border-right:5px solid var(--color-line);padding:4px;min-height:56px;font-size:1rem}.species-toggle h3{line-height:1;white-space:nowrap}.species-toggle h3 br{display:none}.species-row .assign-btn{grid-column:1 / 2!important;grid-row:1!important;padding:4px;min-height:56px}.species-row .assign-btn .player-icon{width:2.2em;height:2.2em}button.species-toggle:active{background:var(--color-line);color:var(--input-color);border-top-color:var(--color-line);border-left-color:var(--color-line);border-bottom-color:var(--color-fg);border-right-color:var(--color-fg);transform:translateY(2px)}.species-editors{display:none;grid-column:1 / -1;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--tight-gap)}.species-row.is-open .species-editors{display:grid}.spacer{display:none}button,.control-unit,.control-row>*,.tight-row>*{min-height:56px}button{padding:8px 10px;font-size:1.05rem}.player-controls-panel button{min-height:56px;padding:4px}button svg,.player-icon,.speed-icon,.wrap-icon{width:2.6em;height:2.6em}.player-controls-panel button svg{width:1.9em;height:1.9em}.speed-control{justify-content:space-between}.speed-control .speed-icon{flex:0 0 auto}.speed-control .speed-slider{flex:1 1 auto;max-width:none}}@media (max-width: 768px) and (hover: hover) and (pointer: fine){button.species-toggle:hover{background:var(--color-line);color:var(--input-color)}}