:root{
  color-scheme:dark;
  --bg:#090f1f;
  --bg2:#0f1531;
  --panel:rgba(16,22,44,.50);
  --panel-2:rgba(255,255,255,.06);
  --stroke:rgba(255,255,255,.13);
  --text:#f6f7ff;
  --muted:#b6bdd7;
  --pink:#ff78d6;
  --cyan:#79dfff;
  --violet:#8e88ff;
  --gold:#ffdca8;
  --radius:26px;
  --widget-radius:22px;
  --glass-blur:10px;
  --surface-shadow:0 28px 70px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.10);
  --rim:inset 0 0 0 1px rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(255,255,255,.05);
  --font-ui:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  --font-display:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  --glow-strength:1;
  --orb-opacity:.75;
  --star-opacity:.9;
  --backdrop-saturation:150%;
  --content-width:1760px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(145deg,var(--bg),#080b18 45%, var(--bg2));
  color:var(--text);
  font-family:var(--font-ui);
  overflow-x:hidden;
}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px}

.app-bg{position:fixed; inset:0; overflow:hidden; z-index:-3; pointer-events:none; background:
  radial-gradient(circle at 15% 20%, color-mix(in srgb,var(--pink) calc(22% * var(--glow-strength)), transparent), transparent 24%),
  radial-gradient(circle at 85% 14%, color-mix(in srgb,var(--cyan) calc(19% * var(--glow-strength)), transparent), transparent 28%),
  radial-gradient(circle at 50% 88%, color-mix(in srgb,var(--violet) calc(18% * var(--glow-strength)), transparent), transparent 32%),
  linear-gradient(145deg,var(--bg), #090d1b 50%, var(--bg2));
}
.app-bg[data-scene="lockedin"]{
  background:
  radial-gradient(circle at 20% 22%, rgba(88,146,255,.45), transparent 28%),
  radial-gradient(circle at 63% 28%, rgba(255,125,197,.28), transparent 22%),
  radial-gradient(circle at 76% 76%, rgba(104,228,255,.22), transparent 25%),
  linear-gradient(180deg,#0f1430 0%, #0c1330 36%, #0a1025 57%, #09111b 100%);
}
.app-bg[data-scene="aurora"]{
  background:
  radial-gradient(circle at 20% 15%, rgba(255,120,214,.36), transparent 28%),
  radial-gradient(circle at 80% 10%, rgba(121,223,255,.28), transparent 30%),
  radial-gradient(circle at 55% 85%, rgba(142,136,255,.22), transparent 26%),
  linear-gradient(140deg,#090d1d,#0b1226 48%, #14122f);
}
.app-bg[data-scene="midnight"]{
  background:
  radial-gradient(circle at 25% 12%, rgba(156,173,255,.18), transparent 24%),
  radial-gradient(circle at 82% 24%, rgba(255,158,230,.18), transparent 22%),
  linear-gradient(180deg,#070a14,#090d1c 50%, #0b1321 100%);
}
.app-bg[data-scene="editorial"]{
  background:
  radial-gradient(circle at 18% 16%, rgba(255,231,206,.12), transparent 20%),
  radial-gradient(circle at 80% 18%, rgba(255,120,214,.14), transparent 22%),
  linear-gradient(160deg,#0b0f1d,#0d1223 50%, #15172b);
}
.glow-layer,.orb-layer,.mist-layer,.floor-glow,.stars{position:fixed; inset:0; pointer-events:none}
.glow-layer{z-index:-2; filter:blur(70px); opacity:calc(.85 * var(--glow-strength))}
.glow-layer:before,.glow-layer:after{content:""; position:absolute; border-radius:50%}
.glow-layer:before{width:30vw;height:30vw;left:-6vw;top:-6vw;background:radial-gradient(circle, color-mix(in srgb,var(--pink) 55%, transparent), transparent 68%)}
.glow-layer:after{width:28vw;height:28vw;right:-6vw;top:5vh;background:radial-gradient(circle, color-mix(in srgb,var(--cyan) 55%, transparent), transparent 68%)}
.mist-layer{z-index:-2; background:linear-gradient(180deg, transparent, rgba(255,255,255,.02), transparent 72%); opacity:.7}
.floor-glow{z-index:-2; background:radial-gradient(ellipse at 72% 52%, rgba(116,220,255,.18), transparent 18%), radial-gradient(ellipse at 71% 56%, rgba(255,142,228,.10), transparent 25%)}
.orb-layer{z-index:-1; opacity:var(--orb-opacity)}
.orb{position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.20); background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.13), rgba(255,255,255,.03)); box-shadow:inset 0 1px 0 rgba(255,255,255,.10); backdrop-filter:blur(8px)}
.orb.o1{width:150px;height:150px;right:11%;top:12%}
.orb.o2{width:74px;height:74px;right:20%;top:24%}
.orb.o3{width:120px;height:120px;left:8%;bottom:16%}
.stars{z-index:-1; opacity:var(--star-opacity)}
.star{position:absolute; width:2px; height:2px; border-radius:50%; background:rgba(255,255,255,.95); box-shadow:0 0 14px rgba(181,225,255,.75), 0 0 28px rgba(255,164,224,.35); animation:twinkle 4s ease-in-out infinite}
.star.big{width:4px;height:4px}
@keyframes twinkle{0%,100%{opacity:.35; transform:scale(.9)}50%{opacity:1; transform:scale(1.35)}}

body[data-font="editorial"]{--font-display:Georgia,"Times New Roman",serif;--font-ui:Georgia,"Times New Roman",serif}
body[data-font="futuristic"]{--font-display:"Trebuchet MS",Arial,sans-serif;--font-ui:"Trebuchet MS",Arial,sans-serif;letter-spacing:.015em}
body[data-font="soft"]{--font-display:Inter,ui-sans-serif,system-ui,sans-serif;--font-ui:Inter,ui-sans-serif,system-ui,sans-serif}
body[data-font="playful"]{--font-display:"Arial Rounded MT Bold","Trebuchet MS",sans-serif;--font-ui:"Arial Rounded MT Bold","Trebuchet MS",sans-serif}
body[data-style="minimal"]{--panel:rgba(15,19,35,.42); --panel-2:rgba(255,255,255,.04); --glass-blur:6px; --radius:22px; --widget-radius:20px; --surface-shadow:0 22px 50px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08)}
body[data-style="liquid"]{--panel:rgba(18,23,47,.48); --panel-2:rgba(255,255,255,.08); --glass-blur:14px; --radius:28px; --widget-radius:24px; --surface-shadow:0 28px 70px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.12)}
body[data-style="dreamy"]{--panel:rgba(21,18,43,.48); --panel-2:rgba(255,255,255,.07); --glass-blur:12px; --surface-shadow:0 30px 80px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.14)}
body[data-style="cinematic"]{--panel:rgba(17,20,38,.46); --panel-2:rgba(255,255,255,.06); --glass-blur:10px; --surface-shadow:0 36px 84px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.10)}

