/* Les trucs de Survey9 (#/trucs): page, cards and search. The app mock has its own block below. */
.tips-head{margin-bottom:var(--sp-7)}
.tips-search{display:flex;gap:var(--sp-3);align-items:center;max-width:640px;margin-top:var(--sp-5)}
.tips-search .input{flex:1;min-width:0}
#tipsNote:empty{display:none}
.tips-levels{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-4);font-family:var(--font-mono);font-size:var(--fs-mono-s)}
.tips-pill{text-decoration:none;border:1px solid var(--rule-2);padding:4px 10px;color:var(--text-2);transition:color var(--dur-fast),border-color var(--dur-fast)}
.tips-pill:hover{color:var(--acc);border-color:var(--acc)}

.tip{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--sp-7);align-items:start;padding:var(--sp-8) 0;border-top:1px solid var(--rule);scroll-margin-top:72px}
.tip[hidden]{display:none}
.tip-head{display:flex;align-items:center;gap:var(--sp-3)}
.tip[data-level="nerd"] .tip-level{color:var(--acc)}
.tip-copy{background:none;border:0;padding:2px;color:var(--text-3);cursor:pointer;display:flex;transition:color var(--dur-fast)}
.tip-copy:hover{color:var(--acc)}
.tip-title{font-family:var(--font-display);font-weight:var(--w-semibold);font-size:var(--fs-h3);line-height:var(--lh-heading);letter-spacing:-.01em;text-transform:none;color:var(--text);margin:var(--sp-3) 0}
.tip-body{color:var(--text-2);line-height:var(--lh-prose);max-width:60ch;margin:0}
.tip.tip-focus .tip-title{color:var(--acc)}
.tip.tip-focus{box-shadow:inset 2px 0 0 var(--acc);padding-left:var(--sp-5)}
.tip-anim{position:relative;min-height:240px;border:1px solid var(--rule);background:var(--bg-2);overflow:hidden}
.tips-link{display:inline-block;margin-top:var(--sp-3);font-family:var(--font-mono);font-size:var(--fs-mono-s);color:var(--text-2);text-decoration:none}
.tips-link:hover{color:var(--acc)}
.nerd .tips-link{margin:0 0 var(--sp-3)}

@media(max-width:720px){
  .tip{grid-template-columns:1fr;gap:var(--sp-5);padding:var(--sp-7) 0}
}

