.guide-page main {
    padding-bottom: 96px;
}

.guide-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr);
    gap: 96px;
    align-items: end;
    padding: 112px 0 92px;
}

.guide-hero h1 {
    max-width: 760px;
    margin: 22px 0 0;
    font-size: clamp(4rem, 7.5vw, 7rem);
    font-weight: 610;
    letter-spacing: -0.075em;
    line-height: 0.96;
    word-break: keep-all;
}

.guide-hero > p {
    margin: 0 0 8px;
    color: #5f5e58;
    font-size: 1rem;
    line-height: 1.75;
    word-break: keep-all;
}

.guide-map {
    display: grid;
    grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.28fr);
    border-top: 1px solid #aeada7;
    border-bottom: 1px solid #aeada7;
}

.guide-map__heading {
    padding: 42px 48px 42px 0;
    border-right: 1px solid #b9b8b2;
}

.guide-map__heading h2 {
    margin: 16px 0 0;
    font-size: 2rem;
    font-weight: 610;
    letter-spacing: -0.055em;
}

.guide-map__heading p {
    max-width: 280px;
    margin: 18px 0 0;
    color: #6e6d67;
    font-size: 0.8rem;
    line-height: 1.7;
    word-break: keep-all;
}

.guide-map__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.guide-map__list li + li {
    border-top: 1px solid #c9c8c2;
}

.guide-map__list a,
.guide-map__item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    min-height: 58px;
    padding: 0 0 0 32px;
    text-decoration: none;
}

.guide-map__list a {
    transition: background 140ms ease, color 140ms ease;
}

.guide-map__list a:hover {
    background: rgba(255, 255, 255, 0.42);
    color: #245cc7;
}

.guide-map__list a:focus-visible {
    outline: 2px solid #245cc7;
    outline-offset: -2px;
}

.guide-map__number,
.guide-feature__number {
    color: #7b7972;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
}

.guide-map__list strong {
    font-size: 0.84rem;
    font-weight: 560;
}

.guide-map__status {
    min-width: 78px;
    padding: 0 16px;
    color: #8c8a83;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.58rem;
    text-align: right;
}

.guide-map__status.is-ready {
    color: #245cc7;
}

.guide-feature {
    display: grid;
    grid-template-columns: minmax(250px, 0.7fr) minmax(0, 1.3fr);
    gap: 84px;
    align-items: center;
    padding: 124px 0;
    scroll-margin-top: 24px;
}

.guide-feature + .guide-feature {
    border-top: 1px solid #b9b8b2;
}

.guide-feature--reverse .guide-feature__copy {
    order: 2;
}

.guide-feature--reverse {
    grid-template-columns: minmax(0, 1.3fr) minmax(250px, 0.7fr);
}

.guide-feature__copy h2 {
    max-width: 420px;
    margin: 20px 0 0;
    font-size: clamp(2.5rem, 4.5vw, 4.2rem);
    font-weight: 610;
    letter-spacing: -0.068em;
    line-height: 1.04;
    word-break: keep-all;
}

.guide-feature__copy > p {
    max-width: 420px;
    margin: 28px 0 0;
    color: #5f5e58;
    font-size: 0.91rem;
    line-height: 1.78;
    word-break: keep-all;
}

.guide-notes {
    margin: 34px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #c3c2bc;
}

.guide-notes li {
    position: relative;
    padding: 13px 0 13px 18px;
    border-bottom: 1px solid #c3c2bc;
    color: #4c4b46;
    font-size: 0.73rem;
    line-height: 1.5;
}

.guide-notes li::before {
    position: absolute;
    top: 18px;
    left: 1px;
    width: 5px;
    height: 5px;
    background: #245cc7;
    content: "";
}

.guide-demo-panel {
    min-width: 0;
    border: 1px solid #aaa9a3;
    background: #e4e3de;
}

.guide-demo-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 43px;
    padding: 0 14px;
    border-bottom: 1px solid #b7b6b0;
    color: #65645e;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.guide-demo-panel__header small {
    font: inherit;
    letter-spacing: 0;
    text-transform: none;
}

.guide-replay {
    padding: 5px 8px;
    border: 1px solid #aaa9a3;
    background: transparent;
    color: #4f4e49;
    font: inherit;
    cursor: pointer;
}

.guide-replay:hover {
    border-color: #245cc7;
    color: #245cc7;
}

.guide-replay:focus-visible,
.guide-demo-steps button:focus-visible {
    outline: 2px solid #245cc7;
    outline-offset: 2px;
}

.app-demo {
    position: relative;
    width: calc(100% - 64px);
    max-width: 610px;
    height: 380px;
    margin: 42px auto;
    overflow: hidden;
    border: 1px solid rgba(37, 29, 22, 0.14);
    border-radius: 9px;
    background: #fdfdfc;
    box-shadow: 0 22px 46px rgba(42, 39, 32, 0.13);
    color: #111827;
    font-family: "Pretendard Variable", Pretendard, "Inter", "Work Sans", "Helvetica Neue", sans-serif;
}

.app-demo__titlebar {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    height: 40px;
    background: #fdfdfc;
}

.app-demo__titlebar-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    padding-left: 10px;
}

.app-demo__providers {
    display: flex;
    gap: 6px;
    align-items: center;
}

