/* Derive Solutions website. The "Plates" world from design direction E,
   variant E2 (Registered views): paper, ink, one amber note, engineering-plate
   captions and registration crosses. Motion rests visible: the .js class on
   <html> arms it, and ?static or reduced motion disarm it. */
:root{
  --paper:#F3EEE6;--paper-2:#ECE5D8;--plate:#FBF8F2;--ink:#17140F;--graphite:#4a443c;--body-ink:#3c362e;--stone:#6B6359;--stone-l:#A59C8E;--hair:rgba(23,20,15,.18);
  --amber:#EBA21C;--amber-7:#B97D0D;--amber-ink:#8A5A04;--amber-t:rgba(235,162,28,.22);
  --serif:"Instrument Serif",Georgia,serif;--body:"Spectral",Georgia,serif;--mono:"JetBrains Mono",ui-monospace,"Cascadia Code",monospace;
  --ease-out-expo:cubic-bezier(.16,1,.3,1);--ease-out-quint:cubic-bezier(.22,1,.36,1);--ease-io:cubic-bezier(.65,0,.35,1);
  color-scheme:light}
html{background:var(--paper);scroll-padding-top:24px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
*{box-sizing:border-box;margin:0}
body{background:var(--paper);color:var(--ink);font:400 18px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip;caret-color:var(--amber-7)}
::selection{background:rgba(235,162,28,.4);color:var(--ink)}
a{color:inherit;text-underline-offset:4px;text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--amber-7)}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:2px}
img,svg{max-width:100%}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#cfc6b8;border-radius:10px}::-webkit-scrollbar-track{background:transparent}
html{scrollbar-color:#cfc6b8 transparent}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:999px;font:500 15px var(--body);text-decoration:none}
.skip:focus{top:12px}
.wrap{max-width:1440px;margin:0 auto;padding:0 clamp(18px,4vw,64px)}
.narrow{max-width:46rem}
code,kbd,samp{font-family:var(--mono)}

/* header */
header.site{position:relative;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:16px 24px;padding:24px 0;flex-wrap:wrap}
header.site .logo img{height:32px;width:auto;display:block}
header.site nav{display:flex;gap:30px;font:italic 400 21px var(--serif)}
header.site nav a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s var(--ease-out-quint)}
header.site nav a:hover,header.site nav a[aria-current="page"]{background-size:100% 1px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:500 16px/1 var(--body);text-decoration:none;padding:14px 24px;min-height:46px;border-radius:999px;transition:background .25s,transform .15s,box-shadow .25s,opacity .2s;cursor:pointer;border:0}
.btn:active{transform:scale(.97)}
.btn.ink{background:var(--ink);color:var(--paper)}
.btn.ink:hover{background:#2c2720}
.btn.line{box-shadow:inset 0 0 0 1.5px var(--ink);background:transparent;color:var(--ink)}
.btn.line:hover{background:var(--paper-2)}
.btn[disabled],.btn[aria-busy="true"]{opacity:.55;cursor:progress}
.btn .arr{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--paper);color:var(--ink);transition:transform .3s var(--ease-out-quint)}
.btn.ink:hover .arr{transform:translateX(3px)}
.btn .arr svg{width:12px;height:12px}
.btn.sm{padding:10px 18px;min-height:40px;font-size:15px}

