:root{color:#202023;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#ececeb;font-family:Helvetica Neue,Helvetica,Arial,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}html{background:#ececeb}body{min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{color:inherit}button,input[type=color],input[type=range]{cursor:pointer}button:focus-visible,input:focus-visible{outline-offset:3px;outline:2px solid #29282b}::selection{color:#17161a;background:#b7d8ff}#root{min-height:100svh}.studio{isolation:isolate;background:#ececeb;min-height:100svh;position:relative;overflow:hidden}.studio:before{z-index:-1;content:"";pointer-events:none;background:linear-gradient(115deg,#ffffff9e,#0000 42%);position:absolute;inset:0}.studio-header{z-index:4;pointer-events:none;justify-content:space-between;align-items:baseline;padding:26px 34px;display:flex;position:absolute;top:0;left:0;right:0}.wordmark{color:#1f1e21;letter-spacing:-.055em;pointer-events:auto;font-size:1.05rem;font-weight:680;text-decoration:none}.studio-header p{color:#5c5a60;letter-spacing:.02em;margin:0;font-size:.74rem;font-weight:580}.stage{grid-template-columns:minmax(270px,460px) minmax(350px,430px);justify-content:center;align-items:center;gap:clamp(56px,8vw,126px);min-height:100svh;padding:84px 48px 34px;display:grid;position:relative}.ambient{z-index:-1;filter:blur(90px);opacity:.32;pointer-events:none;border-radius:50%;position:absolute}.ambient-one{background:#b4ceff;width:34vw;height:38vw;top:12%;left:3%}.ambient-two{background:#d1c5ff;width:44vw;height:44vw;bottom:-24%;right:-12%}.phone-frame{aspect-ratio:1320/2868;background:#f1f2f8;border:1px solid #ffffffe6;border-radius:clamp(28px,3.2vw,46px);justify-self:end;width:min(100%,46.025svh - 58.912px);min-width:260px;max-width:430px;position:relative;overflow:hidden;box-shadow:0 42px 64px -30px #25223e6b,0 10px 24px -14px #1d1b2c42,inset 0 0 0 1px #19181f14}.wallpaper-canvas{width:100%;height:100%;display:block}.phone-sheen{pointer-events:none;background:linear-gradient(112deg,#ffffff38,#0000 22% 75%,#ffffff1f);position:absolute;inset:0}.render-error{z-index:2;color:#342f3d;text-align:center;background:#e8e3ed;flex-direction:column;justify-content:center;gap:10px;padding:34px;display:flex;position:absolute;inset:0}.render-error strong{font-size:1.15rem}.render-error span{color:#605a68;font-size:.85rem;line-height:1.45}.controls{background:#f8f8f7ed;border:1px solid #1a191d1a;border-radius:24px;width:100%;max-width:430px;padding:24px;box-shadow:0 24px 54px -34px #17161e7a,0 5px 14px -8px #17161e3d}.control-heading{justify-content:space-between;align-items:flex-start;gap:24px;padding-bottom:22px;display:flex}.control-heading h1{color:#1d1c20;letter-spacing:-.04em;margin:0 0 3px;font-size:clamp(1.75rem,3vw,2.3rem);font-weight:520;line-height:1}.control-heading p{color:#69666e;margin:0;font-size:.8rem}.icon-button{background:#fff;border:1px solid #d8d6d9;border-radius:999px;align-items:center;gap:7px;min-height:36px;padding:0 12px;font-size:.74rem;font-weight:620;transition:border-color .16s ease-out,background-color .16s ease-out,transform .16s ease-out;display:inline-flex}.icon-button:hover{background:#f5f4f6;border-color:#aaa7ae}.icon-button:active{transform:scale(.97)}.icon-button svg,.download-button svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.65px;width:16px}.control-group{border:0;border-top:1px solid #dfdddf;min-width:0;margin:0;padding:18px 0}.control-group legend,.grain-control>label{color:#55525a;letter-spacing:.06em;text-transform:uppercase;width:100%;margin-bottom:13px;padding:0;font-size:.7rem;font-weight:680;display:block}.color-row{grid-template-columns:1fr 1fr 34px;align-items:center;gap:9px;display:grid}.color-control{background:#fff;border:1px solid #d9d7da;border-radius:11px;align-items:center;gap:8px;min-width:0;height:42px;padding:5px 9px 5px 6px;display:flex}.color-well{background:0 0;border:0;border-radius:8px;flex:0 0 29px;width:29px;height:29px;padding:0;overflow:hidden}.color-well::-webkit-color-swatch-wrapper{padding:0}.color-well::-webkit-color-swatch{border:0;border-radius:7px}.color-well::-moz-color-swatch{border:0;border-radius:7px}.hex-input{color:#36343a;letter-spacing:-.02em;background:0 0;border:0;outline:0;width:100%;min-width:0;padding:0;font-family:SFMono-Regular,Consolas,monospace;font-size:.7rem}.swap-button{color:#555159;background:0 0;border:0;border-radius:50%;place-items:center;width:34px;height:34px;padding:0;font-size:1.15rem;transition:background-color .16s ease-out;display:grid}.swap-button:hover{background:#e9e7ea}.preset-list{grid-template-columns:repeat(5,1fr);gap:7px;display:grid}.preset{color:#656169;background:0 0;border:1px solid #0000;border-radius:12px;flex-direction:column;align-items:center;gap:7px;min-width:0;padding:6px 4px 5px;font-size:.66rem;font-weight:590;transition:color .16s ease-out,border-color .16s ease-out,background-color .16s ease-out;display:flex}.preset:hover{color:#302e34;background:#eeedef}.preset[aria-pressed=true]{color:#252329;background:#fff;border-color:#cac6ce}.preset-mark{width:44px;height:36px;display:block;overflow:visible}.mode-row{grid-template-columns:1fr 1fr;gap:8px;display:grid}.mode-option{color:#656169;background:#fff;border:1px solid #d9d7da;border-radius:11px;justify-content:center;align-items:center;gap:8px;min-height:38px;padding:0 10px;font-size:.74rem;font-weight:600;transition:color .16s ease-out,border-color .16s ease-out,background-color .16s ease-out;display:flex}.mode-option:hover{color:#302e34;border-color:#aaa7ae}.mode-option[aria-checked=true]{color:#1d1c20;background:#f2f1f2;border-color:#232126}.mode-swatch{border:1px solid #00000024;border-radius:50%;width:14px;height:14px}.mode-option-light .mode-swatch{background:#f5f4f2}.mode-option-dark .mode-swatch{background:#000}.grain-control{display:block}.range-wrap{grid-template-columns:1fr 32px;align-items:center;gap:14px;display:grid}.range-wrap input{accent-color:#4f4c54;width:100%}.range-wrap output{color:#5e5a62;text-align:right;font-family:SFMono-Regular,Consolas,monospace;font-size:.72rem}.export-row{border-top:1px solid #dfdddf;justify-content:space-between;align-items:center;gap:18px;padding-top:18px;display:flex}.status{color:#737078;text-overflow:ellipsis;white-space:nowrap;min-width:0;margin:0;font-size:.68rem;line-height:1.35;overflow:hidden}.status.error{color:#9d2d3c;white-space:normal}.download-button{color:#fff;background:#232126;border:1px solid #232126;border-radius:12px;flex:none;justify-content:center;align-items:center;gap:8px;min-width:122px;min-height:44px;padding:0 17px;font-size:.78rem;font-weight:650;transition:background-color .16s ease-out,transform .16s ease-out,box-shadow .16s ease-out;display:inline-flex;box-shadow:0 8px 16px -11px #18161cb3}.download-button:hover:not(:disabled){background:#3a373e;transform:translateY(-1px);box-shadow:0 11px 20px -12px #18161cb8}.download-button:active:not(:disabled){transform:translateY(0)}.download-button:disabled{color:#f2f1f2;cursor:wait;background:#aaa7ad;border-color:#aaa7ad}@media (width<=880px){.studio-header{padding:20px 22px 0;position:relative}.stage{grid-template-columns:1fr;gap:24px;min-height:auto;padding:28px 20px 26px}.phone-frame{justify-self:center;width:min(66vw,330px,28.54svh);min-width:230px}.controls{justify-self:center}}@media (width<=500px){.studio-header p{display:none}.stage{gap:18px;padding:22px 12px 16px}.phone-frame{border-radius:30px;width:min(72vw,290px,25.31svh);min-width:0}.controls{border-radius:20px;padding:19px 16px 16px}.control-heading{align-items:center}.control-heading h1{font-size:1.65rem}.control-heading p{display:none}.color-row{grid-template-columns:1fr 1fr 30px;gap:6px}.color-control{gap:6px;padding-right:6px}.preset-list{gap:2px}.preset-mark{width:38px}.export-row{flex-direction:column;align-items:stretch;gap:10px}.status{text-align:center}.download-button{width:100%}}@media (prefers-reduced-motion:no-preference){.phone-frame{animation:.72s cubic-bezier(.16,1,.3,1) both settle}@keyframes settle{0%{opacity:.35;filter:blur(5px);transform:translateY(14px)scale(.985)}to{opacity:1;filter:blur();transform:translateY(0)scale(1)}}}