html { background: #fff; }
body { margin: 0; padding: 0; min-height: 100vh; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { font-family: -apple-system-body, ui-sans-serif, -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif; }
.cursor-interaction { cursor: pointer; }

#entry-loader {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  background: white;
  color-scheme: light;
}
#entry-loader[open] { display: grid; place-items: center; }
#entry-loader::backdrop { background: transparent; }
#entry-loader video {
  display: block;
  width: clamp(134px, 24vmin, 178px);
  height: auto;
  aspect-ratio: 288 / 272;
  mask-image: linear-gradient(to right, transparent, black 9%, black 91%, transparent);
}
#entry-loader.leaving { animation: reveal-first-hello 150ms ease-out forwards; }
@keyframes reveal-first-hello { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  #entry-loader.leaving { animation: none; }
}

#dottei-first-hello {
  --ink:#20354a;
  --soft:#596a7b;
  --blue:#356caa;
  --pink:#be7888;
  --line:#dbe3e9;
  color:var(--ink);
  background:#fff;
  font-family:'Segoe UI',Arial,sans-serif;
  font-size:16px;
  line-height:1.55;
  color-scheme:light}

#dottei-first-hello * {
  box-sizing:border-box}
#dottei-first-hello [hidden] {
  display:none!important}
#dottei-first-hello h1,#dottei-first-hello h2,#dottei-first-hello h3,#dottei-first-hello p {
  margin:0}
#dottei-first-hello button,#dottei-first-hello input {
  font:inherit}
#dottei-first-hello button,#dottei-first-hello a {
  touch-action:manipulation}
#dottei-first-hello a {
  color:inherit;
  text-decoration:none}
#dottei-first-hello button:focus-visible,#dottei-first-hello a:focus-visible,#dottei-first-hello input:focus-visible {
  outline:3px solid #d690a1;
  outline-offset:5px}
#dottei-first-hello button {
  color:inherit}

#dottei-first-hello .shell {
  width:100%;
  max-width:1180px;
  margin:auto;
  padding:0 48px}
#dottei-first-hello header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:100px;
  border-bottom:1px solid var(--line)}
#dottei-first-hello .brand {
  font-size:29px;
  font-weight:650;
  letter-spacing:-1.3px;
  display:flex;
  align-items:center;
  gap:9px}
#dottei-first-hello .brand img {
  width:46px;
  height:37px;
  object-fit:contain}
#dottei-first-hello nav {
  display:flex;
  align-items:center;
  gap:24px}
#dottei-first-hello .nav-about {
  border:0;
  background:none;
  padding:10px 0;
  min-height:44px;
  font-size:14px}
#dottei-first-hello .join-link {
  font-size:14px;
  padding:11px 18px;
  border:1px solid #becbd6;
  border-radius:7px;
  white-space:nowrap}
#dottei-first-hello .join-link span {
  margin-left:14px}

#dottei-first-hello .meeting {
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:54px;
  padding:72px 0 48px;
  align-items:start}
#dottei-first-hello .kicker {
  font-size:11px;
  letter-spacing:1.7px;
  text-transform:uppercase;
  font-weight:600;
  color:var(--blue)}
#dottei-first-hello h1 {
  font-size:76px;
  line-height:1.03;
  letter-spacing:-4.4px;
  font-weight:500;
  margin-top:22px}
#dottei-first-hello h1 em {
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  font-style:italic;
  color:#537ba0;
  letter-spacing:-4px}
#dottei-first-hello .intro {
  font-size:17px;
  line-height:1.65;
  color:var(--soft);
  max-width:315px;
  margin-top:23px}
#dottei-first-hello .hello-stage {
  position:relative;
  width:340px;
  max-width:100%;
  aspect-ratio:5/4;
  margin:20px 0 0 -7px;
  overflow:visible}
#dottei-first-hello .hello-stage img,
#dottei-first-hello .hello-stage video {
  position:absolute;
  /* The resting frame and wave share a canvas, including the paw's reach. */
  width:110.2%;
  max-width:none;
  left:0;
  top:0;
  pointer-events:none;
  height:auto}
