:root{
  --ckm-bg:#131f2a;
  --ckm-ink:#e6f1f5;
  --ckm-accent:#ff3d7f;
  --ckm-accent2:#7fd4ee;
  --ckm-surface:#253d4c;
  --ckm-mono:"Martian Mono","Courier New",monospace;
  --ckm-sans:"Be Vietnam Pro","Segoe UI",system-ui,sans-serif;
  --ckm-gap:clamp(1.25rem,4vw,2.75rem);
}

body{
  background:var(--ckm-bg);
  color:var(--ckm-ink);
  font-family:var(--ckm-sans);
  font-weight:400;
  font-size:clamp(1rem,0.95rem + 0.25vw,1.0625rem);
  line-height:1.65;
  overflow-x:hidden;
}

p{margin:0 0 1rem}
a{color:var(--ckm-accent2)}
a:focus-visible,input:focus-visible,button:focus-visible{
  outline:3px solid var(--ckm-accent);
  outline-offset:3px;
}

.ckm-skip{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--ckm-accent);
  color:#131f2a;
  padding:.6rem 1rem;
  font-family:var(--ckm-mono);
  font-size:.75rem;
  z-index:5;
}
.ckm-skip:focus{left:0}

/* ---------- opening block ---------- */

.ckm-open{
  padding:calc(var(--ckm-gap) * 1.4) var(--ckm-gap) var(--ckm-gap);
  border-bottom:1px solid rgba(127,212,238,.28);
  max-width:82rem;
  margin:0 auto;
}

.ckm-kicker{
  font-family:var(--ckm-mono);
  font-weight:400;
  font-size:.6875rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ckm-accent2);
  margin-bottom:1.25rem;
}

.ckm-title{
  font-family:var(--ckm-mono);
  font-weight:700;
  letter-spacing:.02em;
  line-height:1.12;
  font-size:clamp(1.55rem,1rem + 3.4vw,3.1rem);
  margin:0 0 1.5rem;
  overflow-wrap:break-word;
}

.ckm-lead{
  max-width:62ch;
  font-size:1.0625em;
}

.ckm-nav{margin-top:2rem}
.ckm-nav ul{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:0;
}
.ckm-nav a{
  display:block;
  font-family:var(--ckm-mono);
  font-size:.6875rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ckm-ink);
  border:1px solid rgba(127,212,238,.4);
  padding:.5rem .7rem;
}
.ckm-nav a:hover,
.ckm-nav a:focus-visible{
  background:var(--ckm-surface);
  border-color:var(--ckm-accent);
  color:var(--ckm-accent2);
}

/* ---------- flow sentence ---------- */

.ckm-flow{
  padding:var(--ckm-gap);
  max-width:82rem;
  margin:0 auto;
}
.ckm-h2{
  font-family:var(--ckm-mono);
  font-weight:700;
  letter-spacing:.03em;
  font-size:clamp(1.05rem,.9rem + 1vw,1.45rem);
  line-height:1.3;
  margin:0 0 1.1rem;
  overflow-wrap:break-word;
}
.ckm-flowline{
  max-width:60ch;
  font-size:clamp(1.05rem,1rem + .5vw,1.3rem);
  line-height:1.55;
}
.ckm-jump{
  color:var(--ckm-accent);
  text-decoration-line:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.24em;
  font-weight:600;
}
.ckm-jump:hover,
.ckm-jump:focus-visible{
  text-decoration-thickness:4px;
  color:var(--ckm-accent2);
}
.ckm-note{
  max-width:58ch;
  color:rgba(230,241,245,.74);
  font-size:.9375em;
}

/* ---------- the five stage documents ---------- */

.ckm-stage{
  border-top:1px solid rgba(127,212,238,.22);
  padding:var(--ckm-gap);
  max-width:82rem;
  margin:0 auto;
  scroll-margin-top:1rem;
}
.ckm-stage.is-current{
  background:linear-gradient(180deg,rgba(37,61,76,.62),rgba(37,61,76,0));
  border-top-color:var(--ckm-accent);
}
.ckm-marker{
  font-family:var(--ckm-mono);
  font-size:.625rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(127,212,238,.72);
  margin-bottom:.7rem;
}
.ckm-stage.is-current .ckm-marker{color:var(--ckm-accent)}

.ckm-head{
  font-family:var(--ckm-mono);
  font-weight:400;
  letter-spacing:.3em;
  text-transform:uppercase;
  font-size:clamp(1rem,.85rem + 1.1vw,1.6rem);
  line-height:1.3;
  margin:0 0 1.2rem;
  overflow-wrap:break-word;
  transition:font-weight 200ms linear,letter-spacing 200ms linear;
}
.ckm-stage.is-current .ckm-head{
  font-weight:700;
  letter-spacing:.05em;
  color:var(--ckm-accent2);
}
.ckm-panel p{max-width:64ch}

/* ---------- box-class chooser ---------- */

.ckm-tool{
  border-top:1px solid rgba(127,212,238,.22);
  padding:var(--ckm-gap);
  max-width:82rem;
  margin:0 auto;
}
.ckm-form{
  display:grid;
  gap:1rem;
  margin:1.4rem 0;
  max-width:34rem;
}
.ckm-field label,
.ckm-check label{
  font-family:var(--ckm-mono);
  font-size:.6875rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  display:block;
  margin-bottom:.45rem;
  color:var(--ckm-accent2);
}
.ckm-field input{
  width:100%;
  box-sizing:border-box;
  background:var(--ckm-bg);
  color:var(--ckm-ink);
  border:1px solid rgba(127,212,238,.5);
  padding:.65rem .75rem;
  font-family:var(--ckm-mono);
  font-size:1rem;
}
.ckm-field input:hover{border-color:var(--ckm-accent)}
.ckm-check{
  display:flex;
  align-items:center;
  gap:.6rem;
  background:var(--ckm-surface);
  padding:.7rem .8rem;
}
.ckm-check input{width:1.1rem;height:1.1rem;accent-color:var(--ckm-accent)}
.ckm-check label{margin:0}

