* {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  outline: none;
  box-sizing: border-box;
}
:root {
  --font-sans: "Punctuation", "Inter Variable", -apple-system, "MiSans", "HarmonyOS Sans", "Source Han Sans SC", "Noto Sans CJK SC", "Noto Sans SC", "思源黑体", sans-serif;
  --font-feature: "ss01", "cv06", "cv11";
  --blur: .5rem;
  --radius: .25rem;
  --transition: .2s ease-in-out;
  --color-neutral-010: hsl(220 15 10);
  --color-neutral-020: hsl(225 15 20);
  --color-neutral-030: hsl(230 15 30);
  --color-neutral-040: hsl(235 14 40);
  --color-neutral-050: hsl(240 13 52);
  --color-neutral-060: hsl(245 15 60);
  --color-neutral-070: hsl(250 16 70);
  --color-neutral-080: hsl(255 18 80);
  --color-neutral-090: hsl(260 20 92);
  --color-neutral-095: hsl(265 20 95);
  --color-neutral-100: hsl(270 20 99);
  --color-neutral-01a: hsl(260 40 20 / .50);
  --color-neutral-02a: hsl(260 40 20 / .25);
  --color-neutral-03a: hsl(260 40 20 / .10);
}
::selection {
  background: var(--color-neutral-03a);
}

html {
  font-size: clamp(16px, .9vw, 20px);
  text-size-adjust: none;
  text-rendering: optimizeLegibility;
  cursor: crosshair;
  touch-action: manipulation;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  scrollbar-color: var(--color-neutral-00a) transparent;
  scrollbar-width: thin;
  -webkit-tap-highlight-color: transparent;
  &:has(dialog[open], [data-mode]) {
    overflow: clip;
  }
  @supports (-webkit-touch-callout: none) {
    font-size: 17px;
  }
}
body {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  font: 1rem/1.5 var(--font-sans);
  font-feature-settings: var(--font-feature);
  color: var(--color-neutral-030);
}

svg {
  display: block;
  width: 1rem;
  aspect-ratio: 1;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  &.grid {
    position: absolute;
    inset: 0;
    width: 100%;
    color: #fff;
    mix-blend-mode: difference;
    z-index: 1;
    path {
      stroke-width: .5px;
      vector-effect: non-scaling-stroke;
    }
  }
}

a, label, button {
  display: grid;
  place-items: center;
  padding: .5rem;
  font: inherit;
  color: inherit;
  background: none;
  border: 1px solid var(--color-neutral-03a);
  border-radius: var(--radius);
  transition: background var(--transition);
  cursor: pointer;
  @media (hover: hover) and (pointer: fine) {
    &:hover {
      background: var(--color-neutral-03a);
    }
  }
}
label {
  position: relative;
  &:last-child {
    padding: 0;
    span {
      position: absolute;
      inset: 0;
      text-align: center;
      font-size: .75rem;
      line-height: 2rem;
      color: var(--color-neutral-01a);
      pointer-events: none;
      z-index: -1;
    }
  }
}

input[type="range"] {
  cursor: pointer;
  display: block;
  padding: 0 .375rem;
  height: 100%;
  width: 6rem;
  -webkit-appearance: none;
  &::-moz-range-track {
    background: transparent;
    border: none;
  }
  &::-moz-range-thumb {
    width: .1875rem;
    height: 1.125rem;
    background: var(--color-neutral-050);
    border: .125rem solid #fff;
    border-radius: var(--radius);
    box-shadow: none;
    transition: border-color var(--transition);
  }
  &:hover::-moz-range-thumb {
    border-color: var(--color-neutral-090);
  }
  &::-webkit-slider-runnable-track {
    background: transparent;
    border: none;
  }
  &::-webkit-slider-thumb {
    width: .3125rem;
    height: 1.125rem;
    background: var(--color-neutral-060);
    border: .125rem solid #fff;
    border-radius: var(--radius);
    box-shadow: none;
    transition: border-color var(--transition);
    -webkit-appearance: none;
  }
  &:hover::-webkit-slider-thumb {
    border-color: var(--color-neutral-090);
  }
}