#dottei-first-hello .hello-actions {
  display:flex;
  align-items:center;
  gap:25px;
  margin-top:8px}
#dottei-first-hello .solid {
  padding:12px 22px;
  min-height:48px;
  border:1px solid var(--ink);
  border-radius:7px;
  background:var(--ink);
  color:#fff;
  font-weight:500;
  font-size:14px}
#dottei-first-hello .ink-note {
  font-family:Georgia,'Times New Roman',serif;
  font-style:italic;
  font-size:16px;
  line-height:1.3;
  color:var(--pink);
  position:relative}
#dottei-first-hello .hello-note {
  transform:rotate(-7deg);
  max-width:135px;
  padding-left:19px}
#dottei-first-hello .hello-note:before {
  content:'';
  position:absolute;
  width:34px;
  height:32px;
  border-left:1.5px solid var(--pink);
  border-bottom:1.5px solid var(--pink);
  border-radius:0 0 0 80%;
  left:-21px;
  top:-20px;
  transform:rotate(-20deg)}
#dottei-first-hello .hello-note:after {
  content:'';
  position:absolute;
  width:7px;
  height:7px;
  border-left:1.5px solid var(--pink);
  border-bottom:1.5px solid var(--pink);
  left:-22px;
  top:7px;
  transform:rotate(33deg)}
#dottei-first-hello .greeting {
  font-size:13px;
  color:var(--soft);
  margin-top:14px;
  min-height:21px}

#dottei-first-hello .explore {
  padding-top:5px;
  min-width:0}
#dottei-first-hello .explore-top {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:20px;
  margin-bottom:18px}
#dottei-first-hello .explore-top h2 {
  font-weight:500;
  font-size:21px;
  letter-spacing:-.5px}
#dottei-first-hello .pick-note {
  font-size:14px;
  white-space:nowrap;
  transform:rotate(5deg);
  padding-right:13px}
#dottei-first-hello .pick-note:after {
  content:'↴';
  position:absolute;
  right:0;
  top:7px;
  font-size:27px}
#dottei-first-hello .topics {
  display:flex;
  flex-wrap:wrap;
  gap:0 22px;
  padding-bottom:15px}
#dottei-first-hello .topic {
  position:relative;
  padding:9px 0;
  min-height:44px;
  border:0;
  background:none;
  font-size:14px;
  color:var(--soft);
  white-space:nowrap}
#dottei-first-hello .topic[aria-pressed=true] {
  color:var(--ink);
  font-weight:650}
#dottei-first-hello .topic[aria-pressed=true]:after {
  content:'';
  position:absolute;
  bottom:3px;
  left:0;
  right:0;
  height:5px;
  border-bottom:2px solid var(--pink);
  border-radius:50%;
  transform:rotate(-2deg)}

#dottei-first-hello .paper {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#f8faff;
  border:1px solid #e0e7ed;
  border-radius:3px 3px 42px 3px;
  min-height:488px;
  padding:28px 31px 32px;
  box-shadow:9px 11px 0 -2px #fff,9px 11px 0 -1px #e5eaf0}
#dottei-first-hello .paper:after {
  content:'';
  position:absolute;
  right:0;
  bottom:0;
  width:35px;
  height:35px;
  background:linear-gradient(135deg,#e1e7ef 0%,#f1f4f8 48%,#fff 50%);
  border-radius:0 0 0 9px;
  box-shadow:-2px -2px 4px #20354a0a;
  pointer-events:none}
#dottei-first-hello .paper-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  color:#61758a;
  font-size:10px;
  letter-spacing:1.6px;
  text-transform:uppercase}
#dottei-first-hello .paper-label span:last-child {
  letter-spacing:0;
  font-size:12px}
#dottei-first-hello .scene {
  position:relative;
  width:100%;
  height:210px;
  margin:9px 0 3px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden}
#dottei-first-hello .scene video {
  width:100%;
  height:100%;
  object-fit:contain}
#dottei-first-hello .paper h3 {
  font-size:32px;
  font-weight:500;
  line-height:1.14;
  letter-spacing:-1.2px;
  max-width:350px}
