* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #080808;
  color: white;
  font:
    16px -apple-system,
    BlinkMacSystemFont,
    Arial,
    sans-serif;
  display: grid;
  place-items: center;
  height: 100dvh;
}
button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
}
svg {
  width: 24px;
  height: 24px;
  vertical-align: middle;
}
#studio {
  background: #0d0d0d;
  width: 100%;
  height: 100dvh;
  position: relative;
  overflow: hidden;
  padding-top: env(safe-area-inset-top);
}
#view {
  height: 100%;
  overflow: auto;
  scrollbar-width: none;
  padding-bottom: 108px;
}
header {
  height: 64px;
  position: sticky;
  top: 0;
  background: #0d0d0d;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 700;
  z-index: 2;
}
header button:first-child {
  position: absolute;
  left: 10px;
  width: 44px;
  height: 44px;
}
section {
  padding: 16px 0 8px;
}
h2 {
  font-size: 20px;
  margin: 0 16px 12px;
  font-weight: 800;
  letter-spacing: -0.5px;
}
h2 svg {
  width: 15px;
}
section p {
  font-size: 14px;
  color: #ccc;
  margin: -6px 16px 16px;
}
.rail {
  display: flex;
  gap: 12px;
  overflow: auto;
  scrollbar-width: none;
  padding: 0 16px;
}
.card {
  flex: none;
  position: relative;
  width: 118px;
  aspect-ratio: 9/16;
  background: #171717;
  border-radius: 16px;
  overflow: hidden;
  text-align: left;
}
.card.carousel {
  width: 139px;
  aspect-ratio: 4/5;
}
.card img,
.card video,
.art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left;
}
.card video {
  position: absolute;
  inset: 0;
}
.card b {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  font-size: 11px;
  padding: 23px 12px 12px;
  background: linear-gradient(transparent, #0006);
}
.badge {
  position: absolute;
  left: 12px;
  top: 12px;
  background: #ffffffe0;
  color: black;
  padding: 4px 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}
.badge.free {
  left: auto;
  right: 12px;
}
.feature {
  background: #171717;
  border-radius: 32px;
  margin-top: 16px;
  padding: 24px 0;
}
.group + .group {
  margin-top: 8px;
}
.active { background: #ffffff28; }
.mask {
  position: absolute;
  inset: 0;
  background: #0007;
  z-index: 4;
}
.sheet {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  background: #1c1c1cf8;
  border: 1px solid #ffffff30;
  border-radius: 32px;
  padding: 16px 16px 39px;
  max-height: 94%;
  overflow: auto;
  z-index: 5;
}
.sheet h3 {
  text-align: center;
  margin: 10px 0 35px;
  font-size: 17px;
}
.x {
  position: absolute;
  right: 16px;
  top: 15px;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  background: #ffffff12;
}
.tiles,
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.tiles button {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
  background: #303030;
  height: 80px;
  border-radius: 16px;
  font-weight: 650;
  font-size: 15px;
}
.grid {
  padding: 4px 16px;
}
.grid .card {
  width: 100%;
}
.seg {
  display: flex;
  margin: 4px 16px 20px;
  padding: 4px;
  border-radius: 30px;
  background: #202020;
}
.seg button {
  flex: 1;
  padding: 8px;
  border-radius: 20px;
}
.empty {
  text-align: center;
  margin-top: 35%;
  color: #bbb;
}
.primary {
  background: white;
  color: black;
  border-radius: 14px;
  padding: 15px;
  font-weight: 700;
}
.preview {
  position: absolute;
  inset: 0;
  background: #0d0d0d;
  display: grid;
  align-items: center;
}
.preview > video,
.preview > img {
  width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.preview > .close {
  position: absolute;
  top: 6px;
  left: 16px;
  background: #333a;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.foot {
  position: absolute;
  bottom: 24px;
  left: 16px;
  right: 16px;
}
.foot p {
  text-shadow: 0 1px 6px black;
}
.actions {
  display: flex;
  gap: 12px;
}
.actions .primary {
  flex: 1;
}
.fav {
  width: 56px;
  background: #444;
  border-radius: 14px;
}
.tools {
  display: flex;
  gap: 16px;
  padding: 12px 16px;
  overflow: auto;
}
.tools button {
  display: grid;
  gap: 4px;
  justify-items: center;
  font-size: 11px;
}
.editor {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}
.bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
}
.canvas {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
}
.canvas canvas {
  max-width: 92%;
  max-height: 100%;
  width: auto;
  height: auto;
}
.rows button {
  display: block;
  text-align: left;
  width: 100%;
  padding: 13px;
  background: #303030;
  border-bottom: 1px solid #ffffff12;
}
.thumb {
  width: 72px;
  height: 86px;
  object-fit: cover;
}
.timeline {
  overflow: auto;
  display: flex;
  gap: 6px;
  padding: 6px 16px;
}
.timeline button {
  flex: none;
  border: 1px solid #555;
  border-radius: 8px;
  padding: 5px;
}
.selected {
  outline: 2px solid white;
}
#notice {
  position: absolute;
  bottom: 105px;
  left: 10%;
  right: 10%;
  background: #333;
  padding: 12px;
  border-radius: 10px;
  text-align: center;
  z-index: 10;
}
.sheet input,
.sheet textarea {
  width: 100%;
  margin: 8px 0;
  padding: 9px;
}
.sheet audio {
  max-width: 100%;
}
[hidden] {
  display: none !important;
}
.welcome {
  position: absolute;
  inset: 0;
  z-index: 7;
  background: #0d0d0d;
  overflow: auto;
}
.welcome video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.welcome-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: end;
  min-height: 100%;
  padding: 16px 16px max(46px, env(safe-area-inset-bottom));
  background: linear-gradient(transparent 25%, #0d0d0d 78%);
}
.welcome h1 {
  font-size: 26px;
  letter-spacing: -0.7px;
  line-height: 1.12;
  margin: 8px 0 32px;
}
.welcome span {
  color: #bbb;
  font-weight: 600;
}
.welcome .primary {
  min-height: 60px;
}
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -12px 0 22px;
}
.pills button {
  border-radius: 40px;
  background: #232323;
  padding: 8px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.pills button.active {
  background: white;
  color: black;
}
.pills svg {
  width: 17px;
  height: 17px;
}
.editor .primary {
  padding: 9px 12px;
}
.editor .bar > button:disabled {
  opacity: 0.3;
}

.canvas canvas {
  touch-action: none;
}
.group h2,
.feature h2 {
  line-height: 23px;
}
.group {
  padding-top: 15px;
}
.feature p {
  margin-top: -7px;
  margin-bottom: 14px;
}

.file-picker {
  position: relative;
  display: block;
  padding: 14px;
  text-align: center;
  cursor: pointer;
}
.file-picker input[type=file] {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}
.file-picker:focus-within { outline: 2px solid currentColor; }
.rumi-lockup { display: inline-flex; align-items: center; gap: 6px; }
.rumi-lockup img:first-child { width: 32px; height: 32px; border-radius: 9px; }
.rumi-lockup img:last-child { width: 85px; height: auto; }
.sheet:has(.settings-panel) { background: #161419; padding: 16px 18px max(24px,env(safe-area-inset-bottom)); }
.sheet:has(.settings-panel) h3 { margin-bottom: 25px; }
.settings-panel .membership { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: space-between; padding: 20px; border-radius: 20px; background: radial-gradient(ellipse at top right,#63506b,transparent 65%),linear-gradient(115deg,#382c38,#312d40); border: 1px solid #ffffff1c; }
.membership::after { content: ""; position: absolute; z-index: -1; width: 140px; height: 140px; right: -40px; top: -93px; border: 1px solid #ffffff24; border-radius: 50%; box-shadow: 0 0 0 14px #ffffff08,0 0 0 30px #ffffff05; }
.settings-eyebrow { display: block; color: #e5d6df; font-size: 12px; }
.membership strong { display: block; font-size: 24px; margin-top: 3px; }
.membership-upgrade { display: inline-flex; align-items: center; gap: 3px; background: #f1e4ef; color: #332936; border-radius: 20px; min-height: 42px; padding: 0 14px; font-weight: 650; }
.membership-upgrade svg { width: 13px; height: 13px; }
.settings-install { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 12px; margin-top: 10px; border-radius: 17px; background: #242128; }
.settings-install img { width: 38px; height: 38px; border-radius: 11px; }
.settings-install strong,.settings-install small { display: block; }
.settings-install small { color: #c1b7c5; font-size: 12px; margin-top: 3px; }
.settings-install svg { margin-left: auto; width: 18px; height: 18px; color: #d5c8d9; }
.settings-panel h4 { margin: 23px 3px 11px; font-size: 15px; }
.settings-tools { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.settings-tool { display: flex; align-items: center; gap: 9px; text-align: left; padding: 10px; min-height: 56px; border-radius: 15px; color: #f6f2f5; background: #222025; font-size: 14px; }
.settings-tool i { display: grid; flex: none; place-items: center; width: 31px; height: 31px; border-radius: 10px; background: #382d3c; color: #e8bcd8; }
.settings-tool:nth-child(4n+2) i { background: #393122; color: #ebcf8b; }
.settings-tool:nth-child(4n+3) i { background: #253734; color: #9fd5bd; }
.settings-tool:nth-child(4n) i { background: #292f41; color: #b7c9f0; }
.settings-tool svg { width: 18px; height: 18px; }
.settings-panel button:focus-visible { outline: 2px solid #ecc4df; outline-offset: 2px; }
.settings-panel button:active { filter: brightness(1.2); }

.work-filters{display:flex;gap:6px;flex-wrap:wrap;margin:10px 16px}.work-filters button{border-radius:20px;padding:7px 12px;background:#262429;color:#eee}.work-filters .active{background:#eee3ef;color:#291f2a}.sheet h4{margin:16px 0 8px}

.sheet:has(.editor-choices) {
  padding: 18px 18px max(16px,env(safe-area-inset-bottom));
  background: linear-gradient(155deg,#29252d,#1b191e 70%);
  border-color:#ffffff20;
}
.sheet:has(.editor-choices) h3 {text-align:left;margin:8px 48px 22px 5px}
.editor-choices {display:grid;gap:8px}
.editor-choice {display:flex;align-items:center;gap:12px;min-height:52px;width:100%;padding:10px 16px;border-radius:17px;background:#ffffff0e;color:#f7f0f7;text-align:left}
.editor-choice svg {width:20px;height:20px;flex:none}
.editor-choice span {flex:1;font-weight:600}
.editor-choice small {color:inherit;opacity:.77;font-size:12px}
.editor-choice.primary {background:#eadbed;color:#332438}
.editor-choice.discard {justify-content:center;background:transparent;color:#f0acb5;min-height:44px}
.editor-choice.discard span {flex:none}
.editor-choice.discard svg {width:15px}
.editor-choice.preview-action {background:#39303d;color:#f1deef}
.editor-choice:active {filter:brightness(.88)}
.editor-choice:focus-visible {outline:2px solid #e4bfe9;outline-offset:2px}
.snap-switch {display:flex;align-items:center;width:40px;height:24px;padding:3px;box-sizing:border-box;border-radius:24px;background:#59545d}
.snap-switch::after {content:"";width:18px;height:18px;border-radius:50%;background:white}
[aria-checked="true"] .snap-switch {background:#9bcbb7;justify-content:flex-end}