:root {
  --ink: #241f35;
  --muted: #655f71;
  --line: #e1dce9;
  --paper: #f8f7fb;
  --lavender: #eae4fa;
  --purple: #543693;
  --orange: #f18a61;
  color: var(--ink);
  background: var(--paper);
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}
* {box-sizing: border-box}
body {margin: 0}
button, input, select, textarea {font: inherit; color: inherit}
button, select, summary {cursor: pointer}
button {border: 0}
button:disabled, fieldset:disabled button {cursor: wait; opacity: .65}
button:focus-visible, a:focus-visible, summary:focus-visible, select:focus-visible,
input:focus-visible, textarea:focus-visible, [tabindex="-1"]:focus-visible {outline: 3px solid #8464bb; outline-offset: 3px}
button, select {touch-action: manipulation}
h1, h2, h3, h4, p, ul {margin: 0}
h1, h2, h3 {line-height: 1.12; letter-spacing: -.045em}
h1 {font-size: clamp(2.75rem, 5vw, 4.5rem); font-weight: 640}
h2 {font-size: 1.6rem; font-weight: 650}
h3 {font-size: 1.2rem; font-weight: 660}
h4 {font-size: .9rem; line-height: 1.4; font-weight: 670}
small, .note {color: var(--muted); font-size: .84rem}
.wrap {width: min(1240px, calc(100% - 88px)); margin: 0 auto}
.sr-only, .skip:not(:focus) {position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.skip:focus {position:absolute; z-index:10; background:white; padding:10px 18px}
.header {background: #fff; border-bottom: 1px solid var(--line)}
.topbar {min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 20px}
.brand {display:flex; align-items:center; gap:8px; font-size:1.36rem; font-weight:730; letter-spacing:-.065em}
.brand-mark {position:relative; flex:none; display:block; width:31px; height:30px; margin-right:3px}
.brand-mark::before, .brand-mark::after {content:""; position:absolute; width:20px; height:23px; border-radius:5px 5px 5px 0; transform:skew(-9deg)}
.brand-mark::before {left:2px; top:7px; background:var(--orange)}
.brand-mark::after {left:8px; top:1px; background:var(--purple); clip-path: polygon(0 0,100% 0,100% 77%,45% 77%,0 100%)}
.studio {border-left:1px solid var(--line); margin-left:5px; padding-left:13px; color:var(--muted); font-size:.85rem; font-weight:550; letter-spacing:0}
.identity, .actions {display:flex; align-items:center; flex-wrap:wrap; gap:10px}
.actor-name {color:var(--muted); font-size:.88rem}
.quiet {padding:8px 14px; background:transparent; border:1px solid var(--line); border-radius:8px; font-size:.83rem; font-weight:610}
.quiet:hover, .button.secondary:hover {background:#f2eff7; border-color:#afa3c1}
.demo {display:flex; align-items:center; gap:9px; color:var(--muted); font-size:.78rem; font-weight:570; letter-spacing:.005em}
.dot {width:7px; height:7px; display:block; border-radius:50%; background:#a65730}
.demo-rule {width:1px; height:12px; background:#c3bacc}
.login {min-height: min(760px, calc(100vh - 79px)); display:grid; grid-template-columns:minmax(270px, 0.95fr) minmax(260px, 1fr); gap:clamp(32px, 6vw, 96px); align-items:center; padding:68px 0}
.login-copy {max-width:505px}
.login h1 {margin:22px 0 12px; font-size:clamp(3.2rem,6vw,5.7rem); line-height:.98; letter-spacing:-.07em}
.lede {max-width:440px; color:var(--muted); font-size:1.09rem; line-height:1.6}
.login-form {margin-top:32px; max-width:420px; display:grid; gap:18px}
.field {display:grid; gap:6px}
.field label {font-size:.87rem; font-weight:665}
.field input, .field textarea, .scope select {border:1px solid #b9b1c6; border-radius:8px; background:#fff; padding:10px 12px; width:100%; min-width:0}
.field input[type=file] {font-size:.88rem; padding:8px}
.field input::file-selector-button {border:0; background:#ede8f7; color:var(--ink); font-weight:600; padding:6px 10px; border-radius:4px; margin-right:10px}
.field textarea {resize:vertical}
.button {padding:10px 16px; border:1px solid var(--line); border-radius:8px; font-weight:630; font-size:.9rem; line-height:1.4; min-height:42px}
.button.primary {background:var(--purple); border-color:var(--purple); color:#fff}
.button.primary:hover {background:#432875; border-color:#432875}
.button.secondary {background:white; color:var(--ink)}
.login-form .primary {justify-self:start; padding:12px 22px}
.proof-art {position:relative; isolation:isolate; height:clamp(340px, 37vw, 491px); overflow:hidden; border-radius:24px; background:#ded8ed}
.proof {position:absolute; width:55%; aspect-ratio: .8; left:22%; top:13%; border-radius:7px; background:white; box-shadow:0 6px 18px #3623481a}
.p1 {background:#f4ad8d; transform:translate(-8%, 1%) rotate(-14deg)}
.p2 {background:#f8f7f8; transform:translate(4%, 1%) rotate(10deg)}
.cover {border:11px solid #fff; border-bottom-width:24px; transform:rotate(-4deg); background:#7764a7; overflow:hidden}
.proof-sun {position:absolute; background:#ffbb8e; border-radius:50%; width:36%; aspect-ratio:1; top:15%; left:45%}
.proof-ridge {position:absolute; width:145%; height:75%; left:-45%; bottom:-19%; border-radius:55% 55% 0 0; transform:rotate(19deg); background:#9e8ec0}
.proof-ridge.second {left:10%; bottom:-35%; background:#423664; transform:rotate(-19deg)}
.main {padding:40px 0 64px}
.page-heading {display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:30px}
.page-heading h1 {margin-top:11px}
.scope {display:grid; gap:3px; text-align:right; max-width:330px}
.scope select {font-weight:620; padding-right:28px}
.work-grid {display:grid; grid-template-columns: minmax(235px, .42fr) minmax(0,1fr); gap:22px; align-items:start}
.panel {background:white; border:1px solid var(--line); border-radius:15px}
.queue {overflow:hidden}
.queue-head {padding:21px 20px 16px}
.panel-title, .detail-title {display:flex; align-items:center; gap:10px}
.panel-title h2 {font-size:1.2rem; letter-spacing:-.035em}
.count {color:var(--muted); font-size:.76rem; font-weight:650; background:#f0edf4; border-radius:6px; padding:1px 7px}
.queue-head small {display:block; margin-top:6px}
.refresh, .sample-feedback {background:transparent; color:var(--purple); font-size:.84rem; font-weight:620; text-decoration:underline; text-underline-offset:3px}
.refresh {margin:0 14px 10px; padding:4px 6px}
.sample-feedback {justify-self:start; padding:4px 0}
.refresh:hover, .sample-feedback:hover {color:var(--ink)}
.queue-item {display:flex; width:100%; align-items:center; justify-content:space-between; gap:10px; padding:13px 17px; border-top:1px solid #eeebf2; border-left:3px solid transparent; background:#fff; text-align:left}
.queue-item:hover {background:#f8f6fb}
.queue-item[aria-current=true] {background:#f1edf9; border-left-color:var(--purple)}
.queue-item b {display:block; font-size:.94rem; margin-bottom:4px}
.queue-item .status {font-size:.74rem; padding:0; background:transparent}
.chevron {font-size:1.45rem; color:#7b6d8c}
.queue-empty {padding:12px 20px 20px; font-size:.9rem; color:var(--muted)}
.status {display:inline-flex; align-items:center; gap:6px; border-radius:99px; padding:4px 9px; color:#554d62; background:#efecf3; font-size:.75rem; line-height:1.3; font-weight:600}
.status::before {content:""; flex:none; width:6px; height:6px; border-radius:50%; background:currentColor}
.s-awaiting_approval, .s-qa_pending {color:#564081; background:#efe8fc}
.s-qa_failed, .s-qa_hold, .s-schedule_blocked, .s-revision_requested {color:#96522a; background:#fdf0df}
.s-approved, .s-queued, .s-simulated {color:#26654f; background:#e2f2e9}
.detail {padding:clamp(20px, 3vw, 34px); min-width:0}
.detail-head {padding-bottom:21px; border-bottom:1px solid var(--line)}
.detail-meta, .detail-date {color:var(--muted); font-size:.85rem}
.detail-meta span:first-child {font-weight:610}
.detail-title {flex-wrap:wrap; justify-content:space-between; margin:6px 0}
.detail-title h2 {font-size:clamp(1.55rem, 3.5vw, 2.2rem)}
.section {margin-top:24px}
.section > h3 {margin-bottom:13px}
.brief {margin:17px 0 0; border:1px solid var(--line); border-radius:8px; background:#fbfafc}
.brief summary {padding:10px 12px; font-weight:620; font-size:.86rem}
.brief-body {display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%, 220px),1fr)); gap:16px; padding:3px 14px 14px}
.brief ul, .quality ul {padding-left:18px; margin-top:4px}
.brief li, .quality li {font-size:.87rem}
.form-fields {border:none; display:grid; gap:15px; margin:0; padding:0; min-width:0}
.form-fields > .button {justify-self:start}
.demo-samples {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:13px 14px; background:#f4f0fa; border-radius:8px}
.demo-samples .button {padding:6px 9px; min-height:36px; font-size:.8rem}
.chosen-preview:empty {display:none}
.chosen-preview {display:flex; align-items:center; gap:10px; color:var(--muted); font-size:.84rem; overflow-wrap:anywhere}
.chosen-preview img {width:62px; aspect-ratio:1; object-fit:contain; border:1px solid var(--line); border-radius:5px}
.submission {display:grid; grid-template-columns:minmax(0, 1.03fr) minmax(0, 1fr); align-items:start; background:#faf9fb; border:1px solid var(--line); border-radius:10px; overflow:hidden}
.preview {background:#ebe7ef; min-width:0; display:grid}
.preview img {width:100%; max-height:480px; object-fit:contain; align-self:center}
.caption {padding:18px; overflow-wrap:anywhere}
.caption p, .feedback p, .quality p {margin-top:5px; white-space:pre-wrap; font-size:.94rem}
.tags {color:var(--purple); font-size:.85rem!important}
.quality, .feedback {padding:12px 14px; border-radius:8px; margin-top:13px}
.quality.good {background:#e9f3ec; color:#25523c}
.quality.attention {background:#fff1df; color:#6e4625}
.quality small {display:block; margin-top:5px}
.feedback {background:var(--lavender)}
.schedule-list, .history .history-list {padding:0; list-style:none; margin:8px 0 0}
.schedule-list li, .history-list li {display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:10px 0; border-top:1px solid var(--line); font-size:.86rem}
.history-list li {margin:0 14px}
.history-list p {flex-basis:100%}
.loading, .empty {padding-top:40px; padding-bottom:40px}
.empty {padding-inline:22px}
.empty p {margin-top:8px}
.error {color:#852d35; background:#ffedf0; border-radius:8px; padding:10px 12px; margin-top:10px; font-size:.91rem}
.detail, .queue-item, .brief, .schedule-list {overflow-wrap:anywhere}
@media (max-width: 850px) {
  .wrap {width:calc(100% - 40px)}
  .work-grid {grid-template-columns:minmax(200px,.4fr) minmax(0,1fr); gap:14px}
  .submission {grid-template-columns:1fr}
  .preview img {max-height:345px}
  .login {gap:32px}
}
@media (max-width: 680px) {
  .wrap {width:calc(100% - 30px)}
  .topbar {min-height:59px}
  .actor-name {max-width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .login {grid-template-columns:1fr; min-height:0; padding:40px 0; gap:34px}
  .login-copy {max-width:none}
  .proof-art {height:170px}
  .proof {width:30%; left:35%; top:4%}
  .main {padding-top:23px}
  .page-heading {display:grid; gap:14px; margin-bottom:18px}
  .scope {text-align:left}
  .work-grid {grid-template-columns:minmax(0,1fr)}
  .queue nav {max-height:170px; overflow-y:auto}
  .queue-head {padding:12px 15px}
  .queue-item {padding:9px 13px}
  .queue-item > span:first-child {display:flex; flex-wrap:wrap; align-items:center; gap:8px}
  .queue-item b {margin:0}
  .panel {border-radius:11px}
  .detail {padding:17px}
  .demo-samples {padding:11px}
}
@media (max-width: 365px) {
  .actor-name {display:none}
  .demo {font-size:.7rem; gap:5px}
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {scroll-behavior:auto!important}
}