@font-face {
  font-family:  "Poppins";
  src:          url("./fonts/Poppins-Regular.woff2") format("woff2"), url("./fonts/Poppins-Regular.woff") format("woff");
  font-weight:  400;
  font-style:   normal;
  font-display: swap;
}

@font-face {
  font-family:  "Poppins";
  src:          url("./fonts/Poppins-SemiBold.woff2") format("woff2"), url("./fonts/Poppins-SemiBold.woff") format("woff");
  font-weight:  600;
  font-style:   normal;
  font-display: swap;
}


:root {
  --fonts: "Poppins","Open Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:  Consolas,"Courier New",monospaceg
}




@media screen {

  :root, :host {
    --alt-bg:        light-dark(#e0e0e0,    #222);
    --bg:            light-dark(#7ca7ba,    #111);
    --body:          light-dark(#fff,       #20283b);
    --border:        light-dark(#666,       #aaa);
    --border-fs:     light-dark(#6666661a,  #aaaaaa1a);
    --button-bg:     light-dark(#be4350,    #c04955);
    --button-text:   #fff;
    --fail:          light-dark(#900,       #eaa);
    --invalid:       light-dark(#900,       #eaa);
    --focus:         0.25rem solid light-dark(#46e, #e86);
    --input:         light-dark(#fff,    #3b3b3b);
    --help:          light-dark(#fbf3df, var(--bg));
    --kbd-bg:        light-dark(#ccc, #222);
    --kbd-border:    #999;
    --kbd-text:      var(--text);
    --knob:          light-dark(#172154, var(--text));
    --ok:            light-dark(#070, #aea);
    --pass:          light-dark(#070, #aea);
    --summary-bg:    light-dark(#efefef, transparent);
    --summary-border: 0;
    --text:          light-dark(#333, #ddd);
    --text-neg:      light-dark(#ddd, #333);
    --trough:        light-dark(#ccc,  #3f3f3f);
    --trough:        light-dark(#ccc, #3f3f3f);
    --fail-icon:     url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2216%22%20fill%3D%22%23be4350%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22m8%2C8l16%2C16m-16%2C0l16-16%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E");
    --inv-icon:      url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2016%2016'%3E%3Cpath%20d%3D'M0%2C15l7%2C-15%207%2C15z'%20fill%3D'%23a70606'%2F%3E%3C%2Fsvg%3E");
    --pass-icon:     url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2216%22%20fill%3D%22%23589056%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22m4%2C14l8%2C8%2014-14%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E");
  }

  :disabled {--border:light-dark(#ccc, #666); --text:light-dark(#ccc, #666)}

  output {--border:light-dark(#ccc, #444)}


  @media (prefers-color-scheme:dark) {
    :root,
    :host {
      --summary-border: 1px solid;
      --inv-icon:      url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2016%2016'%3E%3Cpath%20d%3D'M0%2C15l7%2C-15%207%2C15z'%20fill%3D'%23faa'%2F%3E%3C%2Fsvg%3E");
      --pass-icon:     url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2216%22%20fill%3D%22%23449b44%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22m4%2C14l8%2C8%2014-14%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E");
    }
  }




  :root {color-scheme:light dark; background-color:var(--bg); color:var(--text); font:100% / 1.5 var(--fonts)}
  body  {box-sizing:border-box; width:min(50rem, 95vw); margin:0; padding:1rem; background-color:var(--body)}

  *:focus-visible {outline:var(--focus); outline-offset:0.25rem}

  h1 {margin:0 0 0.67em; font-size:min(8vw, 2.25rem); font-weight:600; line-height:1.2}

  h1 + p {float:left; margin:0 2rem 1rem 0}

  kbd     {font-size:1em; font-family:var(--mono); white-space:nowrap}
  kbd kbd {border:medium outset var(--kbd-border); border-radius:0.25rem; padding:0.1rem 0.5rem; background:var(--kbd-bg); color:var(--kbd-text); font-family:var(--fonts)}
  small   {font-size:1em; font-weight:400}

  form                                {margin:0; padding:0}
  form > div                          {display:flex; flex-direction:column; align-items:center}
  form p                              {margin:0}
  form details p                      {margin:0 0 1.5rem}
  fieldset                            {margin:0 0 0.5rem; border:2px solid var(--border-fs); padding:0.5rem 1rem}
  legend                              {margin:0 0 0 -0.5rem; padding:0 0.5rem; font-weight:600}
  button                              {border:0}
  button[type="reset"]                {border-radius:0.75rem; padding:1.5rem 4.5rem; background:var(--button-bg); color:var(--button-text); font-size:1.5rem}
  button[name="swap"]                 {flex:0 0 auto; width:3rem; height:3rem; border-radius:50%; padding:0; line-height:0.75rem}
  button svg + span                   {position:fixed; left:-9999rem}
  input[type="checkbox"],
  input[type="radio"]                 {width:2rem; height:2rem; margin:0; border:1px solid var(--border); border-radius:0.25em; background:var(--input); color:var(--text); font:inherit; line-height:1}
  input[type="color"]                 {width:3rem; height:3rem; border:0.125rem solid var(--border); padding:0}
  input[type="number"],
  input[type="text"]                  {border:0.125rem solid var(--border); border-radius:0.25rem; padding:0.5rem; background:var(--input); color:var(--text); font:inherit}
  input:invalid                       {padding-right: 1.5rem; background: var(--inv-icon) right 0.5em center / 1em no-repeat; box-shadow: 0 0 0.125em 0 var(--invalid); color: var(--invalid)}
  label                               {display:flex; flex-direction:column; align-items:start; font-weight:600}
  label:has(> input[type="checkbox"]),
  label:has(> input[type="radio"])    {flex-direction:row; align-items:center; gap:0.5rem}
  label:has(> input[type="radio"])    {margin:0.5rem 0}
  output                              {flex:0 0 auto; width:3em; border:1px solid var(--border); border-radius:0.5rem; padding:0.5rem; background:var(--alt-bg); font-size:min(3rem, 12vw); text-align:right}
  select                              {border:0.125rem solid var(--border); border-radius:0.25rem; padding:0.5rem; background:var(--input); color:var(--text); font:inherit}
  form > *:last-child                 {margin:1em 0 0;         text-align:center}

  [title] {text-decoration:none}

  output.a                {color:var(--fail)}
  output.aa,
  output.aaa              {color:var(--ok)}
  label > abbr.a::after,
  label > span.a::after   {color:var(--fail); content:" [A]"}
  label > abbr.aa::after,
  label > span.aa::after  {color:var(--ok); content:" [AA]"}
  label > abbr.aaa::after,
  label > span.aaa::after {color:var(--ok); content:" [AAA]"}

  .colour                {display:flex; justify-content:space-between; align-items:start; gap:1rem}
  .colour > colour-field {flex:1 1 50%}
  .colour > button       {flex:0 0 3rem; width:3rem; height:3rem; align-self:center; padding:0; border-radius:50%; line-height:2rem}
  .colour > button span  {position:fixed; left:-9999rem}
  .colour > button svg   {width:2rem; height:2rem; vertical-align:middle}

  .help                            {margin:0; padding:1em}
  .help.graphic,
  .help.text                       {margin:1rem 0 0}
  .help[open]                      {border-bottom-left-radius:1rem; background-color:var(--help)}
  .help summary                    {margin:-1em; background:var(--body)}
  .help summary:focus-visible      {outline:0}
  .help summary:focus-visible span {outline:var(--focus); outline-offset:0.25rem}
  .help[open] summary              {margin-bottom:0}
  .help dl                         {margin:0 0 1.5rem}
  .help ol,
  .help p,
  .help ul                         {margin:1.5rem 0}
  .help ol li                      {margin:0 0 0.75rem}
  .help > *:last-child             {margin-bottom:0}

  body.no-graphic .graphic,
  body.no-text    .text    {display:none}

  .results > div     {display:flex; flex-direction:column; gap:1rem; align-items:center}
  .results > div > p {flex:0 0 auto}

  .switch:focus-within                           {outline:var(--focus); outline-offset:0.25rem}
  .switch *:focus-visible                        {outline:0}
  .switch p                                      {display:flex; align-items:center; margin:0}
  .switch label                                  {display:flex; flex-direction:row; align-items:center; margin:0 !important; gap:0 !important}
  .switch input[type="radio"]                    {appearance:none; flex:0 0 0; width:0 !important; height:1.5rem !important; margin:0; border:0 !important; padding:0}
  .switch label:first-child::after               {display:inline-block; width:3.5rem; height:2rem; margin:0 0.5rem; border:2px solid var(--border); border-radius:1rem / 50%; content:""}
  .switch label:last-child input::before         {display:inline-block; width:1.25rem; height:1.25rem; margin-left:-3.8rem; border-radius:50%; background:currentColor; vertical-align:-0.2rem; transition:margin-left 0.5s; content:""}
  .switch label:last-child input:checked::before {margin-left:-2.2rem}

fieldset.text div                  {display:flex; flex-wrap:wrap;  align-items:end; gap:1rem}
fieldset.text div p                {flex:0}
fieldset.text div label            {white-space:nowrap}
fieldset.text input[type="number"] {width:4rem}

  #sample                        {position:relative; margin:1rem 0; border:1px solid var(--border); border-radius:0.5rem; padding:2rem 1rem; text-align:center}
  body.no-text #sample           {height:2rem}
  body.no-text #sample span      {position:absolute; inset:2rem 25%; border-radius:0.5rem}
  body.no-text #sample span span {display:none}


  @media (prefers-color-scheme:dark) {
    input:invalid {box-shadow:none}
  }


  @media (forced-colors:active) {
    button                                 {border:1px solid}
    .switch label:last-child input::before {border:1px solid}
    #sample                                {display:none}
  }


  @media (width > 30em) {
    body       {margin:1rem auto; border-radius:1rem 1rem 0 1rem}
    form > div {flex-direction:row; justify-content:space-between; gap:1rem}
    fieldset   {flex:1 1 auto}

    .colour input[type="text"] {max-width:none; width:100%}

    .help dl        {display:grid; grid-template-columns:auto 1fr; gap:0.5rem 1rem}
    .help dd        {margin:0}
    .help dt::after {content:":"}

    .results > div     {flex-direction:row; gap:1rem; justify-content:space-between; align-items:stretch}
  }

}