/* type */
.fig{font:italic 400 19px/1.2 var(--serif);color:var(--graphite);display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.fig b{font:400 12.5px var(--mono);font-style:normal;letter-spacing:.06em;color:var(--stone)}
h1{font:400 clamp(52px,7vw,104px)/.92 var(--serif);letter-spacing:-.02em;text-wrap:balance}
h1 em,h2 em{font-style:italic;color:var(--graphite)}
h2{font:400 clamp(40px,5.2vw,80px)/.95 var(--serif);letter-spacing:-.015em;max-width:17ch;text-wrap:balance}
h3{font:italic 400 28px/1.1 var(--serif)}
.lede{max-width:33rem;color:var(--body-ink)}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.micro{font:italic 400 18px/1.35 var(--serif);color:var(--stone);margin-top:14px}
p+p{margin-top:.9em}

/* plates and registration crosses */
.plate{position:relative;background:var(--plate);border-radius:4px;box-shadow:0 1px 0 rgba(23,20,15,.05),0 22px 44px -22px rgba(23,20,15,.38)}
.cross{position:absolute;width:20px;height:20px;pointer-events:none}
.cross::before,.cross::after{content:"";position:absolute;background:var(--ink)}
.cross::before{left:9.5px;top:0;width:1px;height:20px}.cross::after{top:9.5px;left:0;height:1px;width:20px}
.cross.tl{left:-10px;top:-10px}.cross.tr{right:-10px;top:-10px}.cross.bl{left:-10px;bottom:-10px}.cross.br{right:-10px;bottom:-10px}

/* hero (E2, registered views) */
.hero{padding:clamp(10px,3vh,36px) 0 40px}
.hero .top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:48px;align-items:end}
.hero h1{max-width:12ch}
.views{position:relative;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:34px;margin-top:clamp(28px,5vh,56px);height:min(60vh,560px);min-height:420px}
.view{display:flex;flex-direction:column;gap:10px;min-height:0}
.view .plate{flex:1;min-height:0}
.code{position:absolute;inset:0;overflow:auto;padding:16px 12px 16px 6px}
.code .sl[data-id]{cursor:pointer}
/* lines outside the selection step back in colour, not opacity, so they stay legible (stone is 5.5:1 on the plate) */
.code .sl.gap,.code .sl.gap .tk-k,.code .sl.gap .tk-s{color:var(--stone)}
.js .code .sl{opacity:0;transform:translateX(-8px)}
.js .code .sl.in{opacity:1;transform:none;transition:opacity .4s var(--ease-out-quint),transform .4s var(--ease-out-quint),background .25s}
.view svg.dg{position:absolute;inset:0}
.hint{font:italic 400 18px var(--serif);color:var(--stone);display:inline-flex;align-items:center;gap:10px;transition:opacity .4s}
.hint i{width:8px;height:8px;border-radius:50%;background:var(--amber);display:inline-block}
.fig.split{justify-content:space-between}
.h-tap{display:none}
@media (hover:none){.h-ptr{display:none}.h-tap{display:inline}}
.wire{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:visible}
.wire path{fill:none;stroke:var(--amber-7);stroke-width:1.5;stroke-dasharray:4 4}

/* diagram drawn by core.js */
svg.dg{display:block;width:100%;height:100%}
svg.dg text{font-family:var(--body)}
svg.dg .bound rect{fill:none;stroke:var(--ink);stroke-width:1}
svg.dg .b-account rect{stroke:rgba(23,20,15,.25);stroke-dasharray:3 4}
svg.dg .b-vpc rect{fill:rgba(236,229,216,.7)}
svg.dg .b-pub rect{fill:rgba(235,162,28,.10)}
svg.dg .b-priv rect{fill:rgba(107,99,89,.08)}
svg.dg .blabel{font:italic 400 15px var(--serif);fill:var(--graphite)}
svg.dg .edge{fill:none;stroke:var(--ink);stroke-width:1.1;transition:opacity .3s,stroke .3s,stroke-width .3s}
svg.dg .tile{fill:var(--plate);stroke:rgba(23,20,15,.28);transition:stroke .2s,stroke-width .2s}
svg.dg .node{cursor:pointer;transition:opacity .3s var(--ease-out-quint);outline:none}
svg.dg .node:focus-visible .tile{stroke:var(--ink);stroke-width:2.5}
svg.dg .nlabel{font-size:12px;fill:var(--ink)}
svg.dg .nref{font:9.5px var(--mono);fill:var(--stone)}
svg.dg .is-data .tile{stroke-dasharray:3 3}
svg.dg.has-sel .node:not(.sel):not(.rel){opacity:.22}
svg.dg.has-sel .edge:not(.on){opacity:.1}
svg.dg .edge.on{stroke:var(--amber-7);stroke-width:2.4}
svg.dg .node.sel .tile{stroke:var(--amber);stroke-width:2.5}
svg.dg .node.rel .tile{stroke:var(--amber-7);stroke-width:1.5}

