:root{
  --bg:#f7f7f3;
  --paper:#fff;
  --ink:#171716;
  --muted:#85847f;
  --faint:#aaa9a3;
  --line:rgba(20,20,18,.09);
  --line-strong:rgba(20,20,18,.15);
  --glass:rgba(255,255,255,.76);
  --glass-strong:rgba(255,255,255,.9);
  --shadow:0 24px 80px rgba(42,39,31,.10),0 4px 18px rgba(42,39,31,.04);
  --soft-shadow:0 10px 34px rgba(42,39,31,.07);
  --radius:28px;
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
button,input{font:inherit}
button{color:inherit}
button:focus-visible,input:focus-visible{outline:2px solid #171716;outline-offset:3px}
.app{position:relative;width:100%;height:100%;isolation:isolate;background:radial-gradient(ellipse at 52% 22%,#fff 0%,#fafaf7 33%,#f1f1ec 100%)}
#stage{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:default}
body.painting #stage{cursor:none}
body.orbiting #stage{cursor:grabbing}
.studio-floor{position:absolute;left:50%;top:56%;width:58vw;height:38vh;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(87,76,56,.075),rgba(87,76,56,0) 68%);pointer-events:none}
.paper-grain{position:absolute;inset:0;pointer-events:none;opacity:.17;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E")}
.topbar{position:absolute;z-index:30;left:0;right:0;top:0;height:86px;padding:20px 26px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.brand,.mode-switch,.top-actions{pointer-events:auto}
.brand{border:0;background:transparent;padding:0;display:flex;align-items:center;gap:11px;text-align:left;cursor:pointer}
.brand-pot{width:32px;height:32px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 5px 18px rgba(0,0,0,.06);display:grid;place-items:center;position:relative}
.brand-pot:before{content:"";position:absolute;width:14px;height:8px;border:1.7px solid #1d1d1b;border-top:0;border-radius:0 0 10px 10px;top:11px}
.brand-pot:after{content:"";position:absolute;width:10px;height:1.5px;background:#1d1d1b;top:10px;border-radius:2px}
.brand-pot i{position:absolute;width:3px;height:3px;border-radius:50%;background:#d88b79;right:3px;top:3px;box-shadow:-24px 20px 0 #92a989}
.brand strong{display:block;font-size:14px;letter-spacing:-.02em}
.brand small{display:block;font-size:10px;color:var(--muted);margin-top:1px;letter-spacing:.02em}
.mode-switch{position:absolute;left:50%;transform:translateX(-50%);display:flex;padding:5px;border-radius:999px;background:rgba(255,255,255,.78);border:1px solid var(--line);backdrop-filter:blur(18px);box-shadow:0 8px 30px rgba(0,0,0,.045)}
.mode-switch button{height:36px;padding:0 18px;border:0;border-radius:999px;background:transparent;color:#92918c;cursor:pointer;font-size:13px;transition:.2s ease;display:flex;align-items:center;gap:8px}
.mode-switch button span{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;background:#efefeb;font-size:10px;color:#77766f}
.mode-switch button.active{background:#191918;color:#fff;box-shadow:0 5px 16px rgba(0,0,0,.14)}
.mode-switch button.active span{background:rgba(255,255,255,.16);color:#fff}
.top-actions{display:flex;align-items:center;gap:8px}
.save-state{height:36px;padding:0 12px;display:flex;align-items:center;gap:7px;color:#85847e;font-size:11px}
.save-state i{width:7px;height:7px;border-radius:50%;background:#88a57c;box-shadow:0 0 0 4px rgba(136,165,124,.12)}
.save-state.saving i{background:#d2a65e;animation:pulse 1s infinite}
.button{height:42px;padding:0 16px;border-radius:999px;border:1px solid var(--line);cursor:pointer;transition:.18s ease;box-shadow:0 7px 24px rgba(0,0,0,.035)}
.button:hover{transform:translateY(-1px)}
.button.ghost{background:rgba(255,255,255,.72);backdrop-filter:blur(16px)}
.button.dark{background:#181817;color:#fff;border-color:#181817;padding:0 18px}
.welcome{position:absolute;z-index:8;left:50%;top:48%;transform:translate(-50%,-50%);width:min(650px,calc(100vw - 40px));text-align:center;pointer-events:none;transition:.55s cubic-bezier(.2,.8,.2,1)}
.welcome.hidden{opacity:0;transform:translate(-50%,-45%);visibility:hidden}
.eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:#999891;display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:17px}
.eyebrow i{width:4px;height:4px;border-radius:50%;background:#cf8d7d}.eyebrow i:last-child{background:#8ca888}
.welcome h1{font-size:clamp(42px,5.5vw,74px);line-height:.93;letter-spacing:-.065em;margin:0;font-weight:650}
.welcome h1 em{font-family:Georgia,"Times New Roman",serif;font-weight:400;color:#77756f}
.welcome p{max-width:500px;margin:20px auto 0;color:#85847f;font-size:14px;line-height:1.65}
.welcome-tip{margin-top:24px;display:flex;justify-content:center;gap:7px;font-size:11px;color:#a2a19b}.welcome-tip b{font-weight:600;color:#77766f}
.panel{position:absolute;z-index:20;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(26px) saturate(1.05);box-shadow:var(--shadow);border-radius:var(--radius)}
.shape-panel{left:24px;top:102px;bottom:26px;width:min(430px,36vw);padding:21px;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateX(-25px);transition:.35s cubic-bezier(.2,.8,.2,1)}
.shape-panel.visible{opacity:1;visibility:visible;transform:none}
.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px}.panel-heading.compact{margin-bottom:14px}
.kicker{font-size:9px;text-transform:uppercase;letter-spacing:.18em;color:#a09f98;margin:0 0 5px;font-weight:650}
.panel-heading h2{font-size:20px;letter-spacing:-.035em;margin:0}.panel-icon{width:34px;height:34px;border-radius:50%;background:#f5f5f0;border:1px solid var(--line);display:grid;place-items:center;color:#8f8e88}
.preset-row{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:13px}
.preset{height:54px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.62);cursor:pointer;color:#85847e;font-size:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:.16s ease}
.preset span{font-size:18px;line-height:18px;color:#464541}.preset:hover{background:#fff;transform:translateY(-1px)}.preset.active{border-color:#252522;background:#fff;color:#252522;box-shadow:0 6px 18px rgba(0,0,0,.055)}
.profile-wrap{position:relative;flex:1;min-height:260px;border-radius:22px;overflow:hidden;background:linear-gradient(180deg,rgba(251,251,248,.98),rgba(245,245,240,.96));border:1px solid rgba(0,0,0,.065)}
#profileCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}
.profile-empty{position:absolute;left:50%;top:51%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;transition:.25s ease}.profile-empty.hidden{opacity:0;transform:translate(-50%,-46%)}
.profile-empty strong{display:block;font-size:12px;margin-top:7px}.profile-empty span{font-size:10px;color:#a09f99}
.draw-gesture{height:46px;width:32px;margin:auto;position:relative}.draw-gesture i{position:absolute;left:15px;top:0;width:2px;height:35px;background:linear-gradient(#333,rgba(51,51,51,.1));border-radius:2px;transform:rotate(8deg)}.draw-gesture b{position:absolute;bottom:-2px;left:10px;font-size:16px;font-weight:400;color:#7c7b75;animation:bob 1.6s ease-in-out infinite}
.profile-badge{position:absolute;right:10px;bottom:10px;height:26px;padding:0 9px;border-radius:999px;background:rgba(255,255,255,.85);border:1px solid var(--line);display:flex;align-items:center;font-size:9px;color:#96958f;opacity:0;transition:.2s}.profile-badge.visible{opacity:1}
.micro-help{font-size:10px;color:#92918b;line-height:1.5;margin:10px 2px 11px}.micro-help kbd{font:inherit;border:1px solid var(--line);border-bottom-color:var(--line-strong);background:#fff;padding:1px 4px;border-radius:4px;color:#696862}
.shape-actions{display:flex;gap:7px}.mini-button{width:36px;height:36px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.8);cursor:pointer}.mini-button:disabled{opacity:.35;cursor:not-allowed}.soft-button{height:36px;border-radius:12px;border:1px solid var(--line);background:#fff;padding:0 12px;cursor:pointer;font-size:11px;flex:1;white-space:nowrap}
.inspector{right:24px;top:112px;width:272px;padding:18px;opacity:0;visibility:hidden;transform:translateX(20px);transition:.35s cubic-bezier(.2,.8,.2,1)}.inspector.visible{opacity:1;visibility:visible;transform:none}
.inspector-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px}.inspector-head h3{font-size:17px;margin:0;letter-spacing:-.03em}.quality-chip{font-size:9px;padding:6px 8px;border-radius:999px;background:#edf2e9;color:#70816a;border:1px solid rgba(98,125,90,.12)}
.slider-field{display:block;margin:15px 0}.slider-field span{display:flex;align-items:center;justify-content:space-between;font-size:11px;margin-bottom:8px}.slider-field b{font-weight:600}.slider-field output{color:#999891;font-size:10px}.slider-field input{display:block;width:100%;height:3px;accent-color:#20201e;cursor:pointer}
.form-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:17px 0 15px}.form-stats div{background:rgba(248,248,244,.86);border:1px solid rgba(0,0,0,.045);border-radius:13px;padding:10px 8px}.form-stats span{display:block;font-size:8px;text-transform:uppercase;letter-spacing:.08em;color:#a09f98}.form-stats b{display:block;font-size:10px;margin-top:4px}
.next-button{width:100%;height:42px;border-radius:14px;border:0;background:#191918;color:#fff;cursor:pointer;padding:0 14px;display:flex;align-items:center;justify-content:space-between;font-size:11px}.next-button span{font-size:16px}
.decorate-panel{left:24px;top:104px;width:300px;max-height:calc(100vh - 198px);padding:19px;overflow:auto;opacity:0;visibility:hidden;transform:translateX(-20px);transition:.35s cubic-bezier(.2,.8,.2,1)}.decorate-panel.visible{opacity:1;visibility:visible;transform:none}.decorate-panel[aria-hidden="true"]{pointer-events:none}
.tool-tabs{display:grid;grid-template-columns:repeat(3,1fr);padding:4px;border-radius:15px;background:#f0f0eb;margin-bottom:17px}.tool-tabs button{height:34px;border:0;border-radius:11px;background:transparent;color:#8b8a84;font-size:10px;cursor:pointer}.tool-tabs button span{margin-right:3px}.tool-tabs button.active{background:#fff;color:#22221f;box-shadow:0 3px 12px rgba(0,0,0,.06)}
.section-label{display:flex;align-items:center;justify-content:space-between;margin:13px 1px 8px}.section-label span{text-transform:uppercase;letter-spacing:.12em;font-size:8px;color:#aaa9a2;font-weight:650}.section-label b{font-size:9px;color:#77766f;font-weight:600}
.palette{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.color-dot{aspect-ratio:1;border-radius:50%;border:3px solid rgba(255,255,255,.92);outline:1px solid rgba(0,0,0,.09);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.08);transition:.16s}.color-dot:hover{transform:scale(1.08)}.color-dot.active{outline:2px solid #171716;outline-offset:2px;transform:scale(1.06)}
.stamp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.stamp-button{height:42px;border-radius:13px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:17px}.stamp-button.active{background:#191918;color:#fff;border-color:#191918}
.segmented{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;background:#f0f0eb;border-radius:14px}.segmented button{height:31px;border:0;border-radius:10px;background:transparent;color:#8b8a84;font-size:10px;cursor:pointer}.segmented button.active{background:#fff;color:#22221f;box-shadow:0 3px 10px rgba(0,0,0,.055)}
.compact-field{margin-top:15px}
.camera-cluster{position:absolute;z-index:19;right:24px;bottom:28px;display:flex;gap:7px;opacity:0;visibility:hidden;transition:.3s}.camera-cluster.visible{opacity:1;visibility:visible}.camera-cluster button{height:39px;border:1px solid var(--line);background:rgba(255,255,255,.76);backdrop-filter:blur(18px);border-radius:999px;cursor:pointer;box-shadow:var(--soft-shadow);font-size:10px}.camera-cluster button:first-child{padding:0 13px}.camera-cluster button:last-child{width:39px}.camera-cluster button.active{background:#191918;color:#fff}.camera-cluster span{font-size:14px;margin-right:4px}
.paint-dock{position:absolute;z-index:22;left:50%;bottom:24px;transform:translate(-50%,20px);height:56px;padding:7px 10px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.8);backdrop-filter:blur(22px);box-shadow:var(--soft-shadow);display:flex;align-items:center;gap:9px;opacity:0;visibility:hidden;transition:.32s cubic-bezier(.2,.8,.2,1)}.paint-dock.visible{opacity:1;visibility:visible;transform:translate(-50%,0)}
.dock-group{display:flex;align-items:center;gap:5px}.dock-label{font-size:8px;text-transform:uppercase;letter-spacing:.13em;color:#aaa9a2;margin:0 3px}.dock-toggle{height:40px;padding:0 12px;border-radius:14px;border:1px solid var(--line);background:#fff;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:10px}.dock-toggle i{width:14px;height:14px;border:1.5px solid currentColor;border-radius:50%;position:relative}.dock-toggle i:after{content:"";position:absolute;width:4px;height:4px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;right:-1px;top:-1px;transform:rotate(16deg)}.dock-toggle.active{background:#191918;color:#fff;border-color:#191918}.dock-icon{width:38px;height:38px;border-radius:13px;border:1px solid var(--line);background:#fff;cursor:pointer}.dock-icon:disabled{opacity:.35}.dock-divider{width:1px;height:28px;background:var(--line)}.dock-tip{display:flex;align-items:center;gap:7px;padding:0 8px;font-size:9px;color:#8b8a84;white-space:nowrap}.dock-tip i{width:5px;height:5px;border-radius:50%;background:#d68c78;box-shadow:0 0 0 4px rgba(214,140,120,.12)}
.panel-peek{position:absolute;z-index:22;left:22px;top:110px;height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.8);backdrop-filter:blur(18px);box-shadow:var(--soft-shadow);cursor:pointer;font-size:10px}.panel-peek span{color:#d18b78;margin-left:6px}
.pointer-brush{position:fixed;z-index:60;width:22px;height:22px;border:1px solid rgba(20,20,18,.5);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);opacity:0;transition:opacity .12s,width .1s,height .1s;background:rgba(255,255,255,.12);backdrop-filter:blur(2px)}.pointer-brush i{position:absolute;inset:4px;border-radius:50%;background:var(--pointer-color,#1d2828);opacity:.28}body.painting .pointer-brush{opacity:1}body.orbiting .pointer-brush{opacity:0}
.toast{position:absolute;z-index:80;left:50%;top:86px;transform:translate(-50%,-10px);padding:10px 14px;border-radius:999px;background:#191918;color:#fff;font-size:10px;box-shadow:0 10px 35px rgba(0,0,0,.16);opacity:0;visibility:hidden;transition:.24s}.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
.sparkles{position:absolute;inset:0;pointer-events:none;z-index:70}.spark{position:absolute;width:6px;height:6px;border-radius:50%;background:#d98e7c;animation:spark .75s ease-out forwards}.spark:nth-child(2n){background:#91a88a}.spark:nth-child(3n){background:#d4b35e}
.loading{position:absolute;z-index:100;inset:0;background:#f7f7f3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;transition:.5s ease}.loading.hidden{opacity:0;visibility:hidden}.loading span{font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:#96958f}.loading-pot{width:54px;height:54px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;box-shadow:var(--soft-shadow);animation:float 1.5s ease-in-out infinite}.loading-pot:before{content:"";width:24px;height:14px;border:2px solid #2b2b28;border-top:0;border-radius:0 0 18px 18px}.loading-pot i{position:absolute;width:5px;height:5px;background:#d58b79;border-radius:50%;transform:translate(22px,-20px);box-shadow:-41px 39px 0 #91a68a}
[data-tooltip]{position:relative}[data-tooltip]:hover:after{content:attr(data-tooltip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);padding:7px 9px;border-radius:8px;background:#191918;color:#fff;font-size:9px;white-space:nowrap;pointer-events:none;z-index:100}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@keyframes pulse{50%{opacity:.35}}
@keyframes float{50%{transform:translateY(-5px)}}
@keyframes spark{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(.2)}}
@media(max-width:1080px){.inspector{display:none}.shape-panel{width:min(430px,42vw)}.save-state{display:none}.decorate-panel{width:286px}}
@media(max-width:760px){
  .topbar{height:72px;padding:14px}.brand span:last-child{display:none}.top-actions .ghost{display:none}.button.dark{height:38px;padding:0 13px;font-size:11px}.mode-switch{position:fixed;top:78px;bottom:auto}.mode-switch button{height:34px;padding:0 14px}.shape-panel{left:10px;right:10px;top:auto;bottom:132px;width:auto;height:52vh;padding:14px;border-radius:24px}.preset-row{margin-bottom:9px}.profile-wrap{min-height:180px}.micro-help{display:none}.decorate-panel{left:10px;right:10px;top:auto;bottom:150px;width:auto;max-height:48vh}.paint-dock{bottom:17px;max-width:calc(100vw - 20px)}.dock-tip,.dock-label{display:none}.camera-cluster{right:12px;bottom:82px}.panel-peek{left:12px;top:auto;bottom:90px}.welcome{top:42%}.toast{top:128px}.welcome p{font-size:13px}.welcome-tip{display:none}.studio-floor{width:96vw}.profile-badge{display:none}
}