#dottei-first-hello .paper-copy {
  font-size:14px;
  line-height:1.65;
  color:var(--soft);
  margin-top:15px;
  max-width:365px}
#dottei-first-hello .paper-foot {
  border-top:1px solid #dce5ee;
  margin-top:22px;
  padding-top:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  font-size:11px;
  color:var(--soft)}
#dottei-first-hello .replay {
  background:none;
  border:0;
  padding:5px 0;
  min-height:32px;
  font-size:12px;
  color:var(--blue);
  white-space:nowrap}
#dottei-first-hello .replay:disabled {
  opacity:.55}
#dottei-first-hello .peel-sheet {
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  background:linear-gradient(125deg,#f8faff 65%,#edf1f8 92%,#dae1eb);
  transform-origin:100% 100%;
  opacity:0}
#dottei-first-hello .paper.peeling .peel-sheet {
  animation:dottei-peel .58s cubic-bezier(.22,.75,.25,1)}
@keyframes dottei-peel {
  0% {
  opacity:1;
  transform:translate(0,0) rotate(0);
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
35% {
  opacity:1;
  clip-path:polygon(0 0,78% 0,100% 50%,100% 100%,0 100%);
  transform:translate(-5%,6%) rotate(-7deg)}
100% {
  opacity:0;
  clip-path:polygon(0 55%,25% 85%,100% 100%,0 100%);
  transform:translate(-85%,65%) rotate(-24deg)}
}

#dottei-first-hello .chapter-end {
  margin:0 0 30px;
  padding:23px 0;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:25px;
  font-size:12px;
  color:var(--soft)}
#dottei-first-hello .chapter-end strong {
  color:var(--ink);
  font-weight:500}
#dottei-first-hello .chapter-end a {
  white-space:nowrap}

#dottei-first-hello .quiet {
  background:#faf9f7;
  position:relative;
  overflow:hidden;
  padding:53px 0 34px}
#dottei-first-hello .quiet-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px}
#dottei-first-hello .quiet-top .kicker {
  color:#68778c}
#dottei-first-hello .quiet-composition {
  position:relative;
  max-width:1000px;
  margin:18px auto 0}
#dottei-first-hello .quiet h2 {
  text-align:center;
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  font-size:48px;
  line-height:1.16;
  letter-spacing:-1.7px;
  position:relative;
  z-index:1}
#dottei-first-hello .quiet h2 em {
  font-weight:400;
  color:#688aab}
#dottei-first-hello .butterfly {
  display:block;
  width:min(680px,90%);
  height:auto;
  aspect-ratio:4/3;
  margin:10px auto 0;
  object-fit:contain}
#dottei-first-hello .quiet-aside {
  position:absolute;
  left:0;
  top:155px;
  max-width:145px;
  font-size:13px;
  line-height:1.7;
  color:var(--soft);
  z-index:1}
#dottei-first-hello .butterfly-note {
  position:absolute;
  right:0;
  top:310px;
  width:135px;
  transform:rotate(7deg);
  z-index:1}
#dottei-first-hello .butterfly-note:before {
  content:'';
  position:absolute;
  left:-49px;
  top:-26px;
  width:65px;
  height:40px;
  border-top:1.5px solid var(--pink);
  border-left:1.5px solid var(--pink);
  border-radius:80% 0 0 0;
  transform:rotate(-12deg)}
#dottei-first-hello .butterfly-note:after {
  content:'';
  position:absolute;
  left:-54px;
  top:6px;
  width:7px;
  height:7px;
  border-left:1.5px solid var(--pink);
  border-bottom:1.5px solid var(--pink);
  transform:rotate(-12deg)}
#dottei-first-hello .quiet-caption {
  text-align:center;
  font-size:12px;
  color:var(--soft);
  margin-top:10px}

#dottei-first-hello .invitation {
  padding:76px 0 64px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center}
#dottei-first-hello .invitation h2 {
  font-size:42px;
  line-height:1.13;
  letter-spacing:-1.5px;
  font-weight:500;
  margin-top:17px}
#dottei-first-hello .invite-copy {
  font-size:15px;
  line-height:1.7;
  color:var(--soft);
  margin-top:19px;
  max-width:355px}
