/* DotWise Studio download page only — kept separate from the existing LumiCon styles. */
.dotwise-page {
  background:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.024) 1px, transparent 1px),
    linear-gradient(135deg, #080a0d 0%, #10201f 52%, #0b0d12 100%);
}
.dotwise-page::before { background: linear-gradient(180deg, rgba(156, 229, 109, .11), transparent 34%), linear-gradient(110deg, transparent 0 56%, rgba(67, 220, 232, .08) 56% 72%, transparent 72%); }
.dotwise-hero { position: relative; }.dotwise-hero h1 { max-width: 9ch; font-size: clamp(3rem, 7vw, 6.7rem); }.dotwise-hero::after { content: ""; position: absolute; inset: auto 0 0 auto; width: 42%; height: 6px; background: linear-gradient(90deg, transparent, var(--green), var(--cyan)); }.download-note { margin: 12px 0 0; color: var(--dim); font-size: .9rem; }
.dotwise-preview { align-self: stretch; min-height: 360px; overflow: hidden; border: 1px solid #36554d; border-radius: var(--radius); background: #101b19; box-shadow: 0 34px 80px rgba(0, 0, 0, .42); transform: perspective(1000px) rotateY(-3deg) rotateX(1deg); }.dotwise-preview-bar { min-height: 44px; display: flex; align-items: center; gap: 7px; padding: 0 14px; border-bottom: 1px solid #35534b; background: #152724; color: #a9c6bd; font-size: .74rem; }.dotwise-preview-bar i { width: 8px; height: 8px; border-radius: 50%; background: #ff8b73; }.dotwise-preview-bar i:nth-child(2) { background: #ffd06a; }.dotwise-preview-bar i:nth-child(3) { background: #9ce56d; }.dotwise-preview-bar span { margin-left: 7px; }.dotwise-preview-body { min-height: 316px; display: grid; grid-template-columns: 108px 1fr; }.dotwise-preview-sidebar { display: grid; grid-template-columns: 25px 1fr; align-content: start; gap: 12px 8px; padding: 25px 13px; border-right: 1px solid #35534b; background: #13231f; color: #a9c6bd; font-size: .72rem; }.dotwise-preview-sidebar b { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: #081107; font-size: .7rem; }.dotwise-preview-sidebar span { align-self: center; }.dotwise-preview-canvas { display: grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); gap:6px; padding:27px; background:linear-gradient(135deg,#263b35,#111b19); }.diamond { position:relative; display:block; border:1px solid rgba(255,255,255,.22); border-radius:3px; background:#6fc7b7; box-shadow:inset 0 8px 12px rgba(255,255,255,.14),0 4px 12px rgba(0,0,0,.18); }.diamond::after { content:""; position:absolute; inset:24%; border-radius:50%; background:rgba(255,255,255,.18); }.d2,.d8 { background:#ffe38a; }.d3,.d9 { background:#83b4d7; }.d4,.d7 { background:#926970; }.d5,.d10 { background:#e5d6ad; }.d6,.d11 { background:#4d7166; }.d12 { background:#de9a94; }
.dotwise-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }.dotwise-grid .download-card { min-height:230px; }.dotwise-download { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.8fr); gap:34px; align-items:center; background:linear-gradient(105deg,rgba(156,229,109,.10),transparent 45%),linear-gradient(180deg,rgba(23,29,38,.94),rgba(14,18,24,.94)); }.dotwise-download h2 { font-size:clamp(2rem,4vw,4rem); }.dotwise-download p:not(.kicker) { color:var(--muted); line-height:1.62; }.download-panel { display:grid; gap:12px; padding:20px; border:1px solid rgba(156,229,109,.42); border-radius:var(--radius); background:rgba(156,229,109,.055); }.download-panel strong { font-size:1.24rem; }.download-panel small { color:var(--muted); }.download-panel .button { width:100%; }.download-panel p { margin:0; font-size:.9rem; }.download-panel em { color:#fff2ca; font-style:normal; }
@media (max-width:980px) { .dotwise-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.dotwise-download { grid-template-columns:1fr; }.dotwise-preview { min-height:300px; transform:none; } }
@media (max-width:720px) { .dotwise-grid { grid-template-columns:1fr; }.dotwise-preview-body { grid-template-columns:78px 1fr; }.dotwise-preview-sidebar { grid-template-columns:1fr; gap:6px; padding:16px 10px; text-align:center; }.dotwise-preview-sidebar b { justify-self:center; margin-top:4px; }.dotwise-preview-canvas { padding:16px; } }