/* CamboPost Creator Studio · V4 · 2026-10-20
 * Distinct, art-directed Telegram creation experience based on the actual
 * CamboPost Web assets, without transplanting the heavy desktop UI.
 * Keep every PE Quick field, API endpoint and established /miniapp route. */
body.miniStudioV3 {
  --studio-bg:#111320;
  --studio-panel:#202235;
  --studio-raise:#292b41;
  --studio-field:#191b2c;
  --studio-text:#f5f3ff;
  --studio-muted:#aaa4c1;
  --studio-subtle:#85819f;
  --studio-line:#393b57;
  --studio-accent:#c1a9ff;
  --studio-accentStrong:#8665e9;
  --studio-accentSoft:#382d56;
  --studio-lineStrong:#6d5b9a;
  --studio-shadow:rgba(3,4,19,.22);
  background:#111320!important;
}
body.miniStudioV3[data-mini-theme="light"] {
  --studio-bg:#f5f5fb;
  --studio-panel:#fff;
  --studio-raise:#f5f4fc;
  --studio-field:#faf9ff;
  --studio-text:#28243f;
  --studio-muted:#817a98;
  --studio-subtle:#a29cb4;
  --studio-line:#e6e2f0;
  --studio-accent:#815ed7;
  --studio-accentStrong:#7957d6;
  --studio-accentSoft:#f1eaff;
  --studio-lineStrong:#c9b5ed;
  --studio-shadow:rgba(44,27,102,.055);
  background:#f5f5fb!important;
}
body.miniStudioV3 .cpMiniShell.shell {background:var(--studio-bg)!important}
body.miniStudioV3 .cpMiniScroll.content {
  padding:calc(74px + env(safe-area-inset-top,0px)) 13px calc(112px + env(safe-area-inset-bottom,0px))!important;
  gap:13px!important;
  background:
    radial-gradient(240px 160px at 94% 0%,rgba(101,70,181,.13),transparent 89%),
    var(--studio-bg)!important;
}
body.miniStudioV3[data-mini-theme="light"] .cpMiniScroll.content {
  background:radial-gradient(260px 180px at 95% 0%,rgba(169,129,239,.10),transparent 92%),var(--studio-bg)!important;
}

