/* Retro UI. Scope with .retro on any ancestor. One inset shadow paints each
   frame: highlight on the top-left, shade on the bottom-right. Raised and
   sunken swap those two. Dark mode keeps the drawing and replaces colours. */
.retro{
  --ro-white:#f0f0f0;
  --ro-blue:#0078d7;
  --ro-ink:#1b1b1b;
  --ro-ink-muted:#5a5a5a;
  --ro-accent:var(--ro-blue);

  --ro-font-bitmap:"Space Mono","Courier New",ui-monospace,monospace;
  --ro-font-ui:Oxanium,"Segoe UI",system-ui,-apple-system,sans-serif;
  --ro-size-body:14px;

  font-family:var(--ro-font-ui);
  font-size:var(--ro-size-body);
  color:var(--ro-ink);
}

.retro{
  --ro-pill:#b56e0f;
  --ro-page-bg:#fafafa;
  --ro-panel-bg:#eeeeee;
  --ro-panel-frame:#313131;
  --ro-frame:#313131;
  --ro-frame-input:#333333;
  --ro-field:#f5f5f5;
  --ro-input-face:#e4e4e4;
  --ro-input-focus:#a0a0a0;
  --ro-tick-face:#eeeeee;
  --ro-tick-on:#839eb3;
  --ro-header-line:#f4f4f4;
  --ro-chrome:#f2f2f2;
  --ro-chrome-ink:#626262;
  --ro-bevel-light:rgba(255,255,255,.75);
  --ro-bevel-dark:rgba(85,85,85,.5);
  --ro-cast:4px 4px 0 rgba(0,120,215,.25);
  --ro-cast-sm:2px 2px 0 rgba(0,120,215,.25);
  --ro-cast-thick:8px 8px 0 rgba(0,120,215,.25);
  --ro-raised-thin:inset -1px -1px 0 var(--ro-frame),inset 1px 1px 0 var(--ro-frame),inset -2px -2px 0 var(--ro-bevel-dark),inset 2px 2px 0 var(--ro-bevel-light);
  --ro-raised:inset -2px -2px 0 var(--ro-frame),inset 2px 2px 0 var(--ro-frame),inset -4px -4px 0 var(--ro-bevel-dark),inset 4px 4px 0 var(--ro-bevel-light);
  --ro-raised-thick:inset -3px -3px 0 var(--ro-frame),inset 3px 3px 0 var(--ro-frame),inset -6px -6px 0 var(--ro-bevel-dark),inset 6px 6px 0 var(--ro-bevel-light);
  --ro-raised-noline-thin:inset -1px -1px 0 var(--ro-bevel-dark),inset 1px 1px 0 var(--ro-bevel-light);
  --ro-raised-noline:inset -2px -2px 0 var(--ro-bevel-dark),inset 2px 2px 0 var(--ro-bevel-light);
  --ro-raised-noline-thick:inset -3px -3px 0 var(--ro-bevel-dark),inset 3px 3px 0 var(--ro-bevel-light);
  --ro-sunken:inset -2px -2px 0 var(--ro-frame-input),inset 2px 2px 0 var(--ro-frame-input),inset 4px 4px 0 var(--ro-bevel-dark),inset -4px -4px 0 var(--ro-bevel-light);
  --ro-btn-frame:#313131;
  --ro-btn-face:#a0a0a0;
  --ro-btn-face-light:#e4e4e4;
  --ro-btn-ink:#1b1b1b;
  --ro-btn-raised:inset -2px -2px 0 var(--ro-btn-frame),inset 2px 2px 0 var(--ro-btn-frame),inset -4px -4px 0 var(--ro-bevel-dark),inset 4px 4px 0 var(--ro-bevel-light);
  --ro-shadow-panel:var(--ro-cast);
  --ro-grid-line:rgba(125,125,125,.2);
  --ro-grid-size:45.06px;
  --ro-box-face:var(--ro-field);
  --ro-surface-sunken:#e4e4e4;
  --ro-success:#06bf5c;
  --ro-danger:#f06b6b;
  --ro-rule:#9a9995;
  --ro-ink-faint:#9a9a9a;
  --ro-well:#cfcfcf;
  --ro-strip:rgba(255,255,255,.5);
  --ro-note:rgba(217,217,217,.5);
  --ro-note-frame:#848484;
  --ro-inset-card:inset -1.5px -1.5px 0 #fff,inset 1.5px 1.5px 0 #9a9995,inset 3px 3px 0 rgba(255,255,255,.75),inset -3px -3px 0 #9a9995;
  --ro-font-code:"Space Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ro-code-chip:rgba(0,0,0,.06);
  --ro-code-ink:#1b1b1b;
  /* Syntax colours on the kit's light surfaces (VS Code Light+). */
  --ro-tok-kw:#0000ff;--ro-tok-fn:#795e26;--ro-tok-type:#267f99;--ro-tok-var:#001080;
  --ro-tok-str:#a31515;--ro-tok-com:#008000;--ro-tok-num:#098658;--ro-tok-bi:#267f99;
}

