/* Notenity's product tour. Deliberately scoped away from the hub and documents. */
.notenity-page { --n-blue: #e4efff; --n-peach: #fff0e7; --n-mint: #e6f4ec; --n-yellow: #fff5d6; }
.notenity-page h1, .notenity-page h2, .notenity-page h3 { font-family: var(--play-font); font-weight: 700; }
.notenity-page h2 { font-size: clamp(30px,3.4vw,44px); line-height: 1.18; }
.notenity-sky { overflow: hidden; background: radial-gradient(ellipse at 75% 53%,#baddff 0,transparent 45%),linear-gradient(180deg,#eaf7ff,#e1f1ff 77%,var(--bg)); }
.notenity-breadcrumb { display: flex; gap: 16px; align-items: center; padding-top: 25px; font-size: .8125rem; color: var(--muted); }
.notenity-breadcrumb a { display: inline-flex; align-items: center; gap: 7px; min-height: 35px; }
.notenity-breadcrumb svg { width: 16px; transform: rotate(180deg); }
.notenity-breadcrumb > span { border-left: 1px solid var(--line); padding-left: 16px; }
.notenity-hero { display: grid; grid-template-columns: 1.12fr 1fr; align-items: center; gap: 12px; min-height: 570px; padding: 25px 0 50px; }
.notenity-sticker { display: inline-block; color: #69501f; background: #ffea9d; border: 2px solid #fff6cd; box-shadow: 0 3px 0 #e6c364; padding: 8px 13px; border-radius: 11px; font-size: .6875rem; font-weight: 750; letter-spacing: .06em; transform: rotate(-2deg); }
.notenity-intro h1 { font-size: clamp(46px,4.5vw,62px); line-height: 1.12; letter-spacing: -.05em; margin-top: 28px; }
.notenity-intro h1 em { color: var(--happy-coral); }
.notenity-intro > p { font-size: 1.0625rem; line-height: 1.85; color: var(--muted); max-width: 430px; margin-top: 23px; }
.notenity-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 17px 22px; margin-top: 27px; }
.notenity-text-link { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 700; min-height: 44px; text-underline-offset: 5px; }
.notenity-text-link:hover { text-decoration: underline; }
.notenity-text-link svg { width: 17px; height: 17px; }
.notenity-assurances { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 26px; font-size: .75rem; font-weight: 650; color: var(--muted); }
.notenity-assurances span::before { content: '✓'; margin-right: 5px; color: var(--mint-ink); }
.notenity-playground { position: relative; height: 465px; min-width: 0; isolation: isolate; }
.notenity-character { position: absolute; width: 400px; height: 330px; max-width: 100%; top: 47px; left: 50%; translate: -50% 0; border: none; background: transparent; border-radius: 45%; padding: 0; }
.notenity-character .app-play-scene { width: 100%; height: 100%; margin: 0; pointer-events: none; }
.notenity-character .app-play-scene::before { width: 285px; height: 225px; background: #b8d6ff83; }
.notenity-character .app-toy { width: 405px; height: 319px; max-width: none; animation: notenity-bob 5.5s ease-in-out infinite; filter: drop-shadow(0 17px 0 #355a8b13); }
.notenity-character .toy-caption { display: none; }
.notenity-character .toy-spark-one { top: 25px; left: 14px; font-size: 37px; }
.notenity-character .toy-spark-two { bottom: 60px; right: 0; font-size: 42px; }
.notenity-character.is-cheering .app-toy { animation: notenity-cheer 1s ease-in-out both; }
.notenity-floating-label { position: absolute; z-index: 3; background: var(--surface); color: var(--text); border: 1px solid var(--line); box-shadow: 0 4px 0 #346b9d12; border-radius: 12px; padding: 8px 13px; font-size: .75rem; font-weight: 650; pointer-events: none; }
.notenity-label-one { top: 32px; left: 0; transform: rotate(-7deg); }
.notenity-label-two { right: -5px; bottom: 125px; transform: rotate(6deg); }
.notenity-cube { position: absolute; width: 61px; height: 61px; object-fit: contain; animation: notenity-cube 6s ease-in-out infinite; pointer-events: none; }
.notenity-cube-one { top: 1px; right: 28px; }
.notenity-cube-two { width: 43px; height: 43px; left: 15px; bottom: 115px; animation-delay: -3s; }
.notenity-cloud { position: absolute; width: 140px; height: 140px; object-fit: contain; left: -14px; bottom: 53px; rotate: -12deg; animation: notenity-cube 7s ease-in-out -2s infinite; pointer-events: none; }
.notenity-cheer { position: absolute; bottom: 48px; left: 115px; right: 0; min-height: 42px; font-size: .8125rem; font-weight: 650; color: var(--violet-ink); text-align: center; display: grid; align-content: center; }
.notenity-motion { position: absolute; bottom: 0; left: 50%; translate: -50% 0; min-height: 44px; white-space: nowrap; }
.notenity-page-nav .app-nav { margin-top: 0; margin-bottom: 0; justify-content: center; border-bottom: 1px dashed var(--line); }
.notenity-tour { padding-top: 72px; padding-bottom: 76px; }
.notenity-section-heading { text-align: center; }
.notenity-section-heading h2 { margin-top: 14px; }
.notenity-section-heading > p { margin-top: 16px; color: var(--muted); }
.notenity-mode-buttons { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 29px 0 26px; }
.notenity-mode-buttons button { display: inline-flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 16px; min-height: 49px; padding: 10px 20px; background: var(--surface); font-weight: 700; font-size: .9375rem; transition: translate .2s,box-shadow .2s; }
.notenity-mode-buttons button > span { font-size: .625rem; opacity: .7; }
.notenity-mode-buttons button[aria-pressed="true"] { color: #24477e; background: #d3e6ff; border-color: #adcef8; box-shadow: 0 4px 0 #adcef8; translate: 0 -3px; }
.notenity-mode-buttons button[data-notenity-mode="voice"][aria-pressed="true"] { color: #2f5a44; background: #d6f0e1; border-color: #add4bd; box-shadow: 0 4px 0 #add4bd; }
.notenity-mode-buttons button[data-notenity-mode="draw"][aria-pressed="true"] { color: #754631; background: #ffe3cf; border-color: #efc4a8; box-shadow: 0 4px 0 #efc4a8; }
.notenity-mode-panel { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 30px; padding: 44px 54px; min-height: 372px; border: 2px solid var(--surface); border-radius: 32px; box-shadow: 0 7px 0 var(--line); background: var(--n-blue); animation: notenity-enter .3s ease-out; }
.notenity-mode-panel[hidden] { display: none; }
.notenity-mode-panel + .notenity-mode-panel:not([hidden]) { margin-top: 22px; }
.notenity-mode-stage:has([hidden]) .notenity-mode-panel { margin-top: 0; }
.notenity-mode-voice { background: var(--n-mint); }
.notenity-mode-draw { background: var(--n-peach); }
.notenity-small-label { font-size: .6875rem; font-weight: 750; letter-spacing: .13em; color: var(--muted); }
.notenity-mode-copy h3 { font-size: 32px; line-height: 1.2; max-width: 390px; margin-top: 13px; }
.notenity-mode-copy > p { margin-top: 18px; font-size: .9375rem; line-height: 1.8; }
.notenity-mode-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 23px 0 10px; padding: 0; }
.notenity-mode-tags li { font-size: .6875rem; font-weight: 650; padding: 5px 9px; border-radius: 7px; background: var(--surface); }
.notenity-mode-art { position: relative; min-width: 0; min-height: 265px; }
.notenity-mode-art .app-play-scene { height: 240px; margin: 0; }
.notenity-mode-art .app-toy { width: 292px; height: 230px; animation: notenity-bob 7s ease-in-out -1s infinite; }
.notenity-mode-art .app-play-scene::before { width: 245px; height: 205px; background: #ffffff55; }
.notenity-mode-art .toy-caption { display: none; }
.notenity-mode-cheer { position: absolute; left: 50%; bottom: 5px; translate: -50% 0; rotate: -3deg; white-space: nowrap; border: 2px solid var(--surface); background: var(--surface); padding: 7px 13px; border-radius: 9px; box-shadow: 0 3px 0 #40608414; font-size: .875rem; font-weight: 700; }
.notenity-mode-art > img { position: absolute; right: 0; top: 0; width: 48px; height: 48px; object-fit: contain; rotate: 16deg; }
.notenity-features { padding-top: 15px; padding-bottom: 80px; }
.notenity-feature-heading { display: flex; justify-content: space-between; gap: 25px; align-items: end; margin-bottom: 30px; }
.notenity-feature-heading h2 { margin-top: 14px; }
.notenity-feature-heading p { margin-top: 18px; color: var(--muted); }
.notenity-expand { display: flex; align-items: center; gap: 15px; flex-shrink: 0; min-height: 46px; border: 1px solid var(--line); background: var(--surface); border-radius: 13px; padding: 9px 15px; font-size: .8125rem; font-weight: 650; }
.notenity-expand[hidden] { display: none; }
.notenity-expand span { font-size: 20px; }
.notenity-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; align-items: start; }
.notenity-feature { --n-card: var(--n-blue); background: var(--n-card); border: 2px solid var(--surface); border-radius: 22px; box-shadow: 0 4px 0 #486b9710; overflow: hidden; scroll-margin-top: 135px; }
.notenity-color-peach { --n-card: var(--n-peach); }
.notenity-color-mint { --n-card: var(--n-mint); }
.notenity-color-yellow { --n-card: var(--n-yellow); }
.notenity-feature summary { list-style: none; display: flex; align-items: center; gap: 14px; min-height: 128px; padding: 23px; cursor: pointer; }
.notenity-feature summary::-webkit-details-marker { display: none; }
.notenity-feature summary:focus-visible { outline: 3px solid var(--accent); outline-offset: -6px; border-radius: 22px; }
.notenity-feature-number { width: 40px; height: 45px; flex: 0 0 auto; display: grid; place-items: center; background: var(--surface); border-radius: 12px; box-shadow: 0 3px 0 #40608410; font-size: .875rem; font-weight: 700; rotate: -5deg; transition: rotate .2s; }
.notenity-feature:nth-child(even) .notenity-feature-number { rotate: 5deg; }
.notenity-feature summary:hover .notenity-feature-number { rotate: 0deg; }
.notenity-feature-title { flex: 1; min-width: 0; }
.notenity-feature-title h3 { font-size: 1.125rem; line-height: 1.3; letter-spacing: -.025em; }
.notenity-feature-title > span { display: block; margin-top: 7px; font-size: .8125rem; line-height: 1.6; color: var(--muted); }
.notenity-feature-toggle { font-size: 25px; font-weight: 400; width: 22px; flex: 0 0 auto; text-align: center; transition: rotate .2s; }
.notenity-feature[open] .notenity-feature-toggle { rotate: 45deg; }
.notenity-feature[open] summary { border-bottom: 1px solid #6985a32b; }
.notenity-feature-body { padding: 22px 27px 28px; }
.notenity-feature-body ul { margin: 0; padding-left: 17px; font-size: .875rem; line-height: 1.85; }
.notenity-feature-body li { padding-left: 4px; }
.notenity-feature-body li + li { margin-top: 14px; }
.notenity-good-hands { display: flex; align-items: center; gap: 30px; background: var(--n-mint); border: 2px solid var(--surface); border-radius: 30px; padding: 35px 45px; box-shadow: 0 6px 0 #558b7815; }
.notenity-good-hands > img { width: 180px; height: 180px; object-fit: contain; flex-shrink: 0; rotate: -6deg; }
.notenity-good-hands h2 { font-size: 33px; margin-top: 12px; }
.notenity-good-hands p { font-size: .9375rem; margin: 16px 0 6px; max-width: 530px; line-height: 1.85; }
.notenity-privacy-sticker { font-family: var(--play-font); font-size: 1rem; font-weight: 700; line-height: 1.5; color: #69501f; background: #ffea9d; padding: 19px 23px; border-radius: 14px; rotate: 7deg; flex-shrink: 0; box-shadow: 0 4px 0 #e6c364; margin-left: auto; text-align: center; }
.notenity-help { padding-top: 75px; padding-bottom: 52px; }
.notenity-help .resource-grid { margin-top: 31px; }
.notenity-help .resource-card { border-radius: 21px; }
.notenity-help .resource-card h3 { font-size: 1.125rem; }
.notenity-back { margin: 33px auto 0; width: fit-content; display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: .875rem; font-weight: 650; }
.notenity-back svg { width: 17px; }
[data-theme="dark"] .notenity-page { --n-blue: #253d60; --n-peach: #4b353a; --n-mint: #25483f; --n-yellow: #494431; }
[data-theme="dark"] .notenity-sky { background: radial-gradient(ellipse at 75% 53%,#284c78 0,transparent 45%),linear-gradient(180deg,#1b3151,#1c2c45 77%,var(--bg)); }
[data-theme="dark"] .notenity-character .app-play-scene::before { background: #79abed19; }
[data-theme="dark"] .notenity-mode-art .app-play-scene::before { background: #8aaddd12; }
@keyframes notenity-bob { 0%,100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-12px) rotate(5deg); } }
@keyframes notenity-cube { 0%,100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes notenity-cheer { 0%,100% { transform: translateY(0) rotate(-5deg); } 30% { transform: translateY(-24px) rotate(10deg); } 60% { transform: translateY(3px) rotate(-12deg); } 80% { transform: translateY(-8px) rotate(4deg); } }
@keyframes notenity-enter { from { opacity: .5; translate: 0 5px; } to { opacity: 1; translate: 0 0; } }
@media (min-width: 761px) and (max-width: 1050px) {
  .notenity-intro h1 { font-size: 47px; }
  .notenity-character { width: 325px; }
  .notenity-character .app-toy { width: 340px; height: 267px; }
  .notenity-label-two { bottom: 133px; right: 0; }
  .notenity-cloud { width: 110px; height: 110px; }
  .notenity-cheer { left: 90px; }
  .notenity-mode-panel { padding: 35px; gap: 15px; }
  .notenity-mode-copy h3 { font-size: 28px; }
  .notenity-feature summary { padding: 21px 17px; gap: 10px; min-height: 149px; }
  .notenity-feature-number { width: 32px; height: 38px; }
  .notenity-good-hands { padding: 30px; gap: 22px; }
  .notenity-good-hands > img { width: 125px; height: 125px; }
  .notenity-privacy-sticker { display: none; }
}
@media (max-width: 760px) {
  .notenity-breadcrumb { padding-top: 13px; font-size: .75rem; }
  .notenity-hero { grid-template-columns: 1fr; gap: 4px; padding-top: 25px; padding-bottom: 25px; }
  .notenity-intro { text-align: center; }
  .notenity-intro h1 { font-size: clamp(39px,8.8vw,55px); margin-top: 23px; }
  .notenity-intro > p { margin: 20px auto 0; max-width: 390px; font-size: 1rem; }
  .notenity-actions { justify-content: center; gap: 13px 20px; margin-top: 24px; }
  .notenity-assurances { justify-content: center; margin-top: 22px; gap: 6px 13px; font-size: .6875rem; }
  .notenity-playground { height: 355px; width: min(100%,410px); margin: 16px auto 0; }
  .notenity-character { width: 300px; height: 250px; top: 20px; }
  .notenity-character .app-toy { width: 302px; height: 237px; }
  .notenity-character .app-play-scene::before { width: 215px; height: 173px; }
  .notenity-character .toy-spark-one { font-size: 26px; left: 0; }
  .notenity-character .toy-spark-two { font-size: 29px; right: 0; }
  .notenity-floating-label { font-size: .625rem; padding: 6px 9px; border-radius: 8px; }
  .notenity-label-one { top: 12px; left: 0; }
  .notenity-label-two { bottom: 98px; right: 0; }
  .notenity-cube-one { width: 44px; height: 44px; right: 16px; top: -3px; }
  .notenity-cube-two { width: 31px; height: 31px; left: 0; bottom: 120px; }
  .notenity-cloud { width: 102px; height: 102px; left: 0; bottom: 45px; }
  .notenity-cheer { left: 90px; bottom: 38px; font-size: .6875rem; }
  .notenity-motion { bottom: -5px; font-size: .75rem; }
  .notenity-page-nav .app-nav { justify-content: center; gap: 5px 16px; padding-block: 13px; }
  .notenity-page-nav .app-nav a { font-size: .75rem; min-height: 36px; }
  .notenity-tour { padding-top: 43px; padding-bottom: 49px; }
  .notenity-section-heading .eyebrow, .notenity-feature-heading .eyebrow { font-size: .625rem; letter-spacing: .09em; }
  .notenity-section-heading > p { font-size: .9375rem; margin-top: 13px; }
  .notenity-mode-buttons { gap: 8px; margin: 26px 0 20px; }
  .notenity-mode-buttons button { padding: 10px 13px; font-size: .8125rem; gap: 7px; min-height: 46px; border-radius: 13px; }
  .notenity-mode-panel { grid-template-columns: 1fr; gap: 15px; padding: 29px 25px 23px; border-radius: 25px; }
  .notenity-mode-copy h3 { font-size: 28px; max-width: 100%; }
  .notenity-mode-copy > p { font-size: .875rem; margin-top: 16px; }
  .notenity-mode-tags { margin-top: 18px; }
  .notenity-mode-art { min-height: 208px; width: min(100%,280px); margin-inline: auto; }
  .notenity-mode-art .app-play-scene { height: 190px; }
  .notenity-mode-art .app-toy { width: 236px; height: 186px; }
  .notenity-mode-art .app-play-scene::before { width: 210px; height: 168px; }
  .notenity-mode-art .toy-spark-one { left: 0; }
  .notenity-mode-art .toy-spark-two { right: 0; }
  .notenity-mode-art > img { width: 38px; height: 38px; }
  .notenity-mode-cheer { font-size: .75rem; bottom: 0; }
  .notenity-feature-heading { display: block; margin-bottom: 22px; }
  .notenity-feature-heading h2 { font-size: 31px; }
  .notenity-feature-heading p { font-size: .9375rem; margin-top: 15px; }
  .notenity-expand { margin-top: 20px; }
  .notenity-feature-grid { grid-template-columns: 1fr; gap: 13px; }
  .notenity-feature summary { min-height: 115px; padding: 21px 17px; gap: 12px; }
  .notenity-feature-number { width: 34px; height: 40px; }
  .notenity-feature-title h3 { font-size: 1.0625rem; }
  .notenity-feature-title > span { font-size: .75rem; }
  .notenity-feature-body { padding: 21px 23px 25px; }
  .notenity-features { padding-top: 9px; padding-bottom: 49px; }
  .notenity-good-hands { display: block; padding: 24px 25px 27px; text-align: center; }
  .notenity-good-hands > img { width: 134px; height: 118px; margin: -12px auto 10px; }
  .notenity-good-hands .eyebrow { font-size: .625rem; }
  .notenity-good-hands h2 { font-size: 29px; }
  .notenity-good-hands p { font-size: .875rem; }
  .notenity-privacy-sticker { display: none; }
  .notenity-help { padding-top: 48px; padding-bottom: 35px; }
  .notenity-help .resource-grid { gap: 13px; margin-top: 24px; }
}
@media (max-width: 375px) {
  .notenity-sticker { font-size: .5625rem; }
  .notenity-intro h1 { font-size: 36px; }
  .notenity-mode-buttons button { padding-inline: 10px; gap: 4px; }
  .notenity-character { width: 260px; }
  .notenity-character .app-toy { width: 270px; height: 212px; }
  .notenity-feature summary { gap: 9px; padding-inline: 13px; }
}
[data-motion="paused"] .notenity-page *, [data-motion="paused"] .notenity-page *::before { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .notenity-page *, .notenity-page *::before { animation: none !important; transition: none !important; }
}