:root {
  color-scheme: light;
  --paper-0: #f7f1e3;
  --paper-1: #eee5d1;
  --paper-2: #d8ccb3;
  --ink-0: #171612;
  --ink-1: #37352e;
  --ink-2: #6f695b;
  --rule: #aaa089;
  --cinnabar: #a43b29;
  --serif: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans CJK SC", sans-serif;
  --mono: "SFMono-Regular", "Roboto Mono", monospace;
}
* { box-sizing: border-box; }
html { background: var(--paper-1); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink-0);
  background: linear-gradient(90deg, rgba(23, 22, 18, .018) 1px, transparent 1px) 0 0 / 42px 42px, radial-gradient(circle at 16% 8%, rgba(255, 255, 255, .62), transparent 28%), var(--paper-1);
  font: 14px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.11'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
button, input { font: inherit; }
.back {
  position: fixed;
  z-index: 4;
  top: 22px;
  left: 24px;
  color: var(--ink-2);
  text-decoration: none;
  font: 11px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.back::before { content: "← "; color: var(--cinnabar); }
.back:hover { color: var(--ink-0); }
.workshop { position: relative; width: min(1180px, calc(100vw - 72px)); margin: 0 auto; padding: 54px 0 34px; }
.masthead {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr);
  gap: clamp(36px, 8vw, 110px);
  align-items: end;
  margin: 0 0 30px;
  padding: 0 0 25px;
  border-bottom: 1px solid var(--ink-0);
}
.title-lockup { display: grid; grid-template-columns: 52px 1fr; align-items: start; }
.edition { margin: 6px 0 0; color: var(--cinnabar); font: 10px/1.35 var(--mono); letter-spacing: .08em; writing-mode: vertical-rl; }
.eyebrow { margin: 0 0 4px; color: var(--ink-2); font: 11px/1.5 var(--mono); letter-spacing: .24em; text-transform: uppercase; }
h1 { margin: 0; font: 700 clamp(38px, 6vw, 70px)/1.02 var(--serif); letter-spacing: .06em; }
.dek { max-width: 360px; margin: 0; padding-left: 18px; border-left: 3px solid var(--cinnabar); color: var(--ink-1); font: 15px/1.9 var(--serif); }
.composer { display: grid; grid-template-columns: 92px minmax(180px, 1fr) auto auto; align-items: stretch; margin-bottom: 14px; border: 1px solid var(--ink-0); background: rgba(247, 241, 227, .54); }
.composer label { display: grid; place-items: center; border-right: 1px solid var(--ink-0); color: var(--ink-2); font: 10px/1 var(--mono); letter-spacing: .16em; }
input, button { appearance: none; border: 0; border-radius: 0; background: transparent; color: var(--ink-0); transition: color 160ms, background-color 160ms, transform 100ms; }
input { min-width: 0; padding: 13px 20px 11px; border-right: 1px solid var(--ink-0); background: rgba(255,255,255,.16); font: 700 21px/1.2 var(--serif); letter-spacing: .28em; }
input::selection { color: var(--paper-0); background: var(--cinnabar); }
input:focus { outline: 3px solid rgba(164,59,41,.18); outline-offset: -3px; }
button { min-width: 112px; padding: 0 18px; border-right: 1px solid var(--ink-0); cursor: pointer; font: 12px/1 var(--sans); letter-spacing: .08em; }
button:last-child { border-right: 0; }
button:hover:not(:disabled) { color: var(--paper-0); background: var(--ink-0); }
button:active:not(:disabled) { transform: translateY(1px); }
button:focus-visible { outline: 3px solid var(--cinnabar); outline-offset: -3px; }
button:disabled { color: var(--rule); cursor: not-allowed; }
button.quiet { color: var(--ink-2); }
.press-shell { position: relative; overflow: hidden; border: 1px solid var(--ink-0); background: #c6a572; box-shadow: 7px 8px 0 rgba(23,22,18,.14); }
canvas { display: block; width: 100%; height: auto; cursor: default; touch-action: none; }
canvas.rolling { cursor: grabbing; }
canvas.levering { cursor: ns-resize; }
canvas:focus-visible { outline: 3px solid var(--cinnabar); outline-offset: -5px; }
.status-line { min-height: 35px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; margin: 13px 0 0; padding: 0 2px 10px; border-bottom: 1px solid var(--rule); color: var(--ink-1); font: 13px/1.6 var(--serif); }
.status-line::before { content: "工序"; color: var(--cinnabar); font: 9px/1 var(--mono); letter-spacing: .14em; }
#quality { color: var(--ink-2); font: 10px/1 var(--mono); letter-spacing: .05em; }
.verdict {
  display: grid;
  grid-template-columns: 150px 180px 1fr auto;
  align-items: center;
  min-height: 74px;
  margin-top: 12px;
  border: 1px solid var(--ink-0);
  background: rgba(247, 241, 227, .62);
  animation: verdict-in 420ms cubic-bezier(.2,.72,.22,1) both;
}
.verdict[hidden] { display: none; }
.verdict > * { display: grid; align-self: stretch; place-items: center; padding: 12px 16px; border-right: 1px solid var(--ink-0); }
.verdict > *:last-child { border-right: 0; }
.verdict-no { color: var(--ink-2); font: 10px/1.4 var(--mono); letter-spacing: .08em; }
.verdict strong { color: var(--ink-0); font: 700 28px/1 var(--serif); letter-spacing: .12em; }
.verdict[data-tier="rare"] strong, .verdict[data-tier="legendary"] strong { color: var(--cinnabar); }
.verdict[data-tier="legendary"] { box-shadow: inset 0 -5px 0 var(--cinnabar); }
.verdict-accident { color: var(--ink-1); font: 15px/1 var(--serif); letter-spacing: .12em; }
.verdict-stamp { margin: 10px; align-self: center; min-width: 108px; min-height: 48px; padding: 8px 13px; border: 2px solid var(--cinnabar) !important; color: var(--cinnabar); font: 700 14px/1 var(--serif); letter-spacing: .12em; transform: rotate(-2deg); }
@keyframes verdict-in { from { opacity: 0; transform: translateY(-8px); } }
.footer-tools { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: start; margin-top: 12px; }
.controls { display: flex; width: max-content; border: 1px solid var(--ink-0); }
.controls button { min-height: 42px; }
.controls .icon { min-width: 54px; padding-inline: 12px; }
.credit { max-width: 420px; margin: 5px 0 0; color: var(--ink-2); text-align: right; font: 12px/1.65 var(--serif); }
.credit::before { content: "※ "; color: var(--cinnabar); }
@media (max-width: 760px) {
  .back { position: absolute; top: 19px; left: 18px; }
  .workshop { width: calc(100vw - 24px); padding-top: 61px; }
  .masthead { grid-template-columns: 1fr; gap: 18px; margin-bottom: 20px; padding-bottom: 18px; }
  .title-lockup { grid-template-columns: 35px 1fr; }
  .edition { margin-top: 2px; }
  h1 { font-size: clamp(37px, 12vw, 56px); }
  .dek { max-width: none; font-size: 13px; }
  .composer { grid-template-columns: 1fr auto auto; }
  .composer label { display: none; }
  input { padding-inline: 12px; font-size: 17px; letter-spacing: .16em; }
  button { min-width: auto; padding-inline: 13px; font-size: 11px; }
  .press-shell { box-shadow: 4px 5px 0 rgba(23,22,18,.14); }
  .status-line { grid-template-columns: auto 1fr; gap: 12px; font-size: 11px; }
  #quality { grid-column: 1 / -1; padding-left: 42px; }
  .verdict { grid-template-columns: 1fr 1fr; }
  .verdict > *:nth-child(2) { border-right: 0; }
  .verdict > *:nth-child(-n+2) { border-bottom: 1px solid var(--ink-0); }
  .verdict strong { font-size: 24px; }
  .verdict-stamp { min-width: 0; }
  .footer-tools { grid-template-columns: 1fr; gap: 9px; }
  .controls { width: 100%; }
  .controls button { flex: 1; padding-inline: 8px; }
  .controls .icon { flex: 0 0 52px; }
  .credit { max-width: none; margin: 0; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }