/* DoomToll - landing page.
   Two layouts in one document: .s-d above 900px, .s-m below.
   Rules and keyframes are scoped per layout so they cannot collide. */
html{overflow-x:hidden}
/* When the footer arrives, the bell and its rope tip once and settle, the way a
   rope does when someone walks past it. The turn is around the bell's crown, so
   the bell barely moves and the tassel swings a few pixels: enough to say there
   is something here without announcing it. The component itself is untouched -
   this only moves where it sits. It turns with the rotate property rather than
   a transform, so whatever transform already centres the host stays put. */
@keyframes dtRopeNudge{
 0%{rotate:0deg}
 16%{rotate:1.15deg}
 40%{rotate:-0.72deg}
 62%{rotate:0.4deg}
 80%{rotate:-0.18deg}
 92%{rotate:0.07deg}
 100%{rotate:0deg}
}
.dt-rope-nudge{animation:dtRopeNudge 2.4s cubic-bezier(.33,.06,.3,1) both;transform-origin:50% 4%}
@media (prefers-reduced-motion:reduce){.dt-rope-nudge{animation:none}}
/* The desktop page is laid out at the real window width. Sections run the full
   width; the reading columns inside them keep their measure and a gutter. */
.s-d .dt-root{width:100%}
/* The banner's tower gives way when the window is short. Zoom rather than a
   transform, so the column's height comes down with it and the rise animation
   keeps the transform to itself. The wordmark's overlap with the tower shrinks
   by the same amount, keeping the composition. */
.s-d #top .dt-rise:nth-child(1){zoom:var(--artFit,1)}
.s-d #top .dt-rise:nth-child(2){margin-top:calc(-78px * var(--artFit,1)) !important}
/* The wordmark is drawn, not set, so it comes in off the edges on a narrow
   window instead of running to them. */
/* The wordmark keeps its drawn size while the banner does, and steps down with
   the scene once the window forces the scene down, with a floor so it never
   turns into a caption. */
.s-d #top .dt-rise:nth-child(2) svg{width:min(705px,calc(705px * max(var(--artFit,1),0.70)),calc(100vw - 64px));height:auto}
/* The cloud banks hold their size and slide off the edges rather than shrinking
   to meet in the middle. On a wide window they stay docked to the corners. */
.s-d .dt-cloud-l{left:min(0px,calc(45.83% - var(--cloudW))) !important}
.s-d .dt-cloud-r{right:min(0px,calc(45.83% - var(--cloudW))) !important}
/* The whole timeline steps down as one piece. */
.s-d .dt-tl{zoom:var(--tlScale,1)}
/* Past 2016 across the range has stopped growing and no longer reaches the
   glass, so its ends ease into the sky the way distance haze would. */