.ckm-out{
  display:block;
  border-left:4px solid var(--ckm-accent);
  background:var(--ckm-surface);
  padding:1.1rem 1.2rem;
  max-width:44rem;
}
.ckm-class{
  font-family:var(--ckm-mono);
  font-weight:700;
  letter-spacing:.08em;
  font-size:clamp(1.2rem,1rem + 1.4vw,1.8rem);
  color:var(--ckm-accent2);
  margin:0 0 .6rem;
}
.ckm-why{margin:0;max-width:56ch}
.ckm-caveat{
  margin-top:1.1rem;
  max-width:58ch;
  font-size:.9375em;
  color:rgba(230,241,245,.78);
  border-top:1px dashed rgba(127,212,238,.35);
  padding-top:.9rem;
}

/* ---------- enquiries ---------- */

.ckm-enq{
  border-top:1px solid rgba(127,212,238,.22);
  padding:var(--ckm-gap);
  max-width:82rem;
  margin:0 auto;
}
.ckm-enq p{max-width:62ch}
.ckm-doclink,
.ckm-mail{
  color:var(--ckm-accent);
  text-decoration-thickness:1px;
  text-underline-offset:.2em;
  overflow-wrap:break-word;
}
.ckm-doclink:hover,
.ckm-doclink:focus-visible,
.ckm-mail:hover,
.ckm-mail:focus-visible{text-decoration-thickness:4px;color:var(--ckm-accent2)}

/* ---------- footer ---------- */

.ckm-foot{
  border-top:3px solid var(--ckm-accent);
  background:var(--ckm-surface);
  padding:var(--ckm-gap);
  display:grid;
  gap:2rem;
}
.ckm-foot-h{
  font-family:var(--ckm-mono);
  font-size:.625rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ckm-accent2);
  margin-bottom:.8rem;
}
.ckm-foot p{font-size:.9375rem;margin-bottom:.5rem}
.ckm-addr{line-height:1.75}
.ckm-foot-list{margin:0 0 .8rem;display:grid;gap:.3rem}
.ckm-foot-list a{
  font-size:.9375rem;
  text-decoration-thickness:1px;
  text-underline-offset:.2em;
}
.ckm-foot-list a:hover,
.ckm-foot-list a:focus-visible{text-decoration-thickness:4px}

/* ---------- privacy notice page ---------- */

.ckm-notice{
  max-width:72rem;
  margin:0 auto;
  padding:var(--ckm-gap);
}
.ckm-notice-title{
  font-family:var(--ckm-mono);
  font-weight:700;
  letter-spacing:.03em;
  line-height:1.18;
  font-size:clamp(1.3rem,1rem + 2.2vw,2.3rem);
  margin:1.5rem 0 1.2rem;
  overflow-wrap:break-word;
}
.ckm-notice p,
.ckm-notice li{max-width:64ch}
.ckm-notice-stage{
  border-top:1px solid rgba(127,212,238,.22);
  padding-top:1.4rem;
  margin-top:1.9rem;
}
.ckm-notice-stage h2{
  font-family:var(--ckm-mono);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:clamp(.95rem,.85rem + .7vw,1.25rem);
  color:var(--ckm-accent2);
  margin:0 0 1rem;
}
.ckm-notice-lead{
  font-size:1.0625em;
  border-left:4px solid var(--ckm-accent);
  padding-left:1rem;
}
.ckm-copyroute{
  background:var(--ckm-surface);
  padding:1.1rem 1.2rem;
  margin-top:2rem;
  border-left:4px solid var(--ckm-accent2);
}
.ckm-return{
  font-family:var(--ckm-mono);
  font-size:.6875rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  display:inline-block;
  border:1px solid rgba(127,212,238,.45);
  padding:.55rem .8rem;
  text-decoration:none;
  color:var(--ckm-ink);
}
.ckm-return:hover,
.ckm-return:focus-visible{
  background:var(--ckm-surface);
  border-color:var(--ckm-accent);
  color:var(--ckm-accent2);
}

/* ---------- wider viewports ---------- */

@media (min-width:56rem){
  .ckm-stage{
    display:grid;
    grid-template-columns:11rem minmax(0,1fr);
    column-gap:2.5rem;
    align-items:start;
  }
  .ckm-marker{
    margin:0;
    padding-top:.45rem;
    text-align:right;
    border-right:1px solid rgba(127,212,238,.25);
    padding-right:1rem;
  }
  .ckm-stage.is-current .ckm-marker{border-right-color:var(--ckm-accent)}
  .ckm-foot{grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem}
  .ckm-open{padding-top:calc(var(--ckm-gap) * 2)}
  .ckm-tool{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:2.5rem;
  }
  .ckm-tool .ckm-h2,
  .ckm-tool .ckm-note{grid-column:1 / -1}
  .ckm-form{margin-top:0}
  .ckm-out{grid-column:2}
  .ckm-caveat{grid-column:2;margin-top:1rem}
}

@media (min-width:80rem){
  .ckm-stage{grid-template-columns:14rem minmax(0,72ch)}
}

/* ---------- motion is switched off on request ---------- */

@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  .ckm-head{transition:none}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}