.kinf-workshop {
--kw-paper:var(--kinf-journal-paper,#f8fbff);
--kw-surface:var(--kinf-journal-surface,#fff);
--kw-ink:var(--kinf-journal-ink,#133554);
--kw-muted:var(--kinf-journal-muted,#52667b);
--kw-blue:var(--kinf-journal-blue,#235cad);
--kw-mist:var(--kinf-journal-mist,#e7f0fc);
--kw-line:var(--kinf-journal-line,#b4cbe6);
color:var(--kw-ink);
font-family:var(--kinf-journal-ui,system-ui,sans-serif);
font-size:1rem;
line-height:1.6;
width:100%;
min-width:0;
margin:2rem 0;
}
.kinf-workshop [hidden] { display:none !important; }
.kinf-workshop *, .kinf-workshop *::before, .kinf-workshop *::after { box-sizing:border-box; }
.kinf-workshop p { margin:0 0 1rem; }
.kinf-workshop h2, .kinf-workshop h3 { font-family:var(--kinf-journal-serif,Georgia,serif); }
.kinf-workshop h2 { font-size:clamp(1.8rem,3.3vw,2.6rem); line-height:1.15; margin:0 0 1rem; }
.kinf-workshop h3 { font-size:1.45rem; line-height:1.25; margin:0 0 .75rem; }
.kw-header { max-width:740px; margin-bottom:1.6rem; }
.kinf-workshop .kw-eyebrow { text-transform:uppercase; font-size:.75rem; font-weight:700; letter-spacing:.08em; color:var(--kw-blue); margin-bottom:.65rem; }
.kw-task-choice { display:flex; gap:.5rem; flex-wrap:wrap; padding-bottom:1.5rem; border-bottom:1px solid var(--kw-line); margin-bottom:1.5rem; }
.kw-workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2rem; }
.kw-editor, .kw-result { min-width:0; }
.kw-result { background:var(--kw-surface); border:1px solid var(--kw-line); padding:1.4rem; align-self:start; }
.kw-editor { padding-right:.2rem; }
.kinf-workshop .kw-privacy, .kinf-workshop .kw-explanation, .kinf-workshop .kw-tool-note { color:var(--kw-muted); font-size:.85rem; }
.kw-field { margin:.85rem 0 1.1rem; }
.kw-field label { display:block; font-weight:700; margin-bottom:.4rem; font-size:.9rem; }
.kinf-workshop input, .kinf-workshop textarea { display:block; width:100%; max-width:100%; min-width:0; padding:.65rem .75rem; border:1px solid var(--kw-muted); border-radius:3px; background:var(--kw-surface); color:var(--kw-ink); font:inherit; line-height:1.5; }
.kinf-workshop textarea { resize:vertical; min-height:90px; }
.kinf-workshop .kw-field-hint { font-size:.8rem; color:var(--kw-muted); margin:.4rem 0 .15rem; }
.kw-count { font-size:.75rem; color:var(--kw-muted); }
.kinf-workshop .kw-field-error { font-size:.85rem; font-weight:700; margin:.35rem 0 0; }
.kw-field-error:empty { display:none; }
.kinf-workshop [aria-invalid=true] { border:2px solid var(--kw-ink); }
.kw-options { display:flex; flex-direction:column; gap:.6rem; }
.kw-option { padding-bottom:.25rem; }
.kinf-workshop button { appearance:none; border:1px solid var(--kw-line); border-radius:3px; color:var(--kw-ink); background:var(--kw-surface); padding:.65rem .85rem; font:inherit; font-weight:600; font-size:.875rem; line-height:1.4; cursor:pointer; min-height:44px; max-width:100%; }
.kinf-workshop button:hover { background:var(--kw-mist); }
.kinf-workshop button[aria-pressed=true] { border-color:var(--kw-blue); background:var(--kw-mist); }
.kw-toggle { width:100%; text-align:left; }
.kw-toggle::before { content:'＋ '; font-weight:700; }
.kw-toggle[aria-pressed=true]::before { content:'✓ '; }
.kw-option-panel { border-left:2px solid var(--kw-line); padding-left:.85rem; }
.kw-editor-actions, .kw-copy-actions { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1rem; }
.kinf-workshop [data-action=copy] { background:var(--kw-blue); color:var(--kw-paper); border-color:var(--kw-blue); }
.kinf-workshop button:disabled { cursor:default; opacity:.6; }
.kinf-workshop :is(button,input,textarea,a,summary,[tabindex]):focus-visible { outline:3px solid var(--kw-blue); outline-offset:3px; }
.kw-state { font-size:.85rem; font-weight:700; margin-bottom:.65rem; }
.kw-output { background:var(--kw-paper); border-left:2px solid var(--kw-blue); padding:1rem; white-space:pre-wrap; overflow-wrap:anywhere; user-select:text; font-size:.92rem; line-height:1.65; }
.kw-output p { margin:0 0 .85rem; }
.kw-output p:last-child { margin-bottom:0; }
.kw-output.kw-incomplete { border-left-style:dashed; }
.kw-changed { background:var(--kw-mist); box-shadow:0 0 0 4px var(--kw-mist); }
.kinf-workshop .kw-copy-status { min-height:1.5em; font-size:.85rem; margin:.5rem 0 0; }
.kw-checks, .kw-advanced { border-top:1px solid var(--kw-line); margin-top:1.25rem; padding-top:1rem; }
.kinf-workshop summary { cursor:pointer; font-weight:700; font-size:.9rem; padding:.2rem 0; }
.kinf-workshop details[open]>summary { margin-bottom:.9rem; }
.kw-checks ul { margin:0 0 1rem; padding-left:1.3rem; }
.kw-checks li { margin-bottom:.4rem; }
.kw-confirm { border:1px solid var(--kw-line); background:var(--kw-mist); padding:1rem; margin-top:1rem; }
.kinf-workshop a { color:var(--kw-blue); text-underline-offset:.2em; }
.kw-guide-link, .kw-full-link { font-size:.9rem; margin-top:1rem !important; }
.kw-fallback pre { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; background:var(--kw-mist); padding:1rem; }
.kw-view-choice { display:flex; gap:.5rem; flex-wrap:wrap; margin:1rem 0; }
.kw-mark-controls { margin-bottom:1rem; }
.kinf-workshop .kw-legend { color:var(--kw-muted); font-size:.8rem; margin:.5rem 0 0; }
.kinf-workshop .kw-change-note { font-size:.85rem; margin-bottom:.75rem; }
.kw-change-note:empty { display:none; }
.kw-output { padding:0; border-left:0; background:transparent; scroll-margin-top:100px; }
.kw-segment { padding:1rem; margin-bottom:.75rem; border:1px solid var(--kw-line); background:var(--kw-paper); }
.kw-segment:last-child { margin-bottom:0; }
.kw-segment p { margin:0; }
.kw-segment-label { display:block; color:var(--kw-muted); font-size:.7rem; line-height:1.4; font-weight:700; margin-bottom:.5rem; white-space:normal; user-select:none; }
.kw-marked .kw-segment--workshop, .kw-marked .kw-segment--detail { background:var(--kw-mist); border-left:3px solid var(--kw-blue); }
.kw-marked .kw-added-text { color:var(--kw-blue); }
.kw-output:not(.kw-marked) .kw-segment-label { display:none; }
.kw-output:not(.kw-marked) .kw-segment { border:0; padding:.35rem 0; background:transparent; }
.kw-output .kw-changed { box-shadow:0 0 0 2px var(--kw-blue); animation:kw-arrive .25s ease-out; }
@keyframes kw-arrive { from { transform:translateY(-4px); } to { transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) { .kw-output .kw-changed { animation:none; } }
.kw-mobile-navigation { display:none; }
.kinf-workshop--compact .kw-mobile-navigation { display:none; }
.kinf-workshop--embedded > .kw-header { display:none; }
.kinf-workshop-start .kw-start-intro, .kw-starter-controls { max-width:680px; }
.kw-starter-controls label { display:block; font-size:.9rem; font-weight:700; margin:.75rem 0 .4rem; }
.kinf-workshop select { display:block; width:100%; padding:.7rem .75rem; border:1px solid var(--kw-muted); border-radius:3px; color:var(--kw-ink); background:var(--kw-surface); font:inherit; min-height:44px; }
.kinf-workshop select:focus-visible { outline:3px solid var(--kw-blue); outline-offset:3px; }
.kw-starter-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin:.9rem 0; }
.kinf-workshop [data-starter-action=develop] { background:var(--kw-blue); color:var(--kw-paper); border-color:var(--kw-blue); }
.kinf-workshop .kw-starter-error { margin:.5rem 0 0; }
.kw-starter-source-label + textarea { min-height:110px; }
.kinf-workshop .kw-start-page { font-size:.85rem; margin-top:1rem; margin-bottom:0; }
.kw-start-tool > .kinf-workshop { margin-bottom:0; }
.kw-demo { border-top:1px solid var(--kw-line); padding-top:1.25rem; margin-top:1.5rem; }
.kinf-workshop .kw-demo-intro { color:var(--kw-muted); font-size:.85rem; margin:.75rem 0; }
.kw-demo-pair { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.5rem; margin:1rem 0; }
.kw-demo-example { margin:0; min-width:0; }
.kw-demo-example figcaption { font-weight:700; margin-bottom:.75rem; }
.kw-demo-example img { display:block; width:100%; height:auto; border:1px solid var(--kw-line); }
.kw-demo-answer { background:var(--kw-surface); border:1px solid var(--kw-line); padding:1rem; white-space:pre-wrap; overflow-wrap:anywhere; }
.kw-demo-prompts pre { background:var(--kw-surface); padding:1rem; white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; font-size:.85rem; }
.kw-demo-prompts h4 { margin:1rem 0 .5rem; }
.kinf-workshop .kw-demo-method { margin-top:1rem; font-size:.75rem; color:var(--kw-muted); }
@media(max-width:600px) { .kw-demo-pair { grid-template-columns:minmax(0,1fr); } }
.kinf-workshop-start { border-block:1px solid var(--kw-line); padding:1.5rem 0; }
.kw-start-links { display:flex; gap:.65rem; flex-wrap:wrap; margin:1rem 0; }
.kw-start-links a { border:1px solid var(--kw-line); border-radius:3px; padding:.65rem .85rem; font-weight:600; text-decoration:none; }
.kw-start-links a:hover { background:var(--kw-mist); }
.kinf-workshop .kw-start-note { color:var(--kw-muted); font-size:.85rem; margin:0; }
.kinf-workshop--compact { margin:0; }
.kinf-workshop--compact .kw-workspace { gap:1.25rem; }
.kinf-workshop--compact .kw-header h2 { font-size:1.8rem; }
.kinf-workshop--compact .kw-task-title, .kinf-workshop--compact .kw-task-intro, .kinf-workshop--compact .kw-editor>.kw-eyebrow, .kinf-workshop--compact .kw-privacy { display:none; }
.kinf-workshop--compact .kw-output { font-size:.85rem; }
.kinf-workshop--compact .kw-explanation { font-size:.8rem; }
@media(max-width:900px) {
.kw-workspace { grid-template-columns:minmax(0,1fr); }
.kw-result { padding:1.1rem; }
.kw-mobile-navigation { display:flex; position:sticky; top:0; z-index:4; gap:.5rem; padding:.6rem 0; margin-bottom:1rem; background:var(--kw-paper); border-bottom:1px solid var(--kw-line); }
.kw-mobile-navigation button { flex:1; padding:.6rem .4rem; font-size:.8rem; }
.kw-field textarea { scroll-margin-top:100px; }
}
@media(max-width:390px) {
.kw-result { padding:.85rem; }
.kw-output { padding:.75rem; }
.kw-task-choice>button { width:100%; text-align:left; }
}
@media print {
.kw-task-choice, .kw-editor, .kw-copy-actions, .kw-copy-status, .kw-explanation, .kw-full-link, .kw-mobile-navigation, .kw-view-choice, .kw-mark-controls, .kw-starter-controls { display:none; }
.kw-workspace { display:block; }
.kw-result { border:0; }
} .kinf-workshop-page .kinf-workshop--full > .kw-header h2 { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.kinf-workshop-page .kinf-workshop--full { margin-top:.75rem; }
.kinf-workshop-start { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1.5rem; align-items:center; padding:1.15rem 0; }
.kinf-workshop-start h2 { font-size:clamp(1.4rem,2vw,1.8rem); margin-bottom:.4rem; }
.kinf-workshop-start .kw-eyebrow { margin-bottom:.3rem; }
.kinf-workshop-start .kw-start-intro { margin:0; font-size:.9rem; max-width:650px; }
.kw-start-cta { text-align:center; }
.kinf-workshop .kw-primary-link { display:inline-flex; align-items:center; gap:.7rem; min-height:44px; padding:.7rem 1rem; background:var(--kw-blue); color:var(--kw-paper); text-decoration:none; border-radius:3px; font-weight:700; }
.kinf-workshop-start .kw-start-note { font-size:.75rem; margin:.4rem 0 0; }
.kw-interactive { max-width:760px; }
.kw-workspace { display:block; }
.kw-editor { padding:0; }
.kw-header { max-width:760px; margin-bottom:1.4rem; }
.kw-header h2 { font-size:clamp(1.65rem,3vw,2.3rem); }
.kw-header p { font-size:.95rem; }
.kw-steps { display:flex; list-style:none; gap:1rem; margin:0 0 1.5rem; padding:0 0 1rem; border-bottom:1px solid var(--kw-line); scroll-margin-top:32px; }
.kw-steps li { flex:1; color:var(--kw-muted); font-size:.8rem; line-height:1.4; }
.kw-steps li[aria-current] { color:var(--kw-blue); font-weight:700; }
.kw-steps small { display:block; font-size:.7rem; font-weight:400; }
.kw-task-label { display:block; font-weight:700; font-size:.9rem; margin:.8rem 0 .4rem; }
.kw-editor-actions { margin-top:.5rem; }
.kinf-workshop .kw-privacy { margin:1rem 0; }
.kw-flow-actions { display:flex; gap:.6rem; flex-wrap:wrap; margin:1.2rem 0 0; }
.kinf-workshop .kw-primary { background:var(--kw-blue); color:var(--kw-paper); border-color:var(--kw-blue); }
.kw-toggle::before { content:'＋ '; }
.kw-toggle[aria-expanded=true]::before { content:'− '; }
.kw-option-panel { border:0; padding:.1rem 0 0; }
.kw-result { padding:0; border:0; background:transparent; }
.kw-output { padding:1rem; background:var(--kw-surface); border:1px solid var(--kw-line); }
.kw-segment, .kw-marked .kw-segment--workshop, .kw-marked .kw-segment--detail { padding:0; border:0; margin-bottom:1rem; background:transparent; }
.kw-segment-label { display:none; }
.kw-output .kw-changed { animation:none; box-shadow:none; }
.kinf-workshop .kw-next-hint { font-size:.85rem; margin:.7rem 0; color:var(--kw-muted); }
.kw-comparison, .kw-checks, .kw-demo { border-top:1px solid var(--kw-line); padding-top:.8rem; margin-top:1rem; }
.kw-copy-actions { margin-top:1rem; }
.kw-change-note { border-left:2px solid var(--kw-blue); padding:.6rem .8rem; background:var(--kw-mist); overflow-wrap:anywhere; }
@media(max-width:600px) {
.kinf-workshop-start { grid-template-columns:minmax(0,1fr); gap:.8rem; }
.kw-start-cta { text-align:left; }
.kw-steps { gap:.5rem; }
.kw-result { padding:0; }
.kw-output { padding:.8rem; }
} .kinf-workshop :is(input,textarea)::placeholder{color:var(--kw-muted);opacity:1}