.cdw { --w-card:#fff; --w-page:#f2f2f7; --w-fill:#f2f2f7; --w-sub:#8e8e93; --w-blue:#0a84ff; --w-ink:#1c1c1e; --w-gold:#c9a24a; --w-green:#1a7f37;
  color:var(--w-ink); scroll-margin-top:calc(var(--cdw-top, 0px) + 8px); }
.cdw * { box-sizing:border-box; }
.cdw-head { position:sticky; top:var(--cdw-top, 0px); z-index:5; background:var(--w-page); padding:0 0 8px; }
.cdw.cdw-free .cdw-head, .cdw.cdw-typing .cdw-head { position:static; }
.cdw-stage { display:grid; gap:8px; background:var(--w-card); border-radius:16px; padding:10px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.cdw-cake { position:relative; height:184px; border-radius:12px; overflow:hidden;
  background:radial-gradient(130% 100% at 50% 0%, #ffffff 0%, #f4efe7 62%, #e6dfd3 100%); }
.cdw-plate { position:absolute; left:3%; right:31%; bottom:9%; height:12%; border-radius:50%;
  background:radial-gradient(ellipse at 50% 35%, #ffffff 0%, #f0f0f0 55%, #d6d6d6 100%); box-shadow:0 8px 14px rgba(70,50,30,.16); }
.cdw-tiers { position:absolute; left:1%; right:29%; top:9%; bottom:15%; display:flex; flex-direction:column-reverse; align-items:center; }
.cdw-tier { position:relative; display:flex; flex-direction:column; filter:drop-shadow(0 5px 6px rgba(60,40,20,.22)); }
.cdw-top { flex:0 0 11%; min-height:5px; border-radius:10px 10px 0 0; position:relative; }
.cdw-top::after { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 70%, rgba(0,0,0,.08)); }
.cdw-top.naked { flex-basis:4%; }
.cdw-tier.sq .cdw-top { border-radius:3px 3px 0 0; }
.cdw-body { flex:1 1 auto; display:flex; min-height:0; }
.cdw-out { flex:1 1 0; position:relative; border-radius:0 0 0 6px; overflow:hidden; }
.cdw-out::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.22) 0%, rgba(255,255,255,.16) 28%, rgba(255,255,255,0) 52%, rgba(0,0,0,.04) 100%); }
.cdw-out.naked { display:flex; flex-direction:column-reverse; }
.cdw-out.naked::after { background:linear-gradient(90deg, rgba(255,250,240,.55) 0%, rgba(255,250,240,.3) 40%, rgba(255,250,240,.38) 100%); }
.cdw-cut { flex:1 1 0; position:relative; display:flex; flex-direction:column-reverse; overflow:hidden; border-radius:0 0 6px 0;
  box-shadow:inset 7px 0 9px -7px rgba(0,0,0,.45); }
.cdw-band { flex:2.4 1 0; min-height:2px; position:relative; box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 1px rgba(0,0,0,.14); }
.cdw-band.f { flex:1 1 0; }
.cdw-band.new { animation:cdw-in .5s cubic-bezier(.2,.9,.25,1); transform-origin:50% 100%; }
@keyframes cdw-in { from { transform:scaleY(0); opacity:0; } to { transform:none; opacity:1; } }
.cdw-wall { position:absolute; right:0; top:0; bottom:0; width:6%; min-width:3px; box-shadow:inset 1px 0 2px rgba(0,0,0,.25); }
.cdw-tier.sq .cdw-out { border-radius:0 0 0 2px; }
.cdw-focus { position:absolute; top:8px; right:8px; width:26%; max-width:140px; margin:0; z-index:2; }
.cdw-focus img, .cdw-focus-sw { width:100%; aspect-ratio:1; object-fit:cover; display:block; border-radius:12px; border:2px solid #fff; box-shadow:0 4px 12px rgba(0,0,0,.16); }
.cdw-tint { position:absolute; left:2px; right:2px; top:2px; aspect-ratio:1; border-radius:10px; mix-blend-mode:multiply; opacity:.85; }
.cdw-focus figcaption { margin-top:4px; font-size:.72rem; line-height:1.15; color:#3a3a3c; text-align:center; overflow-wrap:break-word; }
.cdw-cap { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:.84rem; color:#3a3a3c; min-width:0; }
.cdw-cap > span:first-child { overflow-wrap:anywhere; }
.cdw-cap .x { color:var(--w-green); }
.cdw-thumbs { display:inline-flex; }
.cdw-thumbs img { width:22px; height:22px; border-radius:50%; object-fit:cover; border:2px solid #fff; margin-left:-6px; box-shadow:0 1px 2px rgba(0,0,0,.18); }
.cdw-thumbs img:first-child { margin-left:0; }
.cdw-legacy { color:#8a5a00; }
.cdw-nav { display:flex; gap:6px; overflow-x:auto; margin-top:8px; padding-bottom:2px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.cdw-nav::-webkit-scrollbar { display:none; }
.cdw-nav button { flex:none; display:inline-flex; align-items:center; gap:5px; border:0; border-radius:999px; padding:7px 12px; background:var(--w-card); color:var(--w-ink); font:inherit; font-size:.86rem; cursor:pointer; }
.cdw-nav button b { display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--w-fill); color:#636366; font-size:.75rem; }
.cdw-nav button.done b { background:#e8f8ec; color:var(--w-green); }
.cdw-nav button.on { background:var(--w-ink); color:#fff; }
.cdw-nav button.on b { background:var(--w-gold); color:#1c1c1e; }
.cdw-panel { background:var(--w-card); border-radius:16px; padding:16px; box-shadow:0 1px 2px rgba(0,0,0,.04); min-width:0; }
.cdw-panel h3 { margin:0; font-size:1.15rem; letter-spacing:-.01em; }
.cdw-panel h4 { margin:16px 0 8px; font-size:.82rem; text-transform:uppercase; letter-spacing:.02em; color:var(--w-sub); font-weight:600; }
.cdw-hint { color:var(--w-sub); font-size:.86rem; margin:4px 0 10px; }
.cdw-note { background:#eef6ff; color:#0040a8; border-radius:10px; padding:9px 11px; font-size:.88rem; margin:8px 0 4px; }
.cdw-msg { color:#c1121f; margin:8px 0 0; }
.cdw-tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:8px; margin-top:8px; }
.cdw-tile { position:relative; border:2px solid transparent; background:var(--w-fill); border-radius:14px; padding:0 0 8px; cursor:pointer; text-align:left; overflow:hidden;
  font-family:inherit; color:var(--w-ink); transition:transform .12s, border-color .12s, box-shadow .12s; }
.cdw-tile img, .cdw-tile-sw { width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.cdw-tile span { display:block; font-size:.86rem; padding:6px 8px 0; line-height:1.2; overflow-wrap:anywhere; }
.cdw-tile small { display:block; padding:2px 8px 0; color:var(--w-green); font-weight:600; font-size:.78rem; }
.cdw-tile:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.08); }
.cdw-tile.on { border-color:var(--w-blue); box-shadow:0 0 0 3px rgba(10,132,255,.18); }
.cdw-tile.on::after { content:"✓"; position:absolute; top:6px; right:6px; width:22px; height:22px; border-radius:50%; background:var(--w-blue); color:#fff; font-size:.8rem; display:grid; place-items:center; }
.cdw-chips { display:flex; flex-wrap:wrap; gap:6px; }
.cdw-chip { display:inline-flex; align-items:center; gap:6px; border:1.5px solid transparent; background:var(--w-fill); color:var(--w-ink); border-radius:999px; padding:8px 13px; font-size:.92rem; cursor:pointer; font-family:inherit; max-width:100%; }
.cdw-chip small { color:var(--w-green); font-weight:600; }
.cdw-chip.on { background:#e3f0ff; border-color:var(--w-blue); color:#0040a8; }
.cdw-ideas { display:flex; gap:10px; overflow-x:auto; padding:2px 2px 6px; scroll-snap-type:x mandatory; }
.cdw-ideas button { flex:0 0 128px; border:0; background:var(--w-fill); border-radius:12px; padding:6px; text-align:left; cursor:pointer; scroll-snap-align:start; font-family:inherit; color:var(--w-ink); }
.cdw-ideas img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; display:block; }
.cdw-ideas span { display:block; font-size:.8rem; margin-top:4px; line-height:1.2; }
.cdw-layers { list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px; }
.cdw-layers li { display:flex; align-items:center; gap:10px; background:var(--w-fill); border-radius:12px; padding:6px 8px 6px 6px; border:1.5px solid transparent; }
.cdw-layers li.on { border-color:var(--w-blue); background:#eef6ff; }
.cdw-lsw { flex:none; width:58px; height:30px; border-radius:7px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); }
.cdw-layers li > span { flex:1; min-width:0; line-height:1.15; }
.cdw-layers li small { display:block; color:var(--w-sub); font-size:.74rem; }
.cdw-layers li b { font-weight:600; font-size:.92rem; overflow-wrap:break-word; }
.cdw-chg { border:0; background:#fff; border-radius:8px; padding:6px 9px; font-size:.8rem; cursor:pointer; font-family:inherit; color:var(--w-blue); }
.cdw-x { flex:none; width:40px; height:40px; display:grid; place-items:center; border:0; border-radius:10px; background:#fff; font-size:1.35rem; line-height:1; color:#c1121f; cursor:pointer; padding:0; }
.cdw-add { margin-top:10px; width:100%; display:flex; align-items:center; justify-content:center; gap:8px; border:1.5px dashed #b8b8c0; background:#fafafc; border-radius:14px; padding:14px; font-size:1rem; font-weight:600; color:var(--w-ink); cursor:pointer; font-family:inherit; }
.cdw-add b { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--w-ink); color:#fff; font-size:1.1rem; }
.cdw-link { border:0; background:none; color:var(--w-blue); padding:10px 0 0; cursor:pointer; font-size:.9rem; font-family:inherit; }
.cdw-colors { display:flex; flex-wrap:wrap; gap:10px; }
.cdw-colors button { display:flex; flex-direction:column; align-items:center; gap:4px; border:0; background:none; cursor:pointer; font-family:inherit; font-size:.76rem; color:#3a3a3c; width:62px; }
.cdw-colors i { width:40px; height:40px; border-radius:50%; border:1px solid rgba(0,0,0,.12); box-shadow:inset 0 -3px 6px rgba(0,0,0,.08); }
.cdw-colors button.on i { box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--w-blue); }
.cdw-colors span { text-align:center; line-height:1.15; overflow-wrap:anywhere; }
.cdw-num { display:flex; align-items:center; gap:8px; margin-top:10px; }
.cdw-num input { width:90px; border:0; background:var(--w-fill); border-radius:9px; padding:9px 10px; font-size:16px; font-family:inherit; }
.cdw-step { display:flex; align-items:center; gap:12px; }
.cdw-step button { width:42px; height:42px; border-radius:50%; border:0; background:var(--w-fill); font-size:1.3rem; cursor:pointer; }
.cdw-step b { min-width:1.5em; text-align:center; font-size:1.1rem; }
.cdw-step small { color:var(--w-green); font-weight:600; }
.cdw-sum { list-style:none; margin:12px 0 0; padding:0; display:grid; gap:2px; }
.cdw-sum li { display:flex; align-items:center; gap:10px; padding:5px 0; border-bottom:.5px solid rgba(60,60,67,.14); font-size:.9rem; }
.cdw-sum li img, .cdw-sum li i { flex:none; width:34px; height:34px; border-radius:8px; object-fit:cover; background:var(--w-fill); }
.cdw-sum li b { flex:0 0 108px; color:var(--w-sub); font-weight:500; }
.cdw-sum li span { flex:1; min-width:0; overflow-wrap:anywhere; }
.cdw-pics { display:grid; grid-template-columns:1fr; gap:10px; margin-top:14px; }
.cdw-pics figure { margin:0; }
.cdw-pics img { width:100%; height:auto; border-radius:14px; display:block; cursor:zoom-in; }
.cdw-pics figcaption { font-size:.8rem; color:var(--w-sub); text-align:center; margin-top:4px; }
.cdw-wait { aspect-ratio:16/9; border-radius:14px; background:linear-gradient(110deg, #f2f2f7 30%, #e9e9ef 50%, #f2f2f7 70%); background-size:200% 100%; animation:cdw-shine 1.4s linear infinite;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--w-sub); font-size:.85rem; text-align:center; padding:10px; }
@keyframes cdw-shine { to { background-position:-200% 0; } }
.cdw-spin { width:28px; height:28px; border-radius:50%; border:3px solid #d1d1d6; border-top-color:var(--w-blue); animation:cdw-rot .9s linear infinite; }
@keyframes cdw-rot { to { transform:rotate(360deg); } }
.cdw-airow { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.cdw-ai { flex:1 1 180px; border:0; border-radius:12px; padding:13px 14px; font-size:1rem; font-weight:600; background:var(--w-blue); color:#fff; cursor:pointer; font-family:inherit; }
.cdw-ai.sec { background:#e5e5ea; color:var(--w-ink); }
.cdw-ai[disabled] { opacity:.45; cursor:default; }
.cdw-moves { display:flex; gap:8px; margin-top:18px; }
.cdw-moves button { border:0; border-radius:12px; padding:13px 16px; font-size:.98rem; font-weight:600; cursor:pointer; font-family:inherit; }
.cdw-prev { background:var(--w-fill); color:var(--w-ink); }
.cdw-next { flex:1; background:var(--w-ink); color:#fff; }
@media (max-height:720px) and (max-width:899px) {
  .cdw-cake { height:146px; }
  .cdw-focus { width:22%; }
  .cdw-cap { flex-wrap:nowrap; overflow:hidden; white-space:nowrap; }
  .cdw-cap > span:first-child { overflow:hidden; text-overflow:ellipsis; overflow-wrap:normal; }
}
@media (max-width:360px) {
  .cdw-panel { padding:14px 12px; }
  .cdw-lsw { width:34px; }
  .cdw-layers li { gap:7px; }
  .cdw-chg { padding:6px 7px; font-size:.76rem; }
  .cdw-x { width:36px; height:36px; }
  .cdw-focus figcaption { font-size:.66rem; }
}
@media (max-height:600px) and (max-width:899px) {
  .cdw-head { position:static; }
}
@media (min-width:900px) {
  .cdw { display:grid; grid-template-columns:minmax(340px, 460px) minmax(0, 1fr); gap:16px; align-items:start; }
  .cdw-head { top:calc(var(--cdw-top, 0px) + 12px); }
  .cdw-nav { flex-wrap:wrap; overflow:visible; }
  .cdw-cake { height:300px; }
  .cdw-tiles { grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); }
}