/* Screen content. Sizes use cqi of the screen width (screen height = 60cqi).
   Animations: per-element delay --d (seconds). .a pop, .g grow, .f fade, .dr drop, .out fade in then out at --o, .tl typewriter (--n characters). */
.screen .a{animation:pop .55s cubic-bezier(.2,.8,.2,1) calc(var(--d,0)*1s) both}
.screen .g{animation:grow .5s ease-out calc(var(--d,0)*1s) both;transform-origin:left center}
.screen .f{animation:fade .7s ease calc(var(--d,0)*1s) both}
.screen .dr{animation:drop .7s cubic-bezier(.3,1.35,.5,1) calc(var(--d,0)*1s) both}
.screen .out{animation:fade .6s ease calc(var(--d,0)*1s) both,fadeout .8s ease calc(var(--o,9)*1s) forwards}
.screen .tl{display:block;width:0;overflow:hidden;white-space:pre;animation:type calc(var(--n)*32ms) steps(var(--n),end) calc(var(--d)*1s) forwards}
@keyframes pop{from{opacity:0;transform:translateY(1.6cqi)}}
@keyframes grow{from{transform:scaleX(0)}}
@keyframes fade{from{opacity:0}}
@keyframes fadeout{to{opacity:0}}
@keyframes drop{from{opacity:0;transform:translateY(-8cqi)}}
@keyframes type{to{width:calc(var(--n)*1ch)}}

/* idle */
.idle{display:grid;place-content:center;justify-items:center;text-align:center;height:100%;gap:1.4cqi;padding:6cqi;box-sizing:border-box}
.idle .logo{width:52cqi;height:auto;aspect-ratio:249.84/52.2;color:var(--s-fg)}
.idle .sub{font:500 3cqi/1 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--s-mute)}
.idle .hint{margin-top:4cqi;font-size:3.1cqi;color:var(--s-fg);border:1px solid var(--s-line);padding:1.6cqi 2.6cqi;border-radius:1cqi;animation:breathe 2.6s ease-in-out infinite}
@keyframes breathe{50%{border-color:var(--s-acc)}}
.canon{display:grid;place-content:center;height:100%;gap:1.6cqi;justify-items:center;padding:3cqi;box-sizing:border-box}
.canon svg{width:60cqi;overflow:visible}
.canon .cap{font:500 2.3cqi/1.3 var(--f-mono);color:var(--s-mute);letter-spacing:.06em;text-align:center}

