@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));
    --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);
    --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(40rem, 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}
  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="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}
  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}
  form > *:last-child   {margin:1em 0 0; text-align:center}

  .colour p                   {display:flex; gap:0.5rem; align-items:stretch; margin:0}
  .colour input[type="color"] {flex:0 0 3rem}
  .colour input[type="text"]  {flex:1 1 auto; max-width:8ch}

  .contrast                       {position:relative; margin:1.5rem 0 0; border:1px solid var(--border-fs); padding:1rem 1em 8rem}
  .contrast:last-of-type          {padding-bottom:5rem}
  .contrast       summary         {display:block; position:absolute; top:-0.75rem; left:0.5rem; padding:0 0.5rem; background:var(--body); font-size:min(4.5vw, 1rem)}
  .contrast       summary::before {display:inline-block; width:1.5em; height:1.5em; margin-right:0.5em; border:var(--summary-border); border-radius:50%; background:var(--summary-bg); text-align:center; content:"+"}
  .contrast[open] summary::before {content:"\2011"}
  .contrast li + li               {margin-top:1.5em}
  .contrast p                     {margin:0 0 1.5em}
  .contrast > *:last-child        {margin:0}
  .contrast + p:not([hidden])     {display:flex; flex-direction:column; gap:0.5rem; margin:-7rem 0 2rem 0.5rem; font-weight:600}
  .contrast:last-of-type + p      {margin:-4rem 0 3rem 0.5rem}
  .contrast + p > span            {display:inline-block; height:3rem; padding-left:4rem; background:none left center / 3rem no-repeat; line-height:3rem}
  .contrast + p > span.fail       {background-image:var(--fail-icon)}
  .contrast + p > span.pass       {background-image:var(--pass-icon)}

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

  #sample > div {position:relative; margin:1rem 0; border:1px solid var(--border); border-radius:0.5rem; padding:2rem 1rem; text-align:center}


  @supports (content:"foo" / "bar") {
    .contrast       summary::before {content:"+" / ""}
    .contrast[open] summary::before {content:"\2011" / ""}
  }


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


  @media (forced-colors:active) {
    button {border:1px solid}
  }


  @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%}

    .contrast                   {padding-bottom:5rem}
    .contrast + p:not([hidden]) {flex-direction:row; gap:1rem; margin:-4rem 0 3rem 0.5rem}
    .contrast + p > span        {flex:0 0 50%}

    .results > div {display:flex; gap:1rem; align-items:stretch}

    #sample         {flex:1 1 100%}
    #sample::before {display:block; font-weight:600; content:"Sample"}
    #sample > div   {margin:0}
  }

}