*{box-sizing:border-box}body{margin:0;background:#f5f0e6;color:#203d3b;font-family:Arial,sans-serif}main{min-height:100vh;padding:36px 4vw}header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #aab8aa;padding-bottom:30px}small{font-size:10px;letter-spacing:2px}h1{font-size:clamp(36px,5vw,74px);font-weight:400;letter-spacing:-3px;margin:22px 0 0;line-height:1.05}h1 em{font-family:Georgia,serif;color:#408773}.brand{font-size:18px;letter-spacing:3px;line-height:1.4}.brand span{display:block;font-size:10px;margin-top:18px}.toolbar{display:flex;gap:8px;flex-wrap:wrap;padding:20px 0}button,input,select,textarea{font:inherit}button{border:1px solid #8b9f90;background:transparent;color:#244c48;padding:11px 15px;border-radius:4px;cursor:pointer}button:hover{background:#d5e4d7}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #b45a3b;outline-offset:3px}.toolbar button:nth-child(3){background:#244c48;color:#fff}.workspace{display:grid;grid-template-columns:minmax(280px,.85fr) minmax(400px,1.5fr);gap:30px}.source,.experiment,.project{border-top:1px solid #aab8aa;padding:20px 0}.sectionhead{display:flex;justify-content:space-between;align-items:center}.sectionhead span{font-size:10px;letter-spacing:1px}h2{font-size:16px;font-weight:500;margin:0 0 15px}p{font-size:12px;line-height:1.6;color:#64766d}.board{width:100%;aspect-ratio:1;background:#fdfaf3;display:block;outline:1px solid #c8cfc3;border:0;padding:0;touch-action:manipulation;margin:20px 0}label{display:flex;flex-direction:column;font-size:10px;gap:6px;margin:12px 0;color:#4c655b}input,select{width:100%;min-width:0;padding:9px;background:#fffaf1;border:1px solid #bcc7bb;color:#244c48;border-radius:3px}input[type=checkbox]{height:24px}.fields{display:flex;gap:10px;flex-wrap:wrap}.fields label{flex:1;min-width:75px}.variants{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}.variants article{background:#e9e8dd;border-radius:5px;padding:14px;animation:arrive .3s ease-out}.variants article div{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px}.variants svg{width:100%;display:block}.variants article:nth-child(2n){background:#e9e1e9}aside{font-family:Georgia,serif;line-height:1.6;padding:24px;border-left:3px solid #548b79;margin-top:22px;font-size:15px}aside b{display:block}.project{margin-top:30px}textarea{width:100%;min-height:140px;background:#fffcf5;border:1px solid #adbcad;padding:15px;resize:vertical;font-family:monospace}.project button{margin:10px 8px 0 0}footer{border-top:1px solid #b2c0b1;padding:20px 0;margin-top:22px}footer small{display:block;margin-top:20px}footer p{max-width:900px}footer [role=status]{font-size:14px;color:#244c48}@keyframes arrive{0%{opacity:.7}to{opacity:1}}@media(max-width:800px){main{padding:24px 5vw}.workspace{grid-template-columns:1fr}header{align-items:flex-start}.brand{font-size:11px;max-width:100px}h1{letter-spacing:-1px}.variants{grid-template-columns:repeat(2,1fr)}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}main.focus{min-height:100vh}.focus header,.focus .project,.focus footer{display:none}.focus .toolbar{position:sticky;top:0;background:#f5f0e6;z-index:2}.focus .workspace{min-height:calc(100vh - 130px)}