.app-shell{max-width:var(--content-width); margin:0 auto; min-height:100vh; display:grid; grid-template-columns:240px minmax(0,1fr); gap:0}
.sidebar{
  position:sticky; top:0; height:100vh; padding:28px 18px 24px;
  background:linear-gradient(180deg, rgba(14,18,34,.72), rgba(9,12,24,.58));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--backdrop-saturation));
  border-right:1px solid rgba(255,255,255,.08);
}
.brand{font-family:var(--font-display); font-weight:900; letter-spacing:.12em; font-size:26px; line-height:1; margin-top:10px}
.brand span{color:var(--pink)}
.brand small{display:block; margin-top:10px; font-size:10px; letter-spacing:.28em; color:var(--muted)}
.side-block{margin-top:26px}
.nav{display:grid; gap:10px}
.nav button,.side-footer button,.ghost-btn,.tool-btn,.mini-btn,.chip,.studio-close,.file-btn{
  border:1px solid rgba(255,255,255,.10); color:var(--text); background:rgba(255,255,255,.04); border-radius:16px;
}
.nav button{padding:14px 15px; text-align:left; display:flex; align-items:center; gap:12px; font-weight:700}
.nav button.active,.nav button:hover,.side-footer button:hover,.ghost-btn:hover,.tool-btn:hover,.mini-btn:hover,.chip:hover,.file-btn:hover{
  box-shadow:0 0 0 1px rgba(255,255,255,.05), 0 10px 30px rgba(0,0,0,.14), 0 0 28px color-mix(in srgb,var(--pink) 12%, transparent);
  border-color:rgba(255,255,255,.16);
  background:linear-gradient(135deg, color-mix(in srgb,var(--pink) 16%, transparent), rgba(255,255,255,.05));
}
.side-quote{margin-top:22px; padding:18px; min-height:160px; display:flex; align-items:flex-end; font-family:var(--font-display); font-size:28px; line-height:1.05; color:#f3d8ff;
  background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.02)), radial-gradient(circle at 15% 15%, rgba(120,160,255,.15), transparent 30%), radial-gradient(circle at 85% 20%, rgba(255,122,219,.18), transparent 28%), rgba(12,16,30,.42);
  backdrop-filter:blur(var(--glass-blur)); border:1px solid rgba(255,255,255,.10); border-radius:var(--radius); box-shadow:var(--surface-shadow),var(--rim)
}
.side-footer{position:absolute; left:18px; right:18px; bottom:22px; display:grid; gap:10px}
.side-footer button{padding:12px 14px; font-weight:700}