.app-demo__provider {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid rgba(37, 29, 22, 0.1);
    border-radius: 8px;
    background: rgba(241, 245, 250, 0.9);
    font: inherit;
}

.app-demo__provider img {
    object-fit: contain;
}

.app-demo__titlebar-divider {
    width: 1px;
    height: 16px;
    background: rgba(37, 29, 22, 0.1);
}

.app-demo__menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: rgba(37, 29, 22, 0.6);
}

.app-demo__menu i,
.app-demo__menu::before,
.app-demo__menu::after {
    position: absolute;
    width: 14px;
    height: 1.5px;
    border-radius: 999px;
    background: currentColor;
    content: "";
}

.app-demo__menu::before {
    transform: translateY(-5px);
}

.app-demo__menu::after {
    transform: translateY(5px);
}

.app-demo__provider > span {
    position: absolute;
    top: -3px;
    right: -3px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    border: 2px solid #fdfdfc;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    font: 700 9px/1 sans-serif;
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 180ms ease, transform 180ms ease;
}

.connect-demo[data-step="0"] .app-demo__provider.is-target {
    border-color: rgba(37, 99, 235, 0.5);
    background: #fff8ef;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.connect-demo[data-step="0"] .app-demo__provider.is-target > span {
    opacity: 1;
    transform: scale(1);
}

.app-demo__window-controls {
    display: flex;
    align-items: stretch;
}

.app-demo__window-controls i {
    position: relative;
    width: 44px;
}

.app-demo__window-controls i::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 1px;
    background: #8a8b8e;
    content: "";
    transform: translate(-50%, -50%);
}

