/* Creativity guide — practical principles + interactive constraint generator. xcitingart vars. */
.cr-wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.cr-hero{max-width:760px;margin:48px auto 14px;text-align:center}
.cr-hero .kicker{font-family:var(--sans);font-weight:600;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--rose);margin:0 0 16px}
.cr-hero h1{font-family:var(--disp);font-weight:700;font-size:clamp(2.1rem,4.6vw,3.3rem);line-height:1.08;letter-spacing:-.02em;margin:0 0 16px}
.cr-hero h1 .sub{font-size:.55em;font-style:italic;font-weight:400;color:var(--soft)}
.cr-hero .lead{font-size:1.22rem;line-height:1.5;color:var(--soft);font-style:italic;margin:0 auto 24px;max-width:60ch}
.cr-hero p{font-size:1.06rem;line-height:1.7;color:var(--ink);text-align:left;margin:0 0 14px}

/* interactive generator — the visual centerpiece */
.cr-gen{margin:34px 0 50px;background:linear-gradient(135deg,var(--accent),#7a2db5);border-radius:18px;padding:2px}
.cr-gen-inner{background:var(--paper);border-radius:16px;padding:40px 32px;text-align:center}
.cr-gen-k{font-family:var(--sans);font-weight:700;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--rose);margin:0 0 16px}
.cr-gen-prompt{font-family:var(--disp);font-weight:700;font-size:clamp(1.5rem,3.4vw,2.3rem);line-height:1.2;color:var(--ink);margin:0 auto 26px;max-width:22ch;min-height:2.4em;transition:opacity .14s}
.cr-gen .btn{display:inline-block;font-family:var(--sans);font-weight:600;font-size:1rem;background:var(--accent);color:#fff;padding:14px 26px;border:none;border-radius:11px;cursor:pointer;transition:background .15s,transform .1s}
.cr-gen .btn:hover{background:#2a28b8;transform:translateY(-1px)}
.cr-gen .btn:active{transform:translateY(0)}

.pr-list{margin:10px 0 40px}
.pr{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:center;margin:0 0 56px}
.pr.flip .pr-art{order:2}
.pr-art{margin:0}
.pr-art img{width:100%;height:340px;object-fit:cover;border-radius:14px;box-shadow:0 12px 36px rgba(22,21,26,.15)}
.pr-text{min-width:0}
.pr-no{font-family:var(--disp);font-weight:700;font-size:1.4rem;color:var(--rose);display:block}
.pr-text h2{font-family:var(--disp);font-weight:700;font-size:1.85rem;line-height:1.1;margin:0 0 12px}
.pr-idea{font-family:var(--disp);font-weight:600;font-style:italic;font-size:1.2rem;line-height:1.4;color:var(--accent);margin:0 0 15px}
.pr-text p{font-size:1.04rem;line-height:1.72;color:var(--ink);margin:0 0 13px}
.pr-try{font-size:.99rem;line-height:1.6;color:var(--soft);background:rgba(59,57,228,.05);border-left:3px solid var(--accent);padding:11px 16px;border-radius:0 8px 8px 0;margin-top:16px}
.pr-try span{font-family:var(--sans);font-weight:700;color:var(--accent);text-transform:uppercase;font-size:.74rem;letter-spacing:.08em}
.cr-outro{max-width:720px;margin:6px auto 0;padding-top:24px;border-top:2px solid var(--ink)}
.cr-outro p{font-size:1.1rem;line-height:1.7}
.cta-row{margin-top:20px}
.cr-wrap .btn{text-decoration:none}
.cr-wrap a.btn{display:inline-block;font-family:var(--sans);font-weight:600;background:var(--accent);color:#fff;padding:13px 22px;border-radius:10px}
.cr-wrap a.btn:hover{background:#2a28b8}
.cr-wrap .related{max-width:720px;margin:40px auto 60px}

@media(max-width:820px){
  .pr{grid-template-columns:1fr;gap:16px}
  .pr.flip .pr-art{order:0}
  .pr-art img{height:240px}
  .cr-gen-inner{padding:30px 20px}
}