/* ---- the app mock (tips-mock.js): a small stylised Survey9, follows the accent and the light/dark theme ---- */
.tip-anim{aspect-ratio:520/360;min-height:0}
/* drawn at 520×360 and scaled to the card (--s, set by tips-mock.js): the same picture on a phone and a desktop */
.mk{position:absolute;top:0;left:0;width:520px;height:360px;transform:scale(var(--s,1));transform-origin:0 0;display:flex;flex-direction:column;font-size:11px;line-height:1.4;color:var(--text);background:var(--bg);user-select:none}
.mk button{font:inherit;font-family:var(--font-mono);font-size:10px;color:var(--text-2);background:none;border:1px solid var(--rule-2);padding:3px 7px;border-radius:0;cursor:default;transition:color var(--dur-fast),border-color var(--dur-fast),background var(--dur-fast)}
.mk-bar{display:flex;align-items:center;gap:5px;padding:7px 10px;border-bottom:1px solid var(--rule);font-family:var(--font-display);font-weight:var(--w-semibold);font-size:12px}
.mk-bar i{width:6px;height:6px;border-radius:50%;background:var(--rule-2)} .mk-bar span{margin-left:8px} .mk-bar em{font-style:normal;color:var(--acc)}
.mk-screen{position:relative;flex:1;padding:10px 12px;overflow:hidden;display:flex;flex-direction:column;gap:8px}
.mk-crumbs{font-family:var(--font-mono);font-size:10px;color:var(--text-3)}
.mk-row{display:grid;grid-template-columns:minmax(0,1fr) 34% 22px;align-items:center;gap:6px;padding:3px 4px;transition:color var(--dur-fast),background var(--dur-fast)}
.mk-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-row i{height:5px;background:var(--rule)} .mk-row i::before{content:"";display:block;height:100%;width:var(--w);background:var(--acc)}
.mk-row b{font-family:var(--font-mono);font-weight:400;font-size:10px;color:var(--text-3);text-align:right}
.mk-row em{font-style:normal;font-family:var(--font-mono);font-size:10px;color:var(--acc);text-align:right;grid-column:2/4}
/* states shared by every target */
.mk .on{color:var(--acc);border-color:var(--acc)}
.mk-row.on{background:var(--acc-soft)}
.mk .hl{outline:1px solid var(--acc);box-shadow:0 0 0 4px var(--acc-soft);transition:box-shadow var(--dur-mark)}
.mk .pressed{background:var(--acc-soft)}
.mk .dragged{opacity:.35}
/* optional parts (selection bar, my surveys, keep the link) show only when the article's steps use them: class uses-<target> on .mk */
/* cursor and drag ghost */
.mk-cursor{position:absolute;top:0;left:0;width:0;height:0;z-index:5;opacity:0;transition:transform .65s var(--ease),opacity var(--dur-fast);pointer-events:none}
.mk-cursor.shown{opacity:1}
.mk-cursor::before{content:"";position:absolute;left:-2px;top:-2px;width:14px;height:18px;background:var(--text);clip-path:polygon(0 0,0 100%,30% 72%,52% 100%,66% 92%,46% 66%,86% 66%);filter:drop-shadow(0 1px 1px rgba(0,0,0,.5));transition:transform var(--dur-fast)}
.mk-cursor.pressed::before{transform:scale(.8)}
.mk-ghost{position:absolute;top:0;left:0;z-index:4;opacity:0;pointer-events:none;font-family:var(--font-mono);font-size:10px;padding:4px 8px;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid var(--acc);background:var(--surface);color:var(--text)}
.mk-ghost.shown{opacity:.95} .mk-ghost.moving{transition:transform .8s var(--ease)}
/* typing */
.mk [data-typed]::after{content:"";display:inline-block;width:1px;height:1em;margin-left:1px;vertical-align:-2px;background:var(--acc);animation:c9-blink var(--blink-dur) step-end infinite}

/* home */
.mk-drop{flex:1;display:flex;align-items:center;justify-content:center;border:1px dashed var(--rule-2);padding:10px;transition:border-color var(--dur-fast),background var(--dur-fast)}
.mk-drop.on{background:var(--acc-soft);color:var(--text)}
.st-fileDropped .mk-drop{background:none;border-style:solid;border-color:var(--rule);align-items:flex-start}
.mk-drop-label{text-align:center;font-family:var(--font-display);font-size:13px} .mk-drop-label small{display:block;margin-top:4px;font-family:var(--font-mono);font-size:10px;color:var(--text-3)}
.mk-read{display:none;width:100%}
.mk-cap{margin-top:6px;font-family:var(--font-mono);font-size:10px;color:var(--acc)}
.st-fileDropped .mk-file{display:none} .st-fileDropped .mk-drop-label{display:none} .st-fileDropped .mk-read{display:block;animation:mk-in var(--dur-reveal) var(--ease)}
.mk-file{position:absolute;right:14px;bottom:12px;font-family:var(--font-mono);font-size:10px;padding:4px 8px;border:1px solid var(--rule-2);background:var(--surface)}
.mk-mine{font-family:var(--font-mono);font-size:10px;color:var(--text-2)} .mk-mine div{padding:2px 0;border-bottom:1px solid var(--rule)}
.mk-keep{font-family:var(--font-mono);font-size:10px;color:var(--text-2)}
.mk-home .mk-mine,.mk-home .mk-keep{display:none}
.mk-home.uses-mine .mk-mine,.mk-home.uses-keepLink .mk-keep{display:block}

