/* ===== MARGIN kit · stage, shared block parts, editor UI =====
   Colours, fonts, sizes and timing come from brand/tokens.css. */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body.k-body{background:#07090E;color:#DCE3EE;font:15px/1.45 var(--k-font-body);overflow:hidden}
body.k-clean{background:#000}
body.k-clean[data-bg="transparent"],html:has(body.k-clean[data-bg="transparent"]){background:transparent}

/* ---------- stage ---------- */
.k-app{display:grid;grid-template-columns:392px 1fr;height:100vh}
.k-clean .k-app{display:block}
.k-main{display:flex;flex-direction:column;min-width:0}
.k-viewport{flex:1;position:relative;overflow:hidden;margin:18px 22px 0}
.k-clean .k-viewport{position:fixed;inset:0;margin:0}
body:not(.k-clean)[data-bg="transparent"] .k-viewport{background:repeating-conic-gradient(#1a1f2b 0 25%,#11151e 0 50%) 0 0/28px 28px}
.k-stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;overflow:hidden;
  color:var(--k-text);font-family:var(--k-font-body);background:var(--k-bg);--k-size:1}
body:not(.k-clean) .k-stage{box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06)}
.k-bgl{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 70% at 28% 46%,color-mix(in srgb,var(--k-text) 3.5%,transparent),transparent 70%)}
.k-stage:not([data-bg="brand"]) .k-bgl{display:none}
.k-rules{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent 0 62px,var(--k-rule) 62px 64px);
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 40%,transparent 58%);mask-image:linear-gradient(90deg,#000 0,#000 40%,transparent 58%)}
.k-stage[data-safe="full"] .k-rules,.k-stage[data-safe="centre"] .k-rules{-webkit-mask-image:none;mask-image:none}
.k-marginline{position:absolute;left:var(--k-margin-x);top:0;bottom:0;width:2px;background:var(--k-margin);opacity:.42}
.k-stage[data-safe="centre"] .k-marginline{display:none}

.k-safe,.k-guide-safe{position:absolute;left:var(--k-content-x);top:var(--k-safe-top);width:824px;height:840px}
.k-stage[data-safe="full"] :is(.k-safe,.k-guide-safe){width:1568px}
.k-stage[data-safe="centre"] :is(.k-safe,.k-guide-safe){left:360px;width:1200px}
.k-content{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.k-stage[data-align="center"] .k-content{align-items:center;text-align:center}
.k-fit{max-width:100%;transform-origin:left center}
.k-stage[data-align="center"] .k-fit{transform-origin:center}
.k-block{position:relative;max-width:100%}
.k-plate-on .k-block{background:var(--k-bg-2);padding:56px 64px;border-radius:var(--k-radius-m);box-shadow:inset 0 0 0 2px var(--k-line)}

/* narrator guide (editor only) */
.k-guide{position:absolute;inset:0;pointer-events:none;z-index:5;color:var(--k-faint)}
.k-guide-safe{border:2px dashed color-mix(in srgb,var(--k-accent) 55%,transparent);border-radius:12px}
.k-guide span{position:absolute;left:14px;top:-34px;font:500 20px var(--k-font-body);letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--k-accent) 80%,transparent)}
.k-guide-nar{position:absolute;left:1104px;top:96px;width:744px;height:888px;border:2px dashed currentColor;border-radius:28px;overflow:hidden;
  background:linear-gradient(180deg,color-mix(in srgb,var(--k-text) 3%,transparent),color-mix(in srgb,var(--k-text) 7%,transparent))}
.k-guide-nar svg{position:absolute;left:50%;bottom:0;width:560px;transform:translateX(-50%);fill:color-mix(in srgb,var(--k-text) 9%,transparent)}
.k-guide-nar span{top:auto;bottom:22px;left:26px;color:var(--k-faint)}
.k-stage:not([data-bg="brand"]) .k-guide{color:rgba(255,255,255,.6)}

