:root{--ink:#253c48;--muted:#7b898d;--coral:#ea8e77;--cream:#faf8f2}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:Arial,Helvetica,sans-serif}button,input{font:inherit}button{cursor:pointer}header{max-width:1320px;margin:auto;padding:30px 44px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e3e7e4}.brand{font-weight:900;letter-spacing:2px;font-size:19px;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:12px}.logo{font-size:29px;background:#d9edf6;width:46px;height:42px;border-radius:15px;text-align:center}.brand-note{font-size:10px;letter-spacing:0;font-weight:400;border-left:1px solid #ccd6d5;padding-left:16px;margin-left:7px}.header-note{font-size:12px;color:var(--muted)}main{max-width:1320px;padding:0 44px;margin:auto}.intro{display:flex;justify-content:space-between;align-items:center;padding:42px 0 34px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;margin:0 0 13px;color:#7e969c}h1{font-size:52px;letter-spacing:-2.2px;line-height:1.08;margin:0 0 18px;font-weight:500}h1 em{font-family:Georgia,serif;font-weight:400;color:#cd7c66}.intro p:not(.eyebrow){font-size:14px;line-height:1.7;color:#78898e;margin:0}.intro-note{font-family:Georgia,serif;font-style:italic;line-height:1.6;font-size:18px;transform:rotate(5deg);padding-right:60px;color:#7c969d}.intro-note span{display:block;color:#df9b6b;font-size:36px;margin-bottom:6px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 342px;gap:24px;align-items:stretch}.preview{position:relative;overflow:hidden;background:linear-gradient(150deg,#c4e5f3,#e0eff3 65%,#f3eddf);border-radius:24px;min-height:570px;transition:background .5s;isolation:isolate;display:flex;align-items:center;border:1px solid #cde0e5}.scene-top,.scene-bottom{position:absolute;left:28px;right:28px;display:flex;justify-content:space-between;align-items:center;z-index:2}.scene-top{top:26px;font-size:11px;color:#66858f}.pill{background:#ffffffab;border:1px solid #fff9;border-radius:30px;padding:10px 13px;letter-spacing:1.3px;font-size:9px;font-weight:700;color:#456471}.pill i{display:inline-block;background:#db9b71;border-radius:50%;width:6px;height:6px;margin-right:7px}.scene-bottom{bottom:25px}.scene-bottom strong{display:block;font-size:13px;font-weight:500;margin-top:6px}.tiny,.view-label{font-size:8px;letter-spacing:1.8px;color:#6f8e97}.view-label{border:1px solid #8da9b446;padding:10px;border-radius:8px;letter-spacing:1px}.sun{position:absolute;width:70px;height:70px;right:80px;top:92px;background:#fff5c8;border-radius:50%;box-shadow:0 0 60px #fff6dca6;z-index:-1}.sky-cloud{position:absolute;width:120px;height:25px;background:#ffffff58;border-radius:50%;z-index:-1;filter:blur(2px)}.cloud-one{top:135px;left:48px}.cloud-two{right:-20px;top:206px;width:180px}svg{width:100%;height:auto;max-height:600px;overflow:visible;filter:drop-shadow(0 24px 13px #688b9726)}.night{background:linear-gradient(145deg,#273d62,#596982 70%,#92929c);border-color:#697a95}.night .sun{background:#fff6dd;box-shadow:0 0 48px #fff4d330;width:42px;height:42px}.night .scene-top,.night .tiny,.night .view-label,.night .scene-bottom{color:#e0e9ef}.night .sky-cloud{background:#ffffff0c}.controls{padding:25px;background:#fffefa;border:1px solid #e8e8df;border-radius:24px;box-shadow:0 8px 25px #475d6705}.panel-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.panel-title .eyebrow{font-size:9px;margin-bottom:7px}h2{font-size:24px;letter-spacing:-.7px;font-weight:500;margin:0}.spark{font-size:32px;color:#eaa58a}fieldset{border:0;padding:0;margin:0 0 23px;min-width:0}legend{font-size:10px;color:#a3adad;width:100%;padding:0;margin-bottom:11px;display:flex;gap:9px;align-items:center}legend span{font-size:12px;font-weight:600;color:var(--ink)}.segmented{display:flex;background:#f1f3ef;padding:4px;border-radius:12px;gap:3px}.segmented button{flex:1;border:0;background:transparent;padding:10px 4px;border-radius:9px;font-size:12px;color:#7c898c;transition:background .2s}.segmented button[aria-pressed=true]{background:white;color:#344d59;box-shadow:0 2px 5px #354c4a12}.themes{display:flex;gap:8px}.themes button{flex:1;padding:9px 3px 8px;border:1px solid #e7e9e3;border-radius:12px;background:transparent;font-size:9px;color:#667a7f}.themes button[aria-pressed=true]{border-color:#d7a18f;background:#fff5ee;box-shadow:0 0 0 1px #d7a18f}.swatch{display:block;height:25px;margin:0 7px 8px;border-radius:7px}.peach{background:linear-gradient(90deg,#e8a087 33%,#f1d7ae 33%,#f1d7ae 66%,#87a7ad 66%)}.sage{background:linear-gradient(90deg,#90a98b 33%,#e4debe 33%,#e4debe 66%,#d3ab83 66%)}.lilac{background:linear-gradient(90deg,#b3a0ca 33%,#eee0d2 33%,#eee0d2 66%,#8b9ec1 66%)}output{margin-left:auto;font-size:14px;color:#bd765f;background:#fceee4;padding:5px 10px;border-radius:8px}input[type=range]{width:100%;height:16px;accent-color:#d98770;margin:2px 0 5px;cursor:pointer}.range-labels{display:flex;justify-content:space-between;color:#9aa4a3;font-size:9px}.capacity{background:#f4f6f1;border-radius:9px;padding:10px 12px;margin-top:12px;font-size:10px;color:#7b8b81}.meter{height:3px;background:#dde5d9;border-radius:4px;margin-top:7px;overflow:hidden}#meter-fill{height:100%;background:#95ac91;transition:width .25s}.positions button{font-size:10px;padding:10px 2px}.panel-footer{display:flex;gap:13px;align-items:center}#reset{border:0;background:transparent;color:#83928e;font-size:12px;padding:12px 0}#share{flex:1;border:0;border-radius:11px;background:#e9967c;color:#fff;padding:14px 15px;font-size:12px;font-weight:600;display:flex;justify-content:space-between}#share:hover{background:#d98269}#share-status{font-size:9px;text-align:center;margin:13px 0 0;color:#94a19e;line-height:1.5}#share-url{width:100%;margin-top:10px;padding:8px;border:1px solid #dce3df;border-radius:6px;font-size:10px;color:#586d75}.under{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#8b9998;padding:23px 0 30px}.under p{font-size:10px}footer{max-width:1232px;margin:auto;padding:23px 0 30px;border-top:1px solid #e4e6de;display:flex;justify-content:space-between;font-size:10px;color:#9aa5a2}footer span:first-child{font-weight:800;letter-spacing:2px}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #69a2c1;outline-offset:3px}@media(min-width:1300px){.preview{min-height:602px}}@media(max-width:900px){header,main{padding-left:24px;padding-right:24px}.brand-note,.header-note{display:none}.workspace{grid-template-columns:minmax(0,1fr) 310px;gap:16px}.controls{padding:20px}.intro-note{padding-right:15px}.preview{min-height:560px}.scene-top,.scene-bottom{left:18px;right:18px}.view-label{display:none}footer{margin:0 24px}}@media(max-width:690px){header{padding:20px}.brand{font-size:16px}main{padding:0 18px}.intro{padding:30px 4px 25px}h1{font-size:41px}.intro p:not(.eyebrow){font-size:12px}.intro-note{display:none}.workspace{grid-template-columns:1fr}.preview{min-height:365px}.scene-top{top:18px}.scene-bottom{bottom:18px}.sun{top:65px;right:42px;width:45px;height:45px}svg{margin-top:10px}.controls{padding:24px}.themes button{font-size:11px}.swatch{height:28px}.under{display:block;text-align:center;line-height:1.8;padding:24px 0}.under p{font-size:10px}footer{font-size:8px;margin:0 18px}.scene-top{font-size:9px}.tiny{font-size:7px}.scene-bottom strong{font-size:11px}}