/* question */
.mk-sel{display:none;align-items:center;justify-content:space-between;gap:6px;padding:4px 6px;border:1px solid var(--acc);font-family:var(--font-mono);font-size:10px;color:var(--acc)}
.mk.uses-selBar .mk-sel,.mk.uses-pinSegment .mk-sel{display:flex}
.mk-cols{flex:1;display:grid;grid-template-columns:40% minmax(0,1fr);gap:10px;min-height:0}
.mk-tree{display:flex;flex-direction:column;gap:1px}
.mk-new{display:none} .st-newTheme .mk-new{display:grid;animation:mk-in var(--dur-reveal) var(--ease);color:var(--acc)}
.mk-senti{display:flex;align-items:center;gap:10px;margin-top:10px;padding:4px;font-family:var(--font-mono);font-size:10px;color:var(--text-2)}
.mk-senti small{color:var(--text-3);margin-right:2px} .mk-senti span{display:flex;align-items:center;gap:4px;padding:1px 3px}
.mk-senti i{width:7px;height:7px;border-radius:50%} .mk-senti .s0{background:var(--c9-cat-rose)} .mk-senti .s1{background:var(--rule-2)} .mk-senti .s2{background:var(--c9-cat-vert)}
.mk-main{display:flex;flex-direction:column;gap:6px;min-width:0}
.mk-tools{display:flex;gap:5px;align-items:center}
.mk-input{flex:1;min-width:0;height:22px;padding:3px 6px;border:1px solid var(--rule-2);font-size:11px;white-space:nowrap;overflow:hidden}
.mk-input.on{border-color:var(--acc);color:var(--text)}
.mk-ask-only{display:none!important}
.mk-question:has([data-target="askMode"].on) .mk-ask-only{display:flex!important}
.mk-th{display:none;align-items:center;gap:5px;font-family:var(--font-mono);font-size:10px;color:var(--text-3)} .mk-th span{padding:1px 4px;border:1px solid var(--rule)} .mk-th button{margin-left:auto}
.mk-cards{display:flex;flex-direction:column;gap:5px;min-height:0}
.mk-card{padding:6px 8px;border:1px solid var(--rule);background:var(--surface);color:var(--text-2);display:flex;flex-direction:column;gap:4px}
.mk-chips{display:flex;gap:4px} .mk-added{display:none} .st-tagAdded .mk-added{display:inline-block;animation:mk-in var(--dur-reveal) var(--ease);color:var(--acc);border-color:var(--acc)}
.mk-chip{align-self:flex-start;font-family:var(--font-mono);font-size:9px;padding:1px 5px;border:1px solid var(--rule-2);color:var(--text-3)}
.mk-price{display:none} .mk-p{align-self:flex-end;font-family:var(--font-mono);font-size:9px;color:var(--acc)}
.mk-p::after{content:" %"}
.st-askResults .mk-th{display:flex} .st-askResults .mk-quotes{display:none} .st-askResults .mk-price{display:flex;animation:mk-in var(--dur-reveal) var(--ease)}
.st-filtered .mk-quotes{animation:mk-in var(--dur-reveal) var(--ease)}
.mk-toast{position:absolute;left:0;right:0;margin:0 auto;width:max-content;max-width:calc(100% - 20px);bottom:10px;display:none;padding:5px 10px;background:var(--surface);border:1px solid var(--rule-2);font-family:var(--font-mono);font-size:10px;white-space:nowrap}
.mk-toast u{color:var(--acc);text-decoration:none;margin-left:6px}
.st-undoToast .mk-toast{display:block;animation:mk-in var(--dur-reveal) var(--ease)}