[aria-hidden="true"] {
  opacity: 0;
  pointer-events: none;
}

#app {
  padding: 6rem 2rem 10rem;
  margin: 0 auto;
  width: min(50rem, 100%);
  transition: opacity var(--transition);
}

header {
  position: fixed;
  inset: 0 0 auto 0;
  padding: .5rem 1.5rem;
  background: #fff9;
  border-bottom: 1px solid var(--color-neutral-02a);
  backdrop-filter: blur(var(--blur));
  z-index: 1;
  h1 {
    font-size: .9375rem;
    font-weight: 400;
    text-align: center;
  }
}

footer, aside {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  translate: -50%;
  background: #fff3;
  border: 1px solid var(--color-neutral-02a);
  border-radius: var(--radius);
  backdrop-filter: blur(var(--blur));
  z-index: 1;
}
footer {
  display: flex;
  gap: .5rem;
  padding: .5rem;
  color: var(--color-neutral-040);
  z-index: 2;
}
button[name="intro"] {
  path {
    transition: opacity var(--transition);
  }
  &[aria-expanded="true"] path:first-child, path:last-child {
    opacity: 0;
  }
  &[aria-expanded="true"] path:last-child {
    opacity: 1;
  }
}
button[name="print"] {
  svg {
    transform: scale(0.9);
  }
  main:has(.blank:last-child) + footer & {
    color: var(--color-neutral-070);
    pointer-events: none;
  }
}
aside {
  bottom: 6rem;
  padding: .5rem 1rem;
  width: min(calc(100% - 3rem), 24rem);
  font-size: .9375rem;
  transition: var(--transition);
  transition-property: opacity, translate;
  footer:has(button[aria-expanded="false"]) + & {
    translate: -50% 1rem;
    opacity: 0;
  }
  p {
    margin: .5rem 0;
  }
}

main {
  display: grid;
  user-select: none;
}

.work {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin: 0 0 4rem;
  max-height: 40.36rem;
  color: var(--color-neutral-070);
  transition: var(--transition);
  transition-property: max-height, opacity;
  &:last-child {
    margin: 0;
  }
  &[aria-hidden="true"] {
    max-height: 0;
  }
  img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
.blank {
  margin: 0;
  max-height: 0;
  opacity: 0;
  &:only-child, &[aria-hidden="false"] {
    max-height: 40.36rem;
    opacity: 1;
  }
  img {
    inset: 5%;
    width: 90%;
    height: 90%;
  }
}

.image, .board {
  flex: 1 0 0;
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: #fff;
  border: 1px solid #000;
}
.image {
  flex-grow: var(--ratio);
  min-width: 0;
  min-height: 0;
  transition: flex-grow var(--transition);
  [aria-hidden="true"] & {
    transition: none;
  }
}
.board {
  div {
    position: relative;
    display: flex;
    gap: .5rem;
    z-index: 1;
    @media (hover: hover) and (pointer: fine) {
      opacity: 0;
      transition: opacity var(--transition);
    }
    .blank & {
      display: none;
    }
  }
  &:hover div {
    opacity: 1;
  }
}

@media print {
  @page {
    size: A4;
    margin: 10mm;
  }
  body {
    display: block;
    min-height: auto;
  }
  header, footer, .blank, .board div {
    display: none;
  }
  main {
    display: block;
  }
  #app {
    padding: 0;
  }
  .work {
    margin: 0 auto;
    width: 189.5mm;
    height: 133mm;
    break-inside: avoid;
    &:nth-child(2n) {
      margin-block-end: 10mm;
    }
  }
  .image, .board {
    max-width: 133mm;
    max-height: 133mm;
  }
}

@font-face {
  font-family: "Punctuation";
  src: local("PingFang SC"), local("MiSans"), local("HarmonyOS Sans"), local("Source Han Sans SC"), local("Noto Sans CJK SC"), local("Noto Sans SC"), local("思源黑体");
  unicode-range: U+2018-201D;
}