:root{color-scheme:light;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;--paper: #f1e8d6;--ink: #1d2024;--muted: #77706a;--panel: rgba(244, 237, 218, .72);--panel-line: rgba(109, 98, 82, .16);--button: rgba(255, 255, 255, .78);--button-border: rgba(255, 255, 255, .58)}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0}body{overflow:hidden;background:var(--paper);color:var(--ink)}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}.srOnly{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.appShell{width:100vw;height:100dvh;overflow:hidden;background:radial-gradient(circle at 92% 64%,rgba(92,230,197,.22),transparent 34%),radial-gradient(circle at 36% 24%,rgba(255,255,255,.34),transparent 30%),var(--paper)}.canvasStage{position:relative;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden}.watercolorCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair;background:var(--paper)}.controlPanel{position:absolute;z-index:4;top:max(18px,env(safe-area-inset-top));left:max(18px,env(safe-area-inset-left));width:min(386px,calc(100vw - 36px));max-height:calc(100dvh - 36px);display:flex;flex-direction:column;gap:5px;padding:40px 14px 16px;overflow-y:auto;border:1px solid rgba(255,255,255,.34);border-radius:8px;background:linear-gradient(180deg,#ffffff29,#ffffff0a),var(--panel);box-shadow:0 22px 54px #493a2329,inset 0 1px #ffffff42;-webkit-backdrop-filter:blur(18px) saturate(120%);backdrop-filter:blur(18px) saturate(120%);user-select:none;-webkit-user-select:none}.actionGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:2px}.toolButton,.randomButton,.exportButton{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:0;min-height:50px;padding:0 12px;border:1px solid var(--button-border);border-radius:6px;background:var(--button);color:#1d2024c7;font-size:1rem;font-weight:700;cursor:pointer;box-shadow:inset 0 1px #ffffff8f}.toolButton span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toolButton.isPrimary{background:#1d2024e6;color:#fff}.colorHeader{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:24px;color:#1d2024ad;font-size:1rem;font-weight:650}.colorHeader strong{color:#1d202470;font-size:.82rem;font-weight:700}.colorField{display:grid;grid-template-columns:70px minmax(0,1fr);gap:10px;margin-bottom:2px}.colorSwatch{position:relative;min-height:42px;border:1px solid rgba(29,32,36,.08);border-radius:5px;background:#ffffff9e;cursor:pointer}.colorSwatch:after{content:"";position:absolute;inset:12px 16px;border-radius:2px;background:var(--paint);box-shadow:inset 0 0 0 1px #ffffff2e}.colorSwatch input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.randomButton{min-height:42px;font-size:1.02rem}.controlRow{display:grid;gap:2px}.controlMeta{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:22px;color:#1d2024ad;font-size:1rem;font-weight:650}.controlMeta strong{color:#1d20246e;font-size:.86rem;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}input[type=range]{--progress: 50%;width:100%;height:17px;margin:0;appearance:none;background:transparent;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:linear-gradient(90deg,#0f0f10 0 var(--progress),rgba(255,255,255,.76) var(--progress) 100%);box-shadow:inset 0 0 0 1px #ffffff2e}input[type=range]::-webkit-slider-thumb{width:25px;height:25px;margin-top:-8.5px;appearance:none;border:2px solid rgba(29,32,36,.34);border-radius:50%;background:#fff;box-shadow:0 2px 6px #1c18142e}input[type=range]::-moz-range-track{height:8px;border-radius:999px;background:#ffffffc2}input[type=range]::-moz-range-progress{height:8px;border-radius:999px;background:#0f0f10}input[type=range]::-moz-range-thumb{width:23px;height:23px;border:2px solid rgba(29,32,36,.34);border-radius:50%;background:#fff}.toggleRow{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:42px;padding:0 14px;border:1px solid var(--panel-line);border-radius:6px;background:#ffffff1c;color:#1d20249e;font-size:1.04rem;font-weight:650}.toggleRow input{width:50px;height:30px;appearance:none;border-radius:999px;background:#ffffff75;box-shadow:inset 0 0 0 1px #1d20240d;cursor:pointer}.toggleRow input:before{content:"";display:block;width:27px;height:27px;margin:1.5px;border-radius:50%;background:#fff;box-shadow:0 1px 5px #1c181433;transition:transform .14s ease}.toggleRow input:checked{background:#161719}.toggleRow input:checked:before{transform:translate(20px)}.panelFooter{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:34px;margin-top:4px;color:#1d20246b;font-size:.72rem;font-variant-numeric:tabular-nums}.panelFooter span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.exportButton{flex:0 0 auto;min-height:32px;padding:0 10px;font-size:.78rem;font-weight:750}.toolButton:focus-visible,.randomButton:focus-visible,.exportButton:focus-visible,.colorSwatch:focus-within,.toggleRow input:focus-visible,input[type=range]:focus-visible{outline:3px solid rgba(47,111,159,.28);outline-offset:2px}.fallbackLayer{position:absolute;z-index:5;inset:0;display:grid;place-items:center;padding:28px;background:linear-gradient(90deg,#f4ead8f2,#f4ead8bd),var(--paper)}.staticWash{position:absolute;inset:0;overflow:hidden}.staticWash span{position:absolute;width:52vw;height:24vw;min-width:420px;min-height:190px;border-radius:48%;filter:blur(8px);opacity:.5;transform:rotate(-16deg)}.staticWash span:nth-child(1){left:-9vw;bottom:9vh;background:radial-gradient(circle at 30% 40%,rgba(65,215,191,.62),transparent 58%)}.staticWash span:nth-child(2){right:6vw;top:12vh;background:radial-gradient(circle at 44% 48%,rgba(31,139,234,.55),transparent 62%)}.staticWash span:nth-child(3){right:-10vw;bottom:8vh;background:radial-gradient(circle at 50% 42%,rgba(137,87,237,.45),transparent 64%)}.fallbackCopy{position:relative;width:min(480px,100%);padding:20px;border:1px solid var(--panel-line);border-radius:8px;background:#f8f4ebdb;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.fallbackCopy h2{margin:0 0 8px;font-family:Georgia,Times New Roman,serif;font-size:clamp(1.35rem,4vw,2.4rem);font-weight:500;letter-spacing:0}.fallbackCopy p{margin:0;color:var(--muted);line-height:1.55}.eyebrow{margin:0 0 4px;color:#17232b9e;font-size:.72rem;line-height:1;text-transform:uppercase;letter-spacing:0}.fallbackActions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}@media(max-width:680px){.controlPanel{top:max(10px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));bottom:auto;width:auto;max-height:calc(100dvh - 20px);padding:12px 12px 10px}.toolButton{min-height:44px}.colorField{grid-template-columns:68px minmax(0,1fr)}.controlMeta,.colorHeader,.toggleRow{font-size:.92rem}.panelFooter{font-size:.68rem}}@media(max-width:390px){.controlPanel{gap:3px}.toolButton,.randomButton{font-size:.92rem}.toggleRow{min-height:38px}}
