.cp-shell {
  --cp-ink:#39354c;
  --cp-muted:#726b7f;
  --cp-line:#e8e0eb;
  --cp-accent:#7862a6;
  --cp-warm:#fff9f1;
  color:var(--cp-ink);
  background:linear-gradient(140deg,#fff8ee,#f8f2ff 65%,#eff9f5);
  min-height:100vh;
  padding:30px 24px 60px;
  font-family:inherit
}
.cp-shell * {
  box-sizing:border-box
}
.cp-wrap {
  max-width:1140px;
  margin:auto
}
.cp-shell button,.cp-shell select,.cp-shell input {
  font:inherit
}
.cp-shell button {
  min-height:44px;
  border:1px solid var(--cp-line);
  border-radius:13px;
  background:#fff;
  color:var(--cp-ink);
  padding:10px 15px;
  cursor:pointer;
  font-weight:650;
  touch-action:manipulation
}
.cp-shell button:hover:not(:disabled) {
  border-color:#a992bf;
  background:#faf6ff
}
.cp-shell button:disabled {
  opacity:.4;
  cursor:default
}
.cp-shell :focus-visible {
  outline:3px solid #7862a6;
  outline-offset:3px
}
.cp-shell [hidden] {
  display:none!important
}
.cp-header {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  margin-bottom:25px
}
.cp-back {
  color:#6f627f;
  text-decoration:none;
  font-weight:650
}
.cp-eyebrow {
  font-size:.78rem;
  letter-spacing:.04em;
  font-weight:750;
  color:#82718e;
  display:block;
  margin:12px 0 8px
}
.cp-header h1 {
  font-size:clamp(1.8rem,4vw,2.7rem);
  font-weight:850;
  letter-spacing:-.05em;
  margin:8px 0 10px
}
.cp-header p:last-child {
  color:var(--cp-muted);
  margin:0
}
.cp-header-actions {
  display:flex;
  gap:8px
}
.cp-layout {
  display:grid;
  grid-template-columns:270px minmax(0,1fr);
  gap:22px;
  align-items:start
}
.cp-sidebar,.cp-play-panel {
  background:#ffffffed;
  border:1px solid #eee4ec;
  border-radius:25px;
  box-shadow:0 9px 30px #7b60840a;
  padding:25px
}
.cp-sidebar h2 {
  font-size:1.3rem;
  margin:8px 0 22px
}
.cp-tiers {
  display:flex;
  border:0;
  gap:6px;
  padding:0;
  margin:0 0 20px;
  min-width:0
}
.cp-tiers legend {
  font-size:.85rem;
  font-weight:700;
  margin-bottom:8px
}
.cp-tiers button {
  flex:1;
  padding:10px 7px
}
.cp-tiers [aria-pressed=true],.cp-shell #cp-pencil[aria-pressed=true] {
  background:#f1e9fd;
  border-color:#bda4d9;
  color:#664786
}
.cp-sidebar label {
  font-weight:700;
  font-size:.85rem;
  display:block;
  margin:0 0 8px
}
.cp-sidebar label span {
  color:var(--cp-muted);
  font-weight:500;
  font-size:.8rem
}
.cp-sidebar select {
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23726580' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  display:block;
  width:100%;
  padding:12px 10px;
  border:1px solid var(--cp-line);
  border-radius:12px;
  background-color:white;
  color:var(--cp-ink);
  min-height:46px;
  padding-right:30px;
  margin-bottom:12px
}
.cp-sidebar>button {
  width:100%
}
.cp-shell .cp-primary {
  background:var(--cp-accent);
  color:white;
  border-color:var(--cp-accent)
}
.cp-shell .cp-primary:hover:not(:disabled) {
  background:#67518f;
  color:white
}
.cp-note {
  padding:16px;
  border-radius:15px;
  background:#fff6e7;
  margin:22px 0;
  font-size:.85rem;
  line-height:1.7
}
.cp-note strong {
  color:#84603a
}
.cp-note p {
  margin:5px 0 0
}
.cp-storage-note {
  font-size:.76rem;
  line-height:1.6;
  color:var(--cp-muted);
  margin:12px 0 0
}
.cp-board-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px
}
.cp-board-head .cp-eyebrow {
  margin-top:0
}
.cp-board-head h2 {
  font-size:1.4rem;
  margin:4px 0
}
.cp-badge {
  background:#f3edf9;
  border-radius:30px;
  padding:7px 12px;
  color:#79648e;
  font-size:.75rem;
  white-space:nowrap
}
.cp-stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:20px 0 16px
}
.cp-stats>div {
  background:#f8f5fa;
  border-radius:14px;
  text-align:center;
  padding:12px 5px
}
.cp-stats span {
  display:block;
  font-size:.73rem;
  color:var(--cp-muted);
  margin-bottom:4px
}
.cp-stats strong {
  font-size:1.25rem
}
.cp-instruction {
  font-size:.85rem;
  color:var(--cp-muted);
  text-align:center;
  line-height:1.7;
  min-height:1.7em;
  margin-bottom:16px
}
.cp-board {
  display:grid;
  grid-template-columns:repeat(var(--n),minmax(0,1fr));
  width:min(100%,410px);
  margin:0 auto;
  gap:8px;
  padding:15px;
  border-radius:22px;
  background:#ece5f1;
  border:1px solid #e4d9eb;
  aspect-ratio:1;
  touch-action:manipulation
}
.cp-shell .cp-cell {
  padding:0;
  min-height:0;
  aspect-ratio:1;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:12px;
  border:1px solid transparent;
  font-size:clamp(1.1rem,3vw,1.9rem);
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation
}
.cp-board--lights_out .cp-cell {
  background:#d9dbe6;
  box-shadow:inset 0 -4px 0 #c4c6d5;
  color:#777b95;
  font-size:clamp(1.4rem,4vw,2.4rem);
  transition:background .13s,box-shadow .13s
}
.cp-board--lights_out .cp-cell.is-on {
  background:#ffd984;
  box-shadow:inset 0 -4px 0 #edbc61,0 0 15px #ffe59c66;
  color:#80561f
}
.cp-board--lights_out .cp-cell.is-preview {
  outline:2px dashed #7862a6;
  outline-offset:1px
}
.cp-shell .cp-cell.is-hint {
  outline:4px solid #e68a38;
  outline-offset:1px
}
.cp-board--sokoban {
  gap:3px;
  padding:10px;
  background:#e3eae2;
  border-color:#d3ded2
}
.cp-board--sokoban .cp-cell {
  border-radius:6px;
  background:#f8f7ef;
  border:0;
  font-size:clamp(1rem,3vw,1.7rem)
}
.cp-board--sokoban .is-wall {
  background:linear-gradient(140deg,#b4c4b1,#92aa8f);
  box-shadow:inset 0 -4px 0 #829b80
}
.cp-board--sokoban .is-goal {
  color:#47785f;
  background:#e0f0dd
}
.cp-board--sokoban .is-box {
  background:#eec68f;
  color:#815c2e;
  box-shadow:inset 0 -4px 0 #c89f6a;
  border:2px solid #c99d63
}
.cp-board--sokoban .is-box.is-goal {
  background:#c2deb3;
  border-color:#7ba46b;
  box-shadow:inset 0 -4px 0 #9abf89;
  color:#3d693d
}
.cp-board--sokoban .is-player {
  background:#bfe1df;
  color:#356a6a;
  border:2px solid #83bdb6
}
.cp-dpad {
  display:grid;
  grid-template-columns:repeat(3,52px);
  gap:7px;
  justify-content:center;
  margin:18px 0
}
.cp-dpad [data-direction=up] {
  grid-column:2
}
.cp-dpad [data-direction=left] {
  grid-column:1;
  grid-row:2
}
.cp-dpad [data-direction=down] {
  grid-column:2;
  grid-row:2
}
.cp-dpad [data-direction=right] {
  grid-column:3;
  grid-row:2
}
.cp-dpad button {
  font-size:1.4rem;
  line-height:1
}
.cp-shell [data-direction].is-hint {
  background:#fff0d3;
  border:2px solid #e68a38
}
.cp-board--mini_sudoku {
  padding:0;
  gap:0;
  border:3px solid #8c799e;
  border-radius:8px;
  overflow:hidden;
  background:white
}
.cp-board--mini_sudoku .cp-cell {
  border-radius:0;
  border:0;
  border-right:1px solid #ded5e6;
  border-bottom:1px solid #ded5e6;
  background:#fff;
  font-weight:700;
  color:#7250a3
}
.cp-board--mini_sudoku .cp-cell.is-given {
  background:#f3eff6;
  color:#3a3346;
  font-weight:850
}
.cp-board--mini_sudoku .cp-cell.is-selected {
  background:#efe2ff;
  box-shadow:inset 0 0 0 3px #a780c5
}
.cp-board--mini_sudoku .cp-cell.is-peer:not(.is-selected) {
  background:#faf6fd
}
.cp-board--mini_sudoku .cp-cell.is-conflict {
  color:#ac3348;
  box-shadow:inset 0 0 0 2px #ce5870
}
.cp-board--mini_sudoku .cp-cell.box-right {
  border-right:3px solid #8c799e
}
.cp-board--mini_sudoku .cp-cell.box-bottom {
  border-bottom:3px solid #8c799e
}
.cp-board--mini_sudoku .cp-cell.is-hint {
  outline:none;
  box-shadow:inset 0 0 0 3px #e68a38
}
.cp-notes {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  position:absolute;
  inset:4px;
  font-size:clamp(.6rem,1.5vw,.85rem);
  font-weight:500;
  color:#83738e;
  align-items:center
}
.cp-notes span {
  min-width:0;
  text-align:center
}
.cp-number-pad {
  display:flex;
  justify-content:center;
  gap:7px;
  margin:18px 0 12px
}
.cp-number-pad button {
  min-width:40px;
  flex:0 1 52px;
  font-size:1.1rem;
  padding:8px
}
.cp-pencil-tools {
  display:flex;
  gap:8px;
  justify-content:center
}
.cp-pencil-tools button {
  font-size:.8rem
}
.cp-actions {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:24px
}
.cp-actions button {
  font-size:.82rem;
  padding:10px 11px
}
.cp-shell .cp-hint {
  background:#fff5df;
  border-color:#e6ca91;
  color:#81613c
}
.cp-feedback {
  margin:16px 0 0;
  padding:14px 16px;
  background:#f6f2fa;
  border-radius:13px;
  color:#61546f;
  font-size:.85rem;
  line-height:1.7;
  min-height:52px;
  overflow-wrap:anywhere
}
.cp-win {
  margin-top:16px;
  background:#f1f9ed;
  border:1px solid #cddfc5;
  border-radius:18px;
  text-align:center;
  padding:24px 15px
}
.cp-win>span {
  font-size:2rem;
  color:#af8c3b
}
.cp-win h2 {
  font-size:1.4rem;
  margin:4px 0 12px
}
.cp-win p {
  font-size:.85rem;
  line-height:1.7
}
.cp-record {
  font-size:.75rem;
  color:var(--cp-muted);
  text-align:center;
  line-height:1.7;
  margin:16px 0 0
}
.cp-shell dialog {
  position:fixed;
  inset:0;
  margin:auto;
  border:1px solid #e0d6e8;
  border-radius:22px;
  padding:25px;
  color:var(--cp-ink);
  width:min(560px,calc(100vw - 32px));
  max-height:calc(100dvh - 40px);
  overflow:auto;
  box-shadow:0 20px 70px #30233a33;
  font-size:.93rem;
  line-height:1.8
}
.cp-shell dialog::backdrop {
  background:#2c20375e;
  backdrop-filter:blur(3px)
}
.cp-dialog-head {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:start
}
.cp-shell dialog h2 {
  font-size:1.3rem;
  margin:0 0 12px
}
.cp-shell dialog h3 {
  font-size:1rem;
  margin:20px 0 9px
}
.cp-shell dialog li {
  padding-left:3px;
  margin:9px 0
}
.cp-shell dialog ol,.cp-shell dialog ul {
  padding-left:24px
}
.cp-example {
  background:#fff5e4;
  border-radius:12px;
  padding:16px;
  color:#7b5e3f
}
.cp-shell dialog img {
  display:block;
  max-width:100%;
  height:auto;
  margin:10px auto
}
.cp-shell dialog input {
  width:100%;
  border:1px solid var(--cp-line);
  border-radius:10px;
  padding:12px;
  font-size:.8rem;
  margin:8px 0 12px
}
.cp-confirm-actions {
  display:flex;
  justify-content:flex-end;
  gap:8px
}
.cp-shell:fullscreen {
  overflow:auto;
  padding-top:25px
}
.cp-shell:fullscreen .cp-wrap {
  max-width:1140px
}
@media(max-width:820px) {
  .cp-shell {
    padding:24px 16px 45px
  }
  .cp-layout {
    grid-template-columns:1fr
  }
  .cp-sidebar {
    padding:18px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 16px
  }
  .cp-sidebar>.cp-eyebrow,.cp-sidebar>h2,.cp-sidebar>.cp-note {
    display:none
  }
  .cp-tiers {
    grid-column:1;
    grid-row:1 / span 2;
    margin:0
  }
  .cp-tiers legend {
    margin-bottom:8px
  }
  .cp-sidebar label {
    grid-column:2;
    grid-row:1;
    margin:0;
    align-self:end
  }
  .cp-sidebar select {
    grid-column:2;
    grid-row:2;
    margin:0;
    min-width:0
  }
  .cp-sidebar #cp-next {
    grid-column:1;
    grid-row:3
  }
  .cp-sidebar #cp-share-open {
    grid-column:2;
    grid-row:3
  }
  .cp-storage-note {
    grid-column:1 / -1;
    margin:0
  }
  .cp-play-panel {
    padding:22px
  }
  .cp-header {
    align-items:start
  }
  .cp-header-actions {
    flex-direction:column
  }
  .cp-board {
    width:min(100%,410px)
  }
}
@media(max-width:440px) {
  .cp-shell {
    padding:18px 10px 35px
  }
  .cp-header h1 {
    font-size:1.8rem
  }
  .cp-header-actions button {
    font-size:.78rem;
    padding:8px 10px
  }
  .cp-header {
    gap:8px
  }
  .cp-header p:last-child {
    font-size:.82rem
  }
  .cp-layout {
    gap:14px
  }
  .cp-play-panel {
    padding:18px 12px
  }
  .cp-sidebar {
    padding:14px;
    gap:8px
  }
  .cp-tiers button {
    font-size:.8rem;
    padding:10px 5px
  }
  .cp-sidebar>button {
    font-size:.8rem;
    padding:10px 8px
  }
  .cp-sidebar select {
    font-size:.8rem;
    padding:10px 5px
  }
  .cp-board {
    gap:6px;
    padding:11px
  }
  .cp-board--mini_sudoku {
    gap:0;
    padding:0
  }
  .cp-board--sokoban {
    gap:3px;
    padding:8px
  }
  .cp-cell {
    border-radius:8px
  }
  .cp-board-head h2 {
    font-size:1.15rem
  }
  .cp-stats {
    gap:6px;
    margin:16px 0 12px
  }
  .cp-stats span {
    font-size:.65rem
  }
  .cp-stats strong {
    font-size:1.1rem
  }
  .cp-actions {
    gap:6px
  }
  .cp-actions button {
    font-size:.76rem;
    padding:10px 9px
  }
  .cp-instruction {
    font-size:.78rem
  }
  .cp-number-pad {
    gap:5px
  }
  .cp-number-pad button {
    min-width:36px
  }
  .cp-shell dialog {
    padding:20px
  }
  .cp-shell dialog h2 {
    font-size:1.1rem
  }
  .cp-confirm-actions {
    flex-wrap:wrap
  }
}
@media(prefers-reduced-motion:reduce) {
  .cp-shell * {
    transition:none!important;
    animation:none!important
  }
}