*{box-sizing:border-box}body{margin:0;background:#14272c;color:#edf3e9;font-family:Arial,sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer;background:#25434a;color:#ecf6e9;border:1px solid #4a6569;border-radius:7px;padding:9px 12px}button:hover,button:focus-visible{background:#476268;outline:2px solid #ffbd69}input,select,textarea{width:100%;background:#112227;color:#edf3e9;border:1px solid #547174;border-radius:6px;padding:8px}input[type=range]{accent-color:#ffbd69}main{min-height:100dvh;padding:30px 3vw 70px}header{position:relative;padding-bottom:28px;border-bottom:1px solid #416068}h1{font-family:Georgia,serif;font-size:clamp(40px,5vw,72px);font-weight:400;line-height:.95;margin:18px 0}h1 em{color:#ffbd69}header p{max-width:420px;line-height:1.5}.brand{font-size:12px;letter-spacing:3px}.brand span{float:right;color:#ffbd69}.pills{display:flex;gap:10px;position:absolute;right:0;bottom:30px}.pills span{border:1px solid #456166;border-radius:30px;padding:10px 15px;font-size:12px}h2{text-transform:uppercase;letter-spacing:2px;font-size:12px;color:#adc8c5;margin:20px 0}label{display:block;margin:14px 0;font-size:12px;color:#c5dcd7}label input,label select{margin-top:7px}.studio{display:grid;grid-template-columns:245px minmax(240px,1fr) 245px;gap:28px}.viewport{position:relative;min-height:640px;background:radial-gradient(ellipse,#34545a,#14272c 70%)}.mesh{height:560px;width:100%}.mesh canvas{display:block;touch-action:manipulation}.caption{display:flex;flex-direction:column;text-align:center;gap:8px;font-family:Georgia,serif}.caption b{font-size:26px}.caption span,.legend{font-family:Arial,sans-serif;font-size:11px;color:#aec8c5}.legend{text-align:center}.note{font-size:11px;line-height:1.6;color:#acc4c2}.buttons{display:flex;gap:6px;flex-wrap:wrap}.buttons button{font-size:12px}.exports{display:grid;gap:7px}.mini svg{width:100%;max-height:210px}.handles{font-size:11px;max-height:160px;overflow:auto}.handles button{font-size:10px;padding:5px}.bottom{border-top:1px solid #416068;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;padding-top:10px;font-size:13px;line-height:1.6}textarea{min-height:110px;margin:12px 0;font-family:monospace;font-size:11px}output{position:fixed;bottom:0;left:0;right:0;background:#e5b778;color:#172c30;padding:12px 3vw;font-size:12px;z-index:5}button{transition:background .2s}.brand{animation:appear 1s ease-out}@keyframes appear{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@media(max-width:1000px){.studio{grid-template-columns:200px 1fr}.studio>aside:last-child{grid-column:1/-1;display:block}.mini{float:right;width:180px}.exports{grid-template-columns:1fr 1fr}.pills{position:static}.bottom{grid-template-columns:1fr}.viewport{min-height:530px}.mesh{height:450px}}@media(max-width:600px){.studio{display:flex;flex-direction:column}.viewport{order:-1;min-height:440px}.mesh{height:350px}.pills{gap:4px}.pills span{padding:8px}.studio>aside{width:100%}main{padding:20px 5vw 70px}.bottom{gap:10px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}.focus-button{position:absolute;top:6px;right:6px;z-index:2;font-size:11px}.viewport.focused{position:fixed;inset:0;z-index:20;background:#14272c;min-height:100dvh;padding-top:35px}.focused .mesh{height:calc(100dvh - 160px)}