.challenge-open{
  position:fixed;
  top:12px;
  left:12px;
  z-index:35;
  height:28px;
  padding:0 11px;
  border:1px solid rgba(77,66,50,.10);
  border-radius:999px;
  background:rgba(255,255,255,.88);
  color:#5d5348;
  font:800 11px/1 -apple-system,"PingFang SC",sans-serif;
  letter-spacing:.02em;
  box-shadow:0 6px 16px rgba(80,69,49,.10);
  backdrop-filter:blur(10px);
  cursor:pointer;
}
.challenge-open::before{content:"✦";margin-right:5px;color:var(--challenge-accent,#b45b70)}
.challenge-open:active{transform:scale(.96);background:#fff}

.challenge-sheet{
  position:fixed;
  inset:0;
  z-index:100;
  display:none;
  overflow-y:auto;
  overscroll-behavior:contain;
  background:
    radial-gradient(circle at 88% 4%,color-mix(in srgb,var(--challenge-accent,#b45b70) 13%,transparent) 0 86px,transparent 87px),
    linear-gradient(180deg,#f8f5ee 0%,#efe9df 100%);
  color:#2c2925;
  -webkit-overflow-scrolling:touch;
}
.challenge-sheet.is-open{display:block}
.challenge-inner{
  width:min(760px,100%);
  min-height:100%;
  margin:0 auto;
  padding:14px 14px calc(30px + env(safe-area-inset-bottom));
}
.challenge-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.challenge-kicker{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#6d6257;
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
}
.challenge-kicker::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--challenge-accent,#b45b70);
  box-shadow:0 0 0 5px rgba(180,91,112,.13);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--challenge-accent,#b45b70) 13%,transparent);
}
.challenge-close{
  width:36px;
  height:36px;
  border:0;
  border-radius:50%;
  background:#fff;
  color:#564f47;
  font-size:22px;
  line-height:1;
  box-shadow:0 5px 16px rgba(72,62,49,.11);
  cursor:pointer;
}
.challenge-hero{
  position:relative;
  overflow:hidden;
  padding:22px 20px 20px;
  border-radius:24px;
  color:#fff;
  background:linear-gradient(145deg,var(--challenge-accent,#b45b70),var(--challenge-deep,#864456));
  box-shadow:0 14px 34px rgba(180,91,112,.22);
  box-shadow:0 14px 34px color-mix(in srgb,var(--challenge-accent,#b45b70) 25%,transparent);
}
.challenge-hero::after{
  content:attr(data-letter);
  position:absolute;
  right:-5px;
  bottom:-31px;
  color:rgba(255,255,255,.12);
  font-size:132px;
  font-weight:950;
  line-height:1;
}
.challenge-mode{
  position:relative;
  z-index:1;
  margin-bottom:8px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.15em;
  opacity:.78;
}
.challenge-hero h2{
  position:relative;
  z-index:1;
  margin:0 0 8px;
  max-width:82%;
  font-size:25px;
  line-height:1.16;
  letter-spacing:-.02em;
}
.challenge-lead{
  position:relative;
  z-index:1;
  max-width:86%;
  font-size:13px;
  font-weight:650;
  line-height:1.65;
  opacity:.92;
}
.seed-row{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:15px;
}
.seed-chip{
  padding:6px 9px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  background:rgba(255,255,255,.13);
  font-size:10px;
  font-weight:800;
}
.challenge-section{margin-top:14px}
.challenge-section h3{
  margin:0 0 8px;
  padding:0 2px;
  font-size:14px;
  line-height:1.3;
}
.prompt-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.prompt-card{
  min-height:90px;
  padding:12px;
  border:1px solid rgba(87,74,59,.08);
  border-radius:16px;
  background:rgba(255,255,255,.82);
  box-shadow:0 5px 16px rgba(75,62,45,.05);
}
.prompt-card:first-child:last-child{grid-column:1/-1}
.prompt-no{
  display:inline-flex;
  width:22px;
  height:22px;
  margin-bottom:8px;
  align-items:center;
  justify-content:center;
  border-radius:7px;
  background:#f4e8ec;
  background:color-mix(in srgb,var(--challenge-accent,#b45b70) 13%,#fff);
  color:var(--challenge-accent,#b45b70);
  font-size:10px;
  font-weight:950;
}
.prompt-card p{
  margin:0;
  color:#514940;
  font-size:11px;
  font-weight:680;
  line-height:1.55;
}
.storyboard{
  display:grid;
  grid-template-columns:repeat(var(--scene-count,3),minmax(0,1fr));
  gap:7px;
}
.scene-card{
  min-height:96px;
  padding:10px 8px;
  border:1px dashed #c8b9b0;
  border:1px dashed color-mix(in srgb,var(--challenge-accent,#b45b70) 35%,#b6aa9d);
  border-radius:14px;
  background:rgba(255,255,255,.48);
}
.scene-num{
  color:var(--challenge-accent,#b45b70);
  font-size:9px;
  font-weight:950;
  letter-spacing:.08em;
}
.scene-card strong{
  display:block;
  margin-top:6px;
  font-size:11px;
  line-height:1.4;
}
.scene-card span{
  display:block;
  margin-top:4px;
  color:#8c8176;
  font-size:9px;
  line-height:1.45;
}
.challenge-rule{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:14px;
}
.rule-card{
  padding:12px;
  border-radius:15px;
  background:#fff;
  box-shadow:0 5px 16px rgba(75,62,45,.05);
}
.rule-card small{
  display:block;
  margin-bottom:5px;
  color:#93877b;
  font-size:9px;
  font-weight:850;
  letter-spacing:.08em;
}
.rule-card b{font-size:12px;line-height:1.4}
.challenge-output{
  margin-top:8px;
  padding:13px 14px;
  border-radius:15px;
  background:#2e2b27;
  color:#fff;
  font-size:11px;
  font-weight:750;
  line-height:1.5;
}
.challenge-output span{color:#f0c77e}

@media (min-width:768px){
  .challenge-open{top:18px;left:calc(50% - 470px)}
  .challenge-inner{padding-top:22px}
  .challenge-hero{padding:28px 28px 25px}
  .challenge-hero h2{font-size:34px}
  .challenge-lead{font-size:14px}
  .prompt-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .prompt-card{min-height:104px}
}
@media (max-width:520px){
  .storyboard{grid-template-columns:repeat(2,minmax(0,1fr))}
  .scene-card:last-child:nth-child(odd){grid-column:1/-1}
}
@media (max-width:360px){
  .challenge-open{padding:0 9px;font-size:10px}
  .prompt-grid{grid-template-columns:1fr}
  .challenge-hero h2{max-width:90%;font-size:22px}
  .challenge-lead{max-width:94%}
}
@media (prefers-reduced-motion:reduce){
  .challenge-open:active{transform:none}
}

/* X visual lab: a dark room for the unknown. */
body[data-letter="X"],
body[data-letter="X"] .app{
  background:#07090D;
  color:#E8EFEE;
}
body[data-letter="X"] .header .f-letter{
  border:1px solid rgba(155,226,231,.34);
  background:linear-gradient(145deg,#1B222C,#050608);
  color:#EFFFFF;
  box-shadow:0 0 20px rgba(74,168,177,.18);
}
body[data-letter="X"] .header h2{color:#F1F5F4}
body[data-letter="X"] .header .sub{color:#768A91}
body[data-letter="X"] .home-link,
body[data-letter="X"] .challenge-open{
  border:1px solid rgba(143,211,217,.18);
  background:rgba(19,24,31,.88);
  color:#B8C8CB;
  box-shadow:0 7px 18px rgba(0,0,0,.28);
}
body[data-letter="X"] .tabs-wrap{background:#07090D}
body[data-letter="X"] .tab{
  border:1px solid rgba(141,201,206,.13);
  background:#121720;
  color:#93AEB2;
  box-shadow:none;
}
body[data-letter="X"] .tab.active{
  border-color:rgba(158,224,229,.32);
  background:#274D55;
  color:#F4FFFF;
  box-shadow:0 5px 17px rgba(42,132,142,.19);
}
body[data-letter="X"] .swiper{background:#07090D}
body[data-letter="X"] .slide{
  background:
    radial-gradient(circle at 88% 12%,rgba(57,140,149,.12),transparent 28%),
    linear-gradient(180deg,#0D1118,#07090D) !important;
}
body[data-letter="X"] .guide-panel{
  border:1px solid rgba(139,208,213,.12);
  background:#11161E;
  box-shadow:none;
}
body[data-letter="X"] .guide-panel .gl{color:#7FB3B8}
body[data-letter="X"] .guide-panel .gt{color:#AAB8BA}
body[data-letter="X"] .mtitle .mt{color:#B8E2E5 !important}
body[data-letter="X"] .mtitle .ms{color:#7E989C !important}
body[data-letter="X"] .card,
body[data-letter="X"] .s-card{
  border-color:rgba(137,204,209,.12);
  background:#141A23 !important;
  box-shadow:0 4px 13px rgba(0,0,0,.20);
}
body[data-letter="X"] .card .cw,
body[data-letter="X"] .s-card .sw{color:#F1F5F4}
body[data-letter="X"] .card .cp,
body[data-letter="X"] .card .cz,
body[data-letter="X"] .card .ci,
body[data-letter="X"] .s-card .sz,
body[data-letter="X"] .s-card .si{color:#819398}
body[data-letter="X"] .card .play,
body[data-letter="X"] .s-card .splay{
  border:1px solid rgba(137,204,209,.18);
  background:#202A35;
  color:#A9DCE0;
}
body[data-letter="X"] .dot{background:#27323D}
body[data-letter="X"] .dot.on{background:#79C5CB}
body[data-letter="X"] .rights-note{
  border-top-color:rgba(137,204,209,.12);
  background:#090C11;
  color:#6F8489;
}
body[data-letter="X"] .challenge-sheet{
  background:
    radial-gradient(circle at 88% 4%,rgba(54,150,160,.16) 0 86px,transparent 87px),
    linear-gradient(180deg,#0D1118 0%,#050608 100%);
  color:#EDF4F3;
}
body[data-letter="X"] .challenge-close,
body[data-letter="X"] .prompt-card,
body[data-letter="X"] .rule-card{
  border:1px solid rgba(139,208,213,.12);
  background:#141A23;
  color:#EAF3F2;
  box-shadow:0 8px 20px rgba(0,0,0,.22);
}
body[data-letter="X"] .prompt-card p{color:#BCC9CA}
body[data-letter="X"] .scene-card{
  border-color:rgba(126,201,207,.30);
  background:rgba(18,25,33,.72);
}
body[data-letter="X"] .scene-card span{color:#778D92}
body[data-letter="X"] .rule-card small{color:#74898E}
body[data-letter="X"] .challenge-output{
  border:1px solid rgba(139,208,213,.15);
  background:#020304;
}