/* source listing */
.src{font:13px/1.75 var(--mono);color:var(--graphite)}
.sl{display:grid;grid-template-columns:34px 1fr;white-space:pre;border-radius:2px;transition:background .25s}
.sl .ln{color:var(--stone);text-align:right;padding-right:12px;user-select:none}
.sl.focus,.sl.hot{background:var(--amber-t)}
.tk-k{color:var(--ink)}.tk-s{color:var(--amber-ink)}.tk-r{text-decoration:underline;text-decoration-color:var(--stone-l);text-underline-offset:2px}

/* sections */
.sec{position:relative;padding:clamp(90px,11vw,150px) 0 0}
.sec .lead{max-width:40rem;margin-top:16px;color:var(--body-ink)}
.tabs{display:flex;flex-wrap:wrap;gap:6px 26px;margin:30px 0 16px;border-bottom:1px solid var(--hair)}
.tab{font:italic 400 22px/1 var(--serif);background:none;border:0;padding:0 0 12px;color:var(--stone);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s,border-color .3s}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--amber)}
.tab:hover{color:var(--ink)}
.demo{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:0;height:min(74vh,700px);min-height:520px}
.demo .stagebox{position:relative;overflow:hidden}
.demo .stagebox iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;background:#fff}
.demo.is-frame .stagebox{grid-column:1/-1}
.demo.is-frame .side,.demo.is-frame #demoSvg{display:none}
.demo .side{border-left:1px solid var(--hair);padding:20px 22px;overflow:auto}
.demo .side h3{font:italic 400 26px/1.1 var(--serif);margin:6px 0 2px}
.demo .side .id{font:12px var(--mono);color:var(--stone);margin-bottom:14px;overflow-wrap:anywhere}
.demo .side .src{overflow-x:auto}
.demo .side .lk{display:block;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--hair);padding:9px 0;cursor:pointer;font:400 15px/1.5 var(--body);color:var(--ink)}
.demo .side .lk:hover{background:var(--paper-2)}
.demo .side .lk span{color:var(--stone);font-size:13px}
.demo .side .lk code{display:block;font:11.5px var(--mono);color:var(--graphite);overflow-wrap:anywhere}
.demo .conv{display:none;grid-column:1/-1;grid-template-columns:1fr 1fr;background:var(--paper)}
.demo.is-conv .stagebox,.demo.is-conv .side{display:none}
.demo.is-conv .conv{display:grid}
.demo .conv pre{margin:0;padding:28px;overflow:auto;font:13px/1.7 var(--mono);color:var(--graphite)}
.demo .conv pre+pre{background:var(--plate)}
.demo .conv i{font-style:normal;color:var(--stone)}
.demo .conv .cx{grid-column:1/-1;align-self:end;padding:14px 28px;border-top:1px solid var(--hair);font:italic 400 19px var(--serif);display:flex;gap:10px 28px;flex-wrap:wrap;align-items:baseline}
.demo .conv .cx em{font-style:normal;font-family:var(--body);font-size:15px;color:var(--amber-ink)}
.demo .conv .cx a{font:400 15px var(--body);margin-left:auto}
.cap{font:italic 400 18px var(--serif);color:var(--stone);margin-top:12px}
.cap code{font:14px var(--mono);font-style:normal}
.formats{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:20px;font-size:16px;align-items:baseline}
.formats span{font:italic 400 19px var(--serif);color:var(--graphite)}
.notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;margin-top:40px}
.notes h3{margin-bottom:10px}
.notes p{font-size:17px;color:var(--body-ink)}
.notes code,.prose code,.faq code,.pp code{font:.82em var(--mono);background:var(--paper-2);padding:1px 6px;border-radius:3px;overflow-wrap:anywhere}
.pl{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:40px;max-width:1080px}
.pp{border-top:1.5px solid var(--ink);padding-top:22px;display:flex;flex-direction:column}
.pp.paid{border-top:3px solid var(--amber)}
.pp .v{margin-top:clamp(14px,1.6vw,24px);font:400 clamp(76px,8vw,124px)/.9 var(--serif);letter-spacing:-.03em;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;flex-wrap:wrap}
.pp .v small{font:italic 400 22px var(--serif);color:var(--stone);margin-left:10px;letter-spacing:0}
.pp .for{font-size:16px;color:var(--stone);margin-top:10px}
.pp ul{list-style:none;padding:0;margin:20px 0 26px;flex:1}
.pp li{padding:9px 0;border-bottom:1px solid var(--hair)}
.pp .btn{align-self:flex-start}
.shell{margin-top:30px;max-width:1080px;background:var(--ink);color:var(--paper);border-radius:4px;padding:28px 32px;overflow-x:auto}
.shell pre{font:15px/2 var(--mono);white-space:pre}
.shell i{font-style:normal;color:#A59C8E}
.shell b{font-weight:400;color:var(--amber)}
.shell.wrapcode pre{white-space:pre-wrap;overflow-wrap:anywhere}

/* FAQ */
.faq{margin-top:34px;max-width:52rem;border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:baseline;padding:20px 0;font:italic 400 clamp(23px,2.2vw,28px)/1.2 var(--serif)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:translateY(-4px) rotate(45deg);transition:transform .3s var(--ease-out-quint)}
.faq details[open] summary::after{transform:translateY(2px) rotate(225deg)}
.faq summary:hover{color:var(--graphite)}
.faq .a{padding:0 0 22px;color:var(--body-ink);max-width:44rem}
.faq .a p+p{margin-top:.7em}

/* sub-page header and prose */
.ph{padding:clamp(20px,5vh,56px) 0 0}
.crumbs{font:italic 400 18px var(--serif);color:var(--stone);margin-bottom:22px}
.crumbs ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--stone-l)}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.ph h1{max-width:16ch}
.ph .lede{margin-top:22px;max-width:38rem}
.prose{max-width:38rem;margin-top:clamp(40px,6vw,70px);color:var(--body-ink)}
.prose h2{font-size:clamp(34px,3.6vw,48px);margin:2.2em 0 .5em;color:var(--ink)}
.prose h2:first-child{margin-top:0}
.prose h3{margin:1.6em 0 .4em;color:var(--ink)}
.prose ul,.prose ol{padding-left:1.25em;margin:.8em 0}
.prose li+li{margin-top:.35em}
.prose li::marker{color:var(--stone)}
.prose strong{font-weight:500;color:var(--ink)}
.prose .shell{margin:1.2em 0}
.updated{font:italic 400 18px var(--serif);color:var(--stone);margin-top:18px}
.note{margin-top:28px;max-width:38rem;padding:18px 22px;background:var(--plate);border-radius:4px;box-shadow:inset 0 0 0 1px var(--hair)}
.note.draft{box-shadow:inset 0 0 0 1.5px var(--amber-7)}
.note strong{font-weight:500}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 48px;margin-top:40px;max-width:1080px}
.card{border-top:1.5px solid var(--ink);padding-top:22px}
.card h2,.card h3{font:italic 400 clamp(30px,2.8vw,38px)/1.05 var(--serif);max-width:none;margin-bottom:10px}
.card p{color:var(--body-ink)}
.card .ctas{margin-top:18px}
.card .meta{font-size:15px;color:var(--stone);margin-top:10px}
table.spec{border-collapse:collapse;width:100%;max-width:52rem;margin-top:24px;font-size:17px}
table.spec th,table.spec td{text-align:left;vertical-align:top;padding:12px 16px 12px 0;border-bottom:1px solid var(--hair)}
table.spec th{font:italic 400 21px var(--serif);font-weight:400;width:34%;color:var(--ink)}
table.spec td{color:var(--body-ink)}

