.desk-card {
  --dc-purple: #6242bd;
  --dc-fog: #f6f2fd;
  color: var(--fg, #23223a);
  background: var(--card, white);
  border: 1px solid var(--border, #e4e2ec);
  border-radius: 18px;
  overflow: hidden;
  margin: 0 0 1.25rem;
}
.desk-card *, .desk-card *::before, .desk-card *::after { box-sizing: border-box; }
.dc-heading { padding: clamp(17px, 2.4vw, 30px) clamp(18px, 3vw, 34px) 0; }
.dc-heading h2 { margin: 0; color: inherit; font-size: clamp(1.3rem, 2.55vw, 1.85rem); letter-spacing: -.035em; line-height: 1.35; }
.dc-heading p, .desk-card .dc-help { margin: .45em 0 0; color: var(--muted, #605d6b); font-size: .9rem; line-height: 1.65; }
.dc-workspace { display: grid; grid-template-columns: minmax(0,1.16fr) minmax(0,1fr); align-items: stretch; gap: clamp(16px, 2vw, 26px); padding: clamp(16px, 2.4vw, 25px) clamp(18px, 3vw, 34px) clamp(20px, 2.5vw, 30px); }
.dc-stage {
  display: grid; place-items: center; min-width: 0; min-height: 220px; padding: clamp(13px, 2vw, 26px);
  border-radius: 14px;
  background-color: #eee9f6;
  background-image: radial-gradient(#cfc6df 1px, transparent 1.25px);
  background-size: 11px 11px;
}
.dc-postcard {
  --paper: #ecddff; --ink: #322051; --edge: #462866; --sun: #ffd775;
  --far: #bea2e8; --mid: #956fd2; --near: #684c94;
  position: relative; display: block; width: 100%; max-width: 420px;
  min-height: 160px; padding: 0; text-align: left; font-family: inherit; color: var(--ink);
  border: 1px solid var(--edge); border-radius: 8px; background: var(--paper); cursor: pointer;
  box-shadow: 3px 5px 0 color-mix(in srgb, var(--edge) 25%, transparent), 0 9px 22px -14px #25103b;
}
.dc-postcard[data-color="lagoon"] { --paper: #d6edeb; --ink: #123c42; --edge: #225c61; --sun: #ffcb8d; --far: #94cbc2; --mid: #79b4aa; --near: #407e7f; }
.dc-postcard[data-color="peach"] { --paper: #ffe3cf; --ink: #552d2d; --edge: #72443a; --sun: #ffe7ab; --far: #eabcaa; --mid: #d88d76; --near: #a76559; }
.dc-rim { position: relative; min-height: clamp(160px, 16vw, 220px); overflow: hidden; gap: 10px; display: flex; align-items: start; flex-direction: column; border-radius: 7px; padding: clamp(13px, 2vw, 22px); isolation: isolate; }
.dc-side, .dc-hint { display: block; position: relative; flex: none; width: fit-content; font-size: .69rem; line-height: 1.25; font-weight: 650; }
.dc-side { letter-spacing: .12em; }
.dc-hint { margin-top: auto; padding: 4px 8px; border-radius: 10px; background: var(--paper); }
.dc-letter { position: relative; margin: auto 0; max-width: 77%; white-space: normal; overflow-wrap: anywhere; font-size: clamp(.98rem, 2.05vw, 1.65rem); line-height: 1.3; font-weight: 750; letter-spacing: -.04em; }
.dc-postcard[data-align="center"] .dc-letter { align-self: center; text-align: center; }
.dc-postcard[data-side="back"] .dc-letter { font-size: clamp(.78rem, 1.33vw, 1.05rem); font-weight: 550; letter-spacing: 0; line-height: 1.45; max-width: 94%; }
.dc-postcard[data-side="back"] .dc-rim { background: color-mix(in srgb, var(--paper) 58%, white); }
.dc-postcard[data-side="back"] .dc-art { opacity: .12; }
.dc-stamp { position: absolute; top: 11%; right: 7%; color: var(--edge); width: 23px; height: 28px; display: grid; place-items: center; border: 2px dotted var(--edge); outline: 1px solid var(--edge); transform: rotate(7deg); font-size: 1rem; }
.dc-art { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.dc-art i { display: block; position: absolute; pointer-events: none; }
.dc-sun { width: 17%; aspect-ratio: 1; right: 19%; top: 22%; border-radius: 50%; background: var(--sun); }
.dc-hill-far, .dc-hill-mid, .dc-hill-near { width: 75%; height: 80%; border-radius: 46% 60% 0 0; }
.dc-hill-far { top: 56%; right: -26%; transform: rotate(-32deg); background: var(--far); }
.dc-hill-mid { top: 66%; right: -5%; transform: rotate(-11deg); background: var(--mid); }
.dc-hill-near { top: 82%; right: -9%; transform: rotate(-17deg); background: var(--near); }
.dc-trail { border: 1.5px dashed var(--paper); border-radius: 50%; width: 50%; height: 28%; bottom: -10%; right: -3%; transform: rotate(-20deg); }
.dc-controls { min-width: 0; align-self: center; }
.dc-controls button, .dc-controls select, .dc-input { font: inherit; }
.dc-fields, .dc-branch { display: grid; gap: 11px; justify-items: start; }
.dc-branch:not(:empty) { margin-top: 6px; }
.dc-branch h3 { color: inherit; margin: 0; font-size: 1.08rem; line-height: 1.45; }
.dc-branch .dc-help { margin: -5px 0 0; }
.dc-field { width: 100%; display: grid; gap: 4px; font-size: .85rem; font-weight: 650; }
.dc-input { display: block; min-width: 0; width: 100%; line-height: 1.35; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border, #d8d3e5); background: var(--bg, #faf9fd); color: var(--fg, #292437); }
.dc-field textarea { resize: vertical; min-height: 53px; }
.dc-primary, .dc-choice, .dc-swatch, .dc-link-button { cursor: pointer; }
.dc-primary, .dc-choice { min-height: 36px; padding: 6px 14px; border-radius: 8px; border: 1px solid transparent; }
.dc-controls .dc-primary { background: var(--dc-purple); color: white; font-size: .86rem; font-weight: 650; }
.dc-primary:disabled { cursor: default; opacity: .55; }
.dc-choices { display: flex; flex-wrap: wrap; gap: 7px; }
.dc-choice { background: var(--dc-fog); color: var(--dc-purple); border-color: #c7bbdf; }
.dc-link-button { min-height: 32px; background: transparent; border: 0; color: var(--dc-purple); padding: 0; text-decoration: underline; text-underline-offset: .16em; }
.dc-controls .dc-link-button, .dc-controls .dc-course { font-size: .85rem; }
.dc-swatches { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.dc-swatches legend { padding: 0; margin: 0 0 3px; font-size: .85rem; font-weight: 650; }
.dc-controls .dc-swatch { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; border: 1px solid var(--border, #d8d3e5); border-radius: 14px; padding: 3px 9px; background: var(--card, white); color: var(--fg, #23223a); font-size: .82rem; }
.dc-swatch::before { content: ""; background: #a486d0; width: 12px; height: 12px; border-radius: 50%; }
.dc-swatch[data-color="lagoon"]::before { background: #518e8d; }
.dc-swatch[data-color="peach"]::before { background: #df9c7b; }
.dc-swatch[aria-pressed="true"] { outline: 2px solid var(--dc-purple); outline-offset: -2px; }
.dc-rule { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; width: 100%; }
.dc-course { color: var(--dc-purple); text-decoration: underline; text-underline-offset: .15em; }
.dc-notice:not(:empty), .dc-warning:not(:empty) { margin: 9px 0 0; color: var(--muted, #605d6b); font-size: .85rem; line-height: 1.45; }
.dc-warning:empty { display: none; }
.desk-card :focus-visible { outline: 3px solid #7651d1; outline-offset: 3px; }
html[data-theme="dark"] .desk-card { --dc-purple: #bfabff; --dc-fog: #332948; }
html[data-theme="dark"] .dc-controls .dc-primary { background: #7253b6; color: #fff; }
html[data-theme="dark"] .dc-stage { background-color: #292335; background-image: radial-gradient(#4f415e 1px,transparent 1.25px); }
@media (prefers-reduced-motion: no-preference) {
  .dc-postcard { transition: transform .2s, box-shadow .2s; }
  .dc-postcard:hover { transform: translateY(-2px); }
  .dc-postcard[data-side="back"] .dc-rim { animation: dc-turn-back .25s ease-out; }
  .dc-postcard[data-side="front"] .dc-rim { animation: dc-turn-front .25s ease-out; }
  @keyframes dc-turn-back { from { transform: perspective(700px) rotateY(-40deg); } }
  @keyframes dc-turn-front { from { transform: perspective(700px) rotateY(40deg); } }
}
@media (max-width: 890px) {
  .dc-workspace { grid-template-columns: 1fr; }
  .dc-stage { min-height: 0; }
  .dc-postcard { max-width: 350px; }
}
@media (max-width: 420px) {
  .dc-workspace { padding: 13px; gap: 12px; }
  .dc-heading { padding: 15px 14px 0; }
  .dc-stage { padding: 12px; }
  .dc-rule { grid-template-columns: 1fr; }
  .dc-field input, .dc-field textarea, .dc-field select { font-size: 1rem; }
}