/* V32 — Wypróbuj panel CMS in the shared ds language (ds-v32.css).
   The demo widget keeps its markup, hooks and base styles from knowledge-v21.css / knowledge-v21.js; this file only dresses it for the ds bands. */

/* Opening illustration: a field in the panel and the same change on the page */
.cm-open h1{font-size:clamp(48px,5.6vw,92px)}
.cm-visual{padding:clamp(22px,2.8vw,40px)}
.cm-art{display:block;width:100%;height:auto;overflow:visible}
.ds .cm-art .w{stroke-width:4}
.ds .cm-art .s{opacity:.5}
.ds .cm-art .d{stroke-dasharray:4 5}
.cm-art .p{fill:var(--paper)}
.cm-art .k{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cm-art .h{fill:none;stroke:var(--paper);stroke-width:13;stroke-linecap:round}
.cm-type{stroke-dasharray:100 100;animation:cm-type 7s cubic-bezier(.4,0,.3,1) infinite}
.cm-caret{animation:cm-blink 1.1s steps(1) infinite}
@keyframes cm-type{0%,8%{stroke-dashoffset:100;opacity:1}42%,86%{stroke-dashoffset:0;opacity:1}96%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:100;opacity:0}}
@keyframes cm-blink{50%{opacity:0}}
.cm-visual figcaption{display:flex;align-items:center;gap:10px;margin:-4px 0 18px;font-size:14.5px;line-height:1.4;color:#b9bcb6}
.cm-visual figcaption:before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--amber)}

/* Demo widget, dressed for a paper band */
.cm-demo{border:1px solid var(--ink);background:var(--white);box-shadow:0 40px 80px -56px #15191cb3}
.cm-demo :is(button,input,textarea,select){font-family:Figtree,sans-serif}
.cm-demo .k-demo-toolbar{padding:15px 22px;border:0;background:var(--ink)}
.cm-demo .k-demo-toolbar>span{font-size:15px;color:#d3d5cf}
.cm-demo .k-device-controls{gap:6px}
.cm-demo .k-device-controls button{min-height:38px;padding:8px 14px;border-color:#ffffff4d;font-size:13.5px;font-weight:600}
.cm-demo .k-device-controls button[aria-pressed=true]{border-color:var(--amber)}
.cm-demo .k-cms-demo{grid-template-columns:350px minmax(0,1fr);border:0}
.cm-demo .k-cms-form{padding:24px 28px;background:var(--white);border-right:1px solid #15191c26}
.cm-demo .k-field{margin-bottom:14px}
.cm-demo .k-cms-form fieldset{margin-bottom:16px}
.cm-pick{display:grid;grid-template-columns:1fr;column-gap:22px}
.cm-demo .k-cms-form>h3{font:700 26px/1.1 Sora,sans-serif;letter-spacing:-.05em;margin-bottom:18px}
.cm-demo .k-field,.cm-demo .k-cms-form legend{font:600 14.5px/1.3 Figtree,sans-serif}
.cm-demo .k-field textarea{min-height:92px}
.cm-demo .k-field input,.cm-demo .k-field textarea{margin-top:8px;padding:12px 13px;border-color:#15191c40;background:var(--paper);font:400 16px/1.4 Figtree,sans-serif}
.cm-demo .k-field :is(input,textarea):focus{outline:3px solid #f2b70599;outline-offset:0;border-color:var(--ink)}
.cm-demo .k-swatch-list button{width:42px;height:36px}
.cm-demo .k-photo-options button{min-height:36px;padding:8px 12px;font-size:13.5px;font-weight:600;color:var(--ink)}
.cm-demo .k-photo-options button[aria-pressed=true]{color:var(--paper)}
.cm-demo .k-cms-actions{gap:14px 18px;margin-top:4px}
.cm-demo .k-cms-actions .ds-button{min-height:46px;padding:12px 16px;gap:18px;font-size:15px}
.cm-demo .k-cms-actions .ds-button span{font-size:17px}
.cm-demo .k-reset{color:var(--ink);font-weight:600}
.cm-demo .k-cms-status{min-height:0;margin-top:14px;font-size:13.5px;color:var(--muted)}
.cm-demo .k-preview-stage{position:relative;isolation:isolate;overflow:hidden;padding:clamp(20px,2.6vw,40px);background:#1c2125}
.cm-demo .k-preview-stage:before{content:"";position:absolute;z-index:-1;right:-70px;bottom:-80px;width:260px;height:260px;border:1px solid #ffffff1c;border-radius:50%}
.cm-demo .k-preview-stage:after{content:"";position:absolute;z-index:-1;right:-40px;bottom:40px;width:300px;height:22px;background:var(--amber);transform:rotate(-28deg);opacity:.9}
.cm-try .ds-note{margin-top:24px}

/* ds-facts: keep the gap under the opening (the shared .ds :is(ul) reset removes it) */
.ds .ds-open .ds-facts{margin-top:clamp(40px,4.5vw,64px)}

/* Cards */
@media(min-width:761px) and (max-width:1100px){.ds .cm-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}

@media(min-width:1240px){.cm-demo .k-cms-demo{grid-template-columns:420px minmax(0,1fr)}.cm-pick{grid-template-columns:auto 1fr}}
@media(max-width:1150px){.cm-demo .k-cms-demo{grid-template-columns:300px minmax(0,1fr)}.cm-demo .k-cms-form{padding:22px}}
@media(max-width:900px){.cm-demo .k-cms-demo{grid-template-columns:260px minmax(0,1fr)}}
@media(max-width:760px){.ds .cm-cards{grid-template-columns:1fr}}
@media(max-width:640px){
  .cm-demo .k-demo-toolbar{padding:14px 16px}
  .cm-demo .k-demo-toolbar>span{font-size:13.5px}
  .cm-demo .k-cms-demo{grid-template-columns:1fr}
  .cm-demo .k-cms-form{padding:22px 18px;border-right:0;border-bottom:1px solid #15191c26}
  .cm-demo .k-preview-stage{padding:22px 14px}
}
@media(prefers-reduced-motion:reduce){.cm-type,.cm-caret{animation:none}}
/* V34 — page headings: same line count after the looser letter spacing (generated). */
html body.ds .cm-open h1{font-size:calc(clamp(48px,5.6vw,92px) * .93)!important}