/* licence lookup form */
.form{margin-top:34px;max-width:36rem;display:grid;gap:18px}
.field{display:grid;gap:6px}
.field label{font:italic 400 21px var(--serif)}
.field .help{font-size:15px;color:var(--stone)}
.field input{font:400 18px var(--body);color:var(--ink);background:var(--plate);border:0;border-radius:4px;box-shadow:inset 0 0 0 1.5px var(--hair);padding:13px 15px;min-height:50px;width:100%;transition:box-shadow .2s}
.field input:hover{box-shadow:inset 0 0 0 1.5px var(--stone-l)}
.field input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--ink)}
.field input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px #9b2c1f}
.field input::placeholder{color:#7d7468}
.status{min-height:1.6em;font-size:17px}
.status.err{color:#8a2418}
.status.ok{color:var(--ink)}
.result{margin-top:30px;max-width:44rem}
.result[hidden]{display:none}
.result h2.sub{font-size:clamp(30px,3vw,40px);margin-top:30px}
.result .note{margin-top:0}
.files{list-style:none;padding:0;margin:14px 0 0;border-top:1px solid var(--hair)}
.files li{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--hair)}
.files .fname{font:14px var(--mono);overflow-wrap:anywhere}
.files .fmeta{font-size:15px;color:var(--stone)}

/* footer */
footer.site{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr));gap:32px;margin-top:130px;padding:36px 0 52px;border-top:1px solid var(--hair);font-size:16px}
footer.site img{height:30px;width:auto;display:block}
footer.site .tag{color:var(--stone);margin-top:14px;max-width:22rem}
footer.site h2{font:italic 400 21px var(--serif);color:var(--graphite);margin-bottom:10px;max-width:none;letter-spacing:0}
footer.site ul{list-style:none;padding:0;display:grid;gap:6px}
footer.site a{text-decoration:none}
footer.site a:hover{text-decoration:underline}
footer.site .legal{grid-column:1/-1;color:var(--stone);font-size:15px;display:flex;flex-wrap:wrap;gap:6px 22px}