/* left screen: service info */
.info{display:flex;flex-direction:column;height:100%;padding:4.6cqi 6cqi 4.4cqi;box-sizing:border-box;gap:.6cqi}
.eyebrow{font:500 2.5cqi/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--s-acc)}
.ttl{font:700 6cqi/.95 var(--f-display);letter-spacing:-.035em;text-transform:uppercase;margin:.8cqi 0 0;text-wrap:balance}
.info .tool{font:500 3cqi/1.2 var(--f-body);color:var(--s-mute);margin-top:.4cqi}
.info ul{list-style:none;margin:1.8cqi 0 0;padding:0;display:grid;gap:1cqi}
.info li{font-size:2.8cqi;line-height:1.28;padding-left:3.6cqi;position:relative}
.info li::before{content:"";position:absolute;left:0;top:1.15cqi;width:2cqi;height:.35cqi;background:var(--s-acc)}
.cta{margin-top:auto;align-self:flex-start;font:500 2.3cqi/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;background:var(--s-acc);color:var(--on-accent,#1B1B1A);border:0;padding:1.6cqi 2.4cqi;border-radius:.8cqi;cursor:pointer}
.prog{position:absolute;left:0;right:0;bottom:0;height:.9cqi;background:var(--s-bar)}
.prog i{display:block;height:100%;background:var(--s-acc);transform-origin:left;animation:grow 10s linear both}

/* right screen: application window */
.win{position:absolute;inset:3.4cqi;display:flex;flex-direction:column;background:var(--s-bar);border:1px solid var(--s-line);border-radius:1cqi;overflow:hidden}
.wt{height:5.4cqi;flex:none;display:flex;align-items:center;padding:0 2.4cqi;font:500 2.4cqi/1 var(--f-mono);color:var(--s-mute);border-bottom:1px solid var(--s-line);gap:1.6cqi}
.wt::before{content:"";width:1.8cqi;height:2.2cqi;border:1px solid var(--s-mute);border-radius:.2cqi;clip-path:polygon(0 0,70% 0,100% 25%,100% 100%,0 100%)}
.wb{position:relative;flex:1;min-height:0}
.ln{display:block;height:1.05cqi;width:var(--w);background:var(--s-line);border-radius:.3cqi;position:relative}
.chips{display:flex;gap:1cqi;flex-wrap:wrap;justify-content:center}
.chips span{font:400 1.8cqi/1 var(--f-mono);border:1px solid var(--s-line);padding:.8cqi 1.1cqi;border-radius:2cqi;color:var(--s-mute)}
.chips b{color:var(--s-fg);font-weight:500;font-variant-numeric:tabular-nums}
.stamp{position:absolute;right:3cqi;bottom:3cqi;font:600 2.4cqi/1 var(--f-mono);color:var(--s-acc2);border:.35cqi solid var(--s-acc2);padding:1.2cqi 1.6cqi;border-radius:.6cqi;transform:rotate(-4deg)}

/* 1 word */
.word{display:flex;gap:2.4cqi;padding:2.6cqi}
.word .page{flex:0 0 58%;background:var(--s-paper);border:1px solid var(--s-line);padding:3cqi 3cqi 3cqi 1cqi;box-sizing:border-box;display:flex;flex-direction:column;gap:1.25cqi}
.row{display:flex;align-items:center;gap:1cqi;height:1.5cqi}
.stag{flex:0 0 12cqi;font:500 1.6cqi/1 var(--f-mono);color:var(--s-acc);text-align:right;white-space:nowrap}
.word .ln.h{animation:grow .5s ease-out calc(var(--d)*1s) both,promoteH .5s ease 3s forwards}
.word .ln.li{animation:grow .5s ease-out calc(var(--d)*1s) both,promoteL .5s ease 3.4s forwards}
@keyframes promoteH{to{background:var(--s-acc);height:2cqi}}
@keyframes promoteL{to{margin-left:3cqi;box-shadow:-2.4cqi 0 0 -.1cqi var(--s-fg)}}
.toc{flex:1;align-self:flex-start;background:var(--s-paper);border:1px solid var(--s-line);padding:2.4cqi;font-size:2.3cqi;display:grid;gap:1cqi}
.toc h4{margin:0 0 .6cqi;font:600 2.8cqi/1 var(--f-serif)}
.toc div{display:flex;gap:.8cqi}.toc div i{flex:1;border-bottom:.3cqi dotted var(--s-mute);transform:translateY(-.6cqi)}

/* 2 framemaker */
.fm{display:flex;gap:2.6cqi;padding:2.6cqi}
.blist{flex:0 0 44%;display:grid;align-content:start;gap:.6cqi;font:400 1.9cqi/1 var(--f-mono)}
.blist div{display:flex;justify-content:space-between;gap:1cqi;white-space:nowrap;padding:.9cqi 1.2cqi;background:var(--s-paper);border:1px solid var(--s-line);border-radius:.5cqi}
.blist div span{color:var(--s-mute)}
.blist .hd{background:none;border:0;padding:0 .2cqi .4cqi;color:var(--s-acc);font-weight:500;letter-spacing:.1em;text-transform:uppercase;font-size:1.9cqi}
.pv{flex:1;display:flex;flex-direction:column;align-items:center;gap:1.1cqi;perspective:60cqi}
.stack{position:relative;width:19cqi;height:24cqi}
.pg{position:absolute;inset:0;background:var(--s-paper);border:1px solid var(--s-line);box-sizing:border-box;padding:2cqi;display:flex;flex-direction:column;gap:.7cqi;transform-origin:left center;backface-visibility:hidden}
.pg .rh{display:flex;justify-content:space-between;font:400 1.3cqi/1 var(--f-mono);color:var(--s-mute);margin-bottom:.8cqi}
.pg .ln{height:.6cqi}
.pg.flip{animation:flip .48s ease-in-out 1.3s 13 both}
@keyframes flip{from{transform:rotateY(0)}to{transform:rotateY(-170deg);opacity:.2}}
.ctr{font:500 2.6cqi/1 var(--f-mono)}.ctr b{color:var(--s-acc);font-variant-numeric:tabular-nums}

/* 3 indesign book */
.idb{display:grid;place-items:center;padding:2.4cqi}
.spread{position:relative;display:flex;width:66cqi;height:38cqi;box-shadow:0 .6cqi 1.6cqi rgba(0,0,0,.15)}
.spread .p{position:relative;flex:1;background:var(--s-paper);border:1px solid var(--s-line)}
.spread .p+.p{border-left:0;background-image:linear-gradient(90deg,rgba(0,0,0,.08),transparent 8%)}
.spread .p:first-child{background-image:linear-gradient(270deg,rgba(0,0,0,.08),transparent 8%)}
.bgrid{position:absolute;left:0;right:0;top:4.6cqi;bottom:4cqi;background:repeating-linear-gradient(180deg,transparent 0 calc(2.1cqi - 1px),var(--s-grid) calc(2.1cqi - 1px) 2.1cqi)}
.tf{position:absolute;top:4.6cqi;bottom:4cqi;display:flex;flex-direction:column}
.p:first-child .tf{left:5cqi;right:3.6cqi}.p+.p .tf{left:3.6cqi;right:5cqi}
.tf .bl{height:2.1cqi;display:flex;align-items:flex-end}
.tf .bl i{display:block;height:.65cqi;width:var(--w,100%);background:var(--s-fg);opacity:.72;border-radius:.2cqi}
.tf .bl.ind i{margin-left:2.1cqi}
.initial{position:absolute;left:-.2cqi;top:-.1cqi;font:600 6.4cqi/.86 var(--f-serif);color:var(--s-acc)}
.tf .bl.w i{margin-left:5cqi;width:calc(100% - 5cqi)}
.folio{position:absolute;bottom:1.4cqi;font:400 1.5cqi/1 var(--f-mono);color:var(--s-mute)}
.p:first-child .folio{left:5cqi}.p+.p .folio{right:5cqi}
.rhd{position:absolute;top:1.8cqi;font:italic 400 1.6cqi/1 var(--f-serif);color:var(--s-mute)}
.p:first-child .rhd{left:5cqi}.p+.p .rhd{right:5cqi}
.thread{position:absolute;inset:0;pointer-events:none;overflow:visible}
.thread path{fill:none;stroke:var(--s-acc2);stroke-width:.35;stroke-dasharray:60;stroke-dashoffset:60;animation:dash 1s ease calc(var(--d)*1s) forwards}
@keyframes dash{to{stroke-dashoffset:0}}
.lbl{position:absolute;font:500 1.6cqi/1 var(--f-mono);color:var(--s-acc2);background:var(--s-bg);padding:.6cqi 1cqi;border:1px solid var(--s-acc2);border-radius:.5cqi}

/* 4 magazine */
.mag{display:grid;place-items:center;padding:2.4cqi}
.mspread{position:relative;display:flex;width:68cqi;height:38cqi}
.mspread .p{position:relative;flex:1;background:var(--s-paper);border:1px solid var(--s-line);overflow:hidden}
.cols{position:absolute;inset:2.2cqi;display:grid;grid-template-columns:repeat(6,1fr);gap:1.2cqi}
.cols i{background:var(--s-grid);opacity:.55}
.img{position:absolute;inset:2.2cqi 2.2cqi 7.4cqi 2.2cqi;background:
  radial-gradient(circle at 70% 32%,#ffd98a 0 4cqi,transparent 4.2cqi),
  linear-gradient(170deg,transparent 56%,rgba(20,40,70,.55) 56.2%),
  linear-gradient(185deg,transparent 64%,rgba(20,40,70,.8) 64.2%),
  linear-gradient(180deg,#e88f5b,#f2c27d 55%,#7aa6c2 55.2%,#3c6e91)}
.cap2{position:absolute;left:2.2cqi;right:2.2cqi;bottom:3cqi;font:italic 400 1.5cqi/1.3 var(--f-serif);color:var(--s-mute)}
.kick{position:absolute;left:2.2cqi;top:2.4cqi;font:600 1.3cqi/1 var(--f-mono);letter-spacing:.2em;color:var(--s-acc);text-transform:uppercase}
.hl{position:absolute;left:2.2cqi;right:2.2cqi;top:4.6cqi;font:600 4.3cqi/.98 var(--f-serif);letter-spacing:-.01em;color:var(--s-fg)}
.deck{position:absolute;left:2.2cqi;right:8cqi;top:14cqi;font:italic 400 1.7cqi/1.3 var(--f-serif);color:var(--s-mute)}
.tcols{position:absolute;left:2.2cqi;right:2.2cqi;top:19.6cqi;bottom:3.4cqi;display:grid;grid-template-columns:repeat(3,1fr);gap:1.2cqi;overflow:hidden}
.tcols div{display:flex;flex-direction:column;gap:.75cqi}
.tcols i{display:block;flex:none;height:.55cqi;background:var(--s-fg);opacity:.6;border-radius:.2cqi}
.pull{position:absolute;left:9cqi;right:2.2cqi;top:24cqi;background:var(--s-paper);border-top:.4cqi solid var(--s-acc);padding:1cqi 0;font:600 2.2cqi/1.15 var(--f-serif);color:var(--s-acc)}
.mfolio{position:absolute;bottom:.9cqi;right:2.2cqi;font:400 1.2cqi/1 var(--f-mono);color:var(--s-mute)}

/* 5 formula */
.fx{display:grid;place-content:center;gap:5cqi;padding:3cqi;justify-items:center;font-family:var(--f-math)}
.eq{display:flex;align-items:center;gap:1.6cqi;font-size:7.4cqi;line-height:1}
.frac{display:inline-flex;flex-direction:column;align-items:center}
.frac>.num{display:flex;align-items:flex-end;gap:1.2cqi;padding:0 1cqi .9cqi}
.frac>.bar{display:block;align-self:stretch;height:.45cqi;background:currentColor}
.frac>.den{padding-top:.9cqi}
.sqrt{display:inline-flex;align-items:flex-end}
.sqrt .rad{font-size:1.15em;line-height:1;transform:translateY(.06em)}
.sqrt .und{border-top:.42cqi solid currentColor;padding:.5cqi .6cqi 0;display:flex;gap:1cqi;align-items:baseline}
.eq sup{font-size:.6em;vertical-align:.7em;line-height:0}
.eq i{font-style:italic}
.eq.b{font-size:5.6cqi;color:var(--s-fg)}
.int{position:relative;font-size:1.9em;line-height:.8;display:inline-block;font-style:italic;margin-right:.6cqi}
.lims{display:inline-flex;flex-direction:column;justify-content:space-between;height:9cqi;font-size:.55em;margin-left:-.2em}
.eqno{font-size:.6em;color:var(--s-mute);margin-left:4cqi}
.hl-acc{color:var(--s-acc)}
.fx .chips span{font-family:var(--f-mono)}

/* 6 music */
.mu{display:grid;place-content:center;padding:3cqi;gap:3cqi;justify-items:center}
.mu svg{width:90cqi;overflow:visible}
.mu .staff line{stroke:var(--s-fg);stroke-width:.5;stroke-dasharray:240;stroke-dashoffset:240;animation:dash2 1s ease calc(var(--d)*1s) forwards}
@keyframes dash2{to{stroke-dashoffset:0}}
.mu .nt,.mu .ly,.mu .bar{opacity:0;animation:fadein .35s ease calc(var(--d)*1s) forwards}
@keyframes fadein{to{opacity:1}}
.mu .nt ellipse{fill:var(--s-fg);stroke:var(--s-fg);stroke-width:.9}
.mu .nt ellipse.o{fill:var(--s-paper)}
.mu .nt line,.mu .bar{stroke:var(--s-fg);stroke-width:.7}
.mu .ly{font:400 5px/1 var(--f-serif);fill:var(--s-fg);text-anchor:middle}
.mu .clef{font-family:var(--f-music);font-size:36px;fill:var(--s-fg)}
.mu .ts{font:700 15px/1 var(--f-serif);fill:var(--s-fg);text-anchor:middle}
.mu .ttlm{font:italic 400 6px/1 var(--f-serif);fill:var(--s-acc);text-anchor:middle}
.mu .paper{fill:var(--s-paper);stroke:var(--s-line);stroke-width:.4}

/* 7 accessible pdf */
.ua{display:flex;gap:2.4cqi;padding:2.4cqi;height:100%;box-sizing:border-box}
.tags{flex:0 0 38%;align-self:flex-start;background:var(--s-paper);border:1px solid var(--s-line);border-radius:.5cqi;padding:1.4cqi 1.6cqi;font:400 1.85cqi/1.55 var(--f-mono);white-space:nowrap}
.tags div{padding-left:calc(var(--lv,0)*2cqi)}
.tags b{color:var(--s-acc);font-weight:500}
.tags .alt{color:var(--s-acc2)}
.uacol{flex:1;display:flex;flex-direction:column;gap:1.4cqi;min-width:0}
.uapg{position:relative;flex:1;background:var(--s-paper);border:1px solid var(--s-line);padding:2.4cqi 2.4cqi 2.4cqi 5.4cqi;display:flex;flex-direction:column;gap:1cqi;box-sizing:border-box}
.uapg .ln{height:.8cqi}.uapg .ln.h{height:1.6cqi;background:var(--s-acc)}
.uapg .fig{height:7cqi;background:var(--s-grid);border-radius:.3cqi}
.uapg .tbl{height:5cqi;background:repeating-linear-gradient(180deg,var(--s-line) 0 1px,transparent 1px 1.7cqi),linear-gradient(90deg,transparent calc(50% - 1px),var(--s-line) calc(50% - 1px) calc(50% + 1px),transparent 0);border:1px solid var(--s-line)}
.uapg .blk{position:relative;display:flex;flex-direction:column;gap:.6cqi}
.ord{position:absolute;left:-3.8cqi;top:calc(50% - 1.3cqi);width:2.6cqi;height:2.6cqi;border-radius:50%;background:var(--s-acc);color:var(--on-accent,#1B1B1A);font:600 1.5cqi/2.6cqi var(--f-mono);text-align:center}
.uacol .chips span::before{content:"✓ ";color:var(--s-line);animation:ok .3s ease calc(var(--o)*1s) forwards}
.ua .stamp{right:5cqi;bottom:auto;top:9cqi}
@keyframes ok{to{color:var(--s-ok)}}

/* 8 workflow */
.flow{position:relative;height:100%}
.before,.after{position:absolute;inset:2.4cqi}
.before .node{position:absolute;width:15cqi;left:var(--x);top:var(--y);padding:1.1cqi .4cqi;font-size:1.6cqi;margin:0;animation:pop .5s ease calc(var(--d)*1s) both}
.before svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.before path{fill:none;stroke:var(--s-acc2);stroke-width:1;stroke-dasharray:4 3;animation:fade .5s ease calc(var(--d)*1s) both}
.after{display:flex;flex-direction:column;justify-content:center;gap:3cqi}
.days{font:500 2.6cqi/1 var(--f-mono);text-align:center;color:var(--s-mute)}
.days b{color:var(--s-acc);font-variant-numeric:tabular-nums;font-size:4cqi}

/* 9 development */
.dev{display:flex;flex-direction:column;gap:2.4cqi;padding:2.4cqi}
.code{flex:1;background:var(--s-paper);border:1px solid var(--s-line);border-radius:.6cqi;padding:2cqi 2.4cqi;font:400 2.15cqi/1.65 var(--f-mono);counter-reset:l;overflow:hidden}
.code div{display:flex;gap:2cqi}
.code div::before{counter-increment:l;content:counter(l);color:var(--s-mute);opacity:.6;width:2.4cqi;text-align:right;flex:none}
.code .c{color:var(--s-mute)}.code .k{color:var(--s-acc)}.code .s{color:var(--s-acc2)}
.pipe{display:flex;align-items:center;gap:1cqi}
.node{flex:1;text-align:center;font:500 1.85cqi/1.2 var(--f-mono);padding:1.6cqi .6cqi;border:1px solid var(--s-line);border-radius:.7cqi;background:var(--s-paper);color:var(--s-mute);animation:pop .5s ease calc(var(--d)*1s) both,lit .5s ease calc(var(--l)*1s) forwards}
@keyframes lit{to{border-color:var(--s-acc);color:var(--s-fg);box-shadow:inset 0 -.6cqi 0 var(--s-acc)}}
.arr{flex:none;width:2.4cqi;height:.35cqi;background:var(--s-line);position:relative;animation:litA .3s ease calc(var(--l)*1s) forwards}
.arr::after{content:"";position:absolute;right:-.2cqi;top:-.7cqi;border:.85cqi solid transparent;border-left:1cqi solid var(--s-line)}
@keyframes litA{to{background:var(--s-acc)}}
.ki{display:inline-block;margin-left:.4cqi;font-size:1.5cqi;color:var(--s-acc2)}

/* thank-you */
.thanks{display:grid;place-content:center;justify-items:center;height:100%;gap:2cqi;text-align:center;padding:6cqi;box-sizing:border-box}
.thanks h2{font:700 7cqi/.95 var(--f-display);letter-spacing:-.03em;text-transform:uppercase;margin:0}
.thanks p{margin:0;font-size:3.2cqi;color:var(--s-mute);max-width:46ch}
.thanks svg{width:16cqi;animation:fly 2.4s ease-in-out infinite alternate}
@keyframes fly{to{transform:translate(3cqi,-2cqi) rotate(6deg)}}

@media (prefers-reduced-motion:reduce){
  .screen *,.screen *::before,.screen *::after{animation-duration:.01s!important;animation-delay:0s!important;animation-iteration-count:1!important}
  .steam path{animation:none;opacity:.6}
  .screen .tl{width:calc(var(--n)*1ch)}
}