.ss {
  --ss-bg: #171122;
  --ss-panel: #241b34;
  --ss-line: #554169;
  --ss-muted: #c1b5d3;
  --ss-accent: #b784ff;
  width: min(1680px, 100%);
  margin: 0 auto;
  color: #f6efff;
}
.ss *, .ss *::before, .ss *::after { box-sizing: border-box; }
.ss [hidden] { display: none !important; }
.ss h1, .ss h2, .ss p { margin-top: 0; }
.ss h2 { font-size: 1rem; margin-bottom: 14px; }
.ss button, .ss input, .ss select { font: inherit; }
.ss button, .ss-file, .ss-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid #765890;
  border-radius: 9px;
  background: #302240;
  color: #f8f2ff;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.3;
}
.ss button:hover, .ss-file:hover, .ss-switch a:hover { background: #49305f; border-color: #c398f7; }
.ss button:focus-visible, .ss-file:focus-within, .ss input:focus-visible, .ss select:focus-visible, .ss a:focus-visible { outline: 3px solid #e4c5ff; outline-offset: 3px; }
.ss button:disabled { opacity: .42; cursor: default; }
.ss .ss-primary { background: linear-gradient(135deg,#9754d4,#6f3bc0); border-color: #ca9bff; font-weight: 700; }
.ss .ss-primary:hover { background: #985fda; }
.ss-hero {
  display: grid;
  grid-template-columns: 1fr 210px;
  gap: 32px;
  padding: 30px 34px;
  margin-bottom: 18px;
  border: 1px solid #72528e;
  border-radius: 22px;
  background: radial-gradient(ellipse at 100% 30%,#533078 0,transparent 58%),linear-gradient(120deg,#2d1e40,#1b142b);
}
.ss-hero h1 { font-size: clamp(1.9rem,3vw,2.8rem); line-height: 1.15; margin: 10px 0 16px; }
.ss-hero p { max-width: 900px; line-height: 1.65; color: #e1d4ef; }
.ss-eyebrow { color: #d4afff; font-size: .72rem; font-weight: 800; letter-spacing: .13em; }
.ss-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-tags span { padding: 5px 10px; border-radius: 30px; border: 1px solid #73538c; background: #21162e; font-size: .8rem; }
.ss-hero-art { display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 100px; line-height: 1.1; color: #dbc0ff; text-shadow: 4px 4px #8052ba; transform: rotate(-5deg); }
.ss-hero-art small { margin-top: 12px; font: 700 10px/1.4 monospace; letter-spacing: .1em; text-shadow: none; }
.ss-switch { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.ss-switch a[aria-current] { border-color: #b58bdc; background: #4e2d6b; }
.ss-workspace { background: var(--ss-bg); border: 1px solid var(--ss-line); border-radius: 16px; overflow: hidden; }
.ss-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px; background: #2b203c; border-bottom: 1px solid var(--ss-line); }
.ss-spacer { flex: 1; }
.ss-file { position: relative; overflow: hidden; }
.ss-file input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ss-status { margin: 0; min-height: 45px; padding: 12px 18px; color: #dfcbff; background: #20172e; border-bottom: 1px solid #493459; line-height: 1.5; overflow-wrap: anywhere; }
.ss-status.is-error { color: #ffced9; background: #492036; }
.ss-body { display: grid; grid-template-columns: 280px minmax(0,1fr); }
.ss-settings { padding: 20px; background: #21182f; border-right: 1px solid var(--ss-line); }
.ss-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin-bottom: 13px; font-size: .82rem; color: #d5c7e5; }
.ss-field input, .ss-field select { min-height: 40px; width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid #6b4d82; border-radius: 7px; background: #160f21; color: #fbf6ff; }
.ss-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 10px; align-items: end; }
.ss-fields > button { margin-bottom: 13px; padding-inline: 8px; }
.ss-check { display: flex; align-items: center; gap: 8px; font-size: .8rem; line-height: 1.5; margin: 0 0 14px; cursor: pointer; }
.ss-check input { width: 16px; height: 16px; flex-shrink: 0; accent-color: #bc89f8; }
.ss-divider, .ss-settings details { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ss-line); }
.ss-settings summary { cursor: pointer; font-size: .9rem; padding-bottom: 14px; }
.ss-settings #ssBuild { width: 100%; }
.ss-main { min-width: 0; padding: 18px; }
.ss-view-grid { display: grid; grid-template-columns: minmax(0,1fr) 236px; gap: 18px; }
.ss-stage-panel, .ss-animation { min-width: 0; }
.ss-panel-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ss-panel-head h2, .ss-panel-head .ss-check { margin: 0; }
.ss-checker { background-color: #261e33; background-image: conic-gradient(#33283f 25%,transparent 0 50%,#33283f 0 75%,transparent 0); background-size: 20px 20px; }
.ss-sheet-wrap { position: relative; display: grid; place-items: center; min-height: 340px; max-height: 550px; overflow: auto; border: 1px solid #57436b; border-radius: 12px; padding: 16px; }
.ss-sheet-wrap.is-dragover { outline: 3px dashed #c699ff; outline-offset: -5px; }
.ss-sheet-wrap canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.ss-empty { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; padding: 20px; background: #21172fed; }
.ss-empty span { font-size: 65px; color: #c89af8; }
.ss-empty strong { margin: 12px 0; font-size: 1.2rem; }
.ss-empty p { color: var(--ss-muted); }
.ss-animation { padding: 14px; border-radius: 12px; background: #2a1e3a; border: 1px solid #57436b; }
.ss-player { height: 200px; display: grid; place-items: center; border-radius: 8px; margin-bottom: 12px; }
.ss-player canvas { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.ss-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ss-square { min-width: 40px; padding-inline: 8px !important; }
.ss-note { color: var(--ss-muted); font-size: .8rem; line-height: 1.65; margin: 10px 0 0; overflow-wrap: anywhere; }
.ss-animation .ss-field { margin-top: 12px; }
.ss-export { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; padding: 16px; margin: 18px 0; background: #332144; border: 1px solid #795598; border-radius: 12px; }
.ss-export p { margin: 4px 0 0; }
.ss-timeline { border: 1px solid #503b63; background: #241a31; padding: 16px; border-radius: 12px; }
.ss-timeline h2 span { font-size: .8rem; background: #503568; border-radius: 20px; padding: 3px 8px; margin-left: 5px; }
.ss-frame-list { display: flex; gap: 8px; overflow-x: auto; padding: 4px 3px 14px; min-height: 130px; scrollbar-color: #9b67cf #251b33; }
.ss-frame { display: flex !important; flex-direction: column; gap: 4px; flex: 0 0 94px; width: 94px; padding: 6px !important; font-size: .73rem !important; background: #1d142a !important; }
.ss-frame[aria-pressed="true"] { border: 2px solid #d0a0ff; background: #50316d !important; }
.ss-frame canvas { width: 68px; height: 68px; object-fit: contain; image-rendering: pixelated; }
.ss-frame span { display: block; max-width: 80px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ss-selection { display: grid; grid-template-columns: auto minmax(110px,1fr) 115px; gap: 12px; align-items: center; border-top: 1px solid var(--ss-line); padding-top: 12px; }
.ss-selection > span { font-size: .8rem; color: var(--ss-muted); }
.ss-selection .ss-field { margin: 0; }
.ss-selection .ss-actions { grid-column: 1/-1; }
.ss-guide { margin: 24px 0; padding: 24px; border: 1px solid #57436b; border-radius: 14px; background: #251a32; }
.ss-guide > div { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; line-height: 1.75; color: #e1d2ee; }
.ss-guide a { color: #d9b1ff; text-decoration: underline; }
.ss-workspace:fullscreen { overflow: auto; border-radius: 0; width: 100vw; height: 100dvh; }
@media (max-width: 1150px) {
  .ss-body { grid-template-columns: 250px minmax(0,1fr); }
  .ss-view-grid { grid-template-columns: minmax(0,1fr); }
  .ss-animation { display: grid; grid-template-columns: 150px 1fr; gap: 10px 18px; }
  .ss-animation h2 { grid-column: 1/-1; margin: 0; }
  .ss-player { grid-row: 2/6; height: 150px; }
  .ss-animation .ss-field, .ss-animation p, .ss-animation .ss-check { margin: 0; }
}
@media (max-width: 760px) {
  .ss-hero { grid-template-columns: 1fr; padding: 24px; }
  .ss-hero-art { display: none; }
  .ss-body { grid-template-columns: 1fr; }
  .ss-settings { border-right: 0; border-bottom: 1px solid var(--ss-line); }
  .ss-settings > .ss-fields { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .ss-main { padding: 12px; }
  .ss-sheet-wrap { min-height: 240px; }
  .ss-guide > div { grid-template-columns: 1fr; gap: 10px; }
  .ss-selection { grid-template-columns: 1fr 110px; }
  .ss-selection > span { grid-column: 1/-1; }
}
@media (max-width: 430px) {
  .ss-settings > .ss-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ss-animation { grid-template-columns: 115px minmax(0,1fr); gap: 10px; }
  .ss-player { height: 115px; }
  .ss button, .ss-file, .ss-switch a { font-size: .82rem; }
}
.ss-view-options { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.ss-view-options .ss-field { margin: 0; flex-direction: row; align-items: center; }
.ss-sheet-wrap { grid-template-columns: minmax(0,1fr); }
.ss-sheet-wrap canvas { margin-inline: auto; max-width: none; }
@media (max-width: 1150px) { .ss-animation > .ss-note:last-child { grid-column: 1/-1; } }