@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Noto+Serif+SC:wght@400;500;600&display=swap";:root{--bg: #111615;--text: #e7e8df;--muted: #818d83;--line: #ffffff13;--sage: #c3cba7;--gold: #c9af79}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:12px DM Sans,-apple-system,PingFang SC,sans-serif}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:4px}button:disabled{opacity:.5;cursor:default}[hidden]{display:none!important}header{height:77px;display:flex;align-items:center;justify-content:space-between;padding:0 4%;border-bottom:1px solid var(--line);position:relative;z-index:3}nav{display:flex;gap:28px;align-items:center}nav button{background:none;border:0;color:#849085;font-size:10px;padding:8px 0}nav button.selected{color:var(--sage)}main{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(360px,1fr);min-height:calc(100svh - 77px);max-width:1800px;margin:auto}.visual{position:relative;min-height:740px;overflow:hidden;background:radial-gradient(ellipse at 50% 48%,#303c31,#19211d 45%,#111615 75%)}@media (min-width: 761px){.visual{position:sticky;top:0;align-self:start;height:calc(100svh - 77px);min-height:560px}}.live{font-size:7px;letter-spacing:1.5px;color:#8b9a84;display:flex;align-items:center;gap:7px}.live i{width:4px;height:4px;background:#b4c394;border-radius:50%;box-shadow:0 0 10px #a8be83}.title{position:absolute;top:75px;left:5%;pointer-events:none;z-index:1}h1{font-family:"Noto Serif SC",serif;font-size:36px;line-height:1.6;font-weight:400;margin:0}h1 em{font-style:normal;color:#a4b191}.title p{font-size:10px;color:#758472;margin-top:12px;letter-spacing:.5px}#planetStage{position:absolute;inset:80px 0}canvas{display:block;width:100%;height:100%;touch-action:none}.coordinates{position:absolute;bottom:110px;left:5%;right:5%;display:flex;align-items:center;justify-content:space-between;color:#7b8b7d;font-size:8px;letter-spacing:1px;pointer-events:none}.coordinates b{font-size:12px;font-weight:400;color:#b0ba9f}.coordinates button{background:none;border:0;font-size:9px;pointer-events:auto;color:#8b9984}.micro{display:block;font-size:8px;letter-spacing:1px;color:#748273}.panel{border-left:1px solid var(--line);padding:30px 30px 20px;background:#171d19;display:flex;flex-direction:column;min-width:0}input[type=range]{appearance:none;-webkit-appearance:none;display:block;width:100%;height:3px;border-radius:5px;margin:14px 0 12px;background:linear-gradient(to right,#9bac87 var(--p, 30%),#343f32 var(--p, 30%));cursor:pointer;touch-action:pan-y}input[type=range]::-webkit-slider-thumb{appearance:none;width:13px;height:13px;border-radius:50%;background:#c6d1b1;border:3px solid #1f2a20;box-shadow:0 0 0 1px #829872}input[type=range]::-moz-range-thumb{width:9px;height:9px;border-radius:50%;background:#c6d1b1;border:2px solid #1f2a20}.use{background:#bac7a1;color:#1f2b1c;width:100%;border:0;padding:17px 15px;display:flex;justify-content:space-between;font-size:11px}.use:hover{background:#cad6b3}#scents{display:grid;grid-template-columns:1fr;gap:9px;margin:15px 0 25px}.scent{border:1px solid #ffffff12;background:none;display:flex;align-items:center;justify-content:space-between;padding:15px 12px;color:#99a68c;font-size:11px;text-align:left}.scent small{font-size:7px;letter-spacing:1px;color:#728168}.scent.selected{border-color:#8fa473;background:#232e20;color:#c3d0ad}#swatches{display:flex;gap:16px;margin:18px 0 26px}.swatch{border:3px solid #171d19;outline:1px solid transparent;background:var(--c);width:27px;height:27px;border-radius:50%}.swatch.selected{outline-color:#a9bd88}dialog{max-width:600px;width:90%;background:#1a221c;border:1px solid #637654;color:var(--text);padding:28px}dialog::backdrop{background:#070e0acf;backdrop-filter:blur(8px)}#toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,15px);background:#cfdbba;color:#2c4128;padding:13px 20px;font-size:11px;opacity:0;pointer-events:none;transition:.2s;z-index:30;max-width:90%}#toast.show{opacity:1;transform:translate(-50%)}#loading{position:absolute;top:50%;width:100%;text-align:center;color:#9cae89;font-size:12px;letter-spacing:2px}@media (max-width: 760px){header{height:60px;padding:0 20px}nav{gap:17px}nav button{font-size:9px}nav button:first-child{display:none}main{display:block}.visual{min-height:0;height:570px}.live{font-size:6px}.title{top:58px;left:20px}h1{font-size:27px;line-height:1.55}.title p{font-size:9px;margin-top:9px}#planetStage{inset:95px 0 62px}.coordinates{bottom:91px;left:20px;right:20px;font-size:7px}.coordinates b{font-size:11px}.panel{border-left:0;border-top:1px solid var(--line);padding:26px 23px 25px}input[type=range]{height:4px;margin:17px 0}input[type=range]::-webkit-slider-thumb{width:19px;height:19px;border:4px solid #1f2a20}.use{padding:19px 17px;font-size:12px}.swatch{width:32px;height:32px}#swatches{gap:19px}.scent{padding:18px 12px}}@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto!important;transition:none!important}}@media (max-width: 760px){.visual{position:sticky;top:0;height:47svh;min-height:345px;max-height:440px;z-index:2;box-shadow:0 12px 30px #050b0650}.title{top:44px;left:20px}.title h1{font-size:16px;line-height:1.5;letter-spacing:.5px}.title h1 br{display:none}.title h1 em{margin-left:7px}.title p{display:none}#planetStage{inset:55px 0 62px}.coordinates{bottom:76px}.panel{position:relative;z-index:1}}.visual{background:radial-gradient(ellipse at 50% 48%,#333b36,#1c2320 45%,#111615 78%)}#accents{display:flex;gap:13px;margin:16px 0 24px}#accents .swatch{width:27px;height:27px;flex-shrink:0}#colorThemes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}#swatches,#accents{display:grid;grid-template-columns:repeat(6,1fr);gap:15px;justify-items:center}#accents{gap:12px}#planetStage.kneading canvas{cursor:crosshair}#kneadHint{min-height:16px;color:#b9a7bd;line-height:1.7}#kneadCursor{position:absolute;width:48px;height:48px;transform:translate(-50%,-50%);border:1px solid #ffeffbc0;border-radius:50%;box-shadow:0 0 0 8px #f4bcdf20,inset 0 0 18px #ffffff25;pointer-events:none;z-index:3;mix-blend-mode:screen}#kneadCursor{width:calc(40px + var(--press, 0) * 16px);height:calc(40px + var(--press, 0) * 16px);border:1px solid #fff5fbd9;box-shadow:0 0 0 calc(4px + var(--press, 0) * 7px) #f4bcdf18,inset 0 0 18px #ffffff20;background:radial-gradient(circle at 22% 25%,#fff6 0 1px,transparent 2px),radial-gradient(circle at 75% 70%,#fff5 0 1px,transparent 2px);transition:width .06s,height .06s}#touchFeedback{position:absolute;z-index:4;pointer-events:none;transform:translate(-50%);font-size:9px;letter-spacing:1px;padding:5px 9px;border:1px solid #ffe7f740;border-radius:14px;color:#f8e2f1;background:#332535aa;backdrop-filter:blur(8px);white-space:nowrap}#kneadCursor{transition:none;box-shadow:0 0 0 calc(3px + var(--press, 0) * 7px) #f4bcdf20,inset 0 0 20px #ffffff24}#releaseRing{position:absolute;z-index:3;width:53px;height:53px;border:1px solid #fff0f0b0;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);opacity:0}#releaseRing.releasing{animation:powder-release .25s ease-out forwards}@keyframes powder-release{0%{opacity:.6;transform:translate(-50%,-50%) scale(.82)}to{opacity:0;transform:translate(-50%,-50%) scale(1.28)}}@media (prefers-reduced-motion: reduce){#releaseRing.releasing{animation-duration:.01s}}#motifChoices{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.tune-panel{position:fixed;top:86px;right:12px;z-index:50;width:250px;max-height:calc(100svh - 110px);overflow:auto;padding:12px 14px;border:1px solid #ffffff1c;border-radius:10px;background:#0f1412e8;backdrop-filter:blur(6px);color:#cfd8c6;font-size:11px}.tune-panel header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}.tune-panel header span{color:#7d8b7b;font-size:9px}.tune-panel label{display:block;margin:9px 0}.tune-panel label span{display:flex;justify-content:space-between;margin-bottom:3px}.tune-panel output{color:#e8efe0;font-variant-numeric:tabular-nums}.tune-panel input{width:100%}.tune-panel footer{display:flex;gap:8px;margin-top:10px}.tune-panel button{flex:1;padding:7px 0;border:1px solid #ffffff26;border-radius:6px;background:#ffffff0d;color:inherit;font-size:11px}@media (max-width: 760px){.tune-panel{inset:auto 0 0;width:auto;max-height:42svh;border-radius:12px 12px 0 0}}