/* Page grid. */
.ro-grid-bg{position:relative;background:var(--ro-page-bg)}
.ro-grid-bg::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right,var(--ro-grid-line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--ro-grid-line) 1px,transparent 1px);
  background-size:var(--ro-grid-size) var(--ro-grid-size);
}
.ro-grid-bg > *{position:relative;z-index:1}

/* Large panel. The inset shadow is the frame. */
.ro-panel{
  display:flex;flex-direction:column;
  background:var(--ro-panel-bg);
  border:0;
  padding:6px;
  box-shadow:var(--ro-raised-thick),var(--ro-cast-thick);
}
.ro-panel--content{gap:0;padding:23px}

/* Button. The face span is only a label; the bevel lives on the button. */
.ro-bevel-btn{
  display:inline-flex;align-items:center;justify-content:center;
  box-sizing:border-box;height:36px;min-height:36px;padding:8px 14px;
  border:0;background:var(--ro-btn-face);
  box-shadow:var(--ro-btn-raised);
  font-family:var(--ro-font-bitmap);font-size:14px;font-weight:700;color:var(--ro-btn-ink);
  cursor:pointer}
.ro-bevel-btn__face{
  display:inline-flex;align-items:center;justify-content:center;gap:2px;
  min-height:0;padding:0;background:transparent;border:0;box-shadow:none;
  font:inherit;color:inherit;white-space:nowrap}
.ro-bevel-btn:active{box-shadow:var(--ro-sunken)}
.ro-bevel-btn:disabled,.ro-bevel-btn.is-disabled{cursor:not-allowed;opacity:.5}
.ro-bevel-btn--light{
  height:36px;min-height:36px;background:var(--ro-btn-face-light);gap:2px;
  font-family:var(--ro-font-ui);font-size:12px;font-weight:500;color:var(--ro-pill)}
.ro-bevel-btn--light .ro-bracket{color:var(--ro-accent)}

/* Input. Recessed: dark along the top and left, light along the bottom and right. */
.ro-bevel-input{
  display:flex;align-items:center;
  box-sizing:border-box;min-height:32px;padding:5px 7px;
  border:0;background:var(--ro-input-face);overflow:hidden;
  box-shadow:var(--ro-sunken)}
.ro-bevel-input__field{
  flex:1 1 auto;min-width:0;min-height:0;padding:0;
  background:transparent;border:0;box-shadow:none;
  font-family:var(--ro-font-bitmap);font-size:14px;color:var(--ro-ink-muted);outline:none}
.ro-bevel-input__field::placeholder{color:var(--ro-ink-muted)}
.ro-bevel-input:focus-within{background:var(--ro-input-focus);box-shadow:inset -2px -2px 0 var(--ro-frame-input),inset 2px 2px 0 var(--ro-frame-input),inset 4px 4px 0 var(--ro-bevel-dark),inset -4px -4px 0 rgba(255,255,255,.5)}
.ro-bevel-input:focus-within .ro-bevel-input__field,.ro-bevel-input.is-filled .ro-bevel-input__field{color:var(--ro-ink)}

