@font-face{font-family:Manrope;src:url('/fonts/manrope-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url('/fonts/manrope-500.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:Manrope;src:url('/fonts/manrope-800-latin.woff2') format('woff2');font-weight:800;font-display:block;unicode-range:U+0020-007E,U+00A0-00FF}
:root{color-scheme:light;--paper:#f2efea;--ink:#182329;--body:#444d52;--blue:#356778;--copper:#a54824;--quiet:#5d6b6e;--rule:#a6b8ba;--gutter:clamp(24px,2.85vw,48px);font-family:Manrope,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;-webkit-font-smoothing:antialiased}::selection{background:#cbdde0;color:#182329}html{scrollbar-color:#92a7aa var(--paper);caret-color:var(--blue)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;min-height:44px}button:disabled{cursor:default}a{color:var(--blue);text-decoration-color:var(--rule);text-decoration-thickness:1px;text-underline-offset:8px}a:hover,button:hover:not(:disabled){color:var(--copper);text-decoration-color:currentColor}a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:6px;border-radius:2px}
.composition{position:relative;min-height:660px;height:100svh;isolation:isolate;overflow:hidden}.stage{position:absolute;inset:0;touch-action:none;cursor:crosshair}.stage:focus-visible{outline:1px solid var(--blue);outline-offset:-10px}.stage>svg{display:block;width:100%;height:100%;pointer-events:none}.stage>.strand-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.stage>.strand-canvas+svg{position:relative}.introduction{position:absolute;left:28.2%;top:32.4%;width:31%;max-width:490px;pointer-events:none}.introduction h1{font-size:clamp(30px,2.52vw,42px);font-weight:400;line-height:1.2;letter-spacing:-.035em;margin:0 0 13px}.introduction p{font-size:clamp(18px,1.51vw,25px);line-height:1.38;letter-spacing:-.025em;margin:0;color:var(--body)}.introduction .personal-note{margin-top:14px;font-size:clamp(16px,1.25vw,20px);line-height:1.45;letter-spacing:-.015em}.introduction nav{display:flex;align-items:center;gap:clamp(22px,2.15vw,36px);margin-top:17px;font-size:clamp(16px,1.32vw,22px);letter-spacing:-.02em;pointer-events:auto;width:max-content}.introduction nav a{display:inline-flex;align-items:center;min-height:44px}
.sound-wave,.sound-off{display:none}.sound[aria-pressed="true"] .sound-wave,.sound[aria-pressed="false"] .sound-off{display:block}.invitation-area{position:absolute;bottom:4.2%;left:var(--gutter);max-width:calc(100% - 140px)}#example{display:flex;align-items:baseline;gap:16px;text-align:left;font-size:clamp(20px,1.73vw,28px);letter-spacing:-.025em;color:var(--body)}#clear:disabled{visibility:hidden}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.no-script{position:absolute;bottom:13%;left:var(--gutter);font-size:13px}
@media(max-aspect-ratio:11/10),(max-width:1100px){.composition{min-height:820px}.introduction{left:12%;top:29%;width:75%;max-width:490px}.introduction h1{font-size:36px;margin-bottom:17px}.introduction p{font-size:22px;line-height:1.5}.desktop-break{display:none}.introduction .personal-note{margin-top:15px;font-size:18px}.introduction nav{font-size:19px;margin-top:17px;gap:28px}.invitation-area{bottom:5.5%}#example{font-size:22px}}
@media(max-width:520px){.composition{min-height:780px}.introduction{left:8%;top:29%;width:84%;max-width:none}.introduction h1{font-size:30px;margin-bottom:14px}.introduction p{font-size:17px;line-height:1.55;letter-spacing:-.015em}.introduction .personal-note{margin-top:12px;font-size:15px}.introduction nav{font-size:16px;margin-top:13px;gap:27px}.invitation-area{bottom:7%;left:24px;max-width:calc(100% - 48px)}#example{font-size:clamp(18px,5.1vw,20px)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

@media(min-aspect-ratio:11/10) and (min-width:1101px){
  .introduction{top:0;height:100%}
  .introduction h1{position:absolute;top:33%;margin:0}
  .introduction p:first-of-type{position:absolute;top:39.4%;width:100%;margin:0}
  .introduction .personal-note{position:absolute;top:47.3%;margin:0}
  .introduction nav{position:absolute;top:51.5%;margin:0}
}
@media(max-aspect-ratio:11/10),(max-width:1100px){.introduction{pointer-events:auto}}
.introduction .site-name{font-size:clamp(48px,4.17vw,64px);font-weight:800;letter-spacing:-.03em}
@media(min-aspect-ratio:11/10) and (min-width:1101px){.introduction .site-name{top:calc(39.4% - 1.3em)}}
@media(max-aspect-ratio:11/10),(max-width:1100px){.introduction .site-name{font-size:52px;margin-bottom:8px}}
@media(max-width:520px){.introduction .site-name{font-size:42px}}

.introduction nav button{display:inline-flex;align-items:center;color:var(--blue);text-decoration:underline;text-decoration-color:var(--rule);text-decoration-thickness:1px;text-underline-offset:8px;letter-spacing:inherit}
.introduction nav button:hover:not(:disabled){color:var(--copper);text-decoration-color:currentColor}

.composition {
  --controls-top: max(20px, 2.7svh);
}
.instrument-controls {
  position: absolute;
  top: var(--controls-top);
  right: var(--gutter);
  display: flex;
  gap: 8px;
}
.instrument-controls button,
.instrument-help button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--quiet);
}
.instrument-controls svg,
.instrument-help svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.instrument-controls .sound svg {
  width: 23px;
  height: 23px;
}
.instrument-controls .help-toggle,
.instrument-help {
  display: none;
}
@supports selector(:popover-open) {
  .instrument-controls .help-toggle {
    display: grid;
  }
}
.composition:has(.instrument-help:popover-open) .stage {
  pointer-events: none;
}
.composition:has(.instrument-help:popover-open) .help-toggle {
  color: var(--blue);
}

.instrument-help {
  position: absolute;
  inset: calc(var(--controls-top) + 52px) var(--gutter) auto auto;
  width: min(380px, calc(100% - 2 * var(--gutter)));
  max-height: calc(100svh - var(--controls-top) - 52px - var(--gutter));
  margin: 0;
  padding: 18px 24px 22px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: #faf8f4;
  color: var(--body);
  font-size: 14px;
  line-height: 1.6;
}
.instrument-help:popover-open {
  display: block;
}
.instrument-help header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.instrument-help h2 {
  margin: 0;
  color: var(--ink);
  font-size: 25px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.03em;
}
.instrument-help header button {
  flex-shrink: 0;
  margin-right: -10px;
}
.instrument-help p {
  margin: 4px 0 0;
}
.instrument-help-detail {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.instrument-help h3 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}
@media (max-aspect-ratio: 11/10), (max-width: 1100px) {
  .composition {
    --controls-top: max(20px, 2.4svh);
  }
}
@media (max-width: 520px) {
  .instrument-controls .sound svg {
    width: 20px;
    height: 20px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .instrument-help:popover-open {
    animation: reveal-instrument-help 180ms cubic-bezier(.16, 1, .3, 1);
  }
  @keyframes reveal-instrument-help {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }
}