.ct-root {
  --ct-ink: #20221e;
  --ct-paper: #fff;
  --ct-line: #dedfd6;
  --ct-quiet: #65685f;
  --ct-amber: #ffcb41;
  color: var(--ct-ink);
  font-family: inherit;
  container-type: inline-size;
  min-width: 0;
  width: 100%;
}
.ct-root *, .ct-root *::before, .ct-root *::after { box-sizing: border-box; }
.ct-root button, .ct-root label { font-family: inherit; }
.ct-root button { cursor: pointer; color: inherit; }
.ct-root button:disabled, .ct-root input:disabled { cursor: default; }
.ct-root button:disabled { opacity: .42; }
.ct-root button:focus-visible, .ct-root summary:focus-visible, .ct-root input:focus-visible + i {
  outline: 3px solid #8b6300;
  outline-offset: 3px;
}
.ct-root button, .ct-root input, .ct-root label { -webkit-tap-highlight-color: transparent; }
.ct-bench, .ct-history, .ct-stats {
  background: var(--ct-paper);
  border: 1px solid var(--ct-line);
  border-radius: 16px;
}
.ct-bench { overflow: hidden; }
.ct-title, .ct-subbutton, .ct-start, .ct-sound { display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.ct-title svg { width: 22px; height: 22px; }
.ct-root .ct-title h2 {
  color: var(--ct-ink);
  font: inherit;
  font-size: 17px;
  letter-spacing: -.035em;
  line-height: 1.4;
  font-weight: 750;
  margin: 0;
}
.ct-scramble { padding: 20px clamp(16px, 3.2cqw, 34px) 22px; }
.ct-scramble-heading, .ct-history-title, .ct-settings {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.ct-root .ct-subbutton, .ct-root .ct-sound {
  border: 1px solid var(--ct-line);
  border-radius: 8px;
  background: #fff;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 650;
  min-height: 31px;
  white-space: nowrap;
  gap: 6px;
}
.ct-subbutton svg, .ct-sound svg { width: 15px; height: 15px; }
.ct-root .ct-subbutton:not(:disabled):hover, .ct-root .ct-sound:hover { background: #f5f5f0; border-color: #b9bcae; }
.ct-root .ct-moves {
  font: 600 clamp(15px, 2.15cqw, 22px)/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .025em;
  color: var(--ct-ink);
  margin: 12px 0 0;
  word-spacing: .1em;
  text-wrap: pretty;
}
.ct-stage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: #eeeee6;
  background-image: radial-gradient(circle, #ccd0c1 .72px, transparent .9px);
  background-size: 8px 8px;
  border-block: 1px solid #e3e4da;
  padding: clamp(32px, 4.8cqw, 54px) 3%;
  touch-action: manipulation;
}
.ct-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 44%, #f5f4e97d, transparent 75%);
}
.ct-rig {
  width: min(94%, 740px);
  aspect-ratio: 760/165;
  position: relative;
  margin: auto;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.ct-shell {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  overflow: visible;
  filter: drop-shadow(0 2px 0 #11130f) drop-shadow(0 3px 1px #5a5d4e59) drop-shadow(0 8px 6px #373b262e);
}
.ct-pad {
  position: absolute;
  top: 13%;
  width: 26.2%;
  height: 68%;
  padding: 1.05%;
  touch-action: none;
  cursor: pointer;
  background: linear-gradient(115deg,#1b1e1a,#494a41);
  border: 1px solid #181b17;
  border-radius: 20% 25% 28% 18% / 33% 35% 36% 31%;
  box-shadow: inset 0 1px 3px #0b0c09, 0 1px 1px #595b51;
}
.ct-pad-left { left: 4.6%; transform: rotate(7deg) skew(-3deg); }
.ct-pad-right { right: 4.6%; transform: rotate(-7deg) skew(3deg) scaleX(-1); }
.ct-pad-in {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(130deg,#ffdf73,#f8c540 60%,#e6ad26);
  border-radius: 18% 23% 27% 17% / 30% 31% 35% 28%;
  box-shadow: inset 0 1px 2px #fff4b5, inset 0 -2px 2px #a88732;
}
.ct-pad-in::before, .ct-pad-in::after {
  content: '';
  position: absolute;
  inset: 0 65% 0 0;
  opacity: .25;
  background-image: repeating-linear-gradient(125deg,transparent 0 3px,#92762a 3px 4px,transparent 4px 7px);
  mask-image: linear-gradient(90deg,black,transparent);
}
.ct-pad-in::after { left: 72%; right: 0; transform: rotate(180deg); }
.ct-pad .ct-hand { position: relative; display: block; width: 46%; height: 91%; color: #37382b; transform: rotate(-10deg); }
.ct-pad-in > span {
  position: absolute;
  bottom: 10%;
  left: 10%;
  color: #56471e;
  font: 700 clamp(6px,.85cqw,10px)/1 ui-monospace,monospace;
}
.ct-pad-right .ct-pad-in > span { transform: scaleX(-1); }
.ct-pad.ct-contact .ct-pad-in, .ct-root[data-state="holding"] .ct-pad-in { background: linear-gradient(145deg,#ffe882,#f1ac22); box-shadow: inset 0 2px 3px #956812; }
.ct-root[data-state="armed"] .ct-pad-in { background: linear-gradient(135deg,#daeb95,#add46f); }
.ct-console {
  position: absolute;
  top: 23%;
  left: 33.3%;
  width: 33.4%;
  height: 43%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ct-lcd {
  width: 90%;
  height: 79%;
  padding: 2% 7%;
  display: grid;
  place-items: center;
  background: linear-gradient(155deg,#c0c9ae,#dae2c5 51%,#c9d3b7);
  border: clamp(2px,.55cqw,5px) solid #151714;
  border-radius: 7px;
  box-shadow: inset 0 2px 4px #687255a6, 0 1px 0 #595b50;
}
.ct-display { width: 100%; height: 100%; min-height: 0; color: #30392b; font: bold clamp(12px,2.8cqw,28px)/1 ui-monospace,monospace; text-align: center; display: grid; place-items: center; }
.ct-display > svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.ct-pilot { display: inline-flex; align-items: center; gap: clamp(3px,.5cqw,6px); margin-top: 2.8%; }
.ct-pilot i, .ct-pilot b {
  width: clamp(3px,.57cqw,6px); height: clamp(3px,.57cqw,6px);
  border-radius: 50%;
  background: #85513f;
  box-shadow: inset 0 -1px 1px #0006, 0 0 0 1px #10130f;
}
.ct-pilot b { background: #60744d; }
.ct-pilot span { font: 600 clamp(5px,.78cqw,8px)/1 ui-monospace,monospace; letter-spacing: .14em; color: #d3d6c7; }
.ct-root[data-state="holding"] .ct-pilot i { background: #ff8544; box-shadow: 0 0 3px #ffa34b; }
.ct-root[data-state="armed"] .ct-pilot b, .ct-root[data-state="running"] .ct-pilot b { background: #a9ec69; box-shadow: 0 0 4px #b5f777; }
.ct-operate { padding: 21px 16px 18px; text-align: center; }
.ct-status { font-size: 16px; font-weight: 750; line-height: 1.5; display: flex; align-items: center; justify-content: center; gap: 8px; letter-spacing: -.025em; }
.ct-status::before { content:''; background:#839378; border-radius:50%; width:8px; height:8px; }
.ct-root[data-state="holding"] .ct-status::before { background:#d68b20; }
.ct-root[data-state="armed"] .ct-status::before, .ct-root[data-state="running"] .ct-status::before { background:#4b863e; }
.ct-operate p { margin: 6px auto 14px; color: var(--ct-quiet); font-size: 12px; line-height: 1.7; }
.ct-root .ct-start {
  border: 1px solid #252821;
  border-radius: 8px;
  padding: 8px 15px;
  font-size: 12px;
  font-weight: 650;
  min-height: 35px;
  background: var(--ct-ink);
  color: #fff;
}
.ct-start:hover { filter: brightness(1.25); }
.ct-start svg { width: 13px; height: 13px; }
.ct-start[data-running="true"] svg { background: currentColor; width: 8px; height: 8px; margin: 0 2.5px; }
.ct-start[data-running="true"] svg path { display: none; }
.ct-settings { margin: 0 clamp(16px,3.2cqw,34px); padding: 12px 0; border-top: 1px solid #e9e9e1; }
.ct-check { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; position: relative; cursor: pointer; }
.ct-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.ct-check { min-height:30px; }
.ct-check input { position:absolute; inset:0; z-index:1; opacity:0; margin:0; width:100%; height:100%; cursor:pointer; }
.ct-check i { position: relative; width: 29px; height: 17px; background: #b5b8ac; border-radius: 15px; flex-shrink: 0; }
.ct-check i::after { content:''; position:absolute; width:11px; height:11px; top:3px; left:3px; border-radius:50%; background:#fff; box-shadow:0 1px 2px #45493635; }
.ct-check input:checked + i { background:#496443; }
.ct-check input:checked + i::after { transform:translateX(12px); }
.ct-check input:disabled + i { opacity:.6; }
.ct-check b { font-weight:600; font-size:10px; background:#f1f2eb; color:#5e6557; border-radius:4px; padding:2px 4px; }
.ct-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding: 19px 0; margin: 16px 0; }
.ct-stats > div { min-width:0; padding:0 clamp(12px,3.2cqw,34px); }
.ct-stats > div + div { border-left:1px solid var(--ct-line); }
.ct-stats small { display:flex; align-items:center; gap:5px; color:var(--ct-quiet); font-size:12px; line-height:1.65; font-weight:650; }
.ct-stats small svg { width:15px; height:15px; }
.ct-stats small span { font-size:10px; font-weight:500; color:#64675e; }
.ct-stats strong { display:block; letter-spacing:-.05em; font:600 clamp(20px,3cqw,30px)/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; margin-top:3px; }
.ct-history { padding: 20px clamp(16px,3.2cqw,34px) 13px; }
.ct-history-title { margin-bottom:12px; }
.ct-history-title > span { color:var(--ct-quiet); font-size:12px; }
.ct-empty { display:flex; justify-content:center; align-items:center; color:var(--ct-quiet); gap:9px; padding:22px 2px; border-block:1px solid #e9e9e1; font-size:12px; }
.ct-empty svg { width:17px; height:17px; color:#757a6b; flex-shrink:0; }
.ct-root .ct-store { color:var(--ct-quiet); font-size:11px; margin:10px 0 0; line-height:1.6; }
.ct-item { border-top:1px solid #e6e8df; }
.ct-root .ct-record { width:100%; text-align:left; display:grid; align-items:center; grid-template-columns:44px 1fr auto 17px; gap:9px; border:0; padding:11px 0; box-shadow:none; background:transparent; }
.ct-record:hover { color:#6c540f; }
.ct-record svg { width:15px; height:15px; color:#676b60; }
.ct-record[aria-expanded="true"] svg { transform:rotate(90deg); }
.ct-num,.ct-record time { font-size:11px; color:var(--ct-quiet); }
.ct-record strong { font:650 18px/1.25 ui-monospace,monospace; }
.ct-record small { font:600 10px/1 sans-serif; }
.ct-detail { padding:9px 12px 12px; background:#f6f7f2; border-radius:8px; margin-bottom:10px; }
.ct-detail p { margin:0 0 8px; color:#505548; font:500 12px/1.8 ui-monospace,monospace; overflow-wrap:anywhere; }
.ct-record-tools { display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.ct-record-tools > span { font-size:11px; margin-right:4px; }
.ct-root .ct-record-tools button, .ct-root .ct-more {
  border:1px solid #d4d7cb; background:white; padding:4px 8px; border-radius:5px; font-size:11px; min-height:27px;
}
.ct-root .ct-record-tools button[aria-pressed="true"] { background:#32372d; border-color:#32372d; color:white; }
.ct-root .ct-record-tools button[data-ct^="delete"] { color:#933f2c; margin-left:auto; }
.ct-root .ct-more { display:block; margin:8px auto; }
.ct-rules { margin:16px 3px 0; color:var(--ct-quiet); font-size:12px; }
.ct-rules summary { cursor:pointer; width:fit-content; font-weight:600; }
.ct-rules p { margin:9px 0 0; font-size:12px; line-height:1.8; }
.ct-rules a { color:#4e6647; text-decoration:underline; white-space:nowrap; margin-left:5px; }
@container (max-width: 520px) {
  .ct-scramble { padding-block:14px 15px; }
  .ct-root .ct-title h2 { font-size:15px; }
  .ct-title svg { width:19px; height:19px; }
  .ct-root .ct-moves { font-size:15px; line-height:1.55; letter-spacing:0; }
  .ct-stage { padding:26px 1%; }
  .ct-rig { width:98%; aspect-ratio:6 / 1.6; }
  .ct-lcd { border-radius:4px; padding:2% 3%; }
  .ct-console { width:34.5%; left:32.75%; }
  .ct-pad { padding:1%; }
  .ct-operate { padding:16px 12px 13px; }
  .ct-operate p { font-size:11px; }
  .ct-stats { margin:12px 0; padding:15px 0; }
  .ct-history { padding-top:15px; }
}
@container (max-width: 340px) {
  .ct-title { gap:5px; }
  .ct-root .ct-title h2 { font-size:14px; }
  .ct-check { font-size:11px; gap:5px; }
  .ct-settings { gap:5px; }
  .ct-stats small { gap:3px; font-size:11px; }
  .ct-stats small span { font-size:9px; }
}