/* Synodic: a bench lexicon. Grand-feu enamel, silver type, one salmon for "now". */
@font-face{font-family:"Castoro Titling";src:url(/assets/fonts/specimen/castoro-titling-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Castoro";src:url(/assets/fonts/specimen/castoro-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Castoro";font-style:italic;src:url(/assets/fonts/specimen/castoro-400-italic.woff2) format("woff2");font-display:swap}
@property --sy-p{syntax:"<number>";inherits:true;initial-value:0}
@property --sy-raise{syntax:"<number>";inherits:false;initial-value:0}
body.spec-synodic{background:#16266E}
.sy{--sy-enamel:#16266E;--sy-deep:#0F1B55;--sy-lift:#1D2F80;--sy-ink:#F2F3F7;--sy-sup:#9AA7D6;--sy-sal:#F4A98E;--sy-frit:#C9CCDA;--sy-glow:#E9784F;--sy-white:#E9E8EE;--sy-slate:#2B3050;
--sy-display:"Castoro Titling",Georgia,"Times New Roman",serif;--sy-text:"Castoro",Georgia,"Times New Roman",serif;
--sy-rule:rgb(242 243 247/.35);--sy-hair:rgb(154 167 214/.5);
--sy-m:calc((100vw - var(--sy-sbw,0px))/60);--sy-D:300px;--sy-u1:.34;
background:var(--sy-enamel);color:var(--sy-ink);font-family:var(--sy-text);font-size:clamp(1.0625rem,1.016rem + .19vw,1.1875rem);line-height:1.6;font-kerning:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative}
.sy *,.sy *::before,.sy *::after{box-sizing:border-box}
.sy ::selection{background:var(--sy-sup);color:var(--sy-deep)}
:where(.sy) :where(p,ol,ul,dl,dd,figure,h1,h2,h3){margin:0}
:where(.sy) a{color:inherit;text-decoration:none}
:where(.sy) button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.sy :focus{outline:none}
.sy :focus-visible{outline:2px solid var(--sy-sal);outline-offset:3px}
.sy i,.sy dfn{font-style:italic}
.sy dfn{letter-spacing:.01em}
.sy b{font-weight:400}
.sy img{display:block;width:100%;height:auto}
.sy-vh{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.sy-sprite{position:absolute;width:0;height:0;overflow:hidden}
:where(.sy) svg{display:block}

/* type */
.sy h1,.sy-hw,.sy-kicker,.sy-src,.sy-a,.sy-cap-h,.sy-see span,.sy-see a,.sy-btn,.sy-pat-t b,.sy-form label,.sy-form legend,.sy-ln h3,.sy-rows dt,.sy-cl-h,.sy-ye-h,.sy-dock-w,.sy-form-h,.sy-lg-see,.sy-sheet-h{font-family:var(--sy-display);font-weight:400;text-transform:uppercase;hyphens:none}
.sy h1{font-size:clamp(3.375rem,2.214rem + 4.762vw,6.5rem);line-height:1;letter-spacing:.12em;margin-right:-.12em;text-shadow:0 1px 0 var(--sy-deep);white-space:nowrap}
.sy-hw{font-size:clamp(2.125rem,1.614rem + 2.095vw,3.5rem);line-height:1.05;letter-spacing:.08em;text-shadow:0 1px 0 var(--sy-deep)}
.sy-kicker,.sy-src,.sy-cap-h,.sy-see span,.sy-form label,.sy-form legend,.sy-rows dt,.sy-sheet-h{font-size:clamp(.6875rem,.664rem + .095vw,.75rem);letter-spacing:.24em;line-height:1.2}
.sy-a,.sy-btn,.sy-see a,.sy-lg-see{font-size:clamp(.75rem,.727rem + .095vw,.8125rem);letter-spacing:.16em;line-height:1.2}
.sy-kicker,.sy-src,.sy-el,.sy-or,.sy-mar,.sy-cap,.sy-lex,.sy-help,.sy-colo{color:var(--sy-sup)}
.sy-sub{font-style:italic;font-size:clamp(1.125rem,.986rem + .571vw,1.5rem);line-height:1.42}
.sy-now{font-size:clamp(1.125rem,1.079rem + .19vw,1.25rem);line-height:1.5}
.sy-use{font-style:italic;font-size:clamp(1.125rem,1.079rem + .19vw,1.25rem);line-height:1.45}
.sy-el{font-style:italic;font-size:clamp(.9375rem,.891rem + .19vw,1.0625rem);line-height:1.4}
.sy-mar,.sy-or,.sy-cap,.sy-colo,.sy-help,.sy-lg-n{font-size:clamp(.875rem,.852rem + .095vw,.9375rem);line-height:1.45}
.sy-or,.sy-def{font-style:italic}
.sy-lex{font-size:1rem;line-height:1.5}
.sy-cap-h{font-size:11px;letter-spacing:.24em;color:var(--sy-ink)}
.sy-key{font-style:italic;letter-spacing:.02em;font-size:1.05em}

/* links: a hairline that turns salmon */
.sy-a,.sy-see a,.sy-contents a,.sy-lg-see,.sy-sheet a{background:linear-gradient(var(--sy-hair),var(--sy-hair)) 0 100%/100% 1px no-repeat;transition:background-color .25s linear,background-image .25s linear}
.sy-a:hover,.sy-see a:hover,.sy-contents a:hover,.sy-lg-see:hover,.sy-sheet a:hover{background-image:linear-gradient(var(--sy-sal),var(--sy-sal))}
.sy-a{display:inline-flex;align-items:center;gap:10px;padding-block:12px 10px}
.sy-a svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:butt}

/* the grid: one minute is a sixtieth of the page */
.sy-split{position:relative}
.sy-tc{padding-inline:max(16px,4.167vw)}
@media (min-width:820px){
  .sy{--sy-m:calc((min(100vw,1920px) - var(--sy-sbw,0px))/60);--sy-D:min(25*var(--sy-m),100svh - var(--bar-h,40px) - 6*var(--sy-m));--sy-mar:calc(6*var(--sy-m))}
  .sy-split{display:grid;grid-template-columns:calc(28*var(--sy-m)) calc(3*var(--sy-m)) calc(25*var(--sy-m)) 1fr;max-width:1920px;margin-inline:auto}
  .sy-pc{grid-column:1;position:relative;box-shadow:inset -1px 0 0 rgb(154 167 214/.22)}
  .sy-tc{grid-column:3;padding:0}
  .sy-r{display:grid;grid-template-columns:calc(18*var(--sy-m)) var(--sy-m) var(--sy-mar);align-items:start}
  .sy-r>*{grid-column:1}
  .sy-r>.sy-mar{grid-column:3}
}

/* the plate column and its dial */
.sy-panel{position:relative;display:flex;flex-direction:column;align-items:center}
@media (min-width:820px){
  .sy-panel{justify-content:center;min-height:calc(100svh - var(--bar-h,40px));background:radial-gradient(ellipse 72% 72% at 50% 50%,var(--sy-enamel) 45%,#101D5A)}
  .sy-js .sy-panel{position:sticky;top:var(--bar-h,40px);height:calc(100svh - var(--bar-h,40px))}
}
.sy-dial{position:relative;width:var(--sy-D)}
.sy-art{position:relative;width:var(--sy-D);aspect-ratio:1;border-radius:50%}
.sy-art>*{position:absolute;inset:0;width:100%;height:100%}
.sy-dial-poster,.sy-sw svg,.sy-plb-p{fill:none;stroke:var(--sy-ink);stroke-opacity:.17;stroke-width:.75px}
.sy-pg{fill:var(--sy-enamel);stroke:none}
.sy-dial-cut,.sy-sheen-arm,.sy-frit,.sy-glow{border-radius:50%;overflow:hidden}
.sy-dial-cut{background:var(--sy-enamel);opacity:0}
.sy-dial.is-cut .sy-dial-cut{opacity:1}
.sy-dial.is-cut .sy-dial-poster{visibility:hidden}
.sy-cut{position:absolute;inset:0;width:100%;height:100%}
.sy-cut-new{visibility:hidden}
.sy-sheen-arm{-webkit-mask-image:conic-gradient(#0000 0 18deg,#000 34deg 50deg,#0000 66deg 198deg,#000 214deg 230deg,#0000 246deg);mask-image:conic-gradient(#0000 0 18deg,#000 34deg 50deg,#0000 66deg 198deg,#000 214deg 230deg,#0000 246deg);transform:rotate(var(--sy-sh,-40deg));rotate:var(--sy-sw2,0deg);transition:rotate 1s linear}
.sy-sheen-arm.is-four{-webkit-mask-image:repeating-conic-gradient(#0000 0 18deg,#000 30deg 40deg,#0000 52deg 90deg);mask-image:repeating-conic-gradient(#0000 0 18deg,#000 30deg 40deg,#0000 52deg 90deg)}
.sy-sheen{position:absolute;inset:0;width:100%;height:100%;transform:rotate(calc(-1*var(--sy-sh,-40deg)));rotate:calc(-1*var(--sy-sw2,0deg));transition:rotate 1s linear}
.sy-frit,.sy-glow{opacity:0;pointer-events:none}
.sy-glow{background:radial-gradient(circle,rgb(244 169 142/.9),rgb(233 120 79/.55) 45%,rgb(233 120 79/0) 72%);mix-blend-mode:screen}
.sy-face{overflow:visible}
.sy-glaze{fill:url(#sy-glz)}
.sy-mk{fill:none;stroke:var(--sy-ink);stroke-width:calc(var(--sy-u1)*.9);stroke-opacity:.85;transition:stroke-opacity .25s linear}
.sy-hands{fill:var(--sy-ink);color:var(--sy-ink);stroke:var(--sy-deep);stroke-width:calc(var(--sy-u1)*1.2);paint-order:stroke}
.sy-pin{fill:var(--sy-deep)}
.sy-mw-d{fill:var(--sy-deep)}
.sy-mw-s{fill:url(#sy-stip)}
#sy-stip circle{fill:var(--sy-ink);fill-opacity:.24}
.sy-mw-e{fill:var(--sy-ink);fill-opacity:.16}
.sy-lit-f{fill:url(#sy-limb)}
.sy-lit3{fill:url(#sy-limb2)}
.sy-maria circle{fill:var(--sy-sup);fill-opacity:.3}
.sy-mw-ring{fill:none;stroke:var(--sy-ink);stroke-width:calc(var(--sy-u1)*.8);stroke-dasharray:.5 1.1;opacity:0}
.sy-date{font-family:var(--sy-display);font-size:8.5px;letter-spacing:.06em;fill:var(--sy-ink);stroke:none}
.sy-loupe,.sy-axis-a,.sy-loupe2{display:none}
.sy-dial-cap,.sy-cb-cap{margin-top:14px;text-align:center}
@media (min-width:820px){.sy-js .sy-dial-cap,.sy-js .sy-cb-cap{position:absolute;top:100%;left:50%;width:calc(24*var(--sy-m));transform:translateX(-50%);margin:0;padding-top:calc(.9*var(--sy-m))}}
.sy-cap{font-size:clamp(.875rem,.852rem + .095vw,.9375rem)}

/* emphasis: the dial illustrates the word being read */
.sy-split-a[data-word="hand"] .sy-mk{stroke-opacity:.3}
.sy-split-a[data-word="hand"] .sy-glaze{opacity:.55}
.sy-split-a[data-word="moon"] .sy-mw-ring{opacity:1}
.sy-js .sy-loupe{display:block;overflow:visible;pointer-events:none;visibility:hidden}
.sy-lp-bg{fill:var(--sy-deep)}
.sy-lp-r1,.sy-lp-r2{fill:none;stroke:var(--sy-ink);stroke-width:calc(var(--sy-u1)*.9)}
.sy-lp-r2{stroke:var(--sy-sup);stroke-width:calc(var(--sy-u1)*.6)}
.sy-lp-lead{fill:var(--sy-ink)}
.sy-loupe .sy-lp-r1,.sy-loupe .sy-lp-r2{stroke-dasharray:202;stroke-dashoffset:202}
.sy-loupe .sy-lp-lead{clip-path:inset(0 0 0 100%)}
.sy-split-a[data-word="moon"] .sy-loupe{visibility:visible}
.sy-split-a[data-word="moon"] .sy-loupe .sy-lp-r1,.sy-split-a[data-word="moon"] .sy-loupe .sy-lp-r2{stroke-dashoffset:0;transition:stroke-dashoffset .5s linear}
.sy-split-a[data-word="moon"] .sy-loupe .sy-lp-lead{clip-path:inset(0);transition:clip-path .25s linear .5s}

/* the axis: date window to epigraph */
.sy-axis-a svg,.sy-axis-b svg,.sy-ul{width:100%;height:4px;fill:var(--sy-sup);fill-opacity:.8;overflow:visible}
@media (min-width:820px){
  .sy-js .sy-art>.sy-axis-a{display:block;inset:auto;top:calc(50% - 2px);left:calc(50% + .355*var(--sy-D) + 3px);width:calc(14*var(--sy-m) - .355*var(--sy-D) - 3px);height:4px}
  .sy-js .sy-axis-a svg,.sy-js .sy-axis-b svg{clip-path:inset(0 100% 0 0)}
  .sy-js.is-axis .sy-axis-a svg{clip-path:inset(0);transition:clip-path .1s linear}
  .sy-js.is-axis .sy-axis-b svg{clip-path:inset(0);transition:clip-path .42s linear .1s}
  /* once the title page has gone, the axis has nothing to point at */
  .sy-js.is-axis .sy-split-a:not([data-word="synodic"]) .sy-axis-a svg{clip-path:inset(0 100% 0 0);transition:clip-path .1s linear}
}

/* the title page */
.sy-title{position:relative}
.sy-kicker{margin-bottom:calc(.5*var(--sy-m))}
.sy-sub{margin-top:calc(.8*var(--sy-m));max-width:calc(18*var(--sy-m))}
.sy-epi{position:relative;margin-top:calc(.8*var(--sy-m))}
@media (min-width:820px){.sy-js .sy-title .sy-epi{margin-top:0}}
.sy-axis-b{display:none}
.sy-now{max-width:calc(18*var(--sy-m))}
.sy-src{display:flex;align-items:center;gap:12px;margin-top:14px}
.sy-src-l{width:var(--sy-m);height:1px;background:var(--sy-sup);flex:none}
.sy-lex{margin-top:var(--sy-m);max-width:calc(18*var(--sy-m))}
.sy-links{display:flex;flex-wrap:wrap;gap:0 calc(1.5*var(--sy-m));margin-top:calc(.7*var(--sy-m))}
.sy-contents{font-size:1rem;color:var(--sy-sup);line-height:1.5;margin-top:calc(.8*var(--sy-m))}
.sy-contents a{color:var(--sy-ink)}
@media (min-width:820px){
  .sy-title{padding-block:calc(3*var(--sy-m)) calc(2*var(--sy-m))}
  .sy-js .sy-title{min-height:calc(100svh - var(--bar-h,40px));padding-block:calc((100svh - var(--bar-h,40px) - var(--sy-D))/2);display:grid;grid-template-rows:calc(var(--sy-D)/2 - var(--sy-eb,25px) - 4px) auto auto auto 1fr auto}
  .sy-js .sy-t-up{align-self:end;padding-bottom:calc(.55*var(--sy-m))}
  .sy-js .sy-axis-b{display:block;position:absolute;left:calc(-3*var(--sy-m) - 1px);width:calc(3*var(--sy-m) - 10px);top:calc(var(--sy-eb,25px) + 2px);height:4px;pointer-events:none}
  .sy-contents{align-self:end;line-height:1.2}
  .sy-title{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:820px) and (max-width:1099px){
  .sy h1{font-size:calc(4.3*var(--sy-m))}
  /* a tall screen and a small dial: pin the dial and the title to one top instead of centring both;
     the kicker lands 5 minutes below the bar and the epigraph still meets the dial's axis */
  .sy-js{--sy-top:max(5*var(--sy-m),5*var(--sy-m) + var(--sy-tuh,0px) - var(--sy-D)/2 + var(--sy-eb,25px) + 4px)}
  .sy-js .sy-panel{justify-content:flex-start;padding-top:var(--sy-top)}
  .sy-js .sy-title{padding-block:var(--sy-top) calc(3*var(--sy-m));min-height:0}
}

/* the entries */
.sy section{scroll-margin-top:var(--bar-h,40px)}
.sy-e{padding-top:calc(5*var(--sy-m))}
.sy-split-a .sy-tc>.sy-e:last-child,.sy-split-b .sy-tc>.sy-e:last-child{padding-bottom:calc(4*var(--sy-m))}
.sy-ul{display:block;width:calc(10*var(--sy-m));margin-top:8px}
.sy-js .sy-ul{clip-path:inset(0 100% 0 0)}
.sy-js .is-struck .sy-ul{clip-path:inset(0);transition:clip-path .2s linear}
.sy-el{margin-top:calc(.5*var(--sy-m))}
.sy-r-h{align-items:end}
.sy-senses{list-style:lower-roman;padding-left:0;line-height:1.5}
.sy-senses li::marker{font-style:italic;color:var(--sy-sup)}
.sy-senses li+li{margin-top:.45em}
.sy-e>.sy-r+.sy-r{margin-top:calc(.8*var(--sy-m))}
.sy-e>.sy-r:nth-child(2),.sy-e>.sy-ph-art+.sy-r+.sy-r,.sy-e>.sy-loupe2+.sy-r+.sy-r{margin-top:calc(.67*var(--sy-m))}
.sy-note{hyphens:auto;line-height:1.6}
.sy-note p+ul,.sy-note p+p{margin-top:.6em}
.sy-lead{font-style:italic;color:var(--sy-sup)}
.sy-def i,.sy-mar i{color:var(--sy-ink)}
.sy-see span{display:block;color:var(--sy-sup);margin-bottom:6px}
.sy-see a{display:inline-block;padding-block:4px 3px}
.sy-mar>p+p{margin-top:calc(.6*var(--sy-m))}
.sy-hint{font-style:italic;color:var(--sy-sup)}
.sy-alone{font-style:italic;font-size:clamp(1.25rem,1.1rem + .5vw,1.625rem);line-height:1.35;padding-block:calc(.5*var(--sy-m))}
.sy-owner{list-style:none;padding:0;margin-top:.6em}
.sy-owner li{position:relative;padding-left:1.4em}
.sy-owner li::before{content:"·";position:absolute;left:.4em;color:var(--sy-sup)}
.sy-owner li+li{margin-top:.45em}
.sy-seq{list-style:none;padding:0;border-top:1px solid var(--sy-hair)}
.sy-seq li{display:grid;grid-template-columns:calc(4.5*var(--sy-m)) 1fr;gap:var(--sy-m);padding:10px 0 9px;border-bottom:1px solid var(--sy-hair);line-height:1.45}
.sy-dl{display:grid;grid-template-columns:1fr;gap:0}
.sy-dl dt{font-style:italic;font-size:1.08em;margin-top:.8em}
.sy-dl dt:first-child{margin-top:0}
.sy-dl dt span{font-size:.85em;color:var(--sy-sup)}
.sy-dl dd{margin:.2em 0 0;hyphens:auto}
.sy-ph-art{display:none}

/* figures: set at 14 to 25 minutes, never full-bleed; the lathe and the tray take the whole column */
.sy picture{display:block;background:var(--sy-deep)}
.sy-fig{margin-top:calc(2*var(--sy-m))}
.sy-fig figcaption{margin-top:10px}
@media (min-width:820px){
  .sy-fig-w,.sy-fig-sq{display:grid;grid-template-columns:calc(18*var(--sy-m)) var(--sy-m) var(--sy-mar);align-items:end}
  .sy-fig-w img{aspect-ratio:3/2;object-fit:cover}
  .sy-fig-w figcaption,.sy-fig-sq figcaption{grid-column:3;margin:0}
  .sy-fig-w.sy-fig-full{display:block;width:calc(25*var(--sy-m));margin-top:calc(2.4*var(--sy-m))}
  .sy-fig-w.sy-fig-full figcaption{max-width:calc(18*var(--sy-m));margin-top:12px}
  .sy-fig-sq{grid-template-columns:calc(12*var(--sy-m)) calc(7*var(--sy-m)) var(--sy-mar)}
  .sy-fig-kiln{display:grid;grid-template-columns:calc(10*var(--sy-m)) var(--sy-m) calc(14*var(--sy-m));align-items:end}
  .sy-fig-kiln picture{grid-column:3;grid-row:1}
  .sy-fig-kiln figcaption{grid-column:1;grid-row:1;text-align:right;margin:0}
}

/* guilloche: the pattern control */
.sy-pats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:var(--sy-m);background:rgb(154 167 214/.28);border:1px solid rgb(154 167 214/.28)}
@media (min-width:820px){.sy-pats{width:calc(24*var(--sy-m))}}
@media (min-width:820px) and (max-width:1099px){.sy-pats{width:auto}.sy .sy-pat{grid-template-columns:1fr;grid-template-rows:none;gap:8px;padding:14px 12px}.sy .sy-pat .sy-sw{grid-row:auto}}
.sy-pat{display:grid;grid-template-columns:64px 1fr;grid-template-rows:auto 1fr;gap:6px 16px;align-items:start;text-align:left;padding:16px;background:var(--sy-enamel);transition:background-color .25s linear}
.sy-pat:hover,.sy-pat[aria-pressed="true"]{background:var(--sy-lift)}
.sy-pat:focus-visible{outline-offset:-3px}
.sy-pat .sy-sw{grid-row:1/3;width:64px;height:64px}
.sy-sw{position:relative;display:block;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px rgb(242 243 247/.3);background:var(--sy-enamel)}
.sy-sw>*{position:absolute;inset:0;width:100%;height:100%}
.sy-sw canvas{visibility:hidden}
.sy-sw.is-cut canvas{visibility:visible}
.sy-sw svg{stroke-width:.4px;stroke-opacity:.3}
.sy-pat[aria-pressed="true"] .sy-sw,.sy-swr input:checked+label .sy-sw{box-shadow:0 0 0 1px var(--sy-ink),0 0 0 4px var(--sy-lift),0 0 0 5px var(--sy-ink)}
.sy-pat-t{align-self:end;line-height:1.2}
.sy-pat-t i{color:var(--sy-sup)}
.sy-pat-t b{font-size:13px;letter-spacing:.16em;margin-left:4px}
.sy-pat-d{font-size:15px;line-height:1.4;color:var(--sy-sup)}
.sy-pats+.sy-r{margin-top:calc(.6*var(--sy-m))}

/* moon: a month of moons */
.sy-month{margin-top:calc(2*var(--sy-m))}
.sy-luna{display:none}
.sy-js .sy-luna{display:grid;grid-template-columns:repeat(10,1fr);border-top:1px solid var(--sy-hair);border-bottom:1px solid var(--sy-hair)}
.sy-js .sy-phases{display:none}
.sy-phases{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:16px 24px}
.sy-phases li{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:14px;font-style:italic;color:var(--sy-sup);width:72px;text-align:center;line-height:1.25}
.sy-phases svg{width:36px;height:36px}
.sy-mn-d{fill:var(--sy-deep);stroke:var(--sy-sup);stroke-opacity:.55;stroke-width:.7}
.sy-mn-l{fill:var(--sy-ink)}
.sy-lc{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 0 8px;min-height:44px;transition:background-color .125s steps(1)}
.sy-lm{display:block;width:32px;height:32px;border-radius:50%}
.sy-lm svg{width:100%;height:100%}
.sy-lc span{font-family:var(--sy-display);font-size:11px;letter-spacing:.06em;color:var(--sy-sup);line-height:1}
.sy-lc:hover,.sy-lc.is-on{background:var(--sy-lift)}
.sy-lc:focus-visible{outline-offset:-2px}
.sy-lc.is-today .sy-lm{box-shadow:0 0 0 1.5px var(--sy-sal),0 0 0 3px var(--sy-enamel)}
.sy-lc.is-today span{color:var(--sy-ink)}
.sy-pair{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start}
.sy-pr{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-style:italic;font-size:14px;line-height:1.3;color:var(--sy-sup);width:120px}
.sy-pm{width:96px;height:96px}
.sy-pm .sy-mn-d{stroke-width:.25}
.sy-pair-c{font-style:italic;font-size:14px;color:var(--sy-sup);flex-basis:100%}
.sy-runrow{margin-top:var(--sy-m)}
.sy-no-run .sy-runrow{display:none}
.sy-quarters{margin-top:12px;font-size:15px;color:var(--sy-sup)}
.sy-month figcaption{margin-top:14px}
.sy-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;box-shadow:inset 0 0 0 1px var(--sy-hair);transition:box-shadow .25s linear}
.sy-btn:hover{box-shadow:inset 0 0 0 1px var(--sy-ink)}
.sy-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.25}
.sy-split-a.is-run .sy-sec{opacity:.2}
@media (min-width:820px){
  .sy-month{display:grid;grid-template-columns:calc(18*var(--sy-m)) var(--sy-m) var(--sy-mar);width:calc(25*var(--sy-m));align-items:start}
  .sy-luna,.sy-phases{grid-column:1/4;width:calc(24*var(--sy-m))}
  .sy-runrow,.sy-quarters,.sy-month figcaption{grid-column:1}
  .sy-pair{grid-column:3;grid-row:2/6;flex-direction:column;gap:14px;margin-top:var(--sy-m)}
  .sy-pr{width:auto}
  .sy-pm{width:calc(4*var(--sy-m));height:calc(4*var(--sy-m))}
}

/* the thumb index: one lunation, cut into the page edge */
.sy-thumbs{margin-top:24px;width:var(--sy-D)}
.sy-thumbs ol{list-style:none;padding:0;margin:0}
.sy-tab{display:flex;align-items:center;gap:10px;min-height:32px}
.sy-tab-n svg{width:14px;height:14px}
.sy-tab-p{font-size:15px;color:var(--sy-sup)}
.sy-tab .sy-mn-d{stroke-width:.9}
/* the ten moons are the tabs; the word shows on hover and focus, and a tick marks the one being read */
@media (min-width:820px){
  .sy-js .sy-thumbs{position:fixed;right:0;top:calc(var(--bar-h,40px) + (100svh - var(--bar-h,40px) - var(--sy-D))/2);width:28px;height:var(--sy-D);margin:0;z-index:40;background:var(--sy-lift);transition:transform .375s linear,visibility 0s linear}
  .sy-js .sy-thumbs ol{display:flex;flex-direction:column;height:100%}
  .sy-js .sy-thumbs li{flex:1;display:flex}
  .sy-js .sy-tab{position:relative;flex:1;min-height:0;gap:0}
  .sy-js .sy-tab:focus-visible{outline-offset:-2px}
  .sy-js .sy-tab::before{content:"";position:absolute;left:0;top:50%;width:7px;height:1px;background:var(--sy-ink);opacity:0;transition:opacity .375s linear}
  .sy-js .sy-tab.is-on::before{opacity:1}
  .sy-js .sy-tab-n{position:absolute;right:0;top:50%;margin-top:-16px;width:16px;height:32px;border-radius:16px 0 0 16px;background:var(--sy-deep);display:grid;place-items:center end}
  .sy-js .sy-tab-n svg{margin-right:1px}
  .sy-js .sy-tab .sy-mn{opacity:.6;transition:opacity .375s linear}
  .sy-js .sy-tab .sy-mn-d{stroke:var(--sy-ink);stroke-opacity:.45}
  .sy-js .sy-tab.is-on .sy-mn{opacity:1}
  .sy-js .sy-tab.is-near .sy-tab-n{box-shadow:inset 1px 1px 0 var(--sy-sal),inset 1px -1px 0 var(--sy-sal)}
  .sy-js .sy-tab-p{position:absolute;right:calc(100% + 8px);top:50%;transform:translateY(-50%);white-space:nowrap;background:var(--sy-lift);padding:7px 12px;font-style:italic;font-size:14px;line-height:1.2;color:var(--sy-ink);visibility:hidden}
  .sy-js .sy-tab:hover .sy-tab-p,.sy-js .sy-tab:focus-visible .sy-tab-p{visibility:visible}
  .sy-js.is-plate .sy-thumbs{transform:translateX(100%);visibility:hidden;transition:transform .375s linear,visibility 0s linear .375s}
}
@media (min-width:820px) and (max-width:1099px){
  .sy-js .sy-thumbs{top:calc(var(--bar-h,40px) + var(--sy-top))}
}
/* narrow lunation cells: the weekday over the date, in every cell alike */
@media (min-width:820px) and (max-width:1279px){.sy-lc span{width:min-content;text-align:center}}

/* the dock and its words (phones) */
.sy-dock{display:none}
.sy-dock-in{display:flex;align-items:center;gap:12px;height:48px;padding:4px var(--sy-g,16px) 0}
.sy-med{width:40px;height:40px;flex:none;overflow:visible}
.sy-med-f{fill:var(--sy-medf,var(--sy-enamel));stroke:var(--sy-ink);stroke-width:3}
.sy-med-c{fill:none;stroke:var(--sy-ink);stroke-width:10;stroke-opacity:.75}
.sy-med-w{fill:var(--sy-deep);stroke:var(--sy-ink);stroke-width:2.5}
.sy-med-m{fill:var(--sy-ink)}
.sy-med .sy-hands{stroke-width:3}
.sy-dock-t{flex:1;display:flex;flex-direction:column;gap:3px;line-height:1.15;min-width:0}
.sy-dock-w{font-size:12px;letter-spacing:.24em}
.sy-dock-time{font-style:italic;font-size:14px;color:var(--sy-sup);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sy-dock-b{width:44px;height:44px;display:grid;place-items:center;flex:none}
.sy-dock-b svg,.sy-sheet-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.25}
.sy-dock-moons{position:absolute;left:var(--sy-g,16px);right:var(--sy-g,16px);bottom:3px;display:flex;justify-content:space-between}
.sy-dm{width:8px;height:8px;opacity:.45}
.sy-dm.is-on{opacity:1}
.sy-dm .sy-mn-d{stroke-width:1.2}
.sy-sheet{position:absolute;top:100%;left:0;right:0;background:var(--sy-lift);z-index:60;padding:14px var(--sy-g,16px) 12px;box-shadow:0 1px 0 var(--sy-hair)}
.sy-sheet-h{color:var(--sy-sup);margin-bottom:6px}
.sy-sheet ol{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.sy-sheet a{display:flex;align-items:center;gap:10px;min-height:44px}
.sy-sheet a .sy-mn{width:14px;height:14px;flex:none}
.sy-sheet-x{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:4px;font-family:var(--sy-display);font-size:12px;letter-spacing:.16em;text-transform:uppercase}

/* the folding plate */
.sy-six{position:relative;--sy-spread:calc(var(--sy-D)*.05)}
.sy-js .sy-six{--sy-tilt:min(clamp(0,var(--sy-p)/.12,1),clamp(0,(.9 - var(--sy-p))/.08,1));--sy-open:min(clamp(0,(var(--sy-p) - .12)/.28,1),clamp(0,(.82 - var(--sy-p))/.16,1));--sy-focus:calc(clamp(0,(var(--sy-p) - .4)/.26,1)*9);--sy-hold:min(clamp(0,(var(--sy-p) - .4)/.02,1),clamp(0,(.66 - var(--sy-p))/.02,1));--sy-turn:clamp(0,(var(--sy-p) - .88)/.12,1)}
.sy-six-head .sy-el .sy-or{font-size:.9em;margin-left:.4em}
.sy-six-head .sy-senses{margin-top:calc(.5*var(--sy-m))}
.sy-six-head .sy-use,.sy-six-head .sy-hint{margin-top:calc(.5*var(--sy-m))}
.sy-legend{list-style:none;padding:0;margin-top:var(--sy-m)}
.sy-legend li{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;border-top:1px solid var(--sy-hair);color:var(--sy-ink)}
.sy-js .sy-legend li{--d:max(var(--sy-focus,0) - var(--i),var(--i) - var(--sy-focus,0));--sharp:calc(1 - var(--sy-hold,0)*(1 - clamp(0,1 - var(--d),1)));color:color-mix(in srgb,var(--sy-ink) calc(var(--sharp)*100%),var(--sy-sup))}
.sy-legend li.is-on{color:var(--sy-ink)}
.sy-lg{display:flex;align-items:baseline;gap:10px;min-height:44px;padding-top:10px;text-align:left;flex:1}
.sy-lg .sy-key{width:1.1em;flex:none;color:var(--sy-sup)}
.sy-legend li.is-on .sy-key{color:var(--sy-sal)}
.sy-lg .sy-pn{font-style:italic}
.sy-lg-see{font-size:11px}
.sy-lg-n{flex-basis:100%;padding:0 0 10px calc(1.1em + 10px);color:var(--sy-sup)}
.sy-js .sy-lg-n{display:none}
.sy-stage{position:relative}
.sy-stage:focus-visible{outline-offset:-6px}
.sy-persp{position:relative;padding-block:32px}
.sy-stack{position:relative;width:var(--sy-D);height:var(--sy-D)}
.sy-pl{position:relative;width:var(--sy-D);height:var(--sy-D);margin-top:-30px}
.sy-pl svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--sy-ink);stroke-width:var(--sy-u1)}
.sy-pl-bg,.sy-pl-sm{fill:rgb(29 47 128/.92);stroke:rgb(242 243 247/.32)}
.sy-pl-mn{fill:var(--sy-ink);stroke:none}
.sy-pl-k{font-family:var(--sy-text);font-style:italic;font-size:10px;fill:var(--sy-sup);stroke:none}
.sy-anc{fill:none;stroke:none}
.sy-pl-a svg{fill:var(--sy-ink)}
.sy-pl-b canvas,.sy-pl-b .sy-plb-p{position:absolute;inset:0;width:100%;height:100%;border-radius:50%}
.sy-pl-b canvas{background:var(--sy-enamel);visibility:hidden}
.sy-pl-b.is-cut canvas{visibility:visible}
.sy-s3{stroke-width:calc(var(--sy-u1)*3);stroke-opacity:.12}
.sy-s1{stroke-opacity:.25}
.sy-soft{opacity:0}
.sy-pl-out{display:none}
.sy-leaders{display:none}
.sy-well{display:none}
.sy-plate-cap{display:none}
/* no script: a finished 2D diagram, plates offset diagonally */
.sy-six-track{position:relative;padding-bottom:calc(2*var(--sy-m))}
.sy-mid{position:absolute;top:50%;left:0;width:1px;height:1px;pointer-events:none}
.sy-stack{display:flex;align-items:flex-start;width:auto;height:auto;padding-inline:var(--sy-g,16px)}
.sy-pl{flex:0 0 18%;width:auto;height:auto;aspect-ratio:1;margin:calc(var(--i)*14px) 0 0 -9%;z-index:calc(10 - var(--i))}
.sy-pl:first-child{margin-left:0}
@media (min-width:820px){
  /* opened, the stack stands about 1.2 diameters tall: keep it inside the frame and clear of the plate caption on short screens */
  .sy-six{--sy-D:min(25*var(--sy-m),(100svh - var(--bar-h,40px) - 7*var(--sy-m))/1.2);display:grid;grid-template-columns:calc(28*var(--sy-m)) calc(3*var(--sy-m)) calc(26*var(--sy-m)) 1fr;max-width:1920px;margin-inline:auto}
  .sy-six-track{grid-column:1/-1;grid-row:2}
  .sy-six-text{grid-column:3;grid-row:1;padding-top:calc(5*var(--sy-m));position:relative;z-index:2}
  .sy-legend{width:calc(13*var(--sy-m))}
  .sy-js .sy-lg{min-height:34px;padding-top:7px}
  .sy-stack{padding-inline:calc(2*var(--sy-m))}
}

/* the case back */
.sy-cb{position:relative;width:var(--sy-D);margin:0}
.sy-cb .sy-art{background:var(--sy-deep);box-shadow:0 0 0 1px rgb(242 243 247/.25)}
.sy-cb-ring{border-radius:50%}
.sy-cb-svg{overflow:visible}
.sy-cbl{fill:none;stroke:var(--sy-ink);stroke-width:calc(var(--sy-u1)*.8);stroke-opacity:.6}
.sy-cb-t{font-family:var(--sy-display);font-size:7.2px;letter-spacing:.18em;text-transform:uppercase;fill:var(--sy-ink)}
.sy-cb-guide{fill:none;stroke:var(--sy-sup);stroke-width:.6;stroke-dasharray:.1 2.4;stroke-linecap:round;opacity:.8}
.sy-cb.has-words .sy-cb-guide{opacity:0}
.sy-cb-pass{fill:none;stroke:var(--sy-ink);stroke-width:.4;stroke-dasharray:274;stroke-dashoffset:274;opacity:0}
.sy-cb-pass.is-go{animation:sy-pass .5s linear}
@keyframes sy-pass{0%{opacity:.9;stroke-dashoffset:274}88%{opacity:.9;stroke-dashoffset:0}100%{opacity:0;stroke-dashoffset:0}}
.sy-cb-win{fill:rgb(29 47 128/.92);stroke:var(--sy-ink);stroke-width:.5}
.sy-cb-j,.sy-cb-h{fill:none;stroke:var(--sy-ink);stroke-width:calc(var(--sy-u1)*1.2);transition:stroke .375s linear,stroke-opacity .375s linear}
.sy-split-b[data-word="balance"] .sy-cb-j,.sy-split-b[data-word="bridge"] .sy-cb-h{stroke:var(--sy-sup);stroke-opacity:.45}
.sy-cb.is-closed .sy-cb-win,.sy-cb.is-closed .sy-cb-j,.sy-cb.is-closed .sy-cb-h,.sy-cb.is-plain .sy-cb-j,.sy-cb.is-plain .sy-cb-h{visibility:hidden}
/* the balance swings in the window, about 2.8 times a second, like a pendulum: quickest through the middle.
   Paused off screen and in a hidden tab; still at rest where motion is reduced (the rule at the end) */
.sy-bw{transform-box:view-box;transform-origin:-14px 34px;animation:sy-bal .36s linear infinite}
.sy-js:not(.sy-static) .sy-split-b:not(.is-swing) .sy-bw{animation-play-state:paused}
@keyframes sy-bal{0%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.61,1,.88,1)}25%{transform:rotate(40deg);animation-timing-function:cubic-bezier(.37,0,.63,1)}75%{transform:rotate(-40deg);animation-timing-function:cubic-bezier(.12,0,.39,0)}100%{transform:rotate(0deg)}}

/* line: the three designs */
.sy-lines{margin-top:calc(1.2*var(--sy-m));border-top:1px solid var(--sy-hair)}
.sy-ln{display:grid;grid-template-columns:auto 1fr;gap:12px var(--sy-m);align-items:start;padding:calc(.8*var(--sy-m)) 12px;border-bottom:1px solid var(--sy-hair);transition:background-color .25s linear}
.sy-ln:hover,.sy-ln:focus-visible,.sy-ln.is-on{background:var(--sy-lift)}
.sy-ln:focus-visible{outline-offset:-3px}
.sy-ln-art{display:flex;gap:10px}
.sy-mini{position:relative;width:calc(4.6*var(--sy-m));aspect-ratio:1;border-radius:50%;background:var(--sy-enamel);box-shadow:0 0 0 1px rgb(242 243 247/.3)}
.sy-mini[data-e="white"]{background:var(--sy-white)}
.sy-mini[data-e="slate"]{background:var(--sy-slate)}
.sy-mini[data-e="frit"]{background:var(--sy-frit)}
.sy-mini-b{background:var(--sy-deep)}
.sy-mini>*{position:absolute;inset:0;width:100%;height:100%;border-radius:50%}
.sy-mini svg{overflow:visible;fill:none;stroke:var(--sy-ink);stroke-width:1.6}
.sy-ln h3{font-size:13px;letter-spacing:.16em;line-height:1.3}
.sy-rows{display:grid;grid-template-columns:auto 1fr;gap:0 16px;margin-top:8px;font-size:15px;line-height:1.4}
.sy-rows dt,.sy-rows dd{border-top:1px solid rgb(154 167 214/.3);padding:7px 0 6px;margin:0}
.sy-rows dt{font-size:11px;padding-top:10px;color:var(--sy-sup)}
.sy-lines+.sy-r{margin-top:calc(.6*var(--sy-m))}

/* order: the form */
.sy-form{margin-top:calc(2*var(--sy-m));max-width:calc(18*var(--sy-m));display:grid;gap:calc(.9*var(--sy-m))}
.sy-form-h{font-size:13px;letter-spacing:.16em;padding-bottom:10px;border-bottom:1px solid var(--sy-rule)}
.sy-fr{display:grid;gap:4px}
.sy-form label,.sy-form legend{color:var(--sy-ink)}
.sy-form input[type="text"],.sy-form textarea{font:inherit;font-size:18px;color:var(--sy-ink);background:transparent;border:0;border-bottom:1px solid var(--sy-sup);border-radius:0;padding:8px 0;min-height:44px;width:100%}
.sy-form textarea{border:1px solid var(--sy-hair);padding:8px 10px;resize:vertical;line-height:1.5}
.sy-form input[type="text"]:focus-visible,.sy-form textarea:focus-visible{border-bottom-color:var(--sy-sal)}
.sy-fs{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:0 22px;min-width:0}
.sy-fs legend{padding:0;margin-bottom:6px;float:left;width:100%}
.sy-rad{display:inline-flex;align-items:center;gap:9px;min-height:44px}
.sy-rad input{appearance:none;-webkit-appearance:none;width:18px;height:18px;border-radius:50%;border:1px solid var(--sy-sup);margin:0;flex:none;background:transparent}
.sy-rad input:checked{border-color:var(--sy-ink);background:radial-gradient(circle,var(--sy-ink) 0 3.5px,transparent 4px)}
.sy-rad input:focus-visible{outline-offset:3px;border-radius:50%}
.sy-form .sy-rad label,.sy-form .sy-swr label{font-family:var(--sy-text);text-transform:none;letter-spacing:0;font-size:1rem;line-height:1.3;cursor:pointer}
.sy-swr label{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:64px;padding:6px 0;text-align:center}
.sy-swr .sy-sw{width:48px;height:48px}
.sy-swr input:focus-visible+label .sy-sw{outline:2px solid var(--sy-sal);outline-offset:6px}
.sy-help{font-style:italic;display:block}
.sy-opt{font-family:var(--sy-text);text-transform:none;letter-spacing:0;font-style:italic;color:var(--sy-sup)}
.sy-send{margin-top:8px}
.sy-btn-p{box-shadow:inset 0 0 0 1px var(--sy-ink);padding:0 24px;min-height:52px}
.sy-status{min-height:1.6em;font-style:italic}

/* the closing spread */
.sy-close{padding:calc(4*var(--sy-m)) max(16px,4.167vw) calc(3*var(--sy-m));border-top:1px solid rgb(154 167 214/.22)}
.sy-cl-h{font-size:12px;letter-spacing:.24em;color:var(--sy-sup);margin-bottom:var(--sy-m)}
.sy-yw{display:flex;gap:var(--sy-m)}
.sy-yw .sy-mini{width:calc(12*var(--sy-m))}
.sy-yw-c{margin-top:14px}
.sy-ye-h{font-style:normal;color:var(--sy-ink);font-size:clamp(1.75rem,1.4rem + 1.4vw,2.75rem);line-height:1.1;letter-spacing:.08em;text-shadow:0 1px 0 var(--sy-deep);margin-right:.3em}
.sy-ye{font-style:italic;color:var(--sy-sup)}
.sy-ye i{font-size:clamp(.9375rem,.891rem + .19vw,1.0625rem)}
.sy-cl-e .sy-senses{margin-top:calc(.67*var(--sy-m))}
.sy-ye-note{margin-top:calc(.8*var(--sy-m));font-size:14px;font-style:italic;color:var(--sy-sup)}
.sy-bench{font-size:clamp(1.125rem,.986rem + .571vw,1.5rem);font-style:italic;line-height:1.42}
.sy-here{margin-top:var(--sy-m)}
.sy-colo{margin-top:calc(1.5*var(--sy-m));padding-top:12px;border-top:1px solid var(--sy-hair)}
@media (min-width:820px){
  .sy-close{display:grid;grid-template-columns:calc(28*var(--sy-m)) calc(3*var(--sy-m)) calc(18*var(--sy-m)) 1fr;row-gap:calc(3*var(--sy-m));max-width:1920px;margin-inline:auto;padding-inline:0}
  .sy-cl-a{grid-column:1;display:flex;flex-direction:column;align-items:center}
  .sy-cl-e{grid-column:3;align-self:center}
  .sy-fig-ws{grid-column:1;justify-self:center;width:calc(18*var(--sy-m));margin:0}
  .sy-cl-t{grid-column:3;align-self:end}
}

/* the plate, live: one number lifts it apart */
.sy-js .sy-six-track{padding:0}
.sy-js .sy-stack{display:block;width:var(--sy-D);height:var(--sy-D);padding:0;transform-style:preserve-3d;transform:rotateX(calc(var(--sy-tilt)*56deg)) rotateZ(calc(var(--sy-tilt)*-22deg)) rotateY(calc(var(--sy-turn)*180deg)) scale(calc(1 - .25*var(--sy-tilt))) translateZ(calc(var(--sy-open)*-10*var(--sy-spread)))}
.sy-js .sy-pl{position:absolute;inset:0;width:100%;height:100%;margin:0;aspect-ratio:auto;z-index:auto;--lift:clamp(0,var(--sy-open)*1.5 - var(--i)*.05,1);--d:max(var(--sy-focus) - var(--i),var(--i) - var(--sy-focus));--sharp:calc(1 - var(--sy-hold)*(1 - clamp(0,1 - var(--d),1)));transform:translateZ(calc(var(--z)*var(--sy-spread)*var(--lift) + var(--sy-raise)*24px));backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:--sy-raise .25s cubic-bezier(.2,.7,.1,1)}
.sy-js .sy-pl.is-raised{--sy-raise:1;--sharp:1}
.sy-js .sy-pl-k9{transform-style:preserve-3d;backface-visibility:visible;-webkit-backface-visibility:visible}
.sy-js .sy-pl-k9>svg{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.sy-js .sy-pl-out{display:block;position:absolute;inset:0;transform:rotateY(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:50%;background:var(--sy-deep)}
.sy-js .sy-pl-out canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:50%}
.sy-js .sy-sharp{opacity:calc(.3 + .7*var(--sharp))}
.sy-js .sy-soft{opacity:calc(.9*(1 - var(--sharp)))}
.sy-js .sy-pl-k{display:none}
.sy-js .sy-pl svg{stroke-width:calc(var(--sy-u1)*1.25)}
.sy-js .sy-pl-bg,.sy-js .sy-pl-sm{fill:rgb(29 47 128/.35);stroke:rgb(242 243 247/.45)}
.sy-js .sy-s3{stroke-opacity:.16}
.sy-js .sy-stage:focus-visible{outline-offset:calc(-1*var(--sy-m) + 3px)}
.sy-js .sy-six.is-in .sy-stack,.sy-js .sy-six.is-in .sy-pl{will-change:transform}
.sy-js .sy-six-pin{position:sticky;top:var(--bar-h,40px);height:calc(100svh - var(--bar-h,40px));background:radial-gradient(ellipse 60% 70% at 25% 50%,var(--sy-enamel) 45%,#101D5A)}
.sy-js .sy-six-pin::before{content:"";position:absolute;inset:var(--sy-m);border:1px solid rgb(242 243 247/.3);box-shadow:inset 0 0 0 3px var(--sy-enamel),inset 0 0 0 4px rgb(242 243 247/.16);pointer-events:none}
.sy-js .sy-stage{position:absolute;inset:0}
.sy-js .sy-persp{position:absolute;left:0;top:0;width:calc(28*var(--sy-m));height:100%;padding:0;perspective:1600px;display:grid;place-items:center}
.sy-js .sy-leaders{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;fill:rgb(154 167 214/.38)}
.sy-leaders .is-on{fill:var(--sy-ink)}
.sy-dot{fill:rgb(154 167 214/.7)}
.sy-dot.is-hot{fill:var(--sy-sal)}
.sy-js .sy-well{display:block;position:absolute;left:calc(45*var(--sy-m));width:calc(12*var(--sy-m));bottom:calc(2.4*var(--sy-m));padding-top:12px;border-top:1px solid var(--sy-rule)}
.sy-well-t{font-size:15px;line-height:1.45;color:var(--sy-sup);min-height:4.4em}
.sy-well-t .sy-key,.sy-well-t .sy-pn{color:var(--sy-ink)}
.sy-well-t .sy-pn{margin-right:.35em}
.sy-well-b{display:none}
.sy-sq{width:48px;height:48px;padding:0;justify-content:center}
.sy-js .sy-plate-cap{display:block;position:absolute;left:calc(2*var(--sy-m));bottom:calc(1.8*var(--sy-m))}
@media (min-width:820px){
  .sy-js .sy-six-track,.sy-js .sy-six-text{grid-row:1}
  .sy-js .sy-six-track{height:320svh}
  .sy-js .sy-six-text{position:sticky;top:calc(var(--bar-h,40px) + 2*var(--sy-m));padding-top:0;align-self:start}
}

/* scroll-driven, where the platform has it; the shared listener otherwise */
@keyframes sy-sha{from{transform:rotate(-40deg)}to{transform:rotate(320deg)}}
@keyframes sy-shc{from{transform:rotate(40deg)}to{transform:rotate(-320deg)}}
@keyframes sy-p{from{--sy-p:0}to{--sy-p:1}}
@keyframes sy-frit{0%{opacity:0}16.7%{opacity:.92}75%,100%{opacity:0}}
@keyframes sy-glw{0%,16.7%{opacity:0}58.3%{opacity:1}100%{opacity:0}}
@supports (animation-timeline:scroll()){
  .sy-js .sy-sheen-arm{animation:sy-sha linear both;animation-timeline:scroll(root)}
  .sy-js .sy-sheen{animation:sy-shc linear both;animation-timeline:scroll(root)}
  .sy-js .sy-six{timeline-scope:--sy-six;animation:sy-p linear both;animation-timeline:--sy-six;animation-range:contain 0% contain 100%}
  .sy-js .sy-six-track{view-timeline-name:--sy-six;view-timeline-inset:var(--bar-h,40px) 0px}
}
@supports (animation-timeline:view()) and (timeline-scope:none){
  .sy-js .sy-split-a{timeline-scope:--sy-kiln}
  .sy-js #sy-ch4{view-timeline-name:--sy-kiln}
  .sy-js .sy-frit{animation:sy-frit linear both;animation-timeline:--sy-kiln;animation-range:cover 10% cover 70%}
  .sy-js .sy-glow{animation:sy-glw linear both;animation-timeline:--sy-kiln;animation-range:cover 10% cover 70%}
}

/* phones: designed, not squeezed */
@media (max-width:819px){
  .sy{--sy-u:calc((100vw - var(--sy-sbw,0px))/12);--sy-g:max(16px,.5*var(--sy-u));--sy-D:min(100vw - 90px,38svh);--sy-m:24px;--sy-mar:100%}
  .sy section{scroll-margin-top:calc(var(--bar-h,40px) + 56px)}
  .sy-panel{padding-top:16px}
  .sy-dial-cap{display:none}
  .sy-dial .sy-art{overflow:clip}
  .sy-js .sy-loupe{display:none}
  .sy-tc{padding-inline:var(--sy-g)}
  .sy-title{padding-top:26px}
  .sy-kicker{margin-bottom:10px}
  .sy-sub{margin-top:12px}
  .sy-epi{margin-top:18px}
  .sy-js .sy-axis-b{display:block;position:absolute;left:0;font-size:clamp(1.125rem,1.079rem + .19vw,1.25rem);top:calc(var(--sy-eb,19px) - .32em);width:var(--sy-u);height:4px}
  .sy-js .sy-now{text-indent:calc(var(--sy-u) + 8px)}
  .sy-links{flex-direction:column;gap:0;margin-top:22px}
  .sy-a{width:100%;min-height:48px;padding-block:0;background:none;border-top:1px solid var(--sy-hair);justify-content:space-between}
  .sy-a:last-child{border-bottom:1px solid var(--sy-hair)}
  .sy-contents{display:none}
  .sy-e{padding-top:80px}
  .sy-r>.sy-mar{margin-top:10px;padding-left:14px;border-left:1px solid var(--sy-hair)}
  .sy-r-h>.sy-mar{border:0;padding:0;margin-top:6px}
  .sy-senses{padding-left:20px}
  .sy-use{padding-left:16px}
  .sy-seq li{grid-template-columns:6.2em 1fr;gap:12px}
  .sy-fig{margin-inline:calc(-1*var(--sy-g));margin-top:32px}
  .sy-fig figcaption{padding-inline:var(--sy-g)}
  .sy-fig-kiln{width:80%;margin-left:auto}
  .sy-fig-kiln figcaption{padding-left:0}
  .sy-pat{grid-template-columns:1fr;grid-template-rows:none;padding:14px 12px;gap:8px}
  .sy-pat .sy-sw{grid-row:auto;width:72px;height:72px}
  .sy-js .sy-luna{grid-template-columns:repeat(5,1fr)}
  .sy-lm{width:36px;height:36px}
  .sy-pair{margin-top:20px}
  .sy-pm{width:120px;height:120px}
  .sy-js .sy-loupe2{display:block;width:180px;height:180px;margin:0 auto 24px}
  .sy-ph-art{display:block;width:220px;margin:0 auto 20px;overflow:visible}
  .sy-ph-br{width:200px}
  .sy-ln{grid-template-columns:1fr;padding-inline:0}
  .sy-mini{width:104px}
  .sy-form{max-width:none}
  .sy-yw .sy-mini{width:min(160px,42vw)}
  .sy-cl-e,.sy-fig-ws,.sy-cl-t{margin-top:40px}
  .sy-split-b .sy-panel{padding-top:64px}
  .sy-cb{--sy-D:260px}
  .sy-js .sy-thumbs{width:100%;height:44px;margin:16px 0 0;background:var(--sy-lift)}
  .sy-js .sy-thumbs ol{display:flex;height:100%}
  .sy-js .sy-thumbs li{flex:1;min-width:0;display:flex}
  .sy-js .sy-tab{position:relative;flex:1;justify-content:center;align-items:center;height:44px;gap:0}
  .sy-js .sy-tab:focus-visible{outline-offset:-2px}
  .sy-js .sy-tab::before{content:"";position:absolute;left:50%;top:0;width:1px;height:6px;background:var(--sy-ink);opacity:0}
  .sy-js .sy-tab.is-on::before{opacity:1}
  .sy-js .sy-tab-n{width:28px;height:28px;border-radius:50%;background:var(--sy-deep);display:grid;place-items:center}
  .sy-js .sy-tab-n svg{width:14px;height:14px}
  .sy-js .sy-tab .sy-mn{opacity:.45}
  .sy-js .sy-tab.is-on .sy-mn{opacity:1}
  .sy-js .sy-tab.is-near .sy-tab-n{box-shadow:inset 0 0 0 1px var(--sy-sal)}
  .sy-js .sy-tab-p{display:none}
  .sy-js .sy-dock{display:block;position:sticky;top:var(--bar-h,40px);height:56px;margin-bottom:-56px;z-index:50;background:var(--sy-deep);box-shadow:0 1px 0 rgb(154 167 214/.35);transform:translateY(-100%);visibility:hidden;transition:transform .375s linear,visibility 0s linear .375s}
  .sy-js.is-dock .sy-dock{transform:none;visibility:visible;transition:transform .375s linear}
  .sy-js.is-dock.is-plate .sy-dock{transform:translateY(-100%);visibility:hidden;transition:transform .375s linear,visibility 0s linear .375s}
  .sy-six{display:flex;flex-direction:column;--sy-D:min(280px,100vw - 110px);--sy-spread:calc(var(--sy-D)*.046)}
  .sy-six-text{display:contents}
  .sy-six-head{order:0;padding:80px var(--sy-g) 0}
  .sy-six-track{order:1;margin-top:24px}
  .sy-legend{order:2;padding:0 var(--sy-g);margin-top:28px}
  .sy-js .sy-six-track{height:280svh}
  .sy-js .sy-persp{width:100%;height:58%}
  .sy-js .sy-well{left:var(--sy-g);right:var(--sy-g);width:auto;bottom:20px}
  .sy-js .sy-well-b{display:flex;gap:8px;margin-top:6px}
  .sy-js .sy-plate-cap{display:none}
  .sy-js .sy-six-pin::before{inset:8px}
  .sy-js .sy-lg-n{display:block}
  .sy-stack{grid-template-columns:repeat(2,1fr)}
}

/* no IntersectionObserver: shown open, unpinned */
.sy-static .sy-six{--sy-tilt:1;--sy-open:1;--sy-hold:0;--sy-turn:0;--sy-focus:0}
.sy-static .sy-six-track{height:auto!important}
.sy-static .sy-six-pin,.sy-static .sy-six-text{position:relative!important;top:auto!important}
.sy-static .sy-ul,.sy-static .sy-axis-a svg,.sy-static .sy-axis-b svg{clip-path:none!important}

/* reduced motion: one composed still, every element in its final state */
@media (prefers-reduced-motion:reduce){
  .sy *,.sy *::before,.sy *::after{animation:none!important;transition-duration:0s!important;transition-delay:0s!important}
  .sy-js .sy-six{--sy-tilt:1;--sy-open:1;--sy-hold:0;--sy-turn:0;--sy-focus:0}
  .sy-js .sy-six-track{height:auto!important}
  .sy-js .sy-six-pin,.sy-js .sy-six-text{position:relative!important;top:auto!important}
  .sy-sec{visibility:hidden}
  .sy-js .sy-ul,.sy-js .sy-axis-a svg,.sy-js .sy-axis-b svg{clip-path:none}
  .sy-frit,.sy-glow{opacity:0!important}
  .sy-runrow{display:none}
}

/* the page runs to the window's edges: no browser margin around the site */
body.spec-synodic { margin: 0; }