/* nerd zone */
.mk-nerd{border:1px solid var(--rule);flex:1;display:flex;flex-direction:column;min-height:0}
.mk-summary{padding:6px 8px;font-family:var(--font-mono);font-size:10px;display:flex;gap:8px;align-items:baseline;border-bottom:1px solid transparent}
.mk-summary b{color:var(--acc);font-weight:500;text-transform:uppercase;letter-spacing:.12em}
.mk-summary small{color:var(--text-3);font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-nerd-body{display:none;padding:6px 8px;flex-direction:column;gap:6px}
.st-nerdOpen .mk-summary{border-bottom-color:var(--rule)}
.st-nerdOpen .mk-nerd-body{display:flex;animation:mk-in var(--dur-reveal) var(--ease)}
.mk-xhead{display:flex;flex-wrap:wrap;gap:4px}
.mk-select{font-family:var(--font-mono);font-size:10px;padding:3px 6px;border:1px solid var(--rule-2);color:var(--text-2)}
.mk-xt,.mk-xfoot,.mk-pins{display:none}
.st-crossTable .mk-t-crossTable,.st-countTable .mk-t-countTable,.st-driversTable .mk-t-driversTable,
.st-sentimentTable .mk-t-sentimentTable,.st-segmentsTable .mk-t-segmentsTable{display:table;animation:mk-in var(--dur-reveal) var(--ease)}
.st-countTable .mk-t-crossTable,.st-segmentsTable .mk-t-crossTable{display:none}
.st-crossTable .mk-xfoot,.st-countTable .mk-xfoot,.st-driversTable .mk-xfoot,.st-sentimentTable .mk-xfoot,.st-segmentsTable .mk-xfoot{display:flex}
.mk-total{display:none} .st-driversTable .mk-total{display:inline} .st-driversTable [data-target="sigNote"]{display:none}
.mk-xt{width:100%;border-collapse:collapse;font-size:10px}
.mk-xt th{font-weight:400;color:var(--text-3);text-align:left;padding:3px 4px;font-family:var(--font-mono);font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
.mk-xt td{text-align:right;padding:3px 6px;border-top:1px solid var(--rule);font-family:var(--font-mono)}
.mk-xt td.sig{color:var(--acc)}
.mk-xfoot{justify-content:space-between;align-items:center;gap:8px;font-family:var(--font-mono);font-size:9px;color:var(--text-3)}
/* « croiser avec » and measure: label and menu follow the state */
.mk-cols-format,.mk-cols-segs,.mk-m-count{display:none}
.st-sentimentTable .mk-cols-npsq,.st-segmentsTable .mk-cols-npsq{display:none}
.st-sentimentTable .mk-cols-format,.st-segmentsTable .mk-cols-segs{display:inline}
.st-countTable .mk-m-pct{display:none} .st-countTable .mk-m-count{display:inline}
.mk-nerd-body{position:relative}
.mk-colsmenu{top:26px;left:8px;right:auto} .mk-measmenu{top:26px;left:auto;right:auto;margin-left:200px}
.mk-menu div{padding:2px 0}
.st-colsMenu .mk-colsmenu,.st-measureMenu .mk-measmenu{display:block;animation:mk-in var(--dur-mark) var(--ease)}
.st-segmentsTable .mk-colsmenu,.st-countTable .mk-measmenu{display:none}
.mk-pins{font-family:var(--font-mono);font-size:9px;color:var(--text-3)} .mk-pins span{color:var(--acc)}
.st-pinned .mk-pins{display:block;animation:mk-in var(--dur-reveal) var(--ease)}
/* filters in the selection bar (question screen) */
.mk-row .mk-lab{display:flex;align-items:center;min-width:0} .mk-lab s{text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-plus{flex:none;font-style:normal;font-family:var(--font-mono);font-size:10px;color:var(--text-3);margin-left:5px;padding:0 3px;border:1px solid var(--rule-2)}
.mk-f1,.mk-f2{display:none}
.mk.uses-treePlus .mk-sel{display:flex}
.st-oneFilter .mk-sel-default,.st-twoFilters .mk-sel-default{display:none}
.st-oneFilter .mk-f1{display:inline} .st-twoFilters .mk-f1{display:none} .st-twoFilters .mk-f2{display:inline;animation:mk-in var(--dur-reveal) var(--ease)}
.mk-sel-bottom{display:none} .st-selectionFilled .mk-sel-bottom{display:flex}

/* shared pieces: titles, radios, checkboxes, action bar */
.mk-h{font-family:var(--font-display);font-weight:var(--w-semibold);font-size:14px} .mk-h small{font-family:var(--font-mono);font-weight:400;font-size:9px;color:var(--text-3);margin-left:6px}
.mk-label{font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin-bottom:2px}
.mk-radio{display:flex;align-items:center;gap:7px;padding:3px 4px;color:var(--text-2)}
.mk-radio i{width:9px;height:9px;border:1px solid var(--rule-2);border-radius:50%;flex:none}
.mk-radio.chk i,.mk-radio.on i{background:var(--acc);border-color:var(--acc);box-shadow:inset 0 0 0 2px var(--bg)}
.mk-step:has(.mk-radio.on) .mk-radio.chk:not(.on) i,.mk-pair:has(.mk-radio.on) .mk-radio.chk:not(.on) i{background:none;border-color:var(--rule-2)}
.mk-check{display:inline-flex;width:10px;height:10px;border:1px solid var(--rule-2);margin-right:6px;vertical-align:-1px}
.mk-check.on,.on>.mk-check{background:var(--acc);border-color:var(--acc)}
.mk-actions{margin-top:auto;display:flex;align-items:center;gap:6px;padding-top:8px;border-top:1px solid var(--rule)}
.mk-actions>span{flex:1} .mk u{text-decoration:none;font-family:var(--font-mono);font-size:10px;color:var(--text-3)} .mk u.on{color:var(--acc)}
.mk .mk-primary{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.mk .mk-primary.on{color:var(--acc-ink)}

/* codebook */
.mk-cb-head,.mk-cb-row{display:grid;grid-template-columns:minmax(0,1fr) 92px 70px 112px;gap:8px;align-items:center;padding:5px 4px}
.mk-cb-head{font-family:var(--font-mono);font-size:9px;color:var(--text-3);border-bottom:1px solid var(--rule)}
.mk-cb-row{border-bottom:1px solid var(--rule)} .mk-cb-row>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-cb-row .mk-check{margin:0 auto}
.mk-restore{display:none}
.st-removed .mk-test>span:first-child{color:var(--text-3);text-decoration:line-through}
.st-removed .mk-test .mk-select{opacity:.4}
.st-removed .mk-test [data-target="removeQuestion"]{display:none} .st-removed .mk-restore{display:inline}

/* brief */
.mk-step{display:flex;flex-direction:column;gap:2px} .mk-step small{font-family:var(--font-mono);font-size:9px;color:var(--text-3)}
.mk-step p{margin:2px 0 4px;font-family:var(--font-display);font-size:13px}
.mk-s2,.mk-s3,.mk-draft,.mk-last{display:none!important}
.st-angleStep .mk-s1{display:none} .st-angleStep .mk-s2{display:flex!important;animation:mk-in var(--dur-reveal) var(--ease)}
.st-structureStep .mk-s1,.st-structureStep .mk-s2{display:none!important} .st-structureStep .mk-s3{display:flex!important;animation:mk-in var(--dur-reveal) var(--ease)}
.st-structureStep .mk-last{display:inline-block!important} .st-structureStep .mk-not-last{display:none}
.mk-pair{display:flex;gap:14px;margin-bottom:4px}
.st-proposing .mk-step{display:none!important}
.st-proposing .mk-draft{display:flex!important;flex-direction:column;gap:3px}
.mk-draft small{font-family:var(--font-mono);font-size:9px;color:var(--acc);margin-bottom:4px}
.mk-draft div{padding:4px 6px;border-left:2px solid var(--acc);background:var(--surface);opacity:0;animation:mk-in var(--dur-reveal) var(--ease) forwards;animation-delay:calc(var(--i) * 380ms)}

/* grid */
.mk-setting{display:flex;align-items:center;font-size:10px;color:var(--text-2)} .mk-setting small{color:var(--text-3);margin-left:4px}
.mk-setting.on{color:var(--text)}
.mk-macro{position:relative;border:1px solid var(--rule);padding:6px 8px;display:flex;flex-direction:column;gap:3px}
.mk-macro>b{font-family:var(--font-display);font-weight:var(--w-semibold);font-size:12px}
.mk-leaf{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding-left:10px}
.mk-name{padding:3px 6px;border:1px solid var(--rule-2);background:var(--bg-2);white-space:nowrap;overflow:hidden}
.mk-name.on{border-color:var(--acc);color:var(--text)}
.mk-menu{display:none;position:absolute;right:8px;top:52px;z-index:3;background:var(--surface);border:1px solid var(--rule-2);padding:5px 8px;min-width:140px;font-size:10px}
.mk-menu small{display:block;font-family:var(--font-mono);font-size:9px;color:var(--text-3);margin-bottom:3px}
.st-mergeMenu .mk-menu{display:block;animation:mk-in var(--dur-mark) var(--ease)}
.st-merged .mk-menu{display:none} .st-merged .mk-l1{display:none} .st-merged .mk-l2 .mk-name{border-color:var(--acc);color:var(--acc)}
.mk-pop{display:none;position:absolute;left:0;right:0;margin:0 auto;width:max-content;bottom:44px;z-index:3;padding:6px 10px;background:var(--surface);border:1px solid var(--acc);font-size:10px;white-space:nowrap}
.st-retestPrompt .mk-pop{display:block;animation:mk-in var(--dur-reveal) var(--ease)}
.mk-untagged{display:none} .st-proposal .mk-untagged{display:inline-block} .st-proposal .mk-tagged{display:none}

/* closed question */
.mk-kpi{font-family:var(--font-display);font-weight:var(--w-semibold);font-size:34px;line-height:1;align-self:flex-start;padding:2px 4px}
.mk-kpi small{display:block;font-family:var(--font-mono);font-weight:400;font-size:10px;color:var(--text-3);margin-top:4px}
.mk-bars .mk-row{grid-template-columns:90px minmax(0,1fr) 40px;padding:5px 4px}
/* recode « Autre »: the closed screen shows the multiple-choice question instead of the NPS */
.mk-recode{display:none;flex-direction:column;gap:4px}
.mk.uses-recode .mk-recode{display:flex} .mk.uses-recode .mk-kpi,.mk.uses-recode .mk-bars{display:none}
.mk-recode .mk-row{grid-template-columns:90px minmax(0,1fr) 30px;padding:4px}
.mk-recode .mk-btns{max-width:none;justify-content:flex-start;margin-top:6px}
.mk-after{display:none}
.st-recoded .mk-before{display:none} .st-recoded i.mk-after{display:block} .st-recoded span.mk-after{display:inline}
.mk-recode .mk-row:last-of-type b{color:var(--acc)}

/* survey overview: export and report */
.mk-survey{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.mk-survey small{font-family:var(--font-mono);font-size:9px;color:var(--text-3)}
.mk-btns{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;max-width:62%}
.mk-xlsx{display:none;margin-top:8px;padding:8px;border:1px solid var(--rule);font-family:var(--font-mono);font-size:10px;gap:8px;align-items:center;flex-wrap:wrap}
.mk-sheets{display:flex;gap:3px;flex-wrap:wrap} .mk-sheets i{font-style:normal;padding:2px 5px;border:1px solid var(--rule-2);color:var(--text-2)}
.mk-sheets i:last-child{border-color:var(--acc);color:var(--acc)}
.st-downloaded .mk-xlsx{display:flex;animation:mk-in var(--dur-reveal) var(--ease)}
.mk-ai{display:none;margin-top:8px;padding:8px 10px;border:1px solid var(--rule-2);background:var(--surface);flex-direction:column;gap:6px}
.mk-ai small{font-family:var(--font-mono);font-size:9px;color:var(--text-3)}
.mk-ais{display:flex;gap:4px} .mk-ais span{padding:2px 7px;border:1px solid var(--rule-2);font-size:10px}
.mk-deliv{display:flex;gap:4px;flex-wrap:wrap} .mk-deliv div{padding:3px 6px;background:var(--bg-2);font-size:10px}
.st-aiOpen .mk-ai{display:flex;animation:mk-in var(--dur-reveal) var(--ease)}

/* header: accent colour and light/dark */
.mk-top{display:flex;align-items:center;gap:10px;padding-bottom:8px;border-bottom:1px solid var(--rule);font-family:var(--font-mono);font-size:10px}
.mk-top>span:nth-child(2){flex:1}
.mk-icon{font-size:14px;line-height:1;padding:2px 4px}
.mk-accent{display:inline-flex;padding:3px;border:1px solid transparent} .mk-accent i{width:11px;height:11px;background:var(--acc)}
.mk-accent.on{border-color:var(--acc)}
.mk-lang{color:var(--text-3)} .mk-lang b{font-weight:400;color:var(--text);border-bottom:1px solid var(--acc)}
.mk-accents{display:none;position:absolute;right:58px;top:34px;z-index:3;background:var(--surface);border:1px solid var(--rule-2);padding:4px;font-size:10px}
.mk-accents div{display:flex;align-items:center;gap:7px;padding:3px 8px} .mk-accents i{width:10px;height:10px}
.mk-accents i[data-sw=braise]{background:#ff2d20} .mk-accents i[data-sw=encre]{background:#6a9be0} .mk-accents i[data-sw=vert]{background:#55b386}
.mk-accents i[data-sw=ocre]{background:#d9b23a} .mk-accents i[data-sw=violet]{background:#a68ad8}
.st-accentOpen .mk-accents{display:block;animation:mk-in var(--dur-mark) var(--ease)}
.st-recolored{--acc:#55b386;--acc-soft:rgba(85,179,134,.12);--acc-ink:#0f0f12}
.st-recolored .mk-accents{display:none}
.mk-header .mk-btns{margin-top:auto;max-width:none}

/* files, segments, access link */
.mk-file-chip{font-family:var(--font-mono);font-size:10px;padding:3px 7px;border:1px solid var(--acc);color:var(--text);background:var(--surface)}
.mk-imported{display:none;flex-direction:column;gap:3px}
.mk-imported small{font-family:var(--font-mono);font-size:9px;color:var(--acc);margin:4px 0 2px}
.mk-imported>.mk-file-chip{align-self:flex-start}
.mk-imported div{padding:4px 6px;border-left:2px solid var(--acc);background:var(--surface)}
.st-imported .mk-step{display:none!important} .st-imported .mk-imported{display:flex;animation:mk-in var(--dur-reveal) var(--ease)}
.st-imported .mk-actions button{display:none}
.mk-gridx{margin-top:8px;font-family:var(--font-mono);font-size:9px;color:var(--text-3);display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.mk-gridx .mk-file-chip{display:none;margin-left:4px}
.st-gridFile .mk-gridx .mk-file-chip{display:inline-block;animation:mk-in var(--dur-reveal) var(--ease)}
.mk-segs{display:none;color:var(--text-2)}
.st-segmentSaved .mk-segs{display:inline-block;animation:mk-in var(--dur-reveal) var(--ease);border-color:var(--acc);color:var(--acc)}
.st-segmentSaved .mk-sel>span:first-child{display:none}
.st-strict .mk-price .mk-card:nth-child(n+2){display:none}
.mk-opt-copy{display:none} .mk.uses-copyLink .mk-opt-copy{display:inline-block}
.st-linkCopied .mk-toast{display:block;animation:mk-in var(--dur-reveal) var(--ease)}

@keyframes mk-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}