#dottei-first-hello form label {
  display:block;
  font-size:12px;
  margin-bottom:9px}
#dottei-first-hello .form-line {
  display:flex;
  gap:9px}
#dottei-first-hello input {
  min-width:0;
  width:100%;
  background:#fff;
  color:var(--ink);
  border:1px solid #b9c7d2;
  border-radius:7px;
  padding:12px 13px;
  font-size:16px}
#dottei-first-hello form .solid {
  white-space:nowrap}
#dottei-first-hello .form-hint {
  font-size:12px;
  color:var(--soft);
  margin-top:13px}
#dottei-first-hello .form-hint a {
  color:var(--blue);
  text-decoration:underline;
  text-underline-offset:3px}
#dottei-first-hello .form-preview-note {
  font-size:12px;
  color:var(--soft);
  margin-top:5px}
#dottei-first-hello .form-status {
  font-size:12px;
  min-height:20px;
  color:var(--blue);
  margin-top:9px}
#dottei-first-hello footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  border-top:1px solid var(--line);
  padding:24px 0 30px;
  font-size:11px;
  color:var(--soft)}
#dottei-first-hello .footer-links {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:24px}
#dottei-first-hello .footer-links a {
  min-height:44px;
  display:flex;
  align-items:center}
#dottei-first-hello .footer-links button {
  border:0;
  background:none;
  padding:10px 0;
  min-height:44px;
  font-size:11px;
  color:var(--soft)}
#dottei-first-hello .preview-message {
  font-size:12px;
  color:var(--soft);
  padding-bottom:12px}

@media(max-width:950px) {
  #dottei-first-hello .shell {
  padding:0 32px}
#dottei-first-hello .meeting {
  gap:30px;
  padding-top:54px}
#dottei-first-hello h1 {
  font-size:64px;
  letter-spacing:-3.5px}
#dottei-first-hello .paper {
  padding:23px;
  min-height:485px}
#dottei-first-hello .topics {
  gap:0 16px}
#dottei-first-hello .topic {
  font-size:12px}
#dottei-first-hello .scene {
  height:190px}
#dottei-first-hello .paper h3 {
  font-size:29px}
#dottei-first-hello .quiet-aside {
  max-width:125px;
  top:160px}
#dottei-first-hello .butterfly-note {
  width:110px;
  font-size:14px;
  top:300px}
#dottei-first-hello .invitation {
  gap:35px}
#dottei-first-hello .form-line {
  flex-wrap:wrap}
#dottei-first-hello .form-line .solid {
  width:100%}
}

@media(max-width:680px) {
  #dottei-first-hello .shell {
  padding:0 23px}
#dottei-first-hello header {
  min-height:80px;
  gap:12px}
#dottei-first-hello .brand {
  font-size:25px;
  gap:5px}
#dottei-first-hello .brand img {
  width:35px;
  height:28px}
#dottei-first-hello nav {
  gap:15px}
#dottei-first-hello .nav-about {
  font-size:12px}
#dottei-first-hello .join-link {
  font-size:12px;
  padding:10px 11px}
#dottei-first-hello .join-link span {
  display:none}
#dottei-first-hello .meeting {
  grid-template-columns:1fr;
  gap:49px;
  padding:40px 0 32px}
#dottei-first-hello h1 {
  font-size:63px;
  letter-spacing:-3.7px;
  max-width:420px;
  margin-top:17px}
#dottei-first-hello h1 em {
  letter-spacing:-3px}
#dottei-first-hello .intro {
  font-size:16px;
  max-width:320px;
  margin-top:20px}
#dottei-first-hello .hello-stage {
  width:290px;
  margin:13px auto 0}
#dottei-first-hello .hello-actions {
  justify-content:center;
  gap:24px}
#dottei-first-hello .greeting {
  text-align:center;
  font-size:12px}
#dottei-first-hello .explore-top h2 {
  font-size:21px}
#dottei-first-hello .topics {
  gap:0 20px;
  margin-bottom:2px}
#dottei-first-hello .topic {
  font-size:13px}
#dottei-first-hello .paper {
  min-height:470px;
  padding:25px 23px 27px}
