@font-face{font-family:--font-main;src:url(./suite-400.woff2)format('woff2');font-weight:400;font-display:swap}@font-face{font-family:--font-main;src:url(./suite-700.woff2)format('woff2');font-weight:700;font-display:swap}@font-face{font-family:--font-icon;src:url(./icon.woff)format('woff')}@layer icons{[class*="icon-"]::before {
    font-family: --font-icon;
    content: var(--_icon);
  }

  [class*="icon-"]:not(:has(> span))::before {
    content: var(--_icon) " ";
  }

  [class*="icon-"] > span {
    position: absolute;
    right: 200vw;
  }

  .icon-duplicate {
    --_icon: "\e904";
  }

  .icon-play {
    --_icon: "\e900";
  }

  .icon-stop {
    --_icon: "\e901";
  }

  .icon-x-circle {
    --_icon: "\e902";
  }

  .icon-edit {
    --_icon: "\e903";
  }
}@layer theme{:root {
    color-scheme: light dark;
    
    --l-bg: 100%;
    --l-50: 96%;
    --l-100: 94%;
    --l-200: 85%;
    --l-300: 75%;
    --l-400: 65%;
    --l-500: 55%;
    --l-600: 45%;
    --l-700: 40%;
    --l-800: 35%;
    --l-900: 30%;

    --gray: 0 0;
    --yellow: 0.03 93;
    --highlight: 0.16 270;
    --color-foot-base: 0.18 40;
    
    --color-bg-section: oklch(var(--l-50) var(--gray)); 
    
    --container-width: min(92vw, 80rem);
  }
  
  @media (prefers-color-scheme: dark) {
    :root {
      --l-bg: 20%;
      --l-50: 22%;
      --l-100: 25%;
      --l-200: 30%;
      --l-300: 35%;
      --l-400: 40%;
      --l-500: 45%;
      --l-600: 50%;
      --l-700: 55%;
      --l-800: 60%;
      --l-900: 75%;
      
      --highlight: 0.1 270;
      --color-foot-base: 0.15 70;
    }
  }
}@layer global{* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html, body {
    block-size: 100%;
  }
  
  body {
    font-family: --font-main, system-ui;
    line-height: 1.5;
    background-color: oklch(var(--l-bg) var(--gray));
  
    --participants: 2;
    --comp-scale: 0.8;
    --cell: 2.4rem;
  }

  [disabled] {
    cursor: not-allowed;
  }
  
  ul {
    list-style: none;
  }

  fieldset {
    border: none;
  }  
  
  input, button, textarea {
    font: inherit;
    color: inherit;
  }
  
  button {
    border: none;
    cursor: pointer;
    padding-inline: 0.8em;
    padding-block: 0.28em;
    background-color: oklch(var(--l-200) var(--gray));
  }

  button:disabled {
    background-color: oklch(var(--l-100) var(--gray));
    color: oklch(var(--l-900) var(--gray));
  }
  
  button:not(:disabled):hover {
    background-color: oklch(var(--l-300) var(--gray));
  }  
  
  :is(input:not([type="checkbox"]), textarea) {
    border-radius: 0;
    padding-block: 0.2rem;
    padding-inline: 0.4rem;
    border: 1px solid oklch(var(--l-300) var(--gray));
    background-color: oklch(var(--l-100) var(--gray));
  }

  input[type="checkbox"] {
    inline-size: 1em;
    block-size: 1em;
  }

  label:has([type="checkbox"]) {
    display: flex;
    gap: 0.28em;
    align-items: center;
  }
  
  dialog {
    --_dialog-mobile-width: 92vw;
    margin: auto;
    border: none;
    inline-size: min(var(--_dialog-mobile-width), 36rem);
    background-color: var(--color-bg-section);
  }
  
  dialog > form {
    min-block-size: 24rem;
    display: flex;
    flex-direction: column;
    padding-block: 1rem;
    padding-inline: clamp(1rem, 3.2vw, 1.6rem);
  }

  dialog > form > header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block-end: clamp(1rem, 3.2vw, 1.6rem);
  }

  dialog > form fieldset {
    display: grid;
    gap: 1.2rem;
  }

  dialog > form label:not(:has([type="checkbox"])) {
    display: grid;
    gap: 0.4rem;
    max-inline-size: 16rem;
  }

  dialog > form label:has([type="number"]) {
    max-inline-size: 6rem;
  }

  dialog > form > footer {
    margin-block-start: auto;
    padding-block-start: clamp(1rem, 3.2vw, 1.6rem);
  }

  dialog button[value="close"] {
    background-color: transparent;
  }

  dialog button[value="close"]:hover {
    background-color: oklch(var(--l-200) var(--gray));
  }
}@layer components{.block {
    --width: 4;
    --cell-count-x: calc(var(--width) + 2);
    --cell-count-y: calc(var(--participants) * 2 + 4);
  
    position: relative;
    inline-size: calc(var(--cell) * var(--cell-count-x));
    block-size: calc(var(--cell) * var(--cell-count-y));
    background-color: oklch(var(--l-200) var(--gray));
    box-shadow: inset 0 0 0 var(--cell) oklch(var(--l-100) var(--gray));
    overflow: hidden;
    font-size: calc(var(--cell) * 0.4);
  }
  
  .block > * {
    position: absolute;
    left: 0;
    top: 0;
  }
  
  .block .stick {
    display: grid;
    place-items: center;
    --_stick-width: calc(var(--cell) * 0.4);
    block-size: 100%;
    inline-size: var(--_stick-width);
    background-color: oklch(var(--l-600) var(--gray));
    translate: clamp(0rem, calc(var(--cell) * (var(--x) + 1) - var(--_stick-width) * 0.5), calc(var(--cell) * (var(--width) + 2) - var(--_stick-width)));
    color: #fff;
  }
  
  .block .foot {
    display: grid;
    grid-template-rows: 1fr 1fr;
    place-items: center;
    inline-size: calc(var(--cell) * var(--comp-scale));
    block-size: calc(var(--cell) * 2 * var(--comp-scale));
    translate:
      calc(var(--cell) * var(--x) + var(--cell) * (1 - var(--comp-scale)) * 0.5)
      calc(var(--cell) * var(--y) + var(--cell) * (1 - var(--comp-scale)) * 0.5 - (1 - var(--floor, 1)) * var(--cell) * 0.1);
    rotate: var(--angle);
    transform-origin: 50% 75%;
    background-color: oklch(var(--l-400) var(--color-foot-base));
    border-radius: 0.6em;
    color: #fff;
    font-size: 1.2em;
    opacity: calc(var(--floor) * 0.6 + 0.4);
  }
  
  .block .foot span {
    grid-row: 2;
  }
}body{display:grid;grid-template-rows:auto 1fr auto}body>:is(header,main,footer){inline-size:var(--container-width);margin-inline:auto}.main-header{padding-block:1rem}.main-header h1{font-size:1.6rem}.main-header nav{margin-block-start:.4rem}.main-header ul{display:flex;gap:.6rem}.main-footer{padding-block:1.6rem;text-align:center}main{border-block:1px solid oklch(var(--l-300) var(--gray));padding-block:2rem}main.no-project{padding-block:3.2rem;display:grid;justify-items:center;align-content:start;font-size:1.125rem}main.no-project button{margin-block-start:1rem}main.project>header{display:flex;align-items:center;gap:2rem}main.project>header label{display:flex;align-items:center;gap:.6rem}main.project>header input{max-inline-size:4rem}.s-step-navigation{margin-block:1rem}.s-step-navigation ul:not(:empty){display:flex;gap:.4rem;padding:.8rem;overflow:auto;background-color:var(--color-bg-section)}.s-step-navigation ul button{padding:2rem;min-inline-size:12ch;block-size:100%}.s-step-navigation>button{margin-block-start:.6rem}.no-step{margin-block-start:3.2rem;padding-block:2rem;text-align:center;background-color:var(--color-bg-section);border:1px solid oklch(var(--l-100) var(--gray));font-size:1.125rem}.s-step{padding-block:2rem}.s-step header h3{font-size:1.6rem}.s-step header .creator{margin-block-start:.4rem;font-size:1.125rem}.s-step header .note{margin-block:.6rem;padding-block:.6rem;padding-inline:.8rem;border:1px solid oklch(var(--l-300) var(--yellow));background-color:oklch(var(--l-50) var(--yellow));inline-size:fit-content;min-inline-size:16rem}.s-step header ul{margin-block-start:1.2rem;display:flex;gap:.4rem}.s-step :is(.blocks,.select-destination fieldset){--_block-gap:clamp(0.4rem, 2vw, 1rem);display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:var(--_block-gap);list-style:none}.s-step .blocks{margin-block-start:2.4rem}.s-step .block{--_blocks-container-width:var(--container-width);--cell:min(calc((var(--_blocks-container-width) - var(--_block-gap) * 3) / 4 / var(--cell-count-x)), clamp(1rem, 4vw, 2rem))}.s-step .blocks ul{margin-block-start:.4rem;display:flex;justify-content:center;gap:.4rem}.s-step .blocks ul button::before{content:var(--_icon)" "}@media(width >= 36rem){.s-step .blocks ul span{position:unset}}.s-step .select-destination{--_inline-padding:clamp(1rem, 4vw, 2rem);margin-block-start:2rem;padding-inline:var(--_inline-padding);padding-block:clamp(.6rem,2.4vw,1.2rem);inline-size:fit-content;background-color:var(--color-bg-section);border:1px solid oklch(var(--l-200) var(--gray))}.s-step .select-destination>*+*{margin-block-start:1.6rem}.s-step .select-destination h4{font-size:1.25rem}.s-step .select-destination legend{font-size:1.125rem;margin-block-end:1.2rem;inline-size:max-content}.s-step .select-destination label{position:relative}.s-step .select-destination .block{--_blocks-container-width:calc(var(--container-width) - 2 * var(--_inline-padding))}.s-step .select-destination input{appearance:none;position:absolute;inline-size:100%;block-size:100%;border:none;background-color:initial}.s-step .select-destination input:disabled{display:grid;place-content:center;background-color:color-mix(in oklab,oklch(var(--l-500) var(--gray)),transparent 60%)}.s-step .select-destination input:where(:hover:not(:disabled)){border:.4em solid oklch(var(--l-300) var(--highlight))}.s-step .select-destination input:checked{border:.4em solid oklch(var(--l-700) var(--highlight))}.s-step .select-destination button{font-size:1.125rem;min-inline-size:6rem}.edit-block-dialog{inline-size:min(100vw,44rem);max-inline-size:none;max-block-size:none}.edit-block-dialog>form{block-size:96svh}.edit-block-dialog .copy-previous{inline-size:fit-content}.edit-block-dialog fieldset{display:flex;gap:.4rem;flex-wrap:wrap;border:none}.edit-block-dialog :is(.copy-previous,fieldset)+fieldset{margin-block-start:clamp(.6rem,2.4vw,1.2rem)}.edit-block-dialog legend{margin-block-end:.2rem}.edit-block-dialog .selection{overflow:auto;margin-block-start:1.2rem;padding:.4rem;border:1px solid oklch(var(--l-200) var(--gray))}.edit-block-dialog .block{margin-inline:auto}.edit-block-dialog .block :is(.foot,.stick):not(:has(:disabled)):hover{background-color:oklch(var(--l-500) var(--highlight))}.edit-block-dialog .block :is(.foot,.stick):has(:checked){outline:.2em solid oklch(85% .15 94);opacity:calc(var(--floor) * .5 + .5)}.edit-block-dialog .block :is(.foot,.stick):has(:disabled){background-color:oklch(var(--l-500) var(--gray))}.edit-block-dialog .foot:hover:not(:disabled){opacity:1}.edit-block-dialog .foot{z-index:1}.edit-block-dialog .stick{opacity:.8}.edit-block-dialog :is(.foot,.stick)::before{font-size:1.25rem;position:absolute}.edit-block-dialog .foot::before{inset-block-start:40%}.edit-block-dialog .stick::before{inset-block-start:20%}.edit-block-dialog :is(.foot[style*="jump: 1"],.stick[style*="hit: 1"])::before{content:none}.edit-block-dialog .selection input{appearance:none;position:absolute;inset:0;inline-size:unset;block-size:unset}.edit-block-dialog .action{margin-block-start:.8rem}.edit-block-dialog .action:not(:has(>div)){position:absolute;right:200vw}.edit-block-dialog .action>div{display:grid;grid-template-areas:"--movement --rotation" "--movement --toggle";gap:.4rem 1.4rem}.edit-block-dialog .action>div:not(:has(.foot)){display:flex}.edit-block-dialog .movement{grid-area:--movement;display:flex;gap:.2rem}.edit-block-dialog .movement.foot{display:grid;grid-template-columns:repeat(3,2.8rem)}.edit-block-dialog .movement div{grid-area:2/2;background-color:oklch(var(--l-200) var(--gray))}.edit-block-dialog [data-axis=y][data-sign="-1"]{grid-area:1/2}.edit-block-dialog [data-axis=y][data-sign="1"]{grid-area:3/2}.edit-block-dialog [data-axis=x][data-sign="-1"]{grid-area:2/1}.edit-block-dialog [data-axis=x][data-sign="1"]{grid-area:2/3}.edit-block-dialog .rotation{display:flex;gap:.2rem;grid-area:--rotation;font-size:1.6rem}.edit-block-dialog .rotation button{padding:0;inline-size:2.8rem;block-size:2.8rem}.edit-block-dialog .toggle{display:grid;align-content:center;grid-area:--toggle}.edit-block-dialog footer{display:flex;justify-content:center;gap:.4rem;font-size:1.125rem}.edit-block-dialog footer button{padding-inline:1.2rem;padding-block:.6rem}.edit-block-dialog footer .apply{min-inline-size:clamp(4rem,16vw,8rem)}.edit-block-dialog footer .prev::before{content:'← '}.edit-block-dialog footer .next::after{content:' →'}@media(width < 36rem){.edit-block-dialog footer span{position:absolute;right:200vw}}.play-step-dialog .stick{transition:translate .4s}.play-step-dialog .foot{transition:translate .4s,rotate .4s,scale .4s,opacity .2s}.play-step-dialog .block{margin-inline:auto;box-sizing:content-box;border:.2em solid oklch(var(--l-300) var(--gray))}.play-step-dialog ul{margin-block-start:1.2rem;display:flex;justify-content:center;gap:.4rem}.export-project-dialog a{text-align:center}