/* Folder drop. Grey frame: 2px on the top and left, 1px on the right and bottom. */
.ro-dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;width:100%;height:auto;min-height:0;padding:30px 10px;background:rgba(217,217,217,.5);border-style:solid;border-color:#848484;border-width:2px 1px 1px 2px;box-shadow:none}
.ro-dropzone.hover{border-color:#313131}
.ro-dropzone__body,.ro-dropzone .box-body{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;min-height:0;padding:0;background:transparent;border:0;box-shadow:none}
.ro-dropzone__icon{width:35px;height:33px;margin:0;display:block;object-fit:contain}
.ro-dropzone .drop-title{margin:0;font-family:Oxanium,sans-serif;font-size:14.5px;font-weight:600;color:var(--ro-ink,#0c1421);line-height:normal}
.ro-dropzone .drop-sub{margin:0;font-family:Oxanium,sans-serif;font-size:12px;font-weight:400;color:#7d7d7d;line-height:normal}
.ro-dropzone .drop-buttons{display:flex;gap:10px;align-items:flex-start}
.ro-dropzone .ro-bevel-btn{box-sizing:border-box;width:auto;min-width:0;height:auto}
.ro-dropzone .ro-bevel-btn__face{min-height:0;height:auto;padding:0}

/* Tick. Empty is recessed; checked is raised on the blue face and draws an X. */
.ro-tick{box-sizing:border-box;display:inline-flex;width:21px;height:21px;flex:0 0 21px;padding:0;border:0;background:transparent}
.ro-tick .ro-tick-box{appearance:none!important;-webkit-appearance:none!important;accent-color:transparent!important;color-scheme:light;position:relative;width:21px;height:21px;margin:0!important;padding:0;border:0;border-radius:0!important;background:var(--ro-tick-face)!important;background-image:none!important;box-shadow:inset -2px -2px 0 var(--ro-frame),inset 2px 2px 0 var(--ro-frame),inset -4px -4px 0 var(--ro-bevel-light),inset 4px 4px 0 var(--ro-bevel-dark);cursor:pointer}
.ro-tick .ro-tick-box::before,.ro-tick .ro-tick-box::after{content:none}
.ro-tick .ro-tick-box:checked{background:var(--ro-tick-on)!important;box-shadow:var(--ro-raised)}
.ro-tick .ro-tick-box:checked::before,.ro-tick .ro-tick-box:checked::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:2px;background:#313131}
.ro-tick .ro-tick-box:checked::before{transform:translate(-50%,-50%) rotate(45deg)}
.ro-tick .ro-tick-box:checked::after{transform:translate(-50%,-50%) rotate(-45deg)}

/* Compact question-card kit. The review screen uses the smaller Figma
   controls so option rows stay dense without losing the retro bevel. */
.ro-tick--compact{width:16px;height:16px;flex:0 0 16px}
.ro-tick--compact .ro-tick-box{width:16px;height:16px;background:#eee!important;box-shadow:inset -2px -2px 0 #313131,inset 2px 2px 0 #313131,inset -4px -4px 0 rgba(255,255,255,.75),inset 4px 4px 0 rgba(85,85,85,.5)}
.ro-tick--compact .ro-tick-box:checked{background:#839eb3!important;box-shadow:inset -2px -2px 0 #313131,inset 2px 2px 0 #313131,inset -4px -4px 0 rgba(85,85,85,.5),inset 4px 4px 0 rgba(255,255,255,.75)}
.ro-tick--compact .ro-tick-box:checked::before,.ro-tick--compact .ro-tick-box:checked::after{width:10px;height:2px;background:#313131}

.ro-short-btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:auto;height:24px;min-height:24px;padding:7px 8px 9px;border:0;border-radius:var(--ro-radius,0);background:var(--ro-surface-sunken,#e4e4e4);color:var(--ro-ink-muted,#5a5a5a);box-shadow:inset -1.5px -1.5px 0 #5a5a5a,inset 1.5px 1.5px 0 #5a5a5a,inset -3px -3px 0 rgba(85,85,85,.5),inset 3px 3px 0 rgba(255,255,255,.75);font:400 12px/normal var(--ro-font-bitmap);letter-spacing:0;white-space:nowrap;cursor:pointer}
.ro-short-btn:hover{background:var(--ro-surface-sunken,#e4e4e4);color:var(--ro-ink-muted,#5a5a5a);box-shadow:inset -1.5px -1.5px 0 #5a5a5a,inset 1.5px 1.5px 0 #5a5a5a,inset -3px -3px 0 rgba(85,85,85,.5),inset 3px 3px 0 rgba(255,255,255,.75)}
/* Pressed: the bevel turns inward. `.is-on` is a chosen state (a decision),
   painted by a tone modifier; `.is-pressed` is a toggle that is on (e.g.
   "Show Original Code") and keeps the grey face. */
.ro-short-btn.is-on,.ro-short-btn.selected{font-weight:700;color:var(--ro-ink);box-shadow:inset -1.5px -1.5px 0 #313131,inset 1.5px 1.5px 0 #313131,inset 3px 3px 0 rgba(85,85,85,.5),inset -3px -3px 0 rgba(255,255,255,.75)}
.ro-short-btn.is-pressed,.ro-short-btn.is-pressed:hover{background:var(--ro-btn-face);box-shadow:inset 1.5px 1.5px 0 #5a5a5a,inset -1.5px -1.5px 0 #5a5a5a,inset 3px 3px 0 rgba(85,85,85,.5),inset -3px -3px 0 rgba(255,255,255,.75)}
.ro-short-btn.is-on.ro-tone-success,.ro-short-btn.is-on.ro-tone-success:hover{background:var(--ro-success)}
.ro-short-btn.is-on.ro-tone-accent,.ro-short-btn.is-on.ro-tone-accent:hover{background:var(--ro-accent)}
.ro-short-btn.is-on.ro-tone-danger,.ro-short-btn.is-on.ro-tone-danger:hover{background:var(--ro-danger)}
.ro-short-btn.is-on.ro-tone-neutral,.ro-short-btn.is-on.ro-tone-neutral:hover{background:var(--ro-btn-face)}
.ro-short-btn:disabled{opacity:.5;cursor:default}

/* A 1px rule that fills the rest of a row: card headers draw one between
   the title and their buttons. */
.ro-rule{flex:1 1 auto;min-width:12px;height:1px;background:var(--ro-rule)}
/* A label sitting on a rule: --- Cell 1 ---------------------------------- */
.ro-rule-label{display:flex;align-items:center;gap:6px;color:var(--ro-ink-faint);font:400 12px/1 var(--ro-font-ui)}
.ro-rule-label::before{content:"";flex:0 0 14px;height:1px;background:var(--ro-rule)}
.ro-rule-label::after{content:"";flex:1 1 auto;height:1px;background:var(--ro-rule)}

/* A card inside a panel: a soft bevel with no dark frame. */
.ro-inset-card{background:var(--ro-panel-bg);box-shadow:var(--ro-inset-card)}
/* A sunken field: the grey well an editable value sits in. */
.ro-sunken-field{box-sizing:border-box;border:0;border-radius:0;background:var(--ro-well);color:var(--ro-ink);box-shadow:var(--ro-sunken);outline:0}
/* A pale strip for secondary content (evidence, explanations, cell headers). */
.ro-strip{background:var(--ro-strip)}
/* <Label> in the accent brackets. */
.ro-tag{display:inline-flex;align-items:center;white-space:nowrap;color:var(--ro-pill);font:400 12px/15px var(--ro-font-ui)}
.ro-tag::before{content:"<";color:var(--ro-accent)}
.ro-tag::after{content:">";color:var(--ro-accent)}
/* A disclosure row: a chevron that turns when open. Used on <summary>. */
.ro-disclosure{display:flex;align-items:center;gap:7px;min-width:0;padding:0 5px;color:var(--ro-ink-faint);cursor:pointer;list-style:none}
.ro-disclosure::-webkit-details-marker{display:none}
.ro-disclosure::before{content:"";flex:0 0 8px;width:8px;height:12px;background:currentColor;
  -webkit-mask:url("/static/assets/to_right.svg") center/contain no-repeat;mask:url("/static/assets/to_right.svg") center/contain no-repeat;transition:transform .12s}
details[open]>.ro-disclosure::before{transform:rotate(90deg)}
/* A one-line note field (review comments). */
.ro-note-field{box-sizing:border-box;display:block;width:100%;min-height:30px;padding:8px 10px;border:0;border-radius:0;
  background:var(--ro-note);color:var(--ro-ink-muted);box-shadow:inset 2px 2px 0 var(--ro-note-frame),inset -1px -1px 0 var(--ro-note-frame);
  font:400 12px/14px "Mozilla Text",var(--ro-font-ui);resize:vertical;outline:0}
.ro-note-field::placeholder{color:var(--ro-ink-muted);opacity:1}

.ro-section-label{font-family:var(--ro-font-ui);font-size:14px;font-weight:600;color:var(--ro-accent)}

/* Dark mode. Same bevel, darker surfaces. */
html.dark .retro,[data-theme="dark"] .retro{
  --ro-page-bg:#16181c;
  --ro-panel-bg:#22262c;
  --ro-panel-frame:#0c0d10;
  --ro-frame:#0c0d10;
  --ro-frame-input:#0c0d10;
  --ro-field:#2a2f36;
  --ro-input-face:#1a1d22;
  --ro-input-focus:#3c424b;
  --ro-tick-face:#22262c;
  --ro-tick-on:#6f93ab;
  --ro-header-line:#343a44;
  --ro-chrome:#2a2f36;
  --ro-chrome-ink:#c5ccd6;
  --ro-bevel-light:rgba(255,255,255,.2);
  --ro-bevel-dark:rgba(0,0,0,.55);
  --ro-cast:4px 4px 0 rgba(0,120,215,.25);
  --ro-cast-sm:2px 2px 0 rgba(0,120,215,.25);
  --ro-cast-thick:8px 8px 0 rgba(0,120,215,.25);
  --ro-btn-frame:#0c0d10;
  --ro-btn-face:#3c424b;
  --ro-btn-face-light:#2a2f36;
  --ro-btn-ink:#f3f4f6;
  --ro-pill:#e0a15a;
  --ro-ink:#f3f4f6;
  --ro-ink-muted:#9aa3b2;
  --ro-grid-line:rgba(255,255,255,.06);
  --ro-surface-sunken:#2a2f36;
  --ro-rule:#4a515c;
  --ro-ink-faint:#8a93a0;
  --ro-well:#1a1d22;
  --ro-strip:rgba(255,255,255,.04);
  --ro-note:rgba(255,255,255,.05);
  --ro-note-frame:#0c0d10;
  --ro-inset-card:inset -1.5px -1.5px 0 rgba(255,255,255,.12),inset 1.5px 1.5px 0 #0c0d10,inset 3px 3px 0 rgba(255,255,255,.06),inset -3px -3px 0 #0c0d10;
  --ro-code-chip:rgba(255,255,255,.08);
  --ro-code-ink:#e6e9f0;
  /* VS Code Dark+. */
  --ro-tok-kw:#569cd6;--ro-tok-fn:#dcdcaa;--ro-tok-type:#4ec9b0;--ro-tok-var:#9cdcfe;
  --ro-tok-str:#ce9178;--ro-tok-com:#6a9955;--ro-tok-num:#b5cea8;--ro-tok-bi:#4ec9b0;
}


/* Header and the Step 1 controls that reuse these faces. */
.ro-header{display:flex;align-items:center;gap:16px;min-height:59px;padding:12px 24px;background:var(--ro-page-bg);border-bottom:1px solid var(--ro-header-line)}
.ro-brand{margin:0;font-family:"Mozilla Text",var(--ro-font-ui);font-size:18px;font-weight:600;color:var(--ro-ink)}
.ro-brand a{color:inherit;text-decoration:none}
.ro-brand__subtitle{font-family:"Mozilla Text",var(--ro-font-ui);font-size:13px;font-weight:400;color:var(--ro-ink-muted)}
.ro-theme-toggle{width:60px;height:32px;margin-left:auto;display:flex;align-items:center;justify-content:center;gap:4px;padding:0;border:0;border-radius:0;background:var(--ro-chrome);color:var(--ro-ink)}
.ro-theme-toggle .seg{position:relative;width:24px;height:24px;display:flex;align-items:center;justify-content:center;padding:0;background:transparent}
.ro-theme-toggle .seg.active{background:transparent;box-shadow:none}
.ro-theme-toggle .seg.active::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:.55;
  background:rgba(233,190,111,.35);
  box-shadow:inset -2px -2px 0 rgba(85,85,85,.5),inset 2px 2px 0 rgba(255,255,255,.75)}
.ro-theme-toggle .theme-icon{position:relative;z-index:1}
html.dark .ro-theme-toggle .seg.active::before,
[data-theme="dark"] .ro-theme-toggle .seg.active::before{
  opacity:1;background:rgba(62,129,177,.15);
  box-shadow:inset -2px -2px 0 rgba(17,17,17,.5),inset 2px 2px 0 rgba(255,255,255,.1)}
.ro-header__action{box-sizing:border-box;width:100px;height:32px;padding:0 11px;border:0;border-radius:0;background:var(--ro-chrome);color:var(--ro-chrome-ink);font:500 12px "Mozilla Text",var(--ro-font-ui);letter-spacing:0;box-shadow:var(--ro-btn-raised);cursor:pointer}
#newProject .url-wrap.ro-bevel-input{height:32px;border:0;padding:5px 7px;background:var(--ro-input-face);box-shadow:var(--ro-sunken)}
#newProject .url-wrap.ro-bevel-input .ro-bevel-input__field{min-height:0;padding:0;background:transparent;border:0;box-shadow:none;font-family:var(--ro-font-bitmap);font-size:14px;color:var(--ro-ink-muted);outline:none}
#newProject .actions button.fig-skip{box-sizing:border-box;width:fit-content;min-width:0;height:36px;min-height:36px;padding:8px 14px;border:0;background:var(--ro-btn-face);color:var(--ro-btn-ink);box-shadow:var(--ro-btn-raised);font-family:var(--ro-font-bitmap);font-size:14px;font-weight:700;letter-spacing:0}
#newProject .consent.ro-consent{display:flex;flex-direction:column;gap:6px;min-height:0;padding:10px 2px;background:transparent;border:0;font:12px/14px var(--ro-font-ui)}
#newProject .consent.ro-consent label{gap:10px!important;align-items:center}
#newProject .consent.ro-consent label>span:last-child{line-height:14px;transform:translateY(-1px)}
#newProject .ro-tick{margin-top:1px}
#linkStep .ro-project-panel{display:flex;flex-direction:column;gap:10px}
#linkStep .ro-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
#linkStep ul.ro-list li.ro-list-row{display:flex;align-items:center;gap:10px;min-height:34px;padding:8px 10px;background:var(--ro-panel-bg);border:0;box-shadow:var(--ro-raised-noline);font-family:var(--ro-font-ui)}
#linkStep ul.ro-list li.ro-list-row>span:first-child{flex:1;min-width:0;color:var(--ro-ink);font-size:13.5px}
#linkStep ul.ro-list li.ro-list-row>span:nth-child(2){color:var(--ro-ink-muted);font-size:12.5px;white-space:nowrap}
#linkStep ul.ro-list li.ro-list-row .project-delete{width:16px;height:16px;padding:0;background:transparent;color:var(--ro-ink-muted);font-size:16px;line-height:1}

/* Code in the kit: the file's own language colours (rich-text.js highlight)
   on a light or dark surface. */
.ro-code{color:var(--ro-ink);font-family:var(--ro-font-code)}
.ro-code .tok-kw{color:var(--ro-tok-kw)}.ro-code .tok-fn{color:var(--ro-tok-fn)}
.ro-code .tok-type,.ro-code .tok-bi,.ro-code .tok-dec{color:var(--ro-tok-type)}
.ro-code .tok-var{color:var(--ro-tok-var)}.ro-code .tok-str{color:var(--ro-tok-str)}
.ro-code .tok-com{color:var(--ro-tok-com);font-style:italic}.ro-code .tok-num{color:var(--ro-tok-num)}
/* Dark drop zone: same shape as light, only a darker well and an edge that reads on it. */
[data-theme="dark"] .ro-dropzone{background:var(--ro-well,#1a1d22);border-color:#6b7380}
[data-theme="dark"] .ro-dropzone.hover{border-color:#c5ccd6}
[data-theme="dark"] .ro-dropzone .drop-sub{color:var(--ro-ink-muted,#9aa3b2)}