@import"https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap";:root{--bg: #1a1a1a;--text: #FFFFFF;--accent: #FFA500}*{margin:0;padding:0;box-sizing:border-box}body{width:100%;height:100vh;font-family:Roboto Mono,monospace}main{width:100%;height:100%;background-color:var(--bg);position:relative;overflow:hidden}#spiral{width:100%;height:100%;display:block;object-fit:contain;cursor:pointer}.controls-panel{position:absolute;bottom:0;left:0;right:0;z-index:10;background:var(--bg);color:var(--text);border-radius:1rem 1rem 0 0;padding:1rem;display:flex;flex-direction:column;gap:1rem;transition:transform .3s ease;box-shadow:0 -4px 24px #00000080;max-height:100vh;overflow-y:scroll}.controls-panel.collapsed .control-settings,.controls-panel.collapsed .info-content{display:none}button{width:3rem;height:3rem;background-color:var(--text);color:var(--bg);border:none;border-radius:.25rem;font-size:2rem;cursor:pointer;box-shadow:#0006 0 2px 4px,#0000004d 0 7px 13px -3px,#0003 0 -3px inset;transition:transform .1s ease,}button:hover{background-color:var(--text);color:var(--accent);transform:translateY(-1px)}button:active{transform:translateY(2px)}[data-tooltip]{position:relative}[data-tooltip]:after{content:attr(data-tooltip);position:absolute;top:3rem;left:50%;transform:translate(-50%);background:var(--text);color:var(--bg);font-family:Roboto Mono,monospace;font-size:.7rem;letter-spacing:.05em;white-space:nowrap;padding:.3rem .6rem;border-radius:.25rem;pointer-events:none;opacity:0;transition:opacity .2s ease;z-index:100}[data-tooltip]:hover:after{opacity:1}#controls-toggle{align-self:center;opacity:.6}#controls-toggle:hover{opacity:1}.controls-actions{display:flex;flex-direction:row;gap:.5rem}.info-content{width:80%;max-width:60rem;background:var(--text);color:var(--bg);border-radius:1rem;display:flex;flex-direction:column;gap:1rem;padding:1rem;max-height:0;overflow-y:scroll;opacity:0;transition:max-height .35s ease,opacity .25s ease,padding .3s ease}.info-content.visible{max-height:100vh;opacity:1;padding:1rem}.info-instructions{display:flex;flex-direction:column;gap:.5rem}.info-instructions h3{font-size:1.25rem}.info-instructions ol{padding-left:3rem}.info-instructions p em,.info-instructions p strong{color:var(--accent)}.control-settings{display:flex;flex-direction:column;gap:.75rem}.control-settings label{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:.85rem;letter-spacing:.05rem;color:var(--text)}.control-settings input[type=range]{flex:1;accent-color:var(--accent);cursor:pointer}.control-settings input[type=color]{width:3rem;height:3rem;border:none;border-radius:.5rem;background:none;cursor:pointer;box-shadow:var(--accent) 0 0 0 2px}.control-settings div{display:flex;align-items:center;justify-content:space-between}.control-settings div p{font-size:.85rem;letter-spacing:.05em}@media(min-width:1024px){main{display:flex;flex-direction:row}#spiral{flex:1;height:100vh}.controls-panel{position:absolute;right:0;width:30rem;height:100vh;border-top:none;border-left:1px solid rgba(255,255,255,.1);border-radius:0;padding:1rem;overflow-y:auto;justify-content:flex-start;transition:width .3s ease}.controls-panel.collapsed{width:8rem}.controls-panel.collapsed .control-settings,.controls-panel.collapsed .info-content{display:none}#controls-toggle{align-self:flex-start}}