@media (min-width:2017px){
 .s-d .dt-mtn{-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0,#000 8%,#000 92%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0,#000 8%,#000 92%,rgba(0,0,0,0) 100%)}
}
body{margin:0;background:#FEFFFB;-webkit-font-smoothing:antialiased}
.s-d,.s-m{position:relative}
.s-m{display:none}
@media (max-width:899px){.s-d{display:none}.s-m{display:block}}

/* ---- The phone layout, at any phone or small-window width ----------------
   It was drawn at 390 across. The sections now run the full width and the
   reading columns carry their own measure, so only the artwork needs telling
   how big to be: each piece keeps the proportion it had at 390 and stops
   growing at 560, which is about as wide as this layout wants to read.
   Type is never scaled by any of this. */
.s-m .dt-root{width:100%}
/* The glow behind the phone reads darker on a handset than it did on the board,
   and the specks were too fine to catch the eye at all. */
.s-m .dt-glow{background:radial-gradient(circle,rgba(84,51,214,0.72) 0%,rgba(84,51,214,0.34) 42%,rgba(84,51,214,0) 74%)}
.s-m #how .dt-sp{width:7px !important;height:7px !important;background:#E4DCFF;box-shadow:0 0 16px 6px rgba(133,100,255,0.85)}
/* The phone's box is as wide as the phone was drawn, which is wider than a
   small handset; the phone itself is scaled down to fit, so only the box needs
   reining in. */
.s-m [style*="--phoneBoxH"]{max-width:100%}

/* The range: 2.1 times the column at 390, and no wider than 560 would make it. */
.s-m .dt-mtn{width:min(210%,1176px) !important;left:calc((100% - min(210%,1176px)) / 2) !important}

/* The two cloud banks overlap across the middle, each hanging a full cloud's
   width off its own side. */
.s-m .dt-cloud-l{width:min(92.3%,517px) !important;height:auto !important;left:calc(50% - min(92.3%,517px)) !important;right:auto !important}
.s-m .dt-cloud-r{width:min(92.3%,517px) !important;height:auto !important;left:50% !important;right:auto !important}

/* The tower is cropped to its middle by design, so it is wider than the column.
   Aspect ratio carries the height, and the bell loop rides along in percentages. */
/* The stack the tower sits in is given the banner's full width so the tower has
   something definite to measure itself against, then centred by its own margin. */
.s-m #top [style*="--stackBottom"]{width:100%}
.s-m #top .dt-rise:nth-child(1){width:100%}
/* The wordmark is drawn, not set. It holds its drawn size on a phone, comes in
   off the edges on a small handset, and grows again once a tablet gives it room. */
.s-m #top .dt-rise:nth-child(2){width:100%;justify-content:center}
.s-m #top .dt-rise:nth-child(2) svg{width:min(336px,88%);height:auto}
@media (min-width:560px){.s-m #top .dt-rise:nth-child(2) svg{width:min(483px,60%)}}
.s-m .dt-tower{width:min(149.5%,837px) !important;height:auto !important;aspect-ratio:583 / 444;margin-left:calc((100% - min(149.5%,837px)) / 2)}
.s-m .dt-tower > img{width:100% !important;height:100% !important}
.s-m .dt-tower > video{left:44.08% !important;top:14.41% !important;width:10.29% !important;height:16.22% !important}

/* The staircase, the sleeper and the footer's cloud corners follow the same rule. */
.s-m #how-intro img[src*="staircase"]{width:min(268%,1500px) !important;height:auto !important;left:50% !important;margin-left:calc(min(268%,1500px) / -2) !important;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0,#000 16%,#000 84%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0,#000 16%,#000 84%,rgba(0,0,0,0) 100%)}
/* These two already sit inside a column that carries the gutter, so they take
   all of it rather than insetting a second time. */
.s-m .dt-tl-d{width:100% !important}
.s-m .dt-tl{transform:scale(var(--mtlScale,1));transform-origin:50% 0;margin-bottom:calc((var(--mtlScale,1) - 1) * 161px)}
.s-m .dt-swap{width:min(86.2%,424px) !important;height:auto !important;aspect-ratio:1 / 1}
.s-m .dt-foot > img:first-of-type{width:min(56.4%,316px) !important;height:auto !important;left:-13.8% !important;right:auto !important}
.s-m .dt-foot > img:nth-of-type(2){width:min(56.4%,316px) !important;height:auto !important;right:-13.8% !important;left:auto !important}

/* Narrow desktop windows. The reading columns already carry their own ceiling;
   these are the rows that have to give way rather than run off the edge. */
/* The six decay notes take 330 each when there is room and give ground either
   side of the phone when there is not. The phone itself never shrinks. */
.s-d #how [style*="--rowGap"]{width:100%;max-width:100%;box-sizing:border-box;padding:0 32px}
.s-d #how [style*="--rowGap"] > :not(ol){flex-shrink:0}
.s-d #how ol{flex:0 1 330px;min-width:0}
@media (max-width:1150px){
 .s-d #how [style*="--rowGap"]{gap:32px !important;padding:0 20px}
}
/* The timeline's four stops sit in a row until they would crush, then pair up. */
@media (max-width:1040px){
 .s-d .dt-tl-row{grid-template-columns:repeat(2,minmax(0,1fr)) !important;row-gap:28px}
}
/* The footer's bottom bar carries two groups of links; let them fall onto two
   lines rather than collide, and let the bar grow to hold them. */
@media (max-width:1100px){
 .s-d .dt-foot > div:last-of-type{height:auto !important;min-height:56px;padding:12px 24px !important;flex-wrap:wrap;justify-content:center;row-gap:8px}
}

body{margin:0;background:#FEFFFB;font-family:'Outfit',system-ui,sans-serif;color:#FCFBF4}
.s-d a{color:#5433D6}
.s-d a:hover{color:#FCFBF4}
.s-d .fr{font-family:'Fraunces',Georgia,serif;font-weight:400;font-variation-settings:"SOFT" 0,"WONK" 1;font-optical-sizing:auto}
.s-d .dt-btn{transition:transform 420ms cubic-bezier(.3,.1,.2,1),opacity 420ms ease;text-decoration:none}
.s-d .dt-btn:hover{opacity:.9}
.s-d .dt-btn:active{transform:translateY(1px) scale(.97)}
.s-d .dt-btn:focus-visible{outline:2px solid #5433D6;outline-offset:4px}
@keyframes dtClose_d{from{opacity:0}to{opacity:1}}
@keyframes dtRise_d{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes dtSettle_d{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.s-d .dt-close{animation:dtClose_d 600ms ease-out both}
.s-d .dt-rise{animation:dtRise_d 780ms cubic-bezier(.2,.6,.2,1) 260ms both}
.s-d .dt-settle{animation:dtSettle_d 520ms ease-out 760ms both}
.s-d .dt-settle2{animation:dtSettle_d 520ms ease-out 980ms both}
@keyframes dtDrift_d{from{transform:translateX(-24px)}to{transform:translateX(24px)}}
.s-d .dt-drift-a{animation:dtDrift_d 58s ease-in-out infinite alternate}
.s-d .dt-drift-b{animation:dtDrift_d 71s ease-in-out -20s infinite alternate-reverse}
@keyframes dtBreathe_d{from{transform:scale(1)}to{transform:scale(1.045)}}
.s-d .dt-breathe{transform-origin:50% 30%;animation:dtBreathe_d 64s ease-in-out infinite alternate}
.s-d .dt-d{position:absolute;left:0;top:0;width:100%;height:100%;display:block;opacity:0;will-change:opacity}
.s-d .dt-st{opacity:.32;will-change:opacity}
@keyframes dtFeed_d{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.s-d .dt-feed{position:absolute;left:0;top:0;width:100%;will-change:transform;animation:dtFeed_d 44s linear infinite}
.s-d .dt-post{box-sizing:border-box;padding:0 14px 20px;display:flex;flex-direction:column;gap:9px}
.s-d .dt-prow{display:flex;align-items:center;gap:9px}
.s-d .dt-av{width:22px;height:22px;border-radius:999px;background:#2C2C2C;display:block;flex-shrink:0}
.s-d .dt-nm{height:7px;border-radius:4px;background:#252525;display:block}
.s-d .dt-img{border-radius:9px;background:#181818}
.s-d .dt-acts{display:flex;gap:11px}
.s-d .dt-acts span{width:15px;height:15px;border-radius:5px;background:#242424;display:block}
.s-d .dt-cap{height:7px;border-radius:4px;background:#1F1F1F}
.s-d .dt-w{transition:none}
.s-d .dt-scr{clip-path:inset(0 100% 0 0);transition:clip-path 520ms cubic-bezier(.4,.05,.3,1)}
.s-d .dt-tl-base{fill:none;stroke:#585850;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.s-d .dt-tl-ink{fill:none;stroke:#5433D6;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100}
.s-d .dt-tl-ring{fill:#000000;stroke:#585850;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.s-d .dt-tl-ringink{fill:rgba(84,51,214,0);stroke:#5433D6;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity 620ms ease,fill 620ms ease}
.s-d .dt-tl-glow{opacity:0;filter:url(#dtTlGlow);transition:opacity 900ms ease}
.s-d .dt-tl-stop.on .dt-tl-ringink{opacity:1;fill:#5433D6}
.s-d .dt-tl-stop.on .dt-tl-glow{opacity:.5}
.s-d .dt-tl-specks .dt-sp{animation:none}
@keyframes dtTlB1_d{0%{opacity:0;transform:translate(0,0) scale(.4)}12%{opacity:1}100%{opacity:0;transform:translate(-44px,-38px) scale(1)}}
@keyframes dtTlB2_d{0%{opacity:0;transform:translate(0,0) scale(.4)}12%{opacity:1}100%{opacity:0;transform:translate(42px,-42px) scale(1)}}
@keyframes dtTlB3_d{0%{opacity:0;transform:translate(0,0) scale(.4)}14%{opacity:.95}100%{opacity:0;transform:translate(-52px,-8px) scale(1)}}
@keyframes dtTlB4_d{0%{opacity:0;transform:translate(0,0) scale(.4)}14%{opacity:.95}100%{opacity:0;transform:translate(50px,-6px) scale(1)}}
@keyframes dtTlB5_d{0%{opacity:0;transform:translate(0,0) scale(.4)}12%{opacity:1}100%{opacity:0;transform:translate(-16px,-52px) scale(1)}}
@keyframes dtTlB6_d{0%{opacity:0;transform:translate(0,0) scale(.4)}12%{opacity:1}100%{opacity:0;transform:translate(20px,-50px) scale(1)}}
@keyframes dtTlB7_d{0%{opacity:0;transform:translate(0,0) scale(.4)}16%{opacity:.85}100%{opacity:0;transform:translate(-34px,22px) scale(1)}}
@keyframes dtTlB8_d{0%{opacity:0;transform:translate(0,0) scale(.4)}16%{opacity:.85}100%{opacity:0;transform:translate(36px,20px) scale(1)}}
@keyframes dtTlF1_d{0%{opacity:0;transform:translate(-8px,12px) scale(.5)}24%{opacity:.85}72%{opacity:.62}100%{opacity:0;transform:translate(2px,-50px) scale(1)}}
@keyframes dtTlF2_d{0%{opacity:0;transform:translate(10px,14px) scale(.5)}24%{opacity:.8}72%{opacity:.58}100%{opacity:0;transform:translate(-4px,-54px) scale(.95)}}
@keyframes dtTlF3_d{0%{opacity:0;transform:translate(-16px,8px) scale(.5)}28%{opacity:.72}70%{opacity:.5}100%{opacity:0;transform:translate(-26px,-46px) scale(1)}}
@keyframes dtTlF4_d{0%{opacity:0;transform:translate(16px,10px) scale(.5)}28%{opacity:.72}70%{opacity:.5}100%{opacity:0;transform:translate(28px,-48px) scale(.95)}}
@keyframes dtTlF5_d{0%{opacity:0;transform:translate(-4px,16px) scale(.5)}26%{opacity:.66}70%{opacity:.46}100%{opacity:0;transform:translate(-14px,-58px) scale(1)}}
@keyframes dtTlF6_d{0%{opacity:0;transform:translate(6px,16px) scale(.5)}26%{opacity:.66}70%{opacity:.46}100%{opacity:0;transform:translate(16px,-56px) scale(.95)}}
.s-d .dt-tl-specks.on .dt-b1{animation:dtTlB1_d 1.7s cubic-bezier(.15,.7,.3,1) both}
.s-d .dt-tl-specks.on .dt-b2{animation:dtTlB2_d 1.8s cubic-bezier(.15,.7,.3,1) .04s both}
.s-d .dt-tl-specks.on .dt-b3{animation:dtTlB3_d 1.9s cubic-bezier(.15,.7,.3,1) .09s both}
.s-d .dt-tl-specks.on .dt-b4{animation:dtTlB4_d 1.75s cubic-bezier(.15,.7,.3,1) .02s both}
.s-d .dt-tl-specks.on .dt-b5{animation:dtTlB5_d 2s cubic-bezier(.15,.7,.3,1) .12s both}
.s-d .dt-tl-specks.on .dt-b6{animation:dtTlB6_d 1.85s cubic-bezier(.15,.7,.3,1) .07s both}
.s-d .dt-tl-specks.on .dt-b7{animation:dtTlB7_d 2.1s cubic-bezier(.15,.7,.3,1) .15s both}
.s-d .dt-tl-specks.on .dt-b8{animation:dtTlB8_d 2.05s cubic-bezier(.15,.7,.3,1) .1s both}
.s-d .dt-tl-specks.on .dt-f1{animation:dtTlF1_d 13s ease-in-out 1.3s infinite both}
.s-d .dt-tl-specks.on .dt-f2{animation:dtTlF2_d 16s ease-in-out 2.6s infinite both}
.s-d .dt-tl-specks.on .dt-f3{animation:dtTlF3_d 15s ease-in-out 4.1s infinite both}
.s-d .dt-tl-specks.on .dt-f4{animation:dtTlF4_d 18s ease-in-out 5.4s infinite both}
.s-d .dt-tl-specks.on .dt-f5{animation:dtTlF5_d 14s ease-in-out 3.2s infinite both}
.s-d .dt-tl-specks.on .dt-f6{animation:dtTlF6_d 17s ease-in-out 6.8s infinite both}
.s-d .dt-tl-specks.on .dt-sp{animation-play-state:running}
.s-d .dt-tl-replay{opacity:0;pointer-events:none;transition:opacity 700ms ease}
.s-d .dt-tl-replay.on{opacity:.42;pointer-events:auto}
.s-d .dt-tl-replay.on:hover{opacity:.9;border-color:rgba(252,249,239,0.75)}
.s-d .dt-tl-replay:focus-visible{outline:2px solid #5433D6;outline-offset:4px;border-radius:4px}
@media (max-width:900px){.s-d .dt-tl{width:100%}}
.s-d .bell-rope{
  position: relative;
  width: 100%;
}
.s-d .bell-rope__stage{
  position: relative;
  width: 100%;
  
  aspect-ratio: 1337 / 2796;
}
.s-d .bell-rope__canvas, .s-d .bell-rope__static{
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  pointer-events: none;
}
.s-d .bell-rope__canvas{
  width: 100%;
  height: 100%;
}
.s-d .bell-rope__rope{
  position: absolute;
  transform: translateX(-50%);
  min-width: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.s-d .bell-rope__rope:focus{
  outline: none;
}
.s-d .bell-rope__rope:focus-visible{
  outline: 1px dashed currentColor;
  outline-offset: 2px;
}
.s-d .bell-rope__caption{
  margin: 0.75em 0 0;
  text-align: center;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.s-d .bell-rope__caption.is-visible{
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {.s-d .bell-rope__caption{
    transition: none;
  }}
.s-d .dt-foot-bell{position:absolute;left:50%;top:0;transform:translateX(-50%);z-index:1}
.s-d .dt-foot-lock{z-index:2;pointer-events:none}
.s-d .dt-foot-lock a, .s-d .dt-foot-lock button{pointer-events:auto}
.s-d .dt-foot-bell .bell-rope__caption{font-family:'Homemade Apple',cursive;font-size:16px;line-height:1.5;letter-spacing:0;text-transform:none;font-weight:400;color:#FFFFFF}
.s-d .dt-flink{color:#B6B6B6;transition:color 260ms ease}
.s-d .dt-flink:hover{color:#FFFFFF}
.s-d .dt-swap{position:relative;display:block}
.s-d .dt-swap img{display:block;width:100%;height:100%}
.s-d .dt-swap-b{position:absolute;left:0;top:0;opacity:0;transition:opacity 620ms ease}
.s-d .dt-swap:hover .dt-swap-b, .s-d .dt-swap:focus-within .dt-swap-b{opacity:1}
.s-d .dt-still .dt-swap-b{transition:none}
@media (prefers-reduced-motion:reduce){.s-d .dt-swap-b{transition:none}}
.s-d .dt-scr.on{clip-path:inset(0 0 0 0)}
.s-d .dt-still .dt-scr{transition:none}
.s-d .dt-still .dt-feed{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.s-d .dt-feed{animation-play-state:paused}}
.s-d .dt-fogbank{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;filter:url(#dtFogGrade)}
.s-d .dt-fogbank img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;opacity:0;will-change:transform,opacity}
@media (prefers-reduced-motion:reduce){.s-d .dt-fogbank img{will-change:auto}}
.s-d .dt-still .dt-breathe, .s-d .dt-still .dt-drift-a, .s-d .dt-still .dt-drift-b, .s-d .dt-still [class*="dt-fog-"]{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.s-d .dt-breathe, .s-d .dt-drift-a, .s-d .dt-drift-b, .s-d [class*="dt-fog-"]{animation-play-state:paused}
.s-d .dt-close, .s-d .dt-rise, .s-d .dt-settle, .s-d .dt-settle2{animation:none}}
.s-d summary{list-style:none;cursor:pointer}
.s-d summary::-webkit-details-marker{display:none}
.s-d summary:focus-visible{outline:2px solid #5433D6;outline-offset:6px;border-radius:4px}
.s-d .dt-plus{transition:transform 520ms cubic-bezier(.3,.1,.2,1)}
.s-d details[open] .dt-plus{transform:rotate(45deg)}
.s-d .dt-nav{transition:transform 640ms cubic-bezier(.3,.1,.2,1),opacity 640ms ease}
.s-d .dt-nav-hidden{transform:translateY(-150%);opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.s-d .dt-nav{transition:opacity 300ms ease}
.s-d .dt-nav-hidden{transform:none}}
.s-d @property --dt-orbit{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes dtOrbit_d{from{--dt-orbit:-40deg}to{--dt-orbit:320deg}}
.s-d .dt-orbit{position:relative}
.s-d .dt-orbit::before{content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;pointer-events:none;background:conic-gradient(from var(--dt-orbit),rgba(84,51,214,0.15) 0deg,#5433D6 50deg,#B9A4FF 90deg,#5433D6 130deg,rgba(84,51,214,0.15) 200deg,rgba(84,51,214,0.15) 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:dtOrbit_d 9s ease-in-out infinite alternate}
@keyframes dtGlow_d{from{opacity:0.7;transform:scale(0.96)}to{opacity:1;transform:scale(1.04)}}
.s-d .dt-glow{animation:dtGlow_d 9s ease-in-out infinite alternate}
.s-d .dt-sp{position:absolute;border-radius:50%;background:#D9CCFF;box-shadow:0 0 6px 2px rgba(84,51,214,0.75);opacity:0;animation-timing-function:ease-out;animation-iteration-count:infinite}
@keyframes dtSp1_d{0%{opacity:0;transform:translate(0,0) scale(0.6)}15%{opacity:0.9}100%{opacity:0;transform:translate(-300px,-190px) scale(1)}}
@keyframes dtSp2_d{0%{opacity:0;transform:translate(0,0) scale(0.6)}15%{opacity:0.9}100%{opacity:0;transform:translate(290px,-230px) scale(1)}}
@keyframes dtSp3_d{0%{opacity:0;transform:translate(0,0) scale(0.6)}15%{opacity:0.8}100%{opacity:0;transform:translate(-340px,40px) scale(1)}}
@keyframes dtSp4_d{0%{opacity:0;transform:translate(0,0) scale(0.6)}15%{opacity:0.8}100%{opacity:0;transform:translate(330px,20px) scale(1)}}
@keyframes dtSp5_d{0%{opacity:0;transform:translate(0,0) scale(0.6)}15%{opacity:0.9}100%{opacity:0;transform:translate(-150px,-320px) scale(1)}}
@keyframes dtSp6_d{0%{opacity:0;transform:translate(0,0) scale(0.6)}15%{opacity:0.9}100%{opacity:0;transform:translate(170px,-330px) scale(1)}}
.s-d .dt-sp1{animation-name:dtSp1_d}
.s-d .dt-sp2{animation-name:dtSp2_d}
.s-d .dt-sp3{animation-name:dtSp3_d}
.s-d .dt-sp4{animation-name:dtSp4_d}
.s-d .dt-sp5{animation-name:dtSp5_d}
.s-d .dt-sp6{animation-name:dtSp6_d}
.s-d .dt-still .dt-sp, .s-d .dt-still .dt-glow, .s-d .dt-still .dt-orbit::before{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.s-d .dt-sp, .s-d .dt-glow, .s-d .dt-orbit::before{animation-play-state:paused}}
.s-d .dt-still .dt-orbit{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.s-d .dt-orbit{animation-play-state:paused}}
@keyframes dtMqL_d{from{transform:translateX(0)}to{transform:translateX(-1440px)}}
@keyframes dtMqR_d{from{transform:translateX(-1440px)}to{transform:translateX(0)}}
.s-d .dt-mq{position:absolute;left:0;width:2880px;will-change:transform;animation-timing-function:linear;animation-iteration-count:infinite}
.s-d .dt-mq-l{animation-name:dtMqL_d}
.s-d .dt-mq-r{animation-name:dtMqR_d}
.s-d .dt-still .dt-mq{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.s-d .dt-mq{animation-play-state:paused}}

body{margin:0;background:#FEFFFB;font-family:'Outfit',system-ui,sans-serif;color:#FCFBF4}
.s-m a{color:#5433D6}
.s-m .fr{font-family:'Fraunces',Georgia,serif;font-weight:400;font-variation-settings:"SOFT" 0,"WONK" 1;font-optical-sizing:auto}
.s-m .dt-btn{transition:transform 420ms cubic-bezier(.3,.1,.2,1),opacity 420ms ease;text-decoration:none}
.s-m .dt-btn:active{transform:translateY(1px) scale(.97)}
.s-m .dt-btn:focus-visible{outline:2px solid #5433D6;outline-offset:4px}
@keyframes dtRise_m{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes dtSettle_m{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.s-m .dt-rise{animation:dtRise_m 780ms cubic-bezier(.2,.6,.2,1) 260ms both}
.s-m .dt-settle{animation:dtSettle_m 520ms ease-out 760ms both}
.s-m .dt-settle2{animation:dtSettle_m 520ms ease-out 980ms both}
.s-m .dt-d{position:absolute;left:0;top:0;width:100%;height:100%;display:block;opacity:0;will-change:opacity}
.s-m .dt-fogbank{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;filter:url(#dtFogGrade)}
.s-m .dt-fogbank img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;opacity:0;will-change:transform,opacity}
@keyframes dtFeed_m{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.s-m .dt-feed{position:absolute;left:0;top:0;width:100%;will-change:transform;animation:dtFeed_m 44s linear infinite}
.s-m .dt-post{box-sizing:border-box;padding:0 14px 20px;display:flex;flex-direction:column;gap:9px}
.s-m .dt-prow{display:flex;align-items:center;gap:9px}
.s-m .dt-av{width:22px;height:22px;border-radius:999px;background:#2C2C2C;display:block;flex-shrink:0}
.s-m .dt-nm{height:7px;border-radius:4px;background:#252525;display:block}
.s-m .dt-img{border-radius:9px;background:#181818}
.s-m .dt-acts{display:flex;gap:11px}
.s-m .dt-acts span{width:15px;height:15px;border-radius:5px;background:#242424;display:block}
.s-m .dt-cap{height:7px;border-radius:4px;background:#1F1F1F}
.s-m .m-note{position:absolute;left:0;top:0;width:100%;opacity:0;transition:opacity 420ms ease;text-align:center}
.s-m .m-note.on{opacity:1}
.s-m .dt-sp{position:absolute;border-radius:50%;background:#D9CCFF;box-shadow:0 0 6px 2px rgba(84,51,214,0.75);opacity:0;animation-timing-function:ease-out;animation-iteration-count:infinite}
@keyframes dtSp1_m{0%{opacity:0;transform:translate(0,0) scale(0.6)}15%{opacity:0.9}100%{opacity:0;transform:translate(-160px,-120px) scale(1)}}
@keyframes dtSp2_m{0%{opacity:0;transform:translate(0,0) scale(0.6)}15%{opacity:0.9}100%{opacity:0;transform:translate(150px,-140px) scale(1)}}
@keyframes dtSp3_m{0%{opacity:0;transform:translate(0,0) scale(0.6)}15%{opacity:0.8}100%{opacity:0;transform:translate(-180px,30px) scale(1)}}
@keyframes dtSp4_m{0%{opacity:0;transform:translate(0,0) scale(0.6)}15%{opacity:0.8}100%{opacity:0;transform:translate(170px,20px) scale(1)}}
@keyframes dtSp5_m{0%{opacity:0;transform:translate(0,0) scale(0.6)}15%{opacity:0.9}100%{opacity:0;transform:translate(-90px,-190px) scale(1)}}
@keyframes dtSp6_m{0%{opacity:0;transform:translate(0,0) scale(0.6)}15%{opacity:0.9}100%{opacity:0;transform:translate(100px,-200px) scale(1)}}
.s-m .dt-sp1{animation-name:dtSp1_m}
.s-m .dt-sp2{animation-name:dtSp2_m}
.s-m .dt-sp3{animation-name:dtSp3_m}
.s-m .dt-sp4{animation-name:dtSp4_m}
.s-m .dt-sp5{animation-name:dtSp5_m}
.s-m .dt-sp6{animation-name:dtSp6_m}
@keyframes dtGlow_m{from{opacity:0.7;transform:scale(0.96)}to{opacity:1;transform:scale(1.04)}}
.s-m .dt-glow{animation:dtGlow_m 9s ease-in-out infinite alternate}
.s-m .dt-tl-base{fill:none;stroke:#585850;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.s-m .dt-tl-ink{fill:none;stroke:#5433D6;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100}
.s-m .dt-tl-ring{fill:#000000;stroke:#585850;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.s-m .dt-tl-ringink{fill:rgba(84,51,214,0);stroke:#5433D6;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity 620ms ease,fill 620ms ease}
.s-m .dt-tl-glow{opacity:0;filter:url(#dtTlGlow);transition:opacity 900ms ease}
.s-m .dt-tl-stop.on .dt-tl-ringink{opacity:1;fill:#5433D6}
.s-m .dt-tl-stop.on .dt-tl-glow{opacity:.5}
.s-m .dt-tl-specks .dt-sp{animation:none}
@keyframes dtTlB1_m{0%{opacity:0;transform:translate(0,0) scale(.4)}12%{opacity:1}100%{opacity:0;transform:translate(-38px,-32px) scale(1)}}
@keyframes dtTlB2_m{0%{opacity:0;transform:translate(0,0) scale(.4)}12%{opacity:1}100%{opacity:0;transform:translate(36px,-36px) scale(1)}}
@keyframes dtTlB3_m{0%{opacity:0;transform:translate(0,0) scale(.4)}14%{opacity:.95}100%{opacity:0;transform:translate(-44px,-6px) scale(1)}}
@keyframes dtTlB4_m{0%{opacity:0;transform:translate(0,0) scale(.4)}14%{opacity:.95}100%{opacity:0;transform:translate(42px,-4px) scale(1)}}
@keyframes dtTlB5_m{0%{opacity:0;transform:translate(0,0) scale(.4)}12%{opacity:1}100%{opacity:0;transform:translate(-14px,-44px) scale(1)}}
@keyframes dtTlB6_m{0%{opacity:0;transform:translate(0,0) scale(.4)}12%{opacity:1}100%{opacity:0;transform:translate(18px,-42px) scale(1)}}
@keyframes dtTlB7_m{0%{opacity:0;transform:translate(0,0) scale(.4)}16%{opacity:.85}100%{opacity:0;transform:translate(-28px,18px) scale(1)}}
@keyframes dtTlB8_m{0%{opacity:0;transform:translate(0,0) scale(.4)}16%{opacity:.85}100%{opacity:0;transform:translate(30px,16px) scale(1)}}
@keyframes dtTlF1_m{0%{opacity:0;transform:translate(-7px,10px) scale(.5)}24%{opacity:.85}72%{opacity:.62}100%{opacity:0;transform:translate(2px,-42px) scale(1)}}
@keyframes dtTlF2_m{0%{opacity:0;transform:translate(9px,12px) scale(.5)}24%{opacity:.8}72%{opacity:.58}100%{opacity:0;transform:translate(-4px,-46px) scale(.95)}}
@keyframes dtTlF3_m{0%{opacity:0;transform:translate(-13px,7px) scale(.5)}28%{opacity:.72}70%{opacity:.5}100%{opacity:0;transform:translate(-21px,-38px) scale(1)}}
@keyframes dtTlF4_m{0%{opacity:0;transform:translate(13px,9px) scale(.5)}28%{opacity:.72}70%{opacity:.5}100%{opacity:0;transform:translate(23px,-40px) scale(.95)}}
@keyframes dtTlF5_m{0%{opacity:0;transform:translate(-4px,14px) scale(.5)}26%{opacity:.66}70%{opacity:.46}100%{opacity:0;transform:translate(-12px,-48px) scale(1)}}
@keyframes dtTlF6_m{0%{opacity:0;transform:translate(5px,14px) scale(.5)}26%{opacity:.66}70%{opacity:.46}100%{opacity:0;transform:translate(14px,-46px) scale(.95)}}
.s-m .dt-tl-specks.on .dt-b1{animation:dtTlB1_m 1.7s cubic-bezier(.15,.7,.3,1) both}
.s-m .dt-tl-specks.on .dt-b2{animation:dtTlB2_m 1.8s cubic-bezier(.15,.7,.3,1) .04s both}
.s-m .dt-tl-specks.on .dt-b3{animation:dtTlB3_m 1.9s cubic-bezier(.15,.7,.3,1) .09s both}
.s-m .dt-tl-specks.on .dt-b4{animation:dtTlB4_m 1.75s cubic-bezier(.15,.7,.3,1) .02s both}
.s-m .dt-tl-specks.on .dt-b5{animation:dtTlB5_m 2s cubic-bezier(.15,.7,.3,1) .12s both}
.s-m .dt-tl-specks.on .dt-b6{animation:dtTlB6_m 1.85s cubic-bezier(.15,.7,.3,1) .07s both}
.s-m .dt-tl-specks.on .dt-b7{animation:dtTlB7_m 2.1s cubic-bezier(.15,.7,.3,1) .15s both}
.s-m .dt-tl-specks.on .dt-b8{animation:dtTlB8_m 2.05s cubic-bezier(.15,.7,.3,1) .1s both}
.s-m .dt-tl-specks.on .dt-f1{animation:dtTlF1_m 13s ease-in-out 1.3s infinite both}
.s-m .dt-tl-specks.on .dt-f2{animation:dtTlF2_m 16s ease-in-out 2.6s infinite both}
.s-m .dt-tl-specks.on .dt-f3{animation:dtTlF3_m 15s ease-in-out 4.1s infinite both}
.s-m .dt-tl-specks.on .dt-f4{animation:dtTlF4_m 18s ease-in-out 5.4s infinite both}
.s-m .dt-tl-specks.on .dt-f5{animation:dtTlF5_m 14s ease-in-out 3.2s infinite both}
.s-m .dt-tl-specks.on .dt-f6{animation:dtTlF6_m 17s ease-in-out 6.8s infinite both}
.s-m .dt-tl-d{opacity:0;transition:opacity 460ms ease}
.s-m .dt-tl-d.on{opacity:1}
.s-m .dt-tl-replay{opacity:0;pointer-events:none;transition:opacity 700ms ease}
.s-m .dt-tl-replay.on{opacity:.42;pointer-events:auto}
.s-m .dt-tl-replay.on:active{opacity:.9}
.s-m summary{list-style:none;cursor:pointer}
.s-m summary::-webkit-details-marker{display:none}
.s-m .dt-plus{transition:transform 520ms cubic-bezier(.3,.1,.2,1)}
.s-m details[open] .dt-plus{transform:rotate(45deg)}
.s-m .dt-scr{clip-path:inset(0 100% 0 0);transition:clip-path 520ms cubic-bezier(.4,.05,.3,1)}
.s-m .dt-scr.on{clip-path:inset(0 0 0 0)}
.s-m .dt-swap{position:relative;display:block}
.s-m .dt-swap img{display:block;width:100%;height:100%}
.s-m .dt-swap-b{position:absolute;left:0;top:0;opacity:0;transition:opacity 620ms ease}
.s-m .dt-swap.on .dt-swap-b{opacity:1}
.s-m .dt-nav{transition:transform 640ms cubic-bezier(.3,.1,.2,1),opacity 640ms ease}
.s-m .dt-nav-hidden{transform:translateY(-160%);opacity:0;pointer-events:none}
.s-m .bell-rope{
  position: relative;
  width: 100%;
}
.s-m .bell-rope__stage{
  position: relative;
  width: 100%;
  
  aspect-ratio: 1337 / 2796;
}
.s-m .bell-rope__canvas, .s-m .bell-rope__static{
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  pointer-events: none;
}
.s-m .bell-rope__canvas{
  width: 100%;
  height: 100%;
}
.s-m .bell-rope__rope{
  position: absolute;
  transform: translateX(-50%);
  min-width: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.s-m .bell-rope__rope:focus{
  outline: none;
}
.s-m .bell-rope__rope:focus-visible{
  outline: 1px dashed currentColor;
  outline-offset: 2px;
}
.s-m .bell-rope__caption{
  margin: 0.75em 0 0;
  text-align: center;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.s-m .bell-rope__caption.is-visible{
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {.s-m .bell-rope__caption{
    transition: none;
  }}
.s-m .m-foot-bell{position:absolute;left:50%;top:16px;transform:translateX(-50%);z-index:1}
.s-m .m-foot-lock{z-index:2;pointer-events:none}
.s-m .m-foot-lock a, .s-m .m-foot-lock button{pointer-events:auto}
.s-m .m-foot-bell .bell-rope__caption{max-width:220px;margin-left:auto;margin-right:auto;font-family:'Homemade Apple',cursive;font-size:14px;line-height:1.5;letter-spacing:0;text-transform:none;color:#FFFFFF}
.s-m .dt-flink{color:#B6B6B6;transition:color 260ms ease}
.s-m .dt-flink:active{color:#FFFFFF}
.s-m .dt-still .dt-feed, .s-m .dt-still .dt-sp, .s-m .dt-still .dt-glow{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.s-m .dt-feed, .s-m .dt-sp, .s-m .dt-glow{animation-play-state:paused}
.s-m .dt-rise, .s-m .dt-settle, .s-m .dt-settle2{animation:none}
.s-m .dt-fogbank img{will-change:auto}}