#dottei-first-hello .scene {
  height:195px;
  margin:7px 0}
#dottei-first-hello .paper h3 {
  font-size:31px}
#dottei-first-hello .paper-copy {
  font-size:14px}
#dottei-first-hello .chapter-end {
  flex-direction:column;
  gap:11px;
  margin-bottom:15px;
  font-size:12px}
#dottei-first-hello .quiet {
  padding:32px 0 29px}
#dottei-first-hello .quiet-top .kicker {
  font-size:9px;
  letter-spacing:1.4px}
#dottei-first-hello .quiet h2 {
  font-size:36px;
  letter-spacing:-1.2px}
#dottei-first-hello .butterfly {
  width:calc(100% + 32px);
  max-width:none;
  margin:23px -16px 0}
#dottei-first-hello .quiet-aside {
  position:static;
  text-align:center;
  max-width:260px;
  margin:15px auto 0;
  font-size:13px}
#dottei-first-hello .butterfly-note {
  position:relative;
  top:auto;
  right:auto;
  margin:0 0 5px auto;
  width:155px;
  font-size:14px;
  transform:rotate(-3deg)}
#dottei-first-hello .butterfly-note:before {
  left:-40px;
  top:-21px;
  width:37px;
  height:30px;
  transform:rotate(-60deg)}
#dottei-first-hello .butterfly-note:after {
  left:-48px;
  top:-9px;
  transform:rotate(70deg)}
#dottei-first-hello .quiet-caption {
  font-size:11px;
  margin-top:21px}
#dottei-first-hello .invitation {
  grid-template-columns:1fr;
  padding:47px 0 30px;
  gap:27px}
#dottei-first-hello .invitation h2 {
  font-size:36px}
#dottei-first-hello .invite-copy {
  font-size:14px}
#dottei-first-hello .form-line {
  flex-direction:column}
#dottei-first-hello footer {
  gap:8px;
  padding:20px 0;
  font-size:10px}
#dottei-first-hello .footer-links {
  gap:20px}
#dottei-first-hello .footer-links button {
  font-size:10px}
}

@media(prefers-reduced-motion:reduce) {
  #dottei-first-hello .paper.peeling .peel-sheet {
  animation:none}
}

#dottei-first-hello .explore-top {
  justify-content:flex-start;
  gap:30px}
#dottei-first-hello .pick-note {
  font-size:14px;
  transform:rotate(4deg);
  padding-right:0}
#dottei-first-hello .pick-note:after {
  content:'↙';
  left:1px;
  right:auto;
  top:14px;
  font-size:29px}
#dottei-first-hello .hello-note {
  font-size:15px}

@media(max-width:950px) {
  #dottei-first-hello .explore-top {
  gap:20px}
#dottei-first-hello .pick-note {
  font-size:12px}
}
@media(max-width:680px) {
  #dottei-first-hello .explore-top {
  gap:24px}
#dottei-first-hello .pick-note {
  font-size:13px}
}

#dottei-first-hello .scene img {
  width:100%;
  height:100%;
  object-fit:contain}

@media(max-width:360px) {
  #dottei-first-hello .nav-about {
  display:none}
#dottei-first-hello .brand {
  font-size:23px}
#dottei-first-hello .brand img {
  width:31px}
#dottei-first-hello h1 {
  font-size:54px;
  letter-spacing:-3px}
#dottei-first-hello .hello-actions {
  gap:16px}
#dottei-first-hello .hello-note {
  font-size:13px}
#dottei-first-hello .explore-top {
  gap:14px}
#dottei-first-hello .explore-top h2 {
  font-size:19px}
#dottei-first-hello .pick-note {
  font-size:12px}
#dottei-first-hello .paper {
  padding:22px 18px}
#dottei-first-hello .paper h3 {
  font-size:28px}
}

#dottei-first-hello .introduction {
  min-width:0}
@media(max-width:680px) {
  #dottei-first-hello .meeting,#dottei-first-hello .invitation {
  grid-template-columns:minmax(0,1fr)}
#dottei-first-hello .hello-stage {
  max-width:90%}
}