:root .sig--des-grid { display: grid; place-items: center; padding: clamp(14px, 2.6vw, 34px); container-type: inline-size; }
:root .sig--des-grid .dg, :root .sig--des-grid.dg { --p0: #0f766e; --p1: #c98cff; --p2: #f3efe6; --p3: #16232a; width: 100%; max-width: 980px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(14px, 2.6vw, 30px); align-items: center; }
:root .sig--des-grid .dg__board, :root .sig--des-grid.dg__board { position: relative; aspect-ratio: 1; border-radius: 18px; overflow: hidden; background-color: #f4f1ec; background-image:
  linear-gradient(rgba(60, 40, 80, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(60, 40, 80, .07) 1px, transparent 1px),
  linear-gradient(rgba(60, 40, 80, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(60, 40, 80, .13) 1px, transparent 1px);
  background-size: 5% 5%, 5% 5%, 25% 25%, 25% 25%; background-position: -1px -1px; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(255, 255, 255, .5); }
:root .sig--des-grid .dg__board::before, :root .sig--des-grid.dg__board::before, :root .sig--des-grid .dg__board::after, :root .sig--des-grid.dg__board::after { content: ""; position: absolute; z-index: 1; background: #ebe6de; }
:root .sig--des-grid .dg__board::before, :root .sig--des-grid.dg__board::before { left: 0; right: 0; top: 0; height: 14px; border-bottom: 1px solid #d7d0c4; background-image: repeating-linear-gradient(90deg, #a79f93 0 1px, transparent 1px 5%); background-size: 100% 6px; background-repeat: no-repeat; background-position: 0 100%; }
:root .sig--des-grid .dg__board::after, :root .sig--des-grid.dg__board::after { top: 0; bottom: 0; left: 0; width: 14px; border-right: 1px solid #d7d0c4; background-image: repeating-linear-gradient(180deg, #a79f93 0 1px, transparent 1px 5%); background-size: 6px 100%; background-repeat: no-repeat; background-position: 100% 0; }
:root .sig--des-grid .dg__svg, :root .sig--des-grid.dg__svg { position: absolute; inset: 8% 8% 10% 8%; width: 84%; height: 82%; overflow: visible; }
:root .sig--des-grid .dg__guides, :root .sig--des-grid.dg__guides { fill: none; stroke: #a100ff; stroke-width: .7; opacity: .7; }
:root .sig--des-grid .dg__guides line, :root .sig--des-grid.dg__guides line, :root .sig--des-grid .dg__guides rect, :root .sig--des-grid.dg__guides rect, :root .sig--des-grid .dg__guides circle, :root .sig--des-grid.dg__guides circle { stroke-dasharray: 1; stroke-dashoffset: 1; }
:root .sig--des-grid .dg__cross, :root .sig--des-grid.dg__cross { fill: none; stroke: #a100ff; stroke-width: 1.2; opacity: 0; }
:root .sig--des-grid .dg__dims text, :root .sig--des-grid.dg__dims text { font: 600 7px/1 var(--f-display); fill: #7a35b5; letter-spacing: .04em; }
:root .sig--des-grid .dg__mark > *, :root .sig--des-grid.dg__mark > * { fill: var(--p0); fill-opacity: 0; stroke: #a100ff; stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linejoin: round; }
:root .sig--des-grid .dg__mark .p1, :root .sig--des-grid.dg__mark .p1, :root .sig--des-grid .dg__mini .p1, :root .sig--des-grid.dg__mini .p1, :root .sig--des-grid .dg__lhm .p1, :root .sig--des-grid.dg__lhm .p1, :root .sig--des-grid .dg__cm .p1, :root .sig--des-grid.dg__cm .p1 { fill: var(--p1); }
:root .sig--des-grid .dg__no, :root .sig--des-grid.dg__no { position: absolute; z-index: 2; right: 12px; top: 22px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .75); color: #4a3a5c; font: 600 11px/1 var(--f-display); letter-spacing: .02em; }
:root .sig--des-grid .dg__no b, :root .sig--des-grid.dg__no b { color: #7a00c4; }
:root .sig--des-grid .dg__sizes, :root .sig--des-grid.dg__sizes { position: absolute; z-index: 2; left: 24px; bottom: 14px; display: flex; align-items: flex-end; gap: 10px; opacity: 0; }
:root .sig--des-grid .dg__sizes span, :root .sig--des-grid.dg__sizes span { display: grid; place-items: center; padding: 6px; border-radius: 8px; background: #fff; box-shadow: 0 4px 12px -6px rgba(40, 20, 60, .4); }
:root .sig--des-grid .dg__mini, :root .sig--des-grid.dg__mini { display: block; overflow: visible; }
:root .sig--des-grid .dg__mini > *, :root .sig--des-grid.dg__mini > *, :root .sig--des-grid .dg__lhm > *, :root .sig--des-grid.dg__lhm > *, :root .sig--des-grid .dg__cm > *, :root .sig--des-grid.dg__cm > * { fill: var(--p0); }
:root .sig--des-grid .dg__sizes span:nth-child(1) .dg__mini, :root .sig--des-grid.dg__sizes span:nth-child(1) .dg__mini { width: 40px; height: 40px; }
:root .sig--des-grid .dg__sizes span:nth-child(2) .dg__mini, :root .sig--des-grid.dg__sizes span:nth-child(2) .dg__mini { width: 24px; height: 24px; }
:root .sig--des-grid .dg__sizes span:nth-child(3) .dg__mini, :root .sig--des-grid.dg__sizes span:nth-child(3) .dg__mini { width: 14px; height: 14px; }
:root .sig--des-grid .dg__side, :root .sig--des-grid.dg__side { display: grid; gap: clamp(12px, 1.8vw, 20px); min-width: 0; }
:root .sig--des-grid .dg__pal, :root .sig--des-grid.dg__pal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
:root .sig--des-grid .dg__sw, :root .sig--des-grid.dg__sw { display: grid; gap: 4px; min-width: 0; }
:root .sig--des-grid .dg__sw i, :root .sig--des-grid.dg__sw i { display: block; height: clamp(46px, 6vw, 70px); border-radius: 10px; transform-origin: 50% 100%; transform: scaleY(0); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
:root .sig--des-grid .dg__sw:nth-child(1) i, :root .sig--des-grid.dg__sw:nth-child(1) i { background: var(--p0); }
:root .sig--des-grid .dg__sw:nth-child(2) i, :root .sig--des-grid.dg__sw:nth-child(2) i { background: var(--p1); }
:root .sig--des-grid .dg__sw:nth-child(3) i, :root .sig--des-grid.dg__sw:nth-child(3) i { background: var(--p2); }
:root .sig--des-grid .dg__sw:nth-child(4) i, :root .sig--des-grid.dg__sw:nth-child(4) i { background: var(--p3); }
:root .sig--des-grid .dg__sw b, :root .sig--des-grid.dg__sw b { font: 600 12px/1.2 var(--f-display); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root .sig--des-grid .dg__sw small, :root .sig--des-grid.dg__sw small { min-height: 1.2em; font: 500 11px/1.2 var(--f-body); color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
:root .sig--des-grid .dg__type, :root .sig--des-grid.dg__type { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); }
:root .sig--des-grid .dg__aa, :root .sig--des-grid.dg__aa { font: 700 clamp(40px, 5.4vw, 64px)/1 var(--f-display); color: #fff; letter-spacing: -.03em; opacity: 0; min-width: 1.5em; }
:root .sig--des-grid .dg__type div, :root .sig--des-grid.dg__type div { display: grid; gap: 4px; min-width: 0; }
:root .sig--des-grid .dg__fn, :root .sig--des-grid.dg__fn { min-height: 1.2em; font: 600 13px/1.2 var(--f-display); color: var(--lilac); }
:root .sig--des-grid .dg__abc, :root .sig--des-grid.dg__abc { font: 400 13px/1.3 var(--f-body); color: var(--ink-2); opacity: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root .sig--des-grid .dg__sta, :root .sig--des-grid.dg__sta { position: relative; height: clamp(150px, 17vw, 200px); perspective: 900px; }
:root .sig--des-grid .dg__lh, :root .sig--des-grid.dg__lh { position: absolute; left: 4%; top: 0; height: 100%; aspect-ratio: 1 / 1.414; padding: 9% 8%; border-radius: 4px; background: #fbfaf7; box-shadow: 0 18px 36px -18px rgba(0, 0, 0, .8); transform-origin: 50% 0; transform: perspective(700px) rotateX(-92deg); opacity: 0; display: flex; flex-direction: column; gap: 5%; }
:root .sig--des-grid .dg__lh-top, :root .sig--des-grid.dg__lh-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8%; }
:root .sig--des-grid .dg__lhm, :root .sig--des-grid.dg__lhm { width: 22%; height: auto; aspect-ratio: 1; }
:root .sig--des-grid .dg__lh-top span, :root .sig--des-grid.dg__lh-top span { font: 600 6px/1 var(--f-display); color: var(--p3); white-space: nowrap; }
:root .sig--des-grid .dg__lh i, :root .sig--des-grid.dg__lh i { display: block; height: 3px; border-radius: 2px; background: #dcd6cf; }
:root .sig--des-grid .dg__lh i.s, :root .sig--des-grid.dg__lh i.s { width: 62%; }
:root .sig--des-grid .dg__lh-foot, :root .sig--des-grid.dg__lh-foot { margin-top: auto; height: 5px; border-radius: 2px; background: var(--p0); }
:root .sig--des-grid .dg__card, :root .sig--des-grid.dg__card { position: absolute; right: 2%; bottom: 4%; width: 58%; aspect-ratio: 85 / 55; transform: translateY(30px) rotate(-6deg); opacity: 0; perspective: 800px; }
:root .sig--des-grid .dg__flip, :root .sig--des-grid.dg__flip { position: absolute; inset: 0; transform-style: preserve-3d; }
:root .sig--des-grid .dg__card-f, :root .sig--des-grid.dg__card-f, :root .sig--des-grid .dg__card-b, :root .sig--des-grid.dg__card-b { position: absolute; inset: 0; border-radius: 8px; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 22px 40px -18px rgba(0, 0, 0, .9); display: flex; align-items: center; }
:root .sig--des-grid .dg__card-f, :root .sig--des-grid.dg__card-f { gap: 10%; padding: 0 9%; background: #fff; }
:root .sig--des-grid .dg__card-f .dg__cm, :root .sig--des-grid.dg__card-f .dg__cm { width: 28%; flex: none; }
:root .sig--des-grid .dg__card-f div, :root .sig--des-grid.dg__card-f div { display: grid; gap: 4px; min-width: 0; }
:root .sig--des-grid .dg__card-f b, :root .sig--des-grid.dg__card-f b { font: 600 clamp(9px, 1.1vw, 13px)/1.1 var(--f-display); color: var(--p3); }
:root .sig--des-grid .dg__card-f small, :root .sig--des-grid.dg__card-f small { font: 500 clamp(8px, .9vw, 10px)/1.1 var(--f-body); color: #5d5a66; }
:root .sig--des-grid .dg__card-b, :root .sig--des-grid.dg__card-b { justify-content: center; background: var(--p0); transform: rotateY(180deg); }
:root .sig--des-grid .dg__card-b .dg__cm, :root .sig--des-grid.dg__card-b .dg__cm { width: 30%; }
:root .sig--des-grid .dg__card-b .dg__cm > *, :root .sig--des-grid.dg__card-b .dg__cm > * { fill: var(--p2); }
:root .sig--des-grid .dg__card-b .dg__cm .p1, :root .sig--des-grid.dg__card-b .dg__cm .p1 { fill: var(--p1); }
:root .sig--des-grid .dg.is-done .dg__guides, :root .sig--des-grid.dg.is-done .dg__guides { opacity: .18; }
:root .sig--des-grid .dg.is-done .dg__guides *, :root .sig--des-grid.dg.is-done .dg__guides *, :root .sig--des-grid .dg.is-done .dg__mark > *, :root .sig--des-grid.dg.is-done .dg__mark > * { stroke-dashoffset: 0; }
:root .sig--des-grid .dg.is-done .dg__mark > *, :root .sig--des-grid.dg.is-done .dg__mark > * { fill-opacity: 1; stroke-opacity: 0; }
:root .sig--des-grid .dg.is-done .dg__sizes, :root .sig--des-grid.dg.is-done .dg__sizes, :root .sig--des-grid .dg.is-done .dg__aa, :root .sig--des-grid.dg.is-done .dg__aa, :root .sig--des-grid .dg.is-done .dg__abc, :root .sig--des-grid.dg.is-done .dg__abc { opacity: 1; }
:root .sig--des-grid .dg.is-done .dg__sw i, :root .sig--des-grid.dg.is-done .dg__sw i { transform: none; }
:root .sig--des-grid .dg.is-done .dg__lh, :root .sig--des-grid.dg.is-done .dg__lh { transform: none; opacity: 1; }
:root .sig--des-grid .dg.is-done .dg__card, :root .sig--des-grid.dg.is-done .dg__card { transform: rotate(-4deg); opacity: 1; }
@container (max-width: 620px){:root .sig--des-grid .dg, :root .sig--des-grid.dg { grid-template-columns: 1fr; }
:root .sig--des-grid .dg__board, :root .sig--des-grid.dg__board { width: min(100%, 340px); justify-self: center; }
:root .sig--des-grid .dg__sta, :root .sig--des-grid.dg__sta { height: 150px; }

}