/* 404 */
.lost{padding:clamp(40px,10vh,120px) 0 0}
.lost .lede{margin-top:22px}
.lost .ctas{margin-top:34px}

/* motion vocabulary: the rest state is visible, .js arms it */
.js .m-rise{opacity:0;transform:translateY(26px);filter:blur(8px)}
.js .m-rise.in{opacity:1;transform:none;filter:none;transition:opacity .8s var(--ease-out-quint),transform .8s var(--ease-out-quint),filter .8s var(--ease-out-quint)}
.js .m-word{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(12px)}
.js .m-word.in{opacity:1;filter:none;transform:none;transition:opacity .7s var(--ease-out-quint),filter .7s var(--ease-out-quint),transform .7s var(--ease-out-quint)}
@media (prefers-reduced-motion:reduce){
  .js .m-rise,.js .m-word,.js .code .sl{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  *{scroll-behavior:auto!important}
}

@media (max-width:980px){
  header.site nav{order:3;width:100%;gap:22px;font-size:19px;flex-wrap:wrap}
  .hero .top,.views{grid-template-columns:minmax(0,1fr);height:auto;min-height:0}
  .view .plate{height:380px;flex:none}
  .views figure:last-of-type .plate{height:auto;aspect-ratio:1080/620}
  .wire{display:none}
  .notes,.pl,.cols{grid-template-columns:1fr}
  .demo{grid-template-columns:1fr;height:auto;min-height:0}
  .demo .stagebox{height:auto;aspect-ratio:1100/640}
  .demo.is-frame .stagebox{height:440px;aspect-ratio:auto}
  .demo .side{border-left:0;border-top:1px solid var(--hair);max-height:440px}
  .demo .conv{grid-template-columns:1fr}
  .demo .conv .cx a{margin-left:0}
  footer.site{grid-template-columns:1fr 1fr}
  footer.site .brand{grid-column:1/-1}
}
@media (max-width:560px){
  body{font-size:17px}
  header.site{padding:18px 0}
  .btn{padding:13px 20px}
  .shell{padding:22px 20px}
  .shell pre{font-size:13.5px}
  .code{padding-left:14px}
  table.spec th,table.spec td{display:block;width:auto;padding:0}
  table.spec th{padding-top:14px}
  table.spec td{padding-bottom:14px}
}
@media print{
  header.site nav,.ctas,.skip,.tabs,.wire{display:none}
  .js .m-rise,.js .m-word,.js .code .sl{opacity:1;transform:none;filter:none}
}