*{box-sizing:border-box}body{margin:0;background:#f0efe7;color:#18333a;font-family:system-ui,sans-serif}main{max-width:1500px;margin:auto;padding:32px}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #a9b5ad;padding-bottom:24px}h1{font-size:clamp(36px,5vw,68px);font-weight:400;letter-spacing:-3px;margin:8px 0}h1 em{font-family:Georgia,serif;color:#936535}small{letter-spacing:3px}p{line-height:1.6}button,input,select,textarea{font:inherit}button{cursor:pointer;border:1px solid #8a9d97;border-radius:5px;background:#fafaf6;padding:10px 14px;color:inherit}button:hover{background:#e0e8df}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #b16626;outline-offset:3px}.primary{background:#214a45;color:#fff}.intro{padding:24px 0;max-width:1000px;line-height:1.7}.intro strong{font-weight:500;color:#8b542f}.workspace{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(290px,1fr);gap:32px}.studio{min-width:0}.toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.views{display:grid;grid-template-columns:1fr 1fr;gap:16px}.views article{background:#203b40;padding:16px;color:#e8eee6;border-radius:9px}.views h2{font-size:15px;font-weight:500}.views svg{width:100%;display:block;border-radius:7px;cursor:crosshair;aspect-ratio:1}.views p{font-size:13px;margin-bottom:0}.probe{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:20px;padding:18px;background:#e0e5dc;border-radius:8px}.probe h3{width:100%;margin:0}.probe label{width:100px}.caption{font-size:13px;color:#5e6c67}aside{border-left:1px solid #bac4ba;padding-left:28px}aside h2{font:28px Georgia,serif}label{display:block;font-size:14px;margin:10px 0}input,select{display:block;width:100%;padding:7px;border:1px solid #8a9d97;border-radius:4px;background:#fafaf6}textarea{display:block;width:100%;height:230px;resize:vertical;font:12px/1.4 monospace;padding:12px;border:1px solid #8a9d97;background:#fffef7;border-radius:6px}aside>p{font-size:13px}#status{position:sticky;bottom:10px;padding:14px 20px;margin-top:24px;background:#244a45;color:#fff;border-radius:7px;box-shadow:0 4px 20px #0002}footer{max-width:950px;margin-top:40px;font-size:13px}footer h3{font:25px Georgia,serif}@media(max-width:850px){main{padding:18px}.workspace{grid-template-columns:1fr}aside{border:0;padding:0}.views{gap:8px}.views article{padding:8px}header button{max-width:115px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}