.main{padding:24px clamp(14px,2.8vw,36px) 38px}
.topbar{display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:space-between; margin-bottom:20px}
.title-eyebrow{font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.page-title{font-family:var(--font-display); font-size:clamp(28px,3vw,42px); margin:0; letter-spacing:-.03em}
.topbar-actions{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.search{
  min-width:min(440px,100%); flex:1; display:flex; align-items:center; gap:10px; padding:12px 16px;
  background:linear-gradient(140deg, rgba(255,255,255,.08), rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.10); border-radius:18px;
  backdrop-filter:blur(var(--glass-blur));
}
.search input{flex:1; border:0; background:transparent; color:var(--text); outline:none}
.ghost-btn,.tool-btn,.mini-btn,.chip,.file-btn,.studio-close{padding:11px 15px; backdrop-filter:blur(var(--glass-blur))}
.tool-btn{font-weight:800; background:linear-gradient(135deg, color-mix(in srgb,var(--pink) 20%, transparent), rgba(255,255,255,.06))}
.ghost-btn{font-weight:700}
.hero,.surface,.widget,.studio,.studio-preview-stage,.modal-card{backdrop-filter:blur(var(--glass-blur)) saturate(var(--backdrop-saturation)); box-shadow:var(--surface-shadow),var(--rim)}
.hero,.surface,.widget,.modal-card,.studio-preview-stage{
  background:linear-gradient(150deg, rgba(255,255,255,.08), rgba(255,255,255,.03) 34%, rgba(255,255,255,.02)), var(--panel);
  border:1px solid rgba(255,255,255,.10);
}
.hero{position:relative; overflow:hidden; border-radius:calc(var(--radius) + 4px); padding:28px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; align-items:center}
.hero:before{content:""; position:absolute; inset:auto -18% -35% auto; width:45%; height:160%; background:radial-gradient(circle, rgba(121,223,255,.18), transparent 60%); transform:rotate(-8deg)}
.hero:after{content:""; position:absolute; inset:-35% auto auto -20%; width:40%; height:120%; background:radial-gradient(circle, rgba(255,120,214,.14), transparent 58%)}
.hero-content{position:relative; z-index:1; display:flex; align-items:center; gap:16px}
.avatar{width:84px; height:84px; border-radius:24px; flex:none; background:linear-gradient(135deg, rgba(255,255,255,.25), rgba(255,255,255,.06)); display:grid; place-items:center; font-size:28px; font-weight:900; box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 14px 30px rgba(0,0,0,.28)}
.hero h2{font-family:var(--font-display); font-size:clamp(24px,2.8vw,40px); margin:6px 0 6px; letter-spacing:-.03em}
.hero p{margin:0; color:#e2e6ff}
.hero-side{position:relative; z-index:1; text-align:right}
.hero-side .tiny{font-size:12px; letter-spacing:.22em; color:var(--muted); text-transform:uppercase}
.hero-side strong{display:block; font-family:var(--font-display); font-size:30px; margin:8px 0 4px}
.hero-side em{font-style:normal; color:#f7dfff}
.hero-lock{margin-top:14px; width:130px; height:130px; border-radius:50%; border:1px solid rgba(255,255,255,.18); display:grid; place-items:center; box-shadow:0 0 0 14px rgba(255,255,255,.03), 0 0 0 30px rgba(255,255,255,.02); background:radial-gradient(circle at 40% 35%, rgba(255,255,255,.12), rgba(255,255,255,.04))}
.hero-lock span{font-size:56px; filter:drop-shadow(0 0 20px rgba(130,222,255,.45))}

.section-head{display:flex; justify-content:space-between; gap:12px; align-items:end; margin:26px 0 14px}
.section-head h3{margin:0; font-family:var(--font-display); font-size:20px}
.section-head p{margin:6px 0 0; color:var(--muted); font-size:13px}
.surface{border-radius:var(--radius); padding:18px}
.canvas{position:relative; min-height:760px; border-radius:calc(var(--radius) + 2px); overflow:hidden; background:
  linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01)),
  radial-gradient(circle at 16% 18%, rgba(105,150,255,.10), transparent 18%),
  radial-gradient(circle at 82% 18%, rgba(255,120,214,.08), transparent 18%),
  linear-gradient(180deg, rgba(255,255,255,.02), transparent 10%, transparent 90%, rgba(255,255,255,.02)),
  rgba(8,11,23,.24);
  border:1px dashed rgba(255,255,255,.10);
}
.canvas-grid{position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size:34px 34px; mask-image:linear-gradient(180deg, rgba(0,0,0,.55), transparent 14%, transparent 84%, rgba(0,0,0,.45)); pointer-events:none}
.empty{position:absolute; inset:0; display:grid; place-content:center; text-align:center; padding:30px; color:var(--muted)}
.empty strong{display:block; font-size:28px; color:var(--text); margin-bottom:10px; font-family:var(--font-display)}
.widget{position:absolute; min-width:200px; min-height:150px; display:flex; flex-direction:column; border-radius:var(--widget-radius); overflow:hidden; touch-action:none}
.widget.dragging{z-index:999 !important; box-shadow:0 0 0 1px rgba(255,255,255,.10), 0 22px 70px rgba(0,0,0,.44), 0 0 36px color-mix(in srgb,var(--pink) 20%, transparent)}
.widget-head{height:48px; display:flex; align-items:center; gap:10px; padding:0 12px; border-bottom:1px solid rgba(255,255,255,.09); background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); user-select:none; cursor:grab}
.widget-head strong{flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:14px}
.widget-body{padding:16px; flex:1; overflow:auto; min-height:0}
.widget-body.note{white-space:pre-wrap; line-height:1.55}
.widget-body.quote{display:grid; place-items:center; text-align:center; white-space:pre-wrap; font-family:var(--font-display); font-size:clamp(18px,2vw,28px); color:#ffd6ef; line-height:1.2}
.widget-body.links{display:grid; gap:10px}
.widget-body.links a{text-decoration:none; color:var(--cyan); font-weight:700}
.widget-body.links a:hover{text-decoration:underline}
.widget-body.photo{padding:0; display:grid; place-items:center}
.widget-body.photo{position:relative; overflow:hidden; background:linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.02));}
.widget-body.photo img{width:100%; height:100%; object-fit:cover}
.photo-shell{position:relative; width:100%; height:100%;}
.photo-frame{position:absolute; inset:10px; border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 10px 24px rgba(0,0,0,.18);}
.photo-shell.decor-hearts .photo-frame{border-color:rgba(255,162,218,.55); box-shadow:0 0 0 3px rgba(255,132,209,.10), inset 0 1px 0 rgba(255,255,255,.25), 0 10px 24px rgba(0,0,0,.22);}
.photo-shell.decor-sparkle .photo-frame{border-color:rgba(137,228,255,.52); box-shadow:0 0 0 3px rgba(116,224,255,.10), inset 0 1px 0 rgba(255,255,255,.25), 0 10px 24px rgba(0,0,0,.22);}
.photo-shell.decor-bows .photo-frame{border-color:rgba(245,205,255,.58); box-shadow:0 0 0 3px rgba(237,175,255,.10), inset 0 1px 0 rgba(255,255,255,.25), 0 10px 24px rgba(0,0,0,.22);}
.photo-shell.decor-space .photo-frame{border-color:rgba(142,196,255,.55); box-shadow:0 0 0 3px rgba(108,147,255,.12), inset 0 1px 0 rgba(255,255,255,.18), 0 10px 24px rgba(0,0,0,.25);}
.photo-shell.decor-flowers .photo-frame{border-color:rgba(255,212,162,.58); box-shadow:0 0 0 3px rgba(255,186,120,.10), inset 0 1px 0 rgba(255,255,255,.22), 0 10px 24px rgba(0,0,0,.22);}
.photo-sticker{position:absolute; font-size:30px; line-height:1; filter:drop-shadow(0 7px 10px rgba(0,0,0,.28)); user-select:none}
.photo-sticker.tl{left:3px; top:2px}.photo-sticker.tr{right:5px; top:2px}.photo-sticker.bl{left:4px; bottom:2px}.photo-sticker.br{right:5px; bottom:2px}
.widget-body.sticker{display:grid; place-items:center; padding:8px; background:transparent; overflow:hidden}
.sticker-art{display:grid; place-items:center; width:100%; height:100%; font-size:clamp(54px,8vw,120px); text-shadow:0 10px 18px rgba(0,0,0,.24); transform:rotate(var(--sticker-rot, -6deg)); user-select:none}
.widget-body.calendar .month{font-weight:800; margin-bottom:12px}
.calendar-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; font-size:13px; text-align:center}
.calendar-grid span{padding:6px 0; border-radius:10px}
.calendar-grid .today{background:linear-gradient(135deg,var(--pink), #ffd2ef); color:#130818; font-weight:900}
.widget-body.mood{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.mood-btn{padding:14px 12px; border-radius:16px; border:1px solid rgba(255,255,255,.10); color:white; background:linear-gradient(135deg, color-mix(in srgb,var(--pink) 16%, transparent), color-mix(in srgb,var(--cyan) 10%, transparent)); font-weight:800}
.mini-btn{width:30px; height:30px; display:grid; place-items:center; padding:0}
.resize{position:absolute; width:24px; height:24px; right:3px; bottom:3px; cursor:nwse-resize; background:linear-gradient(135deg, transparent 44%, var(--cyan) 45% 53%, transparent 54% 66%, var(--pink) 67% 74%, transparent 75%)}
.toolbar{display:flex; gap:10px; flex-wrap:wrap}
.chip{padding:10px 14px; font-weight:700}
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:300; padding:13px 18px; border-radius:16px; background:rgba(13,18,35,.92); border:1px solid rgba(255,255,255,.14); box-shadow:0 18px 48px rgba(0,0,0,.40)}
.hidden{display:none !important}

.modal-root,.studio-root{position:fixed; inset:0; z-index:350; pointer-events:none}
.modal-overlay,.studio-overlay{position:absolute; inset:0; background:rgba(4,6,16,.56); backdrop-filter:blur(10px); opacity:0; transition:opacity .24s ease}
.modal-wrap{position:absolute; inset:0; display:grid; place-items:center; padding:18px}
.modal-card{pointer-events:auto; width:min(540px,100%); max-height:90vh; overflow:auto; border-radius:28px; padding:22px}
.modal-card h2{margin:0 0 16px; font-family:var(--font-display)}
.form{display:grid; gap:14px}
.field{display:grid; gap:8px; font-size:13px; color:#dbe0f6}
.field input,.field textarea,.field select,.field input[type=color]{width:100%; border:1px solid rgba(255,255,255,.10); background:rgba(11,15,28,.70); color:white; border-radius:14px; padding:12px 13px}
.field textarea{min-height:120px; resize:vertical}
.field input[type=file]{padding:11px}
.field small,.hint{color:var(--muted); line-height:1.5}
.form-row{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.form-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:4px}

.studio-root.open{pointer-events:auto}
.studio-root.open .studio-overlay{opacity:1}
.studio{
  position:absolute; top:0; right:0; height:100%; width:min(1080px,100%);
  transform:translateX(102%); transition:transform .28s ease;
  background:linear-gradient(180deg, rgba(15,18,34,.84), rgba(9,12,24,.76));
  border-left:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(calc(var(--glass-blur) + 4px)) saturate(150%);
  display:grid; grid-template-columns:minmax(320px,420px) minmax(0,1fr);
}
.studio-root.open .studio{transform:none}
.studio-left{padding:22px 20px 22px 24px; overflow:auto; border-right:1px solid rgba(255,255,255,.08)}
.studio-right{padding:22px; overflow:auto}
.studio-top{display:flex; justify-content:space-between; align-items:start; gap:10px; margin-bottom:18px}
.studio-top h2{margin:0; font-family:var(--font-display); font-size:30px}
.studio-top p{margin:8px 0 0; color:var(--muted)}
.studio-close{width:44px;height:44px; display:grid; place-items:center; font-weight:900}
.control-group{padding:16px; border-radius:22px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); margin-bottom:14px}
.control-group h3{margin:0 0 12px; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:#dcdfff}
.segmented{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.segmented.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.segmented button,.preset{padding:11px 12px; border-radius:14px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03); color:white; text-align:left; font-weight:700}
.segmented button.active,.preset.active{background:linear-gradient(135deg, color-mix(in srgb,var(--pink) 18%, transparent), rgba(255,255,255,.06)); border-color:rgba(255,255,255,.18)}
.range-line{display:grid; gap:6px; margin-bottom:10px}
.range-line label{display:flex; justify-content:space-between; gap:12px; font-size:13px}
input[type=range]{width:100%}
.color-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.color-grid label{display:grid; gap:8px; font-size:12px}
.color-grid input{height:44px; padding:2px; border-radius:12px}
.studio-preview-stage{border-radius:32px; padding:20px; min-height:640px; position:relative; overflow:hidden}
.studio-preview-stage:before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 20% 20%, rgba(255,255,255,.05), transparent 24%), radial-gradient(circle at 80% 18%, rgba(255,255,255,.04), transparent 22%); pointer-events:none}
.preview-scene{height:100%; border-radius:26px; overflow:hidden; border:1px solid rgba(255,255,255,.10); position:relative; padding:16px; background:transparent}
.preview-bg{position:absolute; inset:0; background:inherit}
.preview-glow{position:absolute; inset:0; background:radial-gradient(circle at 16% 18%, rgba(255,120,214,.22), transparent 20%), radial-gradient(circle at 82% 18%, rgba(121,223,255,.20), transparent 22%), linear-gradient(180deg, transparent, rgba(255,255,255,.03), transparent)}
.preview-stars{position:absolute; inset:0}
.preview-orb{position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.20); background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.15), rgba(255,255,255,.03))}
.preview-orb.one{width:110px;height:110px;right:10%;top:10%}
.preview-orb.two{width:52px;height:52px;right:22%;top:24%}
.preview-content{position:relative; z-index:1; display:grid; grid-template-rows:auto auto 1fr auto; gap:14px; height:100%}
.preview-topline{font-size:11px; color:#d6dbf5; letter-spacing:.26em; text-transform:uppercase}
.preview-hero,.preview-card,.preview-mini{border:1px solid rgba(255,255,255,.10); background:linear-gradient(140deg, rgba(255,255,255,.08), rgba(255,255,255,.03)), var(--panel); box-shadow:var(--surface-shadow),var(--rim); backdrop-filter:blur(var(--glass-blur)); border-radius:24px}
.preview-hero{display:grid; grid-template-columns:auto 1fr auto; gap:14px; padding:18px; align-items:center}
.preview-avatar{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;font-size:22px;background:linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.04))}
.preview-hero h4{margin:0; font-family:var(--font-display); font-size:28px; letter-spacing:-.03em}
.preview-hero p{margin:6px 0 0; color:#d7ddf5}
.preview-date{font-size:13px; text-align:right; color:#f3dfff}
.preview-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:14px; min-height:0}
.preview-card{padding:18px; min-height:320px; display:grid; gap:12px}
.preview-moodboard{position:relative; border-radius:20px; overflow:hidden; background:linear-gradient(140deg, rgba(255,255,255,.08), rgba(255,255,255,.02))}
.preview-polaroid{position:absolute; border-radius:16px; border:1px solid rgba(255,255,255,.14); background:linear-gradient(140deg, rgba(255,255,255,.16), rgba(255,255,255,.04)); box-shadow:0 16px 28px rgba(0,0,0,.24)}
.preview-polaroid.a{width:34%;height:34%;left:10%;top:12%;transform:rotate(-7deg); background:linear-gradient(180deg,#3b335f,#1c2049 48%, #ff99d6)}
.preview-polaroid.b{width:28%;height:32%;left:48%;top:18%;transform:rotate(8deg); background:linear-gradient(180deg,#181f41,#0b0d18 48%, #78dcff)}
.preview-polaroid.c{width:38%;height:28%;left:26%;bottom:12%;transform:rotate(-2deg); background:linear-gradient(180deg,#413773,#14192e 52%, #ffc0ec)}
.preview-note{display:grid; place-items:center; font-family:var(--font-display); font-size:26px; color:#ffd8f2; text-align:center}
.preview-checks{display:grid; gap:10px}
.preview-check{display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:18px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08)}
.preview-dot{width:18px;height:18px;border-radius:50%;border:1px solid rgba(255,255,255,.20)}
.preview-moods{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.preview-mini{padding:14px; text-align:center; font-weight:800}
.preview-mini small{display:block; margin-top:6px; color:#d1d8f7; font-weight:600}
.preview-actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:space-between; align-items:center}
.preview-badges{display:flex; gap:10px; flex-wrap:wrap}
.badge{padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); font-size:13px; font-weight:800}
.save-note{color:var(--muted); font-size:13px; line-height:1.5; margin-top:10px}

@media (max-width:1120px){
  .app-shell{grid-template-columns:1fr}
  .sidebar{position:relative; height:auto; border-right:0; border-bottom:1px solid rgba(255,255,255,.08)}
  .side-footer{position:static; margin-top:16px}
  .main{padding-top:18px}
  .studio{grid-template-columns:1fr; width:100%}
  .studio-left{border-right:0; border-bottom:1px solid rgba(255,255,255,.08)}
}
@media (max-width:780px){
  .search{min-width:100%}
  .hero{grid-template-columns:1fr}
  .hero-side{text-align:left}
  .hero-lock{margin-top:8px}
  .form-row,.color-grid,.preview-grid,.preview-moods,.segmented.three{grid-template-columns:1fr}
  .preview-hero{grid-template-columns:1fr}
}

:root{
  --gel-opacity:.75;
  --gel-ice:color-mix(in srgb,var(--cyan) 38%, transparent);
  --gel-rose:color-mix(in srgb,var(--pink) 36%, transparent);
  --rim-cold:color-mix(in srgb,var(--cyan) 58%, rgba(255,255,255,.32));
  --rim-warm:color-mix(in srgb,var(--pink) 55%, rgba(255,255,255,.25));
  --surface-shadow:0 16px 30px rgba(0,0,0,.32),0 34px 62px rgba(0,0,0,.20),inset 0 2px 1px rgba(255,255,255,.14),inset 0 -2px 2px rgba(0,0,0,.20);
  --rim:inset 1px 1px 0 rgba(255,255,255,.10),inset -1px -1px 0 rgba(0,0,0,.24);
}
body{background:#070b18}
.app-bg{background-image:
  radial-gradient(ellipse 38% 28% at 10% 9%,color-mix(in srgb,var(--pink) 19%, transparent), transparent 92%),
  radial-gradient(ellipse 38% 30% at 94% 26%,color-mix(in srgb,var(--cyan) 17%, transparent), transparent 92%),
  linear-gradient(145deg,var(--bg),#080c1b 50%,var(--bg2))}
.app-bg[data-scene="lockedin"]{background:
  radial-gradient(ellipse 35% 24% at 20% 15%,color-mix(in srgb,var(--cyan) 30%, transparent), transparent 95%),
  radial-gradient(ellipse 26% 20% at 65% 24%,color-mix(in srgb,var(--pink) 19%, transparent), transparent 95%),
  linear-gradient(180deg,#0d1933 0%,#0b1531 40%,#0b1126 70%,#070c19)}
.app-bg[data-scene="aurora"]{background:
  radial-gradient(ellipse 38% 30% at 18% 16%,color-mix(in srgb,var(--pink) 29%, transparent), transparent 95%),
  radial-gradient(ellipse 40% 30% at 82% 16%,color-mix(in srgb,var(--cyan) 25%, transparent), transparent 95%),
  linear-gradient(150deg,#0c0d25,#0d1430 52%,#1b1437)}
.app-bg[data-scene="midnight"]{background:
  radial-gradient(ellipse 34% 26% at 18% 13%,color-mix(in srgb,var(--violet) 18%, transparent), transparent 95%),
  linear-gradient(180deg,#060a15,#0a0f23 52%,#090f1d)}
.app-bg[data-scene="editorial"]{background:
  radial-gradient(ellipse 30% 23% at 14% 12%,color-mix(in srgb,var(--pink) 13%, transparent), transparent 95%),
  linear-gradient(140deg,#0b0d17,#111726 56%,#171522)}
.glow-layer{display:none}
.mist-layer{opacity:.2}
.floor-glow{opacity:.22}
.orb{border:1px solid rgba(232,241,255,.44);background:radial-gradient(ellipse at 26% 18%,rgba(255,255,255,.25),transparent 32%),linear-gradient(140deg,rgba(210,233,255,.16),rgba(255,255,255,.025) 45%,rgba(138,215,255,.10) 90%);box-shadow:inset 2px 2px 2px rgba(255,255,255,.35),inset -4px -4px 10px rgba(50,80,140,.24),8px 14px 22px rgba(0,0,0,.13);backdrop-filter:blur(1px)}
.star{box-shadow:0 0 3px rgba(255,255,255,.9);background:rgba(241,249,255,.95)}
.hero,.surface,.widget,.preview-hero,.preview-card,.preview-mini,.modal-card,.studio-preview-stage,.side-quote{
  position:relative; isolation:isolate;
  border:1px solid rgba(228,238,255,.18);
  box-shadow:var(--surface-shadow),var(--rim);
  background-image:
    linear-gradient(155deg,rgba(255,255,255,.14),rgba(255,255,255,.025) 27%,rgba(255,255,255,.016) 68%,rgba(255,255,255,.06)),
    linear-gradient(118deg,color-mix(in srgb,var(--pink) 7%,transparent) 0%,transparent 27%,color-mix(in srgb,var(--cyan) 8%,transparent) 73%,transparent 96%),
    linear-gradient(160deg,rgba(19,27,55,.40),rgba(7,13,29,.32)),
    linear-gradient(180deg,var(--panel),var(--panel));
  background-color:transparent;
  backdrop-filter:blur(var(--glass-blur)) saturate(145%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(145%);
}
.hero::before,.surface::before,.widget::before,.preview-hero::before,.preview-card::before,.preview-mini::before,.modal-card::before,.studio-preview-stage::before,.side-quote::before{
  content:"";position:absolute;inset:-1px;z-index:5;pointer-events:none;border-radius:inherit;padding:1.4px;
  background:conic-gradient(from 195deg at 50% 50%,rgba(255,255,255,.08),var(--rim-cold) 14%,rgba(255,255,255,.6) 22%,rgba(255,255,255,.08) 33%,var(--rim-warm) 51%,rgba(255,255,255,.3) 63%,rgba(255,255,255,.06) 78%,var(--rim-cold) 94%,rgba(255,255,255,.08));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:calc(.55 + var(--gel-opacity) * .40);
}
.surface::after,.widget::after,.preview-card::after,.preview-mini::after,.side-quote::after{
  content:"";position:absolute;inset:2px 2px auto 2px;height:38%;z-index:1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(174deg,rgba(255,255,255,.12),transparent 57%);opacity:var(--gel-opacity);
}
.hero{background-image:linear-gradient(125deg,rgba(232,238,255,.15),rgba(255,255,255,.015) 36%,rgba(255,255,255,.05) 92%),linear-gradient(110deg,color-mix(in srgb,var(--pink) 15%,transparent),transparent 43%,color-mix(in srgb,var(--cyan) 14%,transparent)),linear-gradient(150deg,rgba(17,23,50,.60),rgba(12,18,40,.46));}
.hero:after{background:linear-gradient(140deg,rgba(235,243,255,.22),rgba(255,255,255,.005) 63%);opacity:var(--gel-opacity);inset:2px auto auto 2px;width:43%;height:52%;clip-path:polygon(0 0,100% 0,15% 100%,0 100%);pointer-events:none;z-index:0}
.hero .hero-lock{border:1px solid rgba(210,247,255,.62);background:radial-gradient(circle at 30% 26%,rgba(255,255,255,.23),transparent 42%),linear-gradient(142deg,color-mix(in srgb,var(--cyan) 22%,transparent),color-mix(in srgb,var(--violet) 17%,transparent));box-shadow:inset 2px 3px 2px rgba(255,255,255,.25),inset -5px -9px 12px rgba(24,46,90,.45),0 11px 20px rgba(0,0,0,.24),0 0 0 9px rgba(189,226,255,.06),0 0 0 10px rgba(171,222,255,.18)}
.hero-lock span{filter:none;text-shadow:0 1px rgba(255,255,255,.8),2px 4px 2px rgba(0,0,0,.26);transform:translateY(-2px)}
.avatar,.preview-avatar{border:1px solid rgba(244,250,255,.45);box-shadow:inset 1px 2px rgba(255,255,255,.32),inset -2px -3px 7px rgba(0,0,0,.17),0 10px 20px rgba(0,0,0,.26);background:linear-gradient(135deg,color-mix(in srgb,var(--pink) 40%,rgba(255,255,255,.15)),color-mix(in srgb,var(--cyan) 26%,rgba(14,30,60,.32)))}
.canvas>.widget{position:absolute}
.canvas{border-color:rgba(200,222,255,.16);background:linear-gradient(160deg,rgba(255,255,255,.025),rgba(255,255,255,.008)),rgba(8,14,30,.20)}
.canvas-grid{background-size:44px 44px;opacity:.44}
.widget-head{background:linear-gradient(125deg,color-mix(in srgb,var(--cyan) 7%,rgba(255,255,255,.07)),rgba(255,255,255,.015) 70%)}
.widget-body.quote{color:#fbe3f7}
.mood-btn{background:linear-gradient(135deg,color-mix(in srgb,var(--pink) 13%,rgba(255,255,255,.055)),color-mix(in srgb,var(--cyan) 10%,rgba(255,255,255,.03)));border-color:rgba(240,247,255,.20);box-shadow:inset 1px 1px rgba(255,255,255,.16),inset -2px -2px rgba(0,0,0,.16)}
.mood-btn:hover{border-color:var(--rim-cold);transform:translateY(-1px)}
.preview-glow{background:radial-gradient(ellipse 48% 24% at 15% 8%,color-mix(in srgb,var(--pink) 13%,transparent),transparent),radial-gradient(ellipse 42% 25% at 88% 22%,color-mix(in srgb,var(--cyan) 12%,transparent),transparent)}
.preview-orb{border-color:rgba(255,255,255,.40);box-shadow:inset 1px 2px rgba(255,255,255,.32),inset -2px -3px rgba(0,0,0,.13);backdrop-filter:blur(1px)}
.preview-polaroid{border:1px solid rgba(255,255,255,.42);box-shadow:inset 1px 1px rgba(255,255,255,.20),7px 10px 14px rgba(0,0,0,.22)}
.preview-scene{background:linear-gradient(135deg,rgba(15,25,53,.27),rgba(6,13,26,.2))}
.preview-bg{filter:none}
.studio{background:linear-gradient(145deg,rgba(11,17,33,.97),rgba(6,12,25,.97));box-shadow:-12px 0 35px rgba(0,0,0,.30)}
.studio-preview-stage{border-color:rgba(255,255,255,.18)}
.ghost-btn,.tool-btn,.chip,.nav button,.mini-btn,.studio-close,.preset,.segmented button{box-shadow:inset 1px 1px rgba(255,255,255,.10),inset -1px -1px rgba(0,0,0,.19)}
.ghost-btn:hover,.tool-btn:hover,.chip:hover,.nav button:hover,.mini-btn:hover,.studio-close:hover,.preset:hover,.segmented button:hover{border-color:var(--rim-cold);box-shadow:inset 1px 1px rgba(255,255,255,.16),0 6px 14px rgba(0,0,0,.22)}
.mobile-order,.studio-mobile-heading{display:none}
body.studio-open{overflow:hidden}
@media(max-width:1000px){
  .app-shell{display:block;min-height:100dvh}
  .sidebar{position:relative;height:auto;padding:16px 20px 12px;border-right:0;border-bottom:1px solid rgba(255,255,255,.13);background:linear-gradient(180deg,rgba(9,14,31,.85),rgba(10,14,28,.50));}
  .brand{margin:0;font-size:23px}
  .brand small{font-size:8px;letter-spacing:.20em;margin-top:7px}
  .side-block{margin-top:16px}
  .nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .nav button{min-width:0;justify-content:center;padding:11px 8px;text-align:center;font-size:13px;border-radius:14px}
  .side-quote,.side-footer{display:none}
  .main{padding:20px 16px 35px}
  .topbar{gap:12px;align-items:start}
  .topbar-actions{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px}
  .search{min-width:0;width:100%;padding:10px 12px;border-radius:14px}
  .ghost-btn,.tool-btn{padding:11px 12px;border-radius:14px}
  .hero{padding:22px;gap:12px}
  .hero-content{min-width:0}
  .hero h2{font-size:clamp(22px,3.7vw,34px)}
  .hero-side{display:block;text-align:right}
  .hero-lock{width:86px!important;height:86px!important;margin:9px 4px 0 auto!important}
  .hero-lock span{font-size:37px!important}
  .hero-side strong{font-size:17px}
  .hero-side em{font-size:11px}
  .canvas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;min-height:0!important;padding:14px;overflow:visible}
  .canvas-grid{display:none}
  .canvas>.widget{position:relative!important;left:auto!important;top:auto!important;width:auto!important;height:250px!important;min-width:0;min-height:0;z-index:auto!important;touch-action:auto;}
  .canvas>.widget[data-type="photo"]{height:320px!important}
  .canvas>.widget[data-type="calendar"]{height:270px!important}
  .canvas>.widget[data-type="quote"]{height:230px!important}
  .canvas>.widget[data-type="mood"]{height:230px!important}
  .widget-head{cursor:default;height:52px;gap:7px}
  .widget-head strong{font-size:13px}
  .mobile-order{display:flex;gap:3px}
  .widget-head .mini-btn{width:34px;height:34px;flex-shrink:0;font-size:16px}
  .resize{display:none}
  .empty{position:relative;min-height:260px;grid-column:1/-1}
  .studio{width:100%;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
  .studio-right{order:0;overflow:visible;padding:10px 14px 8px;flex:none;background:linear-gradient(180deg,#0b1326,rgba(11,19,38,.96));position:sticky;top:0;z-index:8;border-bottom:1px solid rgba(255,255,255,.12)}
  .studio-left{order:1;overflow:visible;flex:none;padding:12px 15px max(34px,env(safe-area-inset-bottom));border:0}
  .studio-left .studio-top{display:none}
  .studio-mobile-heading{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 2px 8px;font-size:12px;letter-spacing:.22em;font-weight:800}
  .studio-mobile-heading .studio-close{width:36px;height:36px;padding:0;border-radius:12px;font-size:22px}
  .studio-preview-stage{min-height:0;height:310px;padding:10px;border-radius:22px}
  .preview-scene{padding:9px;border-radius:15px;height:100%}
  .preview-content{gap:7px}
  .preview-topline{font-size:9px}
  .preview-hero{padding:9px;grid-template-columns:auto minmax(0,1fr);gap:10px;border-radius:15px}
  .preview-avatar{height:38px;width:38px;font-size:17px;border-radius:12px}
  .preview-hero h4{font-size:17px}
  .preview-hero p{font-size:10px;line-height:1.25}
  .preview-date{display:none}
  .preview-grid{grid-template-columns:1.2fr .8fr;gap:7px;min-height:0}
  .preview-card{min-height:0;padding:8px;border-radius:15px;gap:5px}
  .preview-checks{gap:6px}
  .preview-check{padding:5px;gap:5px;font-size:9px;line-height:1.18;border-radius:10px}
  .preview-dot{width:11px;height:11px;flex:none}
  .preview-note{font-size:12px;line-height:1.15;position:absolute;z-index:4;left:22%;right:22%;top:34%;padding:12px 3px;border:1px solid rgba(255,255,255,.34);border-radius:9px;background:linear-gradient(155deg,rgba(36,27,76,.96),rgba(19,20,47,.94));box-shadow:2px 6px 12px rgba(0,0,0,.28);transform:rotate(-4deg)}
  .preview-moodboard{border-radius:10px}
  .preview-moods{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .preview-mini{padding:8px 2px;font-size:10px;border-radius:10px}
  .preview-mini small{display:none}
  .preview-actions{display:none}
  .studio-left .control-group{margin-bottom:11px}
  .studio-left .segmented.three{grid-template-columns:repeat(3,minmax(0,1fr))}
  .studio-left .color-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:680px){
  .sidebar{padding:15px 14px 12px}
  .brand{font-size:21px}
  .main{padding:16px 12px 30px}
  .title-eyebrow{font-size:9px;letter-spacing:.20em}
  .page-title{font-size:29px}
  .topbar-actions{grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .search{grid-column:1/-1;grid-row:2;min-height:43px}
  .topbar-actions .ghost-btn{grid-column:1;grid-row:1}
  .topbar-actions .tool-btn{grid-column:2;grid-row:1}
  .hero{padding:16px;border-radius:23px;grid-template-columns:minmax(0,1fr) auto;min-height:170px}
  .hero-content{gap:10px;align-items:start}
  .avatar{width:48px;height:48px;border-radius:15px;font-size:19px}
  .hero h2{font-size:clamp(20px,5vw,25px);line-height:1.15;margin:6px 0}
  .hero p{font-size:12px;line-height:1.45;max-width:24ch}
  .hero-side{align-self:start;min-width:65px}
  .hero-side .tiny,.hero-side strong,.hero-side em{display:none}
  .hero-lock{height:58px!important;width:58px!important;margin:6px 2px 0 auto!important;box-shadow:inset 1px 2px rgba(255,255,255,.24),inset -3px -4px rgba(0,0,0,.2),0 0 0 7px rgba(255,255,255,.05)!important}
  .hero-lock span{font-size:28px!important}
  .section-head{align-items:start;display:block;margin:24px 0 12px}
  .section-head h3{font-size:19px}
  .section-head p{font-size:12px}
  .toolbar{margin-top:13px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .chip{padding:10px 3px;font-size:11px;line-height:1.15;min-height:42px;border-radius:12px}
  .surface{padding:8px;border-radius:23px}
  .canvas{grid-template-columns:minmax(0,1fr);padding:6px;gap:12px;border-radius:18px}
  .canvas>.widget{height:215px!important}
  .canvas>.widget[data-type="photo"]{height:260px!important}
  .canvas>.widget[data-type="calendar"]{height:268px!important}
  .canvas>.widget[data-type="mood"]{height:212px!important}
  .canvas>.widget[data-type="quote"]{height:190px!important}
  .widget{border-radius:19px}
  .widget-body{padding:15px}
  .widget-body.quote{font-size:23px}
  .widget-head{padding:0 9px;gap:5px}
  .widget-head strong{font-size:13px}
  .widget-head .mini-btn{width:32px;height:32px;border-radius:10px}
  .nav button{font-size:12px;padding:10px 5px}
  .studio-preview-stage{height:280px}
  .studio-right{padding:6px 10px 7px}
  .studio-left{padding:12px 12px max(30px,env(safe-area-inset-bottom))}
  .studio-left .control-group{padding:13px;border-radius:17px}
  .segmented button,.preset{font-size:12px;padding:11px 8px}
  .modal-wrap{padding:11px;align-items:end}
  .modal-card{width:100%;max-height:89dvh;border-radius:25px 25px 16px 16px;padding:20px}
}
@media(max-width:360px){
  .hero{grid-template-columns:1fr}
  .hero-side{display:none}
  .nav button{font-size:11px}
  .widget-head strong{min-width:0}
  .widget-head .mini-btn{width:28px;height:30px}
  .toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){.star{animation:none}.studio,.studio-overlay{transition:none}.mood-btn:hover{transform:none}}