.app-demo__window-controls .app-demo__window-close::before {
    width: 10px;
    height: 10px;
    background:
        linear-gradient(45deg, transparent 46%, #8a8b8e 47% 53%, transparent 54%),
        linear-gradient(-45deg, transparent 46%, #8a8b8e 47% 53%, transparent 54%);
}

.app-demo__body {
    position: relative;
    min-height: 340px;
    padding: 7px 22px 18px;
    background: #fdfdfc;
}

.connect-demo,
.usage-demo {
    transition: height 320ms ease, margin 320ms ease;
}

.connect-demo[data-step="1"] {
    height: 219px;
    margin-top: 122.5px;
    margin-bottom: 122.5px;
}

.connect-demo[data-step="2"],
.usage-demo {
    height: 198px;
    margin-top: 133px;
    margin-bottom: 133px;
}

.connect-demo[data-step="1"] .app-demo__body,
.connect-demo[data-step="2"] .app-demo__body,
.usage-demo .app-demo__body {
    min-height: 0;
    height: calc(100% - 40px);
}

.connect-empty {
    position: absolute;
    inset: 6px 8px 8px;
    overflow: hidden;
    border-radius: 12px;
    background:
        radial-gradient(circle at center, rgba(37, 29, 22, 0.08) 1px, transparent 1px)
        0 0 / 18px 18px;
    transition: opacity 220ms ease, transform 300ms ease;
}

.connect-empty__margin {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 9.1%;
    width: 1px;
    background: rgba(253, 164, 175, 0.45);
}

.connect-empty__sketch {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.connect-empty__arrow {
    stroke: #2563eb;
    stroke-width: 2.2;
    stroke-opacity: 0.72;
}

.connect-empty__stroke {
    stroke: #403b35;
    stroke-width: 2.5;
    stroke-opacity: 0.36;
}

.connect-empty__copy {
    position: absolute;
    left: 24.3%;
    color: #111827;
    text-align: left;
}

.connect-empty__copy--start {
    top: 20.6%;
}

.connect-empty__copy--backup {
    top: 68.2%;
    display: flex;
    gap: 16px;
    align-items: center;
    width: 59%;
}

.connect-empty__copy--backup > div {
    min-width: 0;
    flex: 1;
}

.connect-empty__copy strong,
.connect-empty__copy span {
    display: block;
    white-space: nowrap;
}

.connect-empty__copy strong {
    width: fit-content;
    padding: 0 4px;
    font-size: 0.82rem;
    line-height: 1.4;
}

.connect-empty__copy--start strong {
    background: rgba(186, 230, 253, 0.45);
    transform: rotate(-0.4deg);
}

.connect-empty__copy--backup strong {
    background: rgba(253, 230, 138, 0.5);
    transform: rotate(0.3deg);
}

.connect-empty__copy span {
    margin-top: 7px;
    color: #6b7280;
    font-size: 0.62rem;
    line-height: 1;
}

.connect-empty__copy .connect-empty__backup-button {
    position: relative;
    flex: none;
    margin: 0;
    padding: 8px 14px;
    border: 2px solid rgba(37, 99, 235, 0.75);
    border-radius: 45% 55% 48% 52% / 55% 45% 55% 45%;
    background: rgba(37, 99, 235, 0.05);
    color: #2563eb;
    font-size: 0.7rem;
    font-weight: 700;
    transform: rotate(-1deg);
}

.connect-card {
    width: 100%;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(22px) scale(0.97);
    transition: opacity 280ms ease, transform 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.app-provider-heading {
    display: flex;
    gap: 6px;
    align-items: center;
    min-height: 28px;
    margin-bottom: 6px;
    padding: 4px;
}

.app-provider-heading img {
    object-fit: contain;
}

.app-provider-heading strong {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.connect-state--auth {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    border: 1px dashed #e5e7eb;
    border-radius: 12px;
    background: rgba(251, 252, 255, 0.7);
    text-align: center;
}

.connect-state--complete {
    display: none;
}

.connect-state__message {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.connect-state__alert {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1.5px solid #fb923c;
    border-radius: 50%;
    color: #fb923c;
    font-size: 0.58rem;
    font-weight: 700;
    line-height: 1;
}

.connect-state__message strong {
    color: #4b5563;
    font-size: 0.68rem;
}

.connect-state button {
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 0;
    padding: 5px 12px;
    border: 0;
    border-radius: 4px;
    background: #111827;
    color: #fff;
    font-family: inherit;
    font-size: 0.62rem;
    font-weight: 700;
}

.app-profile-card {
    overflow: hidden;
    border: 1px solid #dedede;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.app-profile-card__header {
    display: flex;
    align-items: center;
    min-height: 33px;
    padding: 6px 12px;
    border-bottom: 1px solid rgba(243, 244, 246, 0.8);
    background: rgba(245, 248, 253, 0.8);
}

.app-profile-card__identity {
    overflow: hidden;
    max-width: 200px;
    padding: 4px 8px;
    border: 1px solid #f3f4f6;
    border-radius: 6px;
    background: #f7f9fd;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    color: #4b5563;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-profile-card__plan {
    margin-left: 6px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(243, 244, 246, 0.5);
    color: #d1d5db;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    text-transform: uppercase;
}

.app-profile-card__body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 8px;
}

.mini-usage-card,
.usage-card-demo {
    position: relative;
    min-width: 0;
}

.mini-usage-card {
    padding: 1px 2px;
}

.mini-usage-card i {
    display: block;
    height: 6px;
    margin: 6px 0 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #f3f4f6;
    box-shadow: inset 0 1px 2px rgba(36, 43, 54, 0.08);
}

.mini-usage-card b {
    display: block;
    width: var(--usage);
    height: 100%;
    border-radius: inherit;
    background: #22c55e;
    transition: width 700ms ease 160ms;
}

.connect-demo[data-step="0"] .connect-empty {
    opacity: 1;
}

.connect-demo[data-step="1"] .connect-empty,
.connect-demo[data-step="2"] .connect-empty {
    opacity: 0;
    transform: translateY(-10px);
}

.connect-demo[data-step="1"] .connect-card,
.connect-demo[data-step="2"] .connect-card {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.connect-demo[data-step="1"] .connect-state--auth {
    display: flex;
    animation: guide-fade-in 260ms ease both;
}

.connect-demo[data-step="2"] .connect-state--complete {
    display: block;
    animation: guide-fade-in 320ms ease both;
}

.demo-cursor {
    position: absolute;
    z-index: 4;
    top: -32px;
    left: 26px;
    width: 15px;
    height: 20px;
    background: #111827;
    clip-path: polygon(0 0, 0 100%, 31% 71%, 50% 100%, 64% 92%, 47% 64%, 82% 64%);
    filter: drop-shadow(-1px 0 0 #fff) drop-shadow(1px 0 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(1px 1px 1px rgba(17, 24, 39, 0.5));
    opacity: 0;
    pointer-events: none;
}

.connect-demo[data-step="0"] .demo-cursor {
    animation: guide-cursor-provider 2.6s ease-in-out both;
}

.connect-demo[data-step="1"] .demo-cursor {
    left: 50%;
    animation: guide-cursor-connect 2.6s ease-in-out both;
}

.guide-demo-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid #b7b6b0;
}

.guide-demo-steps button {
    min-height: 45px;
    padding: 0 10px;
    border: 0;
    border-right: 1px solid #b7b6b0;
    background: transparent;
    color: #77766f;
    font-family: inherit;
    font-size: 0.67rem;
    cursor: pointer;
}

.guide-demo-steps button:last-child {
    border-right: 0;
}

.guide-demo-steps button.is-active {
    background: #f4f3ee;
    color: #245cc7;
    font-weight: 650;
}

.usage-demo .app-demo__body {
    padding: 7px 22px 18px;
}

.usage-profile {
    width: 100%;
    margin: 0 auto;
}

.usage-profile__cards {
    gap: 6px;
    padding: 8px;
}

.usage-card-demo {
    padding: 1px 2px;
}

.usage-card-demo__heading {
    display: flex;
    gap: 8px;
    align-items: center;
}

.usage-card-demo__heading span {
    flex: none;
    color: #9ca3af;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    text-transform: uppercase;
}

.usage-card-demo__heading strong {
    flex: none;
    color: #111827;
    font-size: 1rem;
    line-height: 1;
}

.usage-card-demo__track {
    height: 6px;
    margin: 6px 0 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #f3f4f6;
    box-shadow: inset 0 1px 2px rgba(36, 43, 54, 0.08);
}

.usage-card-demo__track i {
    display: block;
    width: var(--usage);
    height: 100%;
    border-radius: inherit;
    background: #22c55e;
    animation: guide-bar-grow 1.1s ease-out both;
}

.usage-card-demo__track i.is-warning {
    background: #eab308;
}

.usage-card-demo__time {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    color: #9ca3af;
    font-size: 0.58rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

.usage-card-demo__time span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.usage-card-demo__time span:last-child {
    opacity: 0.7;
}

.usage-highlight {
    position: absolute;
    border: 1px solid #245cc7;
    background: rgba(36, 92, 199, 0.06);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}

.usage-highlight::after {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 7px;
    height: 7px;
    background: #245cc7;
    content: "";
}

.usage-highlight--amount {
    top: -5px;
    right: -4px;
    left: -4px;
    height: 37px;
}

.usage-highlight--remaining {
    bottom: -5px;
    left: -4px;
    width: 48%;
    height: 20px;
}

.usage-highlight--reset {
    right: -4px;
    bottom: -5px;
    width: 48%;
    height: 20px;
}

.usage-demo[data-focus="amount"] .usage-highlight--amount,
.usage-demo[data-focus="remaining"] .usage-highlight--remaining,
.usage-demo[data-focus="reset"] .usage-highlight--reset {
    opacity: 1;
    animation: guide-highlight 1.8s ease-in-out infinite;
}

.timeline-demo {
    height: 228px;
    margin-top: 118px;
    margin-bottom: 118px;
}

.timeline-demo .app-demo__body {
    min-height: 0;
    height: calc(100% - 40px);
    padding: 7px 22px 18px;
}

.timeline-demo__heading {
    display: flex;
    gap: 6px;
    align-items: center;
    height: 27px;
    padding: 0 4px;
    color: #111827;
}

.timeline-demo__heading svg {
    width: 16px;
    height: 16px;
    color: #6b7280;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.timeline-demo__heading strong {
    font-size: 0.73rem;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.timeline-card {
    position: relative;
    height: 135px;
    overflow: hidden;
    border: 1px solid #dedede;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.timeline-card__range {
    position: absolute;
    top: 43px;
    right: 16px;
    left: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 32px;
    pointer-events: none;
}

.timeline-card__range i:first-child {
    border: 1px solid #ffedd5;
    border-radius: 6px 0 0 6px;
    background: rgba(255, 247, 237, 0.72);
}

.timeline-card__range i:last-child {
    border: 1px solid #dbeafe;
    border-radius: 0 6px 6px 0;
    background: rgba(239, 246, 255, 0.72);
}

.timeline-scale {
    position: absolute;
    top: 99px;
    right: 16px;
    left: 16px;
    height: 1px;
}

.timeline-scale__line {
    position: absolute;
    top: 0;
    height: 1px;
}

.timeline-scale__line--short {
    left: 0;
    width: 50%;
    background: rgba(251, 146, 60, 0.8);
}

.timeline-scale__line--weekly {
    right: 0;
    width: 50%;
    border-top: 1px dashed #60a5fa;
}

.timeline-tick {
    position: absolute;
    top: 0;
    width: 1px;
    height: 6px;
    background: #e5e7eb;
}

.timeline-tick--now {
    left: 0;
    height: 8px;
}

.timeline-tick--hour-one {
    left: 10%;
}

.timeline-tick--hour-two {
    left: 20%;
}

.timeline-tick--hour-four {
    left: 40%;
}

.timeline-tick--five-hours {
    left: 50%;
    height: 8px;
}

.timeline-tick--day-one {
    left: 55.8%;
}

.timeline-tick--day-two {
    left: 63.2%;
}

.timeline-tick--day-four {
    left: 77.9%;
}

.timeline-tick--day-five {
    left: 85.3%;
}

.timeline-tick--day-six {
    left: 92.6%;
}

.timeline-tick--seven-days {
    right: 0;
    height: 8px;
}

.timeline-scale__label {
    position: absolute;
    top: 13px;
    color: #9ca3af;
    font-size: 0.52rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transform: translateX(-50%);
}

.timeline-scale__label--now {
    left: 0;
}

.timeline-scale__label--three-hours {
    left: 30%;
    color: #d1d5db;
    font-size: 0.48rem;
}

.timeline-scale__label--five-hours {
    left: 50%;
}

.timeline-scale__label--three-days {
    left: 70%;
    color: #d1d5db;
    font-size: 0.48rem;
}

.timeline-scale__label--seven-days {
    right: 0;
    transform: none;
}

.timeline-now-highlight {
    position: absolute;
    top: -5px;
    left: -5px;
    width: 11px;
    height: 11px;
    border: 1px solid #245cc7;
    border-radius: 50%;
    background: rgba(36, 92, 199, 0.08);
    opacity: 0;
    transition: opacity 180ms ease;
}

.timeline-marker {
    position: absolute;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateX(-50%);
    transition: opacity 180ms ease, filter 180ms ease;
    animation: guide-timeline-pin 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.timeline-marker--short {
    left: 23%;
}

.timeline-marker--weekly {
    left: 80%;
    animation-delay: 120ms;
}

.timeline-marker__icon {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1px solid #fb923c;
    border-radius: 50%;
    background: #fbfcff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.timeline-marker--weekly .timeline-marker__icon {
    border-color: #60a5fa;
    border-style: dashed;
}

.timeline-marker__icon img {
    object-fit: contain;
}

.timeline-marker__stem {
    width: 1px;
    height: 24px;
    background: #fb923c;
}

.timeline-marker--weekly .timeline-marker__stem {
    width: 0;
    border-left: 1px dashed #60a5fa;
    background: transparent;
}

.timeline-marker__name {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 76px;
    height: 20px;
    padding: 0 7px;
    overflow: hidden;
    border: 1px solid #fed7aa;
    border-radius: 6px;
    background: #fbfcff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
    color: #ea580c;
    font-size: 0.49rem;
    font-weight: 700;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timeline-marker--weekly .timeline-marker__name {
    border-color: #bfdbfe;
    border-style: dashed;
    color: #2563eb;
}

.timeline-marker__tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    z-index: 3;
    padding: 4px 7px;
    border-radius: 4px;
    background: #111827;
    box-shadow: 0 5px 12px rgba(15, 23, 42, 0.2);
    color: #fff;
    font-size: 0.5rem;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    transform: translateX(-50%);
    transition: opacity 180ms ease;
}

.timeline-marker:hover .timeline-marker__tooltip,
.timeline-demo[data-focus="short"] .timeline-marker--short .timeline-marker__tooltip,
.timeline-demo[data-focus="weekly"] .timeline-marker--weekly .timeline-marker__tooltip {
    opacity: 1;
}

.timeline-demo[data-focus="now"] .timeline-now-highlight {
    opacity: 1;
    animation: guide-timeline-now 1.8s ease-in-out infinite;
}

.timeline-demo[data-focus="now"] .timeline-marker {
    opacity: 0.42;
}

.timeline-demo[data-focus="short"] .timeline-marker--weekly,
.timeline-demo[data-focus="weekly"] .timeline-marker--short {
    opacity: 0.18;
    filter: grayscale(0.7);
}

.widget-demo {
    position: relative;
    height: 380px;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.82) 0 7%, transparent 27%),
        linear-gradient(145deg, #dfe9ed 0%, #ebded8 49%, #cfdce4 100%);
}

.widget-desktop {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.widget-desktop__glow {
    position: absolute;
    border-radius: 999px;
    filter: blur(2px);
}

.widget-desktop__glow--one {
    top: -68px;
    left: 7%;
    width: 330px;
    height: 230px;
    background: rgba(255, 255, 255, 0.48);
    transform: rotate(-18deg);
}

.widget-desktop__glow--two {
    right: -78px;
    bottom: 24px;
    width: 310px;
    height: 200px;
    background: rgba(177, 199, 210, 0.34);
    transform: rotate(24deg);
}

.floating-widget-demo {
    position: absolute;
    top: 70px;
    right: 40px;
    width: 230px;
    min-height: 62px;
    overflow: hidden;
    border: 1px solid rgba(37, 29, 22, 0.12);
    border-radius: 8px;
    background: rgba(255, 248, 239, 0.88);
    box-shadow: 0 12px 34px rgba(53, 48, 42, 0.17);
    color: #251d16;
    white-space: nowrap;
    backdrop-filter: blur(4px);
    transition: opacity 220ms ease, transform 300ms ease;
}

.floating-widget-demo__provider {
    display: flex;
    align-items: center;
    min-height: 62px;
    padding: 6px 8px;
}

.floating-widget-demo__icon {
    display: flex;
    flex: 0 0 20px;
    align-items: center;
    justify-content: center;
}

.floating-widget-demo__icon img,
.taskbar-widget-demo__icon img {
    display: block;
}

.floating-widget-demo__rows {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 0 6px;
    overflow: hidden;
}

.floating-widget-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    width: 100%;
    min-height: 18px;
}

.floating-widget-row__label,
.floating-widget-row__value {
    font-size: 12px;
    line-height: 1;
}

.floating-widget-row__label {
    font-weight: 500;
}

.floating-widget-row__track,
.taskbar-widget-demo__track {
    overflow: hidden;
    border-radius: 999px;
    background: rgba(209, 213, 219, 0.3);
    box-shadow: inset 0 1px 2px rgba(37, 29, 22, 0.08);
}

.floating-widget-row__track {
    height: 8px;
}

.floating-widget-row__track i,
.taskbar-widget-demo__track b {
    display: block;
    width: var(--widget-usage);
    height: 100%;
    border-radius: inherit;
    background: #22c55e;
    transition: width 300ms ease;
}

.floating-widget-row__track i.is-warning,
.taskbar-widget-demo__track b.is-warning {
    background: #eab308;
}

.floating-widget-row__value {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 25px;
    height: 14px;
    font-weight: 700;
    text-align: right;
}

.widget-demo[data-view="taskbar"] .floating-widget-demo {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
}

.widget-taskbar {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    height: 48px;
    border-top: 1px solid rgba(77, 89, 99, 0.18);
    background: rgba(240, 246, 249, 0.86);
    box-shadow: 0 -5px 18px rgba(56, 67, 74, 0.09);
    backdrop-filter: blur(18px);
}

.widget-taskbar__start {
    display: grid;
    grid-template-columns: repeat(2, 6px);
    gap: 2px;
    margin-left: 16px;
}

.widget-taskbar__start i {
    width: 6px;
    height: 6px;
    background: #2877c9;
}

.widget-taskbar__search {
    width: 96px;
    height: 28px;
    margin-left: 12px;
    border: 1px solid rgba(59, 70, 78, 0.13);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.64);
}

.taskbar-widget-demo {
    position: absolute;
    top: 0;
    right: 86px;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 10px;
    border-right: 1px solid rgba(37, 29, 22, 0.12);
    opacity: 0;
    transform: translateY(7px);
    transition: opacity 220ms ease, transform 260ms ease;
}

.taskbar-widget-demo__icon {
    display: flex;
    flex: 0 0 16px;
    align-items: center;
    justify-content: center;
}

.taskbar-widget-demo__rows {
    display: grid;
    grid-template-columns: 40px 96px 36px;
    grid-template-rows: repeat(2, 18px);
    gap: 0 6px;
    align-items: start;
    margin-left: 8px;
}

.taskbar-widget-demo__rows > span,
.taskbar-widget-demo__rows > strong {
    display: flex;
    align-items: center;
    height: 18px;
    color: #251d16;
    font-size: 13px;
    line-height: 1;
}

.taskbar-widget-demo__rows > span {
    font-weight: 500;
}

.taskbar-widget-demo__rows > strong {
    justify-content: flex-end;
    font-weight: 700;
    text-align: right;
}

.taskbar-widget-demo__track {
    height: 7px;
    margin-top: 6px;
    border: 1px solid rgba(37, 29, 22, 0.2);
    background: rgba(37, 29, 22, 0.1);
}

.widget-taskbar__tray {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    width: 72px;
    height: 100%;
    color: #39444c;
    font-family: "Segoe UI", sans-serif;
    font-size: 10px;
}

.widget-taskbar__tray > i {
    width: 7px;
    height: 7px;
    border-top: 1px solid currentColor;
    border-left: 1px solid currentColor;
    transform: rotate(45deg) translateY(2px);
}

.widget-demo[data-view="taskbar"] .taskbar-widget-demo {
    opacity: 1;
    transform: translateY(0);
}

.widget-demo-steps {
    grid-template-columns: repeat(2, 1fr);
}

.settings-demo {
    --settings-demo-scale: 1;
    --settings-demo-height: 442px;
    --settings-app-height: 410px;
    position: relative;
    height: var(--settings-demo-height);
    overflow: hidden;
    background: #dcdcd8;
}

.settings-app-demo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 610px;
    height: var(--settings-app-height);
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 10px;
    background: #fdfdfc;
    box-shadow:
        0 0 0 1px rgba(37, 29, 22, 0.14),
        0 22px 46px rgba(42, 39, 32, 0.13);
    color: #251d16;
    font-family: "Pretendard Variable", Pretendard, "Inter", sans-serif;
    transform: scale(var(--settings-demo-scale)) translate(-50%, -50%);
    transform-origin: top left;
}

.settings-app-demo__background {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 96px repeat(2, 1fr);
    gap: 12px;
    padding: 50px 24px 24px;
}

.settings-app-demo__background span {
    border: 1px solid rgba(37, 29, 22, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
}

.settings-overlay-demo {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
}

.settings-dialog-demo {
    display: flex;
    width: 90%;
    height: 90%;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.settings-dialog-demo__sidebar {
    display: flex;
    width: 165px;
    min-height: 0;
    flex: 0 0 165px;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    overflow-y: hidden;
    border-right: 1px solid rgba(37, 29, 22, 0.05);
    background: #f9f9f9;
}

.settings-sidebar__group {
    margin-bottom: 4px;
    padding: 4px 8px;
    color: rgba(37, 29, 22, 0.4);
    font-size: 10px;
    font-weight: 700;
    line-height: 15px;
}

.settings-sidebar__group--misc {
    margin-top: 8px;
}

.settings-sidebar__item {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 6px 8px;
    border-radius: 6px;
    color: rgba(37, 29, 22, 0.6);
}

.settings-sidebar__item b {
    overflow: hidden;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-sidebar__item svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.settings-demo[data-view="appearance"] [data-settings-nav="appearance"],
.settings-demo[data-view="backup"] [data-settings-nav="backup"] {
    background: #fff8ef;
    color: #251d16;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.settings-dialog-demo__content {
    position: relative;
    min-height: 0;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    background: #fff;
}

.settings-view {
    position: absolute;
    inset: 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
}

.settings-demo[data-view="appearance"] .settings-view--appearance,
.settings-demo[data-view="backup"] .settings-view--backup {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.settings-color-modes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.settings-color-mode {
    min-width: 0;
    text-align: center;
}

.settings-color-mode__frame {
    padding: 2px;
    border: 2px solid transparent;
    border-radius: 10px;
}

.settings-color-mode.is-selected .settings-color-mode__frame {
    border-color: #251d16;
}

.settings-color-mode__preview {
    height: 72px;
    padding: 6px 8px 8px;
    overflow: hidden;
    border-radius: 8px;
}

.settings-color-mode__preview--system {
    background: linear-gradient(to right, #f5f5f4 50%, #292524 50%);
}

.settings-color-mode__preview--light {
    background: #f5f5f4;
}

.settings-color-mode__preview--dark {
    background: #292524;
}

.settings-color-mode__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 10px;
    margin-bottom: 6px;
    padding: 0 2px;
}

.settings-color-mode__header > span {
    display: flex;
    width: 10px;
    height: 10px;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    background: #3b82f6;
}

.settings-color-mode__header > span i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
}

.settings-color-mode__header > b {
    width: 32px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.3);
}

.settings-color-mode__preview--light .settings-color-mode__header > b {
    background: #d6d3d1;
}

.settings-color-mode__header > em {
    display: flex;
    gap: 2px;
}

.settings-color-mode__header > em i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
}

.settings-color-mode__preview--light .settings-color-mode__header > em i {
    background: #d6d3d1;
}

.settings-color-mode__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    height: 49px;
}

.settings-color-mode__cards > span {
    position: relative;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    background: #44403c;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.settings-color-mode__cards > span.is-light {
    border-color: rgba(0, 0, 0, 0.05);
    background: #fff;
}

.settings-color-mode__cards > span > i {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3b82f6;
}

.settings-color-mode__cards > span:nth-child(2) > i {
    background: #8b5cf6;
}

.settings-color-mode__cards > span > b {
    position: absolute;
    top: 8px;
    left: 18px;
    width: 24px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.3);
}

.settings-color-mode__cards > span.is-light > b {
    background: #d6d3d1;
}

.settings-color-mode__cards > span > em {
    position: absolute;
    right: 6px;
    bottom: 16px;
    left: 6px;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
}

.settings-color-mode__cards > span.is-light > em {
    background: #e7e5e4;
}

.settings-color-mode__cards > span > em::after {
    display: block;
    width: 68%;
    height: 100%;
    border-radius: inherit;
    background: #3b82f6;
    content: "";
}

.settings-color-mode__cards > span:nth-child(2) > em::after {
    width: 42%;
    background: #8b5cf6;
}

.settings-color-mode__cards > span::after {
    position: absolute;
    bottom: 6px;
    left: 6px;
    width: 20px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    content: "";
}

.settings-color-mode__cards > span:nth-child(2)::after {
    width: 28px;
}

.settings-color-mode__cards > span.is-light::after {
    background: #e7e5e4;
}

.settings-color-mode > strong {
    display: block;
    margin-top: 6px;
    overflow: hidden;
    color: rgba(37, 29, 22, 0.6);
    font-size: 11px;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-color-mode.is-selected > strong {
    color: #251d16;
    font-weight: 500;
}

.settings-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 24px;
    margin-top: 16px;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

.settings-switch {
    position: relative;
    width: 44px;
    height: 24px;
    flex: 0 0 44px;
    border: 2px solid transparent;
    border-radius: 999px;
    background: hsl(214.3 31.8% 91.4%);
}

.settings-switch b {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.settings-switch.is-checked {
    background: hsl(221.2 83.2% 53.3%);
}

.settings-switch.is-checked b {
    transform: translateX(20px);
}

.settings-view--backup > p {
    margin: 0 0 12px;
    white-space: pre-line;
    color: rgba(37, 29, 22, 0.5);
    font-size: 10px;
    line-height: 16px;
}

.settings-backup-card {
    padding: 12px;
    border: 1px solid rgba(37, 29, 22, 0.05);
    border-radius: 8px;
    background: #f9f9f9;
}

.settings-backup-card + .settings-backup-card {
    margin-top: 12px;
}

.settings-backup-card__heading {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

.settings-backup-card__heading svg {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
}

.settings-backup-card svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.settings-drive-action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 12px;
}

.settings-backup-card button {
    display: flex;
    width: 112px;
    min-height: 27px;
    flex: 0 0 112px;
    gap: 6px;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border: 0;
    border-radius: 6px;
    background: hsl(221.2 83.2% 53.3%);
    color: #fff;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    line-height: 15px;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.settings-backup-card button svg {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
}

.settings-backup-card--file {
    display: block;
}

.settings-backup-card--file > strong {
    display: block;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

.settings-backup-inputs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.settings-backup-inputs span {
    min-width: 0;
    padding: 8px 10px;
    overflow: hidden;
    border: 1px solid rgba(37, 29, 22, 0.1);
    border-radius: 6px;
    background: #fff;
    color: rgba(37, 29, 22, 0.46);
    font-size: 11px;
    line-height: 16.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-backup-message {
    min-height: 0;
    margin-top: 8px;
}

.settings-backup-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
}

.settings-backup-actions button.is-disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.settings-demo-steps {
    grid-template-columns: repeat(2, 1fr);
}

.guide-next {
    padding: 72px 0;
    border-top: 1px solid #aeada7;
    border-bottom: 1px solid #aeada7;
    text-align: center;
}

.guide-next h2 {
    margin: 18px 0 0;
    font-size: clamp(2rem, 4vw, 3.6rem);
    font-weight: 610;
    letter-spacing: -0.06em;
    word-break: keep-all;
}

.guide-next p {
    max-width: 640px;
    margin: 22px auto 0;
    color: #66655f;
    font-size: 0.85rem;
    line-height: 1.75;
    word-break: keep-all;
}

@keyframes guide-fade-in {
    from {
        opacity: 0;
        transform: translateY(7px);
    }
}

@keyframes guide-cursor-provider {
    0% {
        opacity: 0;
        transform: translate(82px, 84px);
    }
    30%,
    65% {
        opacity: 1;
        transform: translate(0, 0);
    }
    75% {
        opacity: 1;
        transform: translate(0, 2px) scale(0.92);
    }
    100% {
        opacity: 0;
        transform: translate(0, 2px) scale(0.92);
    }
}

@keyframes guide-cursor-connect {
    0% {
        opacity: 0;
        transform: translate(70px, 170px);
    }
    35%,
    70% {
        opacity: 1;
        transform: translate(31px, 137px);
    }
    80% {
        opacity: 1;
        transform: translate(31px, 139px) scale(0.92);
    }
    100% {
        opacity: 0;
        transform: translate(31px, 139px) scale(0.92);
    }
}

@keyframes guide-bar-grow {
    from {
        width: 0;
    }
}

@keyframes guide-highlight {
    50% {
        background: rgba(36, 92, 199, 0.12);
    }
}

@keyframes guide-timeline-pin {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
}

@keyframes guide-timeline-now {
    50% {
        box-shadow: 0 0 0 5px rgba(36, 92, 199, 0.1);
    }
}

@media (max-width: 900px) {
    .guide-hero {
        gap: 56px;
    }

    .guide-feature {
        gap: 46px;
    }

    .app-demo {
        width: calc(100% - 32px);
    }
}

@media (max-width: 760px) {
    .guide-page main {
        padding-bottom: 64px;
    }

    .guide-hero,
    .guide-map,
    .guide-feature {
        grid-template-columns: 1fr;
    }

    .guide-hero {
        gap: 34px;
        padding: 74px 0 64px;
    }

    .guide-hero h1 {
        font-size: clamp(3.4rem, 16vw, 5.8rem);
    }

    .guide-hero > p {
        max-width: 540px;
    }

    .guide-map__heading {
        padding: 30px 0;
        border-right: 0;
        border-bottom: 1px solid #b9b8b2;
    }

    .guide-map__heading p {
        max-width: none;
    }

    .guide-map__list a,
    .guide-map__item {
        padding-left: 0;
    }

    .guide-feature,
    .guide-feature--reverse {
        gap: 42px;
        padding: 82px 0;
    }

    .guide-feature--reverse .guide-feature__copy {
        order: 0;
    }

    .guide-feature__copy > p,
    .guide-feature__copy h2 {
        max-width: 540px;
    }

    .guide-demo-panel {
        width: calc(100vw - 32px);
    }
}

@media (max-width: 520px) {
    .guide-map__list a,
    .guide-map__item {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 10px;
        min-height: 62px;
    }

    .guide-map__status {
        grid-column: 2;
        padding: 0 0 10px;
        text-align: left;
    }

    .guide-demo-panel__header small {
        display: none;
    }

    .app-demo {
        width: calc(100% - 20px);
        height: 314px;
        margin: 32px auto;
    }

    .connect-demo[data-step="1"] {
        height: 210px;
        margin-top: 84px;
        margin-bottom: 84px;
    }

    .connect-demo[data-step="2"],
    .usage-demo {
        height: 190px;
        margin-top: 94px;
        margin-bottom: 94px;
    }

    .timeline-demo {
        height: 230px;
        margin-top: 74px;
        margin-bottom: 74px;
    }

    .app-demo__window-controls i {
        width: 30px;
    }

    .app-demo__body {
        min-height: 272px;
        padding: 7px 12px 14px;
    }

    .connect-empty__copy strong {
        font-size: 0.72rem;
    }

    .connect-empty__copy span {
        font-size: 0.52rem;
    }

    .connect-empty__copy--backup {
        gap: 6px;
        width: 68%;
    }

    .connect-empty__copy .connect-empty__backup-button {
        padding: 6px 8px;
        font-size: 0.58rem;
    }

    .usage-demo .app-demo__body {
        padding: 7px 12px 14px;
    }

    .timeline-demo .app-demo__body {
        padding: 7px 12px 14px;
    }

    .timeline-demo__heading {
        height: 27px;
    }

    .timeline-card {
        height: 135px;
    }

    .timeline-card__range {
        top: 43px;
        right: 16px;
        left: 16px;
        height: 32px;
    }

    .timeline-scale {
        top: 99px;
        right: 16px;
        left: 16px;
    }

    .timeline-marker__name {
        max-width: 62px;
        padding: 0 5px;
    }

    .widget-demo {
        height: 320px;
    }

    .floating-widget-demo {
        top: 60px;
        right: 16px;
    }

    .widget-taskbar__search {
        width: 62px;
        margin-left: 9px;
    }

    .taskbar-widget-demo {
        right: 68px;
        padding: 0 6px;
    }

    .taskbar-widget-demo__rows {
        grid-template-columns: 32px 66px 32px;
        column-gap: 4px;
        margin-left: 6px;
    }

    .taskbar-widget-demo__rows > span,
    .taskbar-widget-demo__rows > strong {
        font-size: 10px;
    }

    .widget-taskbar__tray {
        gap: 4px;
        width: 54px;
        font-size: 9px;
    }

    .usage-profile__cards {
        gap: 4px;
        padding: 8px;
    }

    .usage-card-demo {
        padding: 1px;
    }

    .usage-card-demo__heading {
        gap: 5px;
    }

    .usage-card-demo__heading span {
        font-size: 0.55rem;
    }

    .usage-card-demo__heading strong {
        font-size: 0.82rem;
    }

    .usage-card-demo__time {
        font-size: 0.46rem;
    }

    .guide-demo-steps button {
        min-height: 52px;
        font-size: 0.61rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .connect-demo .demo-cursor,
    .usage-demo .usage-highlight,
    .usage-card-demo__track i,
    .timeline-marker,
    .timeline-now-highlight,
    .floating-widget-demo,
    .taskbar-widget-demo,
    .settings-view {
        animation: none;
        transition: none;
    }
}