@font-face {
  font-family: Sk-Modernist;
  src: url(../font/sk-modernist-regular-webfont.woff2);
}
@font-face {
  font-family: Sk-Modernist;
  src: url(../font/sk-modernist-bold-webfont.woff2);
  font-weight: bold;
}
@font-face {
  font-family: Sk-Modernist-Mono;
  src: url(../font/sk-modernist-mono-webfont.woff2);
}
:root {
  --paper: #ffffff;
  --ink: #1d1313;
  --ink-rgb: 29, 19, 19;
  --mark: #ffff00;
  --muted: rgb(108, 102, 102);
  --faint: rgb(160, 156, 156);
  --line: rgb(223, 222, 222);
  --grid: rgb(241, 241, 241);
  --axis: rgb(210, 208, 208);
  --mono: Sk-Modernist-Mono, Menlo, Monaco, Andale Mono, lucida console, Courier New, monospace;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  background-color: #ffffff;
  color: #1d1313;
  font-family: "Sk-Modernist", "Helvetica", "Noto Sans JP", "Open Sans", sans-serif;
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
}

.mono {
  font-family: "Sk-Modernist-Mono", Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 14px 40px;
}

body.embed header {
  display: none;
}
body.embed .wrap {
  padding-top: 0;
  padding-bottom: 6px;
}

header {
  margin-bottom: 18px;
}

.eyebrow {
  font-family: "Sk-Modernist-Mono", Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
  font-size: 11.04px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgb(160, 156, 156);
  margin: 0 0 10px;
}

h1 {
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 10px;
  font-weight: bold;
}

.lede {
  color: rgb(108, 102, 102);
  font-size: 15.04px;
  margin: 0;
  max-width: 62ch;
}

.layout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.col-main {
  flex: 1 1 54%;
}

.col-side {
  flex: 1 1 46%;
}

@media (max-width: 860px) {
  .layout {
    flex-direction: column;
    gap: 0;
  }
  .col {
    flex: 1 1 auto;
    width: 100%;
  }
}
.card {
  border: 1px solid rgb(223, 222, 222);
  padding: 14px;
  margin: 14px 0;
}

.cap {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 10px;
}
.cap .t {
  font-family: "Sk-Modernist-Mono", Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
  font-size: 11.04px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(108, 102, 102);
}

canvas {
  width: 100%;
  display: block;
  touch-action: manipulation;
}

.badge {
  font-family: "Sk-Modernist-Mono", Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
  font-size: 11.04px;
  letter-spacing: 0.06em;
  padding: 4px 9px;
  border: 1px solid rgb(223, 222, 222);
  color: rgb(108, 102, 102);
  white-space: nowrap;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.badge.ok {
  color: rgb(108, 102, 102);
  border-color: rgb(223, 222, 222);
}
.badge.warn {
  color: #1d1313;
  border-color: #1d1313;
}
.badge.bad {
  color: #1d1313;
  border-color: #1d1313;
  background-color: #ffff00;
  font-weight: bold;
}

.legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 12.48px;
  color: rgb(108, 102, 102);
}
.legend b {
  color: #1d1313;
  font-weight: bold;
}

.swatch {
  display: inline-block;
  width: 22px;
  height: 0;
  vertical-align: middle;
  margin-right: 7px;
}

.sw-t {
  border-top: 2px dashed rgb(160, 156, 156);
}

.sw-o {
  border-top: 3px solid #1d1313;
}

.meter .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 7px;
}
.meter .lbl {
  font-size: 12.48px;
  color: rgb(108, 102, 102);
}
.meter .val {
  font-family: "Sk-Modernist-Mono", Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
  font-size: 15.04px;
  color: #1d1313;
}

.trackwrap {
  position: relative;
  padding-bottom: 20px;
}

.track {
  position: relative;
  height: 12px;
  background-color: #f7f7f7;
  border: 1px solid rgb(223, 222, 222);
  overflow: hidden;
  transition: border-color 0.25s;
}
.track.over {
  border-color: #1d1313;
}
.track.over .fill {
  background-color: #ffff00;
}

.fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background-color: #1d1313;
  transition: width 0.08s linear, background-color 0.25s;
}

.oneline {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: 50%;
  width: 1px;
  background-color: #1d1313;
}

.mk {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Sk-Modernist-Mono", Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
  font-size: 10.08px;
  letter-spacing: 0.05em;
  color: rgb(160, 156, 156);
}

.controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 15px 20px;
}

.ctrl label {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12.96px;
  color: rgb(108, 102, 102);
}
.ctrl label b {
  color: #1d1313;
  font-weight: normal;
  font-family: "Sk-Modernist-Mono", Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
  font-size: 12px;
}

input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  background: transparent;
  cursor: pointer;
  margin: 0;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 3px;
  background-color: rgb(223, 222, 222);
}
input[type=range]::-moz-range-track {
  height: 3px;
  background-color: rgb(223, 222, 222);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #1d1313;
  border: 0;
  margin-top: -6.5px;
}
input[type=range]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #1d1313;
  border: 0;
}

.hint {
  font-size: 11.52px;
  color: rgb(160, 156, 156);
  margin-top: 3px;
  line-height: 1.45;
}

.buttons {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}

button {
  font-family: "Sk-Modernist", "Helvetica", "Noto Sans JP", "Open Sans", sans-serif;
  font-size: 12.96px;
  color: #1d1313;
  background-color: #ffffff;
  border: 1px solid rgb(223, 222, 222);
  padding: 8px 14px;
  cursor: pointer;
  transition: border-color 0.2s;
}
button:hover {
  border-color: #1d1313;
}
button:focus-visible {
  outline: 2px solid #1d1313;
  outline-offset: 2px;
}
button.primary {
  background-color: #ffff00;
  border-color: #1d1313;
  font-weight: bold;
}

.presets {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.presets button {
  font-size: 12px;
  padding: 7px 11px;
}

.bowlcap {
  font-size: 13.44px;
  line-height: 1.6;
  color: rgb(108, 102, 102);
  margin: 12px 0 0;
}
.bowlcap strong {
  color: #1d1313;
  font-weight: bold;
}

.explain {
  font-size: 14.08px;
  line-height: 1.65;
  color: #1d1313;
}
.explain p {
  margin: 0 0 12px;
}
.explain p:last-child {
  margin-bottom: 0;
}
.explain b {
  font-weight: bold;
}

.k {
  font-family: "Sk-Modernist-Mono", Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
  font-size: 0.94em;
}

.ko {
  font-family: "Sk-Modernist-Mono", Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
  font-size: 0.94em;
  background-color: #ffff00;
  padding: 1px 3px;
}

.foot {
  color: rgb(160, 156, 156);
  font-size: 12px;
  line-height: 1.6;
  margin-top: 22px;
  max-width: 78ch;
}

/*# sourceMappingURL=tool.css.map */