/* Compact true app bar. Brand icon is 35px; no giant horizontal image. */
body.miniStudioV3 .topbar.cpMiniHeader {
  top:calc(6px + env(safe-area-inset-top,0px))!important;
  width:min(calc(100% - 18px),542px)!important;
  min-height:55px!important;height:55px!important;
  gap:7px!important;padding:6px 8px!important;
  border-radius:15px!important;
  background:linear-gradient(119deg,rgba(37,32,59,.96),rgba(24,27,44,.98))!important;
  border:1px solid rgba(139,120,182,.45)!important;
  box-shadow:0 8px 21px rgba(5,4,21,.28),inset 0 1px 0 rgba(227,209,255,.06)!important;
}
body.miniStudioV3[data-mini-theme="light"] .topbar.cpMiniHeader {
  background:linear-gradient(120deg,rgba(255,255,255,.97),rgba(251,247,255,.98))!important;
  border-color:#e0d6ef!important;
  box-shadow:0 8px 18px rgba(57,35,117,.10),inset 0 1px 0 #fff!important;
}
body.miniStudioV3 .cpMiniBrand {
  flex:0 1 auto!important;
  gap:8px!important;
  max-width:165px!important;
  min-width:0!important;
}
body.miniStudioV3 .cpHeaderMark {
  position:relative;
  display:grid;place-items:center;
  height:39px;width:39px;min-width:39px;flex:0 0 39px;
  padding:3px;
  border:1px solid rgba(177,146,252,.38);
  border-radius:12px;
  background:linear-gradient(142deg,#56419e,#263c91);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 3px 12px rgba(89,63,171,.25);
}
body.miniStudioV3 .cpHeaderMark::after {
  content:"";
  position:absolute;inset:1px;
  border-radius:10px;
  pointer-events:none;
  border-top:1px solid rgba(255,255,255,.20);
}
body.miniStudioV3 .cpHeaderMark>img {
  display:block;width:100%!important;height:100%!important;
  object-fit:contain!important;border-radius:9px!important;
}
body.miniStudioV3 .cpHeaderWordmark {
  display:flex;flex-direction:column;gap:2px;
  min-width:0;
}
body.miniStudioV3 .cpHeaderWordmark>strong {
  color:var(--studio-text);font:800 15.5px/1.15 Manrope,Inter,sans-serif;
  letter-spacing:-.45px;white-space:nowrap;
}
body.miniStudioV3 .cpHeaderWordmark>small {
  color:var(--studio-accent);font:800 7.2px/1.3 Manrope,Inter,sans-serif;
  letter-spacing:1.06px;white-space:nowrap;
}
body.miniStudioV3 .cpMiniThemeToggle {
  min-width:30px!important;min-height:30px!important;
  flex:0 0 30px!important;width:30px!important;height:30px!important;
  border-radius:9px!important;
  background:rgba(132,100,220,.12)!important;
}
body.miniStudioV3 .cpMiniThemeToggle .miniIcon{width:15px;height:15px;flex:0 0 15px}
body.miniStudioV3 .mode.cpMiniSession {
  min-height:30px!important;
  padding:7px 8px!important;
  font:760 9.5px/1 Manrope,Inter,sans-serif!important;
  border-radius:9px!important;
}

/* Creative hero with glass layers, visual depth and the useful real counters
 * integrated in its footer instead of three generic statistic cards. */
body.miniStudioV3 .cpCreatorHero.cpMiniIntro {
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;gap:0!important;
  min-height:211px;
  padding:15px 16px 0!important;
  overflow:hidden;
  background:
    radial-gradient(160px 170px at 100% 0%,rgba(152,116,254,.50),transparent 88%),
    linear-gradient(116deg,#332b67 0%,#3b3881 51%,#24478d 112%);
  color:#fff;
  border-radius:19px;
  border:1px solid rgba(197,180,255,.28);
  box-shadow:0 14px 31px rgba(58,37,118,.22),inset 0 1px 0 rgba(255,255,255,.15);
}
body.miniStudioV3 .cpCreatorHero::before {
  content:"";position:absolute;z-index:-1;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.024) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:23px 23px;
  -webkit-mask-image:linear-gradient(90deg,transparent 25%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 25%,#000 100%);
  pointer-events:none;
}
body.miniStudioV3 .cpHeroGlow {position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
body.miniStudioV3 .cpHeroGlowOne {
  right:-72px;top:-120px;width:237px;height:237px;
  background:radial-gradient(circle,rgba(193,167,255,.21),transparent 69%);
}
body.miniStudioV3 .cpHeroGlowTwo {
  bottom:-116px;right:8px;width:214px;height:214px;
  background:radial-gradient(circle,rgba(80,161,255,.30),transparent 75%);
}
body.miniStudioV3 .cpHeroTopline {
  position:relative;display:flex;align-items:center;gap:7px;
  min-height:27px;
  font:800 8.6px/1.3 Manrope,Inter,sans-serif;
  letter-spacing:1.04px;color:#d5c9ff;
}
body.miniStudioV3 .cpHeroSpark{
  display:grid;place-items:center;
  width:26px;height:26px;min-width:26px;
  color:#e7dbff;background:rgba(229,211,255,.17);
  border:1px solid rgba(239,228,255,.24);border-radius:8px;
}
body.miniStudioV3 .cpHeroSpark .miniIcon{width:15px;height:15px;flex:0 0 15px}
body.miniStudioV3 .cpHeroActive{
  display:inline-flex;align-items:center;gap:6px;
  margin-left:auto;
  padding:6px 7px;
  font-size:8px;letter-spacing:.32px;white-space:nowrap;
  color:#e8dbff;
  background:rgba(19,18,65,.23);
  border:1px solid rgba(230,217,255,.19);
  border-radius:7px;
}
body.miniStudioV3 .cpHeroActive>span {
  width:6px;height:6px;border-radius:50%;background:#aee6cd;
  box-shadow:0 0 0 3px rgba(140,228,191,.11);
}
body.miniStudioV3 .cpCreatorHero .cpMiniIntroLine {
  display:flex;align-items:center;min-height:115px;
  margin:2px 0 9px;
  position:relative;
  gap:6px;
}
body.miniStudioV3 .cpMiniHeroText {
  flex:1 1 auto;min-width:0;z-index:2;
  padding-bottom:8px;
}
body.miniStudioV3 .cpCreatorHero h1 {
  margin:0 0 5px;
  color:#fff;
  font:850 clamp(21px,6.2vw,27px)/1.15 Manrope,Inter,sans-serif;
  letter-spacing:-.88px;
  white-space:nowrap;
  text-shadow:0 2px 12px rgba(40,24,111,.20);
}
body.miniStudioV3 .cpHeroTitleDot{color:#c4a8ff}
body.miniStudioV3 .cpCreatorHero p {
  margin:0;color:#e2daf9;
  font:450 10.8px/1.65 Manrope,Inter,sans-serif;
}
body.miniStudioV3 .cpHeroArtwork {
  position:relative;flex:0 0 125px;
  width:125px;height:113px;
  perspective:260px;
  pointer-events:none;
}
body.miniStudioV3 .cpHeroPaper {
  position:absolute;display:block;
  width:91px;height:94px;
  top:9px;left:23px;
  border:1px solid rgba(255,255,255,.49);
  border-radius:13px;
}
body.miniStudioV3 .cpHeroPaperBack {
  transform:rotate(16deg) translate(11px,-7px);
  background:linear-gradient(140deg,rgba(219,221,255,.35),rgba(170,158,248,.10));
  box-shadow:0 7px 20px rgba(25,14,85,.14);
}
body.miniStudioV3 .cpHeroPaperFront {
  display:flex;flex-direction:column;gap:6px;
  padding:9px;
  transform:rotate(-10deg);
  background:linear-gradient(145deg,rgba(253,250,255,.89),rgba(222,221,255,.80));
  box-shadow:0 10px 23px rgba(11,15,65,.29),inset 0 1px 0 rgba(255,255,255,.90);
  overflow:hidden;
}
body.miniStudioV3 .cpHeroMediaGlyph {
  display:grid;place-items:center;
  height:40px;min-height:40px;width:100%;
  border-radius:8px;
  background:linear-gradient(140deg,#a389ec,#6e99eb);
  color:white;
}
body.miniStudioV3 .cpHeroMediaGlyph .miniIcon{width:19px;height:19px;flex-basis:19px;fill:rgba(255,255,255,.12)}
body.miniStudioV3 .cpHeroPaperFront>i {
  display:block;height:4px;border-radius:99px;
  background:rgba(102,89,158,.24);
}
body.miniStudioV3 .cpHeroPaperFront>i:nth-of-type(2){width:75%}
body.miniStudioV3 .cpHeroPaperFront>i:nth-of-type(3){width:58%}
body.miniStudioV3 .cpHeroCheck {
  position:absolute;display:grid;place-items:center;
  right:4px;bottom:3px;
  width:27px;height:27px;
  border:1px solid rgba(205,255,229,.56);
  border-radius:10px;
  color:white;
  background:linear-gradient(136deg,#67dbaa,#359e82);
  box-shadow:0 4px 11px rgba(13,63,61,.29);
}
body.miniStudioV3 .cpHeroCheck .miniIcon{width:15px;height:15px;flex:0 0 15px}
body.miniStudioV3 .cpHeroStats.cpMiniMetrics {
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr) 1px minmax(0,1fr)!important;
  align-items:center!important;
  gap:0!important;
  flex:0 0 auto!important;
  width:calc(100% + 32px)!important;
  min-height:58px!important;
  margin:0 -16px!important;
  padding:9px 13px 8px!important;
  background:rgba(17,21,70,.20)!important;
  border:0!important;border-top:1px solid rgba(214,196,255,.23)!important;
  border-radius:0!important;
  backdrop-filter:blur(13px);
}
body.miniStudioV3 .cpHeroStatDivider{
  display:block;height:26px;width:1px;background:rgba(220,215,255,.20);
}
body.miniStudioV3 .cpHeroStats .cpMiniMetric {
  display:flex!important;flex-direction:column!important;
  align-items:center!important;justify-content:center!important;
  gap:2px!important;
  padding:0 2px!important;margin:0!important;
  background:transparent!important;border:0!important;
  box-shadow:none!important;border-radius:0!important;
}
body.miniStudioV3 .cpHeroStats .cpMiniMetric strong {
  color:white!important;font:820 15px/1.3 Manrope,Inter,sans-serif!important;
  letter-spacing:.12px!important;
}
body.miniStudioV3 .cpHeroStats .cpMiniMetric small {
  color:#e0d5fb!important;font-size:8.5px!important;font-weight:570!important;
  line-height:1.3!important;
}

/* Connect the real workflow to the visual composition. */
body.miniStudioV3 .cpMiniWorkflow {
  margin:2px 0 1px;
  padding:5px 6px;
  gap:3px;
  border-radius:13px;
  border:1px solid var(--studio-line);
  background:var(--studio-panel);
  box-shadow:0 3px 11px var(--studio-shadow);
}
body.miniStudioV3 .miniFlowStep {
  gap:5px;padding:6px 3px;
  color:var(--studio-subtle);
  font-size:9.5px!important;
}
body.miniStudioV3 .miniFlowStep>b {
  background:var(--studio-raise);
  border-radius:8px;width:22px;height:22px;flex:0 0 22px;
}
body.miniStudioV3 .miniFlowStep.is-current {
  color:var(--studio-accent);
}
body.miniStudioV3 .miniFlowStep.is-current>b {
  background:linear-gradient(140deg,#9270ee,#674cc7);
  border-color:#9876eb;
  box-shadow:0 4px 9px rgba(103,69,186,.18);
  color:white;
}
body.miniStudioV3 .miniFlowDivider {min-width:4px;flex:1 1 auto;max-width:18px}

/* Create link is the star; quiet, layered typography elsewhere. */
body.miniStudioV3 .panel.cpCreatorSourceCard {
  position:relative;
  background:var(--studio-panel)!important;
  border:1px solid var(--studio-lineStrong)!important;
  border-radius:17px!important;
  box-shadow:0 9px 26px var(--studio-shadow),inset 0 1px 0 rgba(211,196,249,.06)!important;
}
body.miniStudioV3[data-mini-theme="light"] .panel.cpCreatorSourceCard{border-color:#d8c9ef!important}
body.miniStudioV3 .cpCreatorSourceCard::before{
  content:"";position:absolute;top:0;left:14px;right:14px;
  height:2px;border-radius:0 0 7px 7px;
  background:linear-gradient(90deg,transparent,#bca4ff,#77a1ef,transparent);
  opacity:.78;
  pointer-events:none;
}
body.miniStudioV3 .cpCreatorSourceCard>.cpCardTitle {
  padding:12px 13px!important;
  min-height:66px!important;
  background:linear-gradient(120deg,color-mix(in srgb,var(--studio-accent) 10%,var(--studio-panel)),var(--studio-panel) 78%)!important;
}
body.miniStudioV3 .cpCreatorSourceCard .cpCardTitle h2 {
  font:780 14px/1.3 Manrope,Inter,sans-serif!important;
}
body.miniStudioV3 .cpCreatorSourceCard .cpCardBody{
  gap:11px!important;padding:13px!important;
}
body.miniStudioV3 .cpCreatorUrlField {
  position:relative;
  height:52px!important;
  min-height:52px!important;
  border-radius:12px!important;
  background:var(--studio-field)!important;
  border:1px solid var(--studio-lineStrong)!important;
  transition:box-shadow .15s,border-color .15s;
}
body.miniStudioV3 .cpCreatorUrlField:focus-within {
  border-color:var(--studio-accentStrong)!important;
  box-shadow:0 0 0 3px rgba(151,112,238,.12),0 6px 14px rgba(89,68,160,.08)!important;
}
body.miniStudioV3 .cpUrlIcon{
  display:grid;place-items:center;
  min-width:30px;width:30px;height:30px;flex:0 0 30px;
  color:var(--studio-accent);
  background:var(--studio-accentSoft);
  border:1px solid var(--studio-line);
  border-radius:9px;
}
body.miniStudioV3 .cpCreatorUrlField>.cpUrlIcon>.miniIcon{width:16px;height:16px;flex:0 0 16px}
body.miniStudioV3 .cpCreatorUrlField>.field{font:480 14px/1.4 Manrope,Inter,sans-serif!important;height:50px!important;min-height:50px!important}
body.miniStudioV3 .cpCreatorUrlField>.field::placeholder{font-size:13px!important}
body.miniStudioV3 .cpGetMediaButton {
  position:relative;
  height:47px!important;
  min-height:47px!important;
  border:1px solid rgba(201,182,255,.42)!important;
  background:linear-gradient(112deg,#8b65e9 0%,#7056d9 49%,#587ada 100%)!important;
  border-radius:12px!important;
  color:#fff!important;
  box-shadow:0 9px 20px rgba(95,65,171,.22),inset 0 1px 0 rgba(255,255,255,.14)!important;
  font-size:12px!important;font-weight:760!important;
  letter-spacing:.1px;
  overflow:hidden;
}
body.miniStudioV3 .cpGetMediaButton::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(118deg,rgba(255,255,255,.12),transparent 45%,rgba(255,255,255,.05));
  pointer-events:none;
}
body.miniStudioV3 .cpGetMediaButton:active:not(:disabled){filter:brightness(.96)}
body.miniStudioV3 .cpSupported {
  display:flex;flex-wrap:nowrap;gap:5px;
  max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;
  padding:1px 0 3px;
  scrollbar-width:none;
}
body.miniStudioV3 .cpSupported::-webkit-scrollbar{display:none}
body.miniStudioV3 .cpSupported>span{
  font-size:8.5px;flex:0 0 auto;
  color:var(--studio-subtle);letter-spacing:.4px;
}
body.miniStudioV3 .cpSupported>b{
  flex:0 0 auto;font-size:9px;
  padding:5px 7px;
  border-radius:8px;
  background:var(--studio-raise);
}

/* Composer is one product workspace, not a chain of plain forms. */
body.miniStudioV3 .cpEditorIntro {
  margin:0 1px;
  padding:3px 0;
}
body.miniStudioV3 .cpEditorIntro h2{font-size:21px!important;letter-spacing:-.64px!important}
body.miniStudioV3 .cpDraftPill{
  border-color:var(--studio-lineStrong);
  box-shadow:inset 0 1px 0 rgba(183,146,255,.10);
}
body.miniStudioV3 .cpCreatorEditorTabs.cpEditorTabs {
  padding:4px!important;min-height:54px!important;
  border-radius:14px!important;
  background:var(--studio-raise)!important;
  border:1px solid var(--studio-line)!important;
  box-shadow:0 4px 14px var(--studio-shadow)!important;
  gap:4px!important;
}
body.miniStudioV3 .cpCreatorEditorTabs>button {
  min-height:44px!important;border-radius:10px!important;
  font-weight:720!important;
}
body.miniStudioV3 .cpCreatorEditorTabs>button.is-active {
  color:#f9f5ff!important;
  background:linear-gradient(124deg,#8663e1,#5f4eaa)!important;
  border-color:rgba(203,185,255,.26)!important;
  box-shadow:0 5px 11px rgba(64,42,139,.25),inset 0 1px 0 rgba(255,255,255,.14)!important;
}
body.miniStudioV3 .cpCreatorEditorTabs>button.is-active>small{
  background:rgba(255,255,255,.16)!important;color:#f5edff!important;
}
body.miniStudioV3 .cpEditorPanels {
  border:1px solid var(--studio-line)!important;
  border-radius:17px!important;
  box-shadow:0 8px 24px var(--studio-shadow)!important;
}
body.miniStudioV3 .cpEditorPanel{
  background:var(--studio-panel)!important;
  padding:14px!important;gap:12px!important;
}
body.miniStudioV3 .cpPanelHeading {margin-bottom:4px!important}
body.miniStudioV3 .cpPanelHeading h3 {
  font-weight:790!important;
  letter-spacing:-.18px!important;
}
body.miniStudioV3 .cpMediaPreview {
  background:
    radial-gradient(190px 110px at 50% 30%,rgba(147,98,219,.14),transparent 80%),
    linear-gradient(140deg,#191b30,#0f1423)!important;
  border:1px solid color-mix(in srgb,var(--studio-accent) 22%,var(--studio-line))!important;
  border-radius:14px!important;
  box-shadow:inset 0 0 26px rgba(6,7,26,.16),0 3px 12px var(--studio-shadow);
}
body.miniStudioV3 .cpCoverFallback>.miniIcon {
  width:33px;height:33px;flex:0 0 33px;
  padding:6px;
  border:1px solid rgba(205,173,255,.23);
  background:rgba(117,86,206,.12);
  border-radius:9px;
  color:#c7b1fc;
}
body.miniStudioV3 .cpMediaPreview.has-image {
  border-color:color-mix(in srgb,var(--studio-accent) 36%,var(--studio-line))!important;
}
body.miniStudioV3 .miniCoverFrame.selected {
  border-color:var(--studio-accentStrong)!important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--studio-accent) 22%,transparent)!important;
}
body.miniStudioV3 .cpNextStep {
  min-height:45px;
  border-radius:11px;
  background:linear-gradient(120deg,var(--studio-accentSoft),var(--studio-raise));
  font-size:11.5px;
}
body.miniStudioV3 .cpRightImageCard {
  border-color:var(--studio-lineStrong);
  background:linear-gradient(120deg,var(--studio-raise),var(--studio-panel));
}
body.miniStudioV3 .cpSearchField {
  min-height:45px;
  background:var(--studio-field);
}
body.miniStudioV3 .miniPageRow.checkRow {
  min-height:67px;
  background:var(--studio-panel)!important;
  border:1px solid var(--studio-line)!important;
  border-radius:12px!important;
  transition:border-color .15s,background .15s,box-shadow .15s;
}
body.miniStudioV3 .miniPageRow.selected {
  background:linear-gradient(120deg,var(--studio-accentSoft),var(--studio-panel))!important;
  border-color:var(--studio-lineStrong)!important;
  box-shadow:inset 3px 0 0 var(--studio-accentStrong),0 2px 10px rgba(94,68,184,.07)!important;
}
body.miniStudioV3 .miniPageAvatar{
  border-radius:12px;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--studio-accent) 9%,transparent);
}
body.miniStudioV3 .cpPagesTip {
  padding:10px 11px;
  border:1px solid var(--studio-line);
  border-radius:9px;
  background:var(--studio-raise);
}
body.miniStudioV3 .stickyPublish.cpPublishDock {
  background:color-mix(in srgb,var(--studio-panel) 96%,transparent)!important;
  border-top:1px solid var(--studio-lineStrong)!important;
  box-shadow:0 -10px 30px rgba(17,10,52,.17)!important;
}
body.miniStudioV3 .publishBtn {
  border-radius:11px!important;
  border-color:rgba(202,182,255,.34)!important;
  background:linear-gradient(118deg,#8763e7,#6b50d3)!important;
  box-shadow:0 8px 19px rgba(101,65,189,.22)!important;
}

@media(max-width:390px){
  body.miniStudioV3 .cpMiniScroll.content {
    padding-inline:11px!important;
    gap:12px!important;
  }
  body.miniStudioV3 .cpCreatorHero.cpMiniIntro {
    min-height:203px;
    padding:13px 13px 0!important;
  }
  body.miniStudioV3 .cpHeroStats.cpMiniMetrics {
    width:calc(100% + 26px)!important;
    margin:0 -13px!important;
  }
  body.miniStudioV3 .cpHeroArtwork {flex-basis:102px;width:102px}
  body.miniStudioV3 .cpHeroPaper {width:80px;height:87px;left:14px}
  body.miniStudioV3 .cpCreatorHero h1{font-size:23px}
  body.miniStudioV3 .cpCreatorHero p{font-size:10.5px}
  body.miniStudioV3 .cpHeroTopline{letter-spacing:.65px;font-size:8px}
  body.miniStudioV3 .cpHeroActive{font-size:7.7px}
  body.miniStudioV3 .cpCreatorSourceCard>.cpCardTitle{padding:11px!important}
  body.miniStudioV3 .cpCreatorSourceCard .cpCardBody{padding:12px!important}
}
@media(max-width:350px){
  body.miniStudioV3 .cpHeroTopline>span:nth-child(2){font-size:7.6px;letter-spacing:.35px}
  body.miniStudioV3 .cpHeroActive{font-size:7px;padding:6px 5px}
  body.miniStudioV3 .cpHeroArtwork{flex-basis:92px;width:92px}
  body.miniStudioV3 .cpHeroPaper{width:69px;height:82px;left:10px}
  body.miniStudioV3 .cpHeroMediaGlyph{height:33px;min-height:33px}
  body.miniStudioV3 .cpCreatorHero h1{font-size:21px}
  body.miniStudioV3 .cpHeroStats .cpMiniMetric small{font-size:7.5px!important}
  body.miniStudioV3 .cpHeaderWordmark>strong{font-size:14px}
  body.miniStudioV3 .cpHeaderMark{height:36px;width:36px;min-width:36px;flex-basis:36px}
  body.miniStudioV3 .cpMiniBrand{gap:6px!important}
  body.miniStudioV3 .cpCreatorUrlField>.field::placeholder{font-size:11.5px!important}
  body.miniStudioV3 .cpMiniThemeToggle{flex-basis:29px!important;width:29px!important;min-width:29px!important}
  body.miniStudioV3 .cpMiniSession{padding:6px!important}
  body.miniStudioV3 .cpCreatorEditorTabs>button{font-size:10px!important}
}
@media(prefers-reduced-motion:reduce){
  body.miniStudioV3 .cpCreatorHero *,
  body.miniStudioV3 .cpCreatorHero *::before,
  body.miniStudioV3 .cpCreatorHero *::after{animation:none!important;transition:none!important}
}
/* All three live counters must remain fully inside the hero on 320–560px.
   Without an explicit flex basis, the scroll container shrinks this flex
   child below its content height and clips the lower statistic labels. */
body.miniStudioV3 .cpCreatorHero.cpMiniIntro{
  flex:0 0 232px!important;
  height:232px!important;min-height:232px!important;max-height:232px!important;
}
/* Subtle editor-life motion: decorative artwork and active PE indicator only.
   No card, text, navigation or input changes size/position. */
body.miniStudioV3 .cpHeroPaperFront{
  animation:cpCreatorPaperFloat 6.8s ease-in-out infinite;
}
body.miniStudioV3 .cpHeroActive>span{
  animation:cpCreatorLiveDot 3.5s ease-in-out infinite;
}
@keyframes cpCreatorPaperFloat {
  0%,100%{transform:rotate(-10deg) translateY(0)}
  50%{transform:rotate(-10deg) translateY(-3px)}
}
@keyframes cpCreatorLiveDot{
  0%,100%{opacity:1}
  50%{opacity:.55}
}
@media(prefers-reduced-motion:reduce){
  body.miniStudioV3 .cpHeroPaperFront,
  body.miniStudioV3 .cpHeroActive>span{animation:none!important}
}