/* ---------- shared block parts ---------- */
.k-block{font-family:var(--k-font-body);color:var(--k-text)}
.k-label{display:flex;align-items:center;gap:14px;font:var(--k-w-label) calc(var(--k-t-label)*var(--k-size))/1 var(--k-font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--k-muted);white-space:nowrap}
.k-label-rule{display:block;width:32px;height:3px;border-radius:2px;background:var(--k-accent)}
.k-stage[data-align="center"] .k-label{justify-content:center}
.k-tag{display:inline-flex;align-items:center;gap:10px;height:calc(44px*var(--k-size));padding:0 18px 0 15px;border-radius:var(--k-radius-pill);
  font:500 calc(var(--k-t-label)*var(--k-size))/1 var(--k-font-body);letter-spacing:.02em;color:var(--c);white-space:nowrap;
  background:color-mix(in srgb,var(--c) 13%,transparent);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c) 55%,transparent)}
.k-tag i{width:12px;height:12px;border-radius:50%;background:var(--c);flex:none}
.k-hero{font:var(--k-w-word) calc(var(--k-t-hero)*var(--k-size))/1.05 var(--k-font-body);letter-spacing:-.018em;white-space:nowrap}
.k-word{font:var(--k-w-word) calc(var(--k-t-word)*var(--k-size))/1.1 var(--k-font-body);letter-spacing:-.012em;white-space:nowrap}
.k-sent{font:var(--k-w-body) calc(var(--k-t-sentence)*var(--k-size))/1.42 var(--k-font-body);letter-spacing:-.004em}
.k-bodytext{font:var(--k-w-body) calc(var(--k-t-body)*var(--k-size))/1.4 var(--k-font-body);color:var(--k-muted)}
.k-ipa{font:400 calc(var(--k-t-ipa)*var(--k-size))/1.2 var(--k-font-ipa);color:var(--k-muted);white-space:nowrap}
.k-pen{font:600 calc(var(--k-t-pen)*var(--k-size))/1.05 var(--k-font-pen);color:var(--k-accent);white-space:nowrap}
.k-title{font:400 calc(var(--k-t-title)*var(--k-size))/1.04 var(--k-font-title);letter-spacing:-.005em}
.k-title em{font-style:italic;color:var(--k-accent)}
.k-ch,.k-wd{display:inline-block;white-space:pre}
.k-hlw{position:relative;display:inline-block;z-index:0;white-space:nowrap}
.k-hlbg{position:absolute;left:-.14em;right:-.14em;top:.12em;bottom:.04em;background:var(--k-hl);border-radius:.22em .1em .26em .12em;z-index:-1;transform-origin:left center;transform:rotate(-.7deg) scaleX(0)}
.k-svg{display:block;overflow:visible}
.k-svg path{fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.k-check{color:var(--k-ok)} .k-cross,.k-strike{color:var(--k-bad)} .k-uline,.k-caret,.k-arrow,.k-loop{color:var(--k-accent)} .k-ring{color:var(--k-hl)}
.k-dot{display:block;width:18px;height:18px;border-radius:50%;background:var(--k-hl)}
.k-div{display:inline-block;color:var(--k-faint);padding:0 .12em;font-weight:300}
.k-err{color:var(--k-bad);font-size:28px}
.k-chg{color:inherit}

/* ---------- editor panel ---------- */
.k-panel{background:#0B1019;border-right:1px solid #1B2334;display:flex;flex-direction:column;min-height:0}
.k-ph{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid #1B2334}
.k-logo{color:#F4EFE6;text-decoration:none;font:400 26px/1 var(--k-font-title);display:flex;gap:6px;align-items:baseline}
.k-logo i{font:500 12px var(--k-font-body);letter-spacing:.18em;text-transform:uppercase;color:#FFD23F}
.k-nav{margin-left:auto;max-width:190px}
.k-pscroll{overflow:auto;padding:6px 18px 28px;flex:1}
.k-panel h1{font:400 34px/1.1 var(--k-font-title);color:#F4EFE6;margin:16px 0 4px}
.k-desc{color:#8C97AB;margin:0 0 14px;font-size:14px}
.k-panel fieldset{border:0;border-top:1px solid #1B2334;margin:14px 0 0;padding:14px 0 0}
.k-panel legend{font:600 11px var(--k-font-body);letter-spacing:.18em;text-transform:uppercase;color:#FFD23F;padding:0 8px 0 0}
.k-f{display:flex;flex-direction:column;gap:5px;margin:0 0 11px;font-size:13px;color:#AEB8CA}
.k-f>span{font-weight:500}
.k-f small{color:#6F7B90;font-size:12px;line-height:1.35}
.k-f small code,.k-dialog code{background:#172033;padding:1px 5px;border-radius:4px;color:#DCE3EE}
.k-panel input[type=text],.k-panel input[type=number],.k-panel textarea,.k-panel select,.k-nav{width:100%;background:#121A28;color:#EEF2F8;border:1px solid #243049;border-radius:9px;padding:8px 10px;font:14px/1.35 var(--k-font-body)}
.k-panel textarea{resize:vertical}
.k-panel :is(input,textarea,select):focus{outline:2px solid #9D8CFF;outline-offset:1px;border-color:transparent}
.k-panel input[type=range]{width:100%;accent-color:#FFD23F}
.k-f output{color:#FFD23F;font-weight:600;margin-left:6px}
.k-row.k-2{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.k-row.k-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 10px}
.k-tog{flex-direction:row;align-items:center;gap:8px;cursor:pointer}
.k-tog input{accent-color:#FFD23F;width:16px;height:16px}
.k-warn{margin:4px 0 0;color:#FFB86B;font-size:13px}
.k-warn:empty{display:none}
.k-toast{color:#3DDC84;font-size:13px;margin:8px 0 0;min-height:1em}
.k-btn{appearance:none;border:1px solid #2A3550;background:#131B2A;color:#E8EDF5;border-radius:10px;padding:9px 12px;font:500 14px var(--k-font-body);cursor:pointer;margin:0 0 8px;width:100%}
.k-btn:hover{background:#1A2438;border-color:#3A4870}
.k-primary{background:#FFD23F;color:#0E1726;border-color:#FFD23F;font-weight:600}
.k-primary:hover{background:#FFE07A;border-color:#FFE07A}
.k-ghost{background:transparent;border-style:dashed;color:#8C97AB}
.k-transport{display:flex;align-items:center;gap:14px;padding:12px 22px 14px}
.k-transport .k-btn{width:auto;margin:0;padding:9px 16px}
.k-scrub{flex:1;accent-color:#FFD23F}
.k-time{font:500 14px var(--k-font-body);color:#DCE3EE;min-width:96px;font-variant-numeric:tabular-nums}
.k-info{font-size:13px;color:#6F7B90;white-space:nowrap}
.k-dialog{max-width:720px;background:#0F1522;color:#DCE3EE;border:1px solid #2A3550;border-radius:18px;padding:28px 32px;font:15px/1.55 var(--k-font-body)}
.k-dialog::backdrop{background:rgba(3,5,10,.7)}
.k-dialog h2{font:400 34px/1.1 var(--k-font-title);color:#F4EFE6;margin:0 0 10px}
.k-dialog h3{font:600 13px var(--k-font-body);letter-spacing:.14em;text-transform:uppercase;color:#FFD23F;margin:22px 0 6px}
.k-dialog pre{background:#0A0E17;border:1px solid #1E2940;border-radius:10px;padding:12px 14px;white-space:pre-wrap;word-break:break-all;font:13px/1.5 ui-monospace,monospace;color:#CFE3FF}
.k-dim{color:#7C879C;font-size:13px;word-break:break-all}
@media (max-width:900px){.k-app{grid-template-columns:1fr;grid-template-rows:auto 1fr}.k-panel{max-height:48vh;order:2}.k-main{order:1;min-height:52vh}}