@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root {
    --ink: #151b18;
    --paper: #f0f1e9;
    --lime: #c9f36b;
    --muted: #9da79f;
    --line: #d5d9ce;
}
* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'DM Sans',sans-serif;
}
a {
    color: inherit;
    text-decoration: none;
}
button {
    font: inherit;
}
button:focus-visible,a:focus-visible {
    outline: 2px solid #8fbf36;
    outline-offset: 4px;
}
.wrap {
    width: min(1400px,calc(100% - 100px));
    margin: auto;
}
.header {
    height: 94px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
}
.brand {
    font-family: 'Space Grotesk',sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -1px;
    display: inline-flex;
    align-items: center;
}
.brand>span:not(.brand-mark) {
    font-weight: 400;
}
.brand sup {
    font-size: 8px;
    align-self: flex-start;
    margin: 3px 0 0 3px;
}
.brand-mark {
    width: 26px;
    height: 26px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    margin-right: 10px;
    transform: rotate(45deg);
}
.brand-mark i {
    background: #222e27;
    border-radius: 2px;
}
.header nav {
    display: flex;
    gap: 42px;
    font-size: 13px;
    font-weight: 600;
}
.header nav a,.header-link {
    transition: opacity .2s;
}
.header nav a:hover,.header-link:hover {
    opacity: .55;
}
.header-link {
    font-size: 13px;
    font-weight: 700;
}
.header-link span {
    margin-left: 15px;
}
.hero {
    min-height: 720px;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}
.hero-copy {
    padding: 50px 0 100px;
    z-index: 2;
}
.eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    color: #b5c2b4;
    display: flex;
    align-items: center;
    gap: 9px;
}
.eyebrow.dark {
    color: #6b776d;
}
.status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: #b9ea5d;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #b9ea5d22;
    flex: none;
}
.hero .eyebrow {
    color: #5f6b60;
}
h1,h2,h3,p {
    margin: 0;
}
h1,h2,h3 {
    font-family: 'Space Grotesk',sans-serif;
    letter-spacing: -.055em;
}
h1 {
    font-size: clamp(60px,6.5vw,99px);
    line-height: .98;
    margin: 35px 0 25px;
}
em {
    font-style: normal;
    color: #89978a;
}
.hero-copy>p {
    font-size: 17px;
    line-height: 1.7;
    color: #6b756d;
    max-width: 430px;
}
.actions {
    display: flex;
    gap: 14px;
    margin-top: 36px;
    align-items: center;
}
.button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 45px;
    padding: 19px 22px;
    font-size: 12px;
    font-weight: 700;
}
.primary {
    background: var(--ink);
    color: white;
    transition: background .2s,color .2s;
}
.primary:hover {
    background: var(--lime);
    color: var(--ink);
}
.text-button {
    gap: 15px;
}
.hero-meta {
    display: flex;
    gap: 20px;
    margin-top: 60px;
    font-size: 9px;
    letter-spacing: .1em;
    font-weight: 700;
    color: #89948a;
}
.hero-meta span+span:before {
    content: ' / ';
    margin-right: 20px;
    color: #c4cac0;
}
.hero-visual {
    height: 570px;
    position: relative;
}
.orbit {
    position: absolute;
    border: 1px solid #d4dbcf;
    border-radius: 50%;
    width: 490px;
    height: 490px;
    top: 45px;
    left: 50%;
    transform: translateX(-50%);
}
.orbit-two {
    width: 370px;
    height: 370px;
    top: 105px;
}
.visual-cross {
    position: absolute;
    color: #a8b4a5;
}
.cross-a {
    top: 55px;
    left: 12%;
}
.cross-b {
    bottom: 90px;
    right: 3%;
}
.visual-label {
    position: absolute;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    color: #859184;
}
.top-label {
    top: 45px;
    right: 2%;
    display: flex;
    gap: 12px;
    align-items: center;
}
.top-label b {
    font-weight: 400;
    margin-left: 25px;
}
.bottom-label {
    bottom: 35px;
    left: 4%;
}
.bottom-label span {
    margin-left: 30px;
}
.screen {
    position: absolute;
    background: #252e29;
    border: 7px solid #252e29;
    border-radius: 10px;
    box-shadow: 0 30px 50px #2d3a292b;
}
.screen-bar {
    height: 25px;
    background: #202a24;
    color: #bac7b6;
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 0 9px;
    font-size: 7px;
    letter-spacing: .1em;
}
.screen-bar>span {
    height: 4px;
    width: 4px;
    border-radius: 50%;
    background: #81917d;
}
.screen-bar small {
    margin-left: auto;
    font-size: 6px;
}
.screen-back {
    width: 55%;
    height: 240px;
    top: 120px;
    right: 4%;
    transform: rotate(4deg);
}
.screen-front {
    width: 55%;
    height: 270px;
    top: 220px;
    left: 5%;
    transform: rotate(-4deg);
}
.screen-wallpaper {
    height: calc(100% - 25px);
    background: linear-gradient(135deg,#b5ce9b,#637c62);
    padding: 30px;
}
.window-card {
    width: 75%;
    height: 80%;
    background: #e2e9d6d9;
    border-radius: 4px;
    padding: 15px;
}
.tiny-line {
    height: 4px;
    width: 70%;
    background: #9aa995;
    margin: 5px;
}
.tiny-line.short {
    width: 45%;
}
.wave {
    height: 40px;
    margin: 24px 4px;
    background: linear-gradient(135deg,transparent 40%,#a2ba89 41% 45%,transparent 46%),linear-gradient(25deg,transparent 45%,#a2ba89 46% 50%,transparent 51%);
}
.front-content {
    height: calc(100% - 25px);
    background: #c9f36b;
    padding: 22px;
    color: #263429;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.front-top,.front-bottom {
    display: flex;
    justify-content: space-between;
    font-size: 7px;
    letter-spacing: .1em;
    font-weight: 700;
}
.front-top span+span {
    font-size: 20px;
}
.front-content strong {
    font: 700 clamp(25px,3vw,46px)/.95 'Space Grotesk',sans-serif;
    letter-spacing: -.06em;
}
.front-content strong span {
    color: #78983c;
}
.screen-foot {
    position: absolute;
    width: 34%;
    height: 17px;
    bottom: -23px;
    left: 33%;
    background: #303b33;
    clip-path: polygon(10% 0,90% 0,100% 100%,0 100%);
}
.connection-pill {
    position: absolute;
    right: 0;
    top: 390px;
    background: #fff;
    padding: 15px 18px;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .1em;
    box-shadow: 0 10px 30px #26382a1a;
}
.connection-pill b {
    margin-left: 25px;
}
.pulse {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: #97d143;
    border-radius: 50%;
    margin-right: 8px;
}
.hero-index {
    position: absolute;
    bottom: 35px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .13em;
    color: #8a958b;
}
.ticker {
    overflow: hidden;
    background: #d5e5bc;
    padding: 17px 0;
    color: #617457;
    font-size: 10px;
    letter-spacing: .2em;
    font-weight: 700;
    white-space: nowrap;
}
.ticker div {
    min-width: max-content;
    text-align: center;
    animation: marquee 35s linear infinite;
}
.ticker span {
    padding: 0 45px;
    color: #93aa80;
}
@keyframes marquee {
    to {
        transform: translateX(-25%);
    }
}
.section {
    padding: 140px 0;
}
.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 30px;
    margin-bottom: 65px;
}
.section-heading h2,.final-cta h2 {
    font-size: clamp(44px,5.4vw,76px);
    line-height: 1.02;
    margin-top: 25px;
}
.section-heading>p {
    max-width: 330px;
    color: #7b867c;
    line-height: 1.7;
    font-size: 15px;
}
.demo-shell {
    background: #e3e8dc;
    border: 1px solid #d3dbc9;
}
.demo-top,.demo-footer {
    height: 55px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    color: #68776a;
}
.demo-top {
    border-bottom: 1px solid #ced7c8;
}
.demo-top .status-dot {
    margin-right: 8px;
}
.demo-top small {
    font-size: 9px;
    color: #a2ada0;
}
.demo-body {
    display: grid;
    grid-template-columns: 36% 64%;
    min-height: 500px;
}
.demo-copy {
    padding: 55px 40px;
    border-right: 1px solid #ced7c8;
}
.demo-number,.feature-num {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    color: #8a998a;
}
.demo-copy h3 {
    font-size: 42px;
    line-height: 1.05;
    margin: 30px 0 20px;
}
.demo-copy p {
    font-size: 14px;
    line-height: 1.7;
    color: #738071;
    min-height: 75px;
}
.demo-tabs {
    margin-top: 38px;
}
.demo-tabs button {
    width: 100%;
    border: 0;
    border-top: 1px solid #c6d1c0;
    background: transparent;
    text-align: left;
    padding: 17px 0;
    color: #98a596;
    font-size: 10px;
    letter-spacing: .08em;
    cursor: pointer;
    display: flex;
    gap: 16px;
}
.demo-tabs button span {
    flex: 1;
    color: #738071;
    font-size: 12px;
    letter-spacing: 0;
}
.demo-tabs button.active,.demo-tabs button.active span {
    color: #1d2a20;
    font-weight: 700;
}
.demo-stage {
    position: relative;
    overflow: hidden;
    min-height: 440px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.stage-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(#cad5c577 1px,transparent 1px),linear-gradient(90deg,#cad5c577 1px,transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(ellipse,#000,transparent 75%);
}
.stage-screen {
    width: 31%;
    height: 170px;
    background: #28382d;
    border: 6px solid #28382d;
    border-radius: 7px;
    box-shadow: 0 20px 30px #344b3020;
    z-index: 1;
    transition: transform .5s,background .5s;
}
.stage-toolbar {
    height: 23px;
    color: #91a48d;
    font-size: 6px;
    padding: 6px;
}
.stage-toolbar span {
    float: right;
}
.stage-content {
    background: #b9d69f;
    height: calc(100% - 23px);
    padding: 20px;
    color: #eff8e7;
}
.stage-content>span {
    font: 700 35px 'Space Grotesk';
    opacity: .5;
}
.stage-lines {
    width: 60%;
    height: 35px;
    margin-top: 12px;
    border-top: 4px solid #ffffff55;
    border-bottom: 4px solid #ffffff55;
}
.stage-right .stage-content {
    background: #94ae8a;
}
.stage-link {
    color: #8ca889;
    z-index: 1;
    position: relative;
    font-size: 13px;
}
.stage-link b {
    position: absolute;
    background: #bfe789;
    color: #354a2f;
    border-radius: 50%;
    padding: 9px;
    left: 35%;
    top: -11px;
}
.cursor {
    position: absolute;
    left: 49%;
    top: 51%;
    z-index: 3;
    color: #18251c;
    font-size: 30px;
    filter: drop-shadow(1px 2px white);
    animation: cursor 3s ease-in-out infinite;
}
.scene-caption {
    position: absolute;
    bottom: 40px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    color: #758873;
}
.scene-caption .status-dot {
    margin-right: 8px;
}
.demo-stage[data-scene=display] .stage-right {
    transform: translateY(-25px);
}
.demo-stage[data-scene=display] .stage-right .stage-content {
    background: #b9d69f;
}
.demo-stage[data-scene=share] .stage-left {
    transform: translateY(15px);
}
.demo-stage[data-scene=share] .stage-right {
    transform: translateY(-15px);
}
.demo-stage[data-scene=share] .stage-link b {
    background: #273a2d;
    color: var(--lime);
}
@keyframes cursor {
    50% {
        transform: translate(45px,-25px);
    }
}
.demo-footer {
    border-top: 1px solid #ced7c8;
}
.features {
    background: #18211c;
    color: #edf1e7;
}
.light h2 em {
    color: #829287;
}
.light>p {
    color: #99a79b;
}
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1px;
    background: #3a483c;
    border: 1px solid #3a483c;
}
.feature {
    background: #1c2820;
    padding: 30px;
    min-height: 330px;
    display: flex;
    flex-direction: column;
}
.feature-large {
    background: #c9f36b;
    color: #202d21;
}
.feature-large .feature-num,.feature-large p {
    color: #617b4d;
}
.feature-icon {
    font-size: 38px;
    margin: 45px 0 30px;
    font-weight: 400;
}
.feature h3 {
    font-size: 28px;
    line-height: 1.05;
    margin-bottom: 14px;
}
.feature p {
    color: #a1afa1;
    font-size: 13px;
    line-height: 1.7;
    max-width: 290px;
}
.feature-tag {
    font-size: 9px;
    letter-spacing: .12em;
    font-weight: 700;
    color: #8da18d;
    margin-top: auto;
    padding-top: 30px;
}
.feature-wide {
    grid-column: 1/-1;
    min-height: 190px;
    display: grid;
    grid-template-columns: 1fr 1fr 2fr 1fr;
    align-items: center;
    gap: 20px;
}
.feature-wide .feature-icon {
    margin: 0;
}
.feature-wide .feature-tag {
    padding: 0;
    text-align: right;
}
.steps {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.steps article {
    padding: 32px 35px 38px 0;
}
.steps article+article {
    border-left: 1px solid var(--line);
    padding-left: 35px;
}
.steps article>span {
    font-size: 11px;
    color: #9aa69a;
}
.steps h3 {
    font-size: 24px;
    margin: 55px 0 12px;
}
.steps p {
    font-size: 14px;
    line-height: 1.7;
    color: #788479;
    max-width: 280px;
}
.note {
    margin-top: 25px;
    color: #7d897d;
    font-size: 12px;
}
.note span {
    font-size: 18px;
    margin-right: 10px;
}
.final-cta {
    background: #293d2f;
    color: #eff6e9;
    overflow: hidden;
}
.final-inner {
    min-height: 490px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.final-cta h2 {
    font-size: clamp(60px,7vw,100px);
}
.final-cta h2 em {
    color: var(--lime);
}
.final-cta p {
    color: #aebdaf;
    margin: 20px 0 30px;
}
.final-cta .primary {
    background: var(--lime);
    color: #1d2b20;
}
.final-cta .primary:hover {
    background: #fff;
}
.final-art {
    width: 45%;
    height: 400px;
    position: relative;
    display: grid;
    place-items: center;
}
.final-ring {
    position: absolute;
    border: 1px solid #6e8870;
    border-radius: 50%;
    width: 340px;
    height: 340px;
}
.ring-b {
    width: 260px;
    height: 260px;
}
.final-star {
    font-size: 180px;
    color: var(--lime);
    line-height: 1;
}
.final-art>span {
    position: absolute;
    bottom: 25px;
    right: 0;
    font-size: 9px;
    line-height: 1.6;
    letter-spacing: .1em;
    color: #a6b8a6;
}
.footer {
    min-height: 125px;
    display: flex;
    align-items: center;
    gap: 40px;
}
.footer p {
    font-size: 12px;
    color: #89958a;
}
.footer>div {
    margin-left: auto;
    display: flex;
    gap: 30px;
    font-size: 12px;
    font-weight: 700;
}
@media(max-width:900px) {
    .wrap {
        width: min(100% - 48px,1400px);
    }
    .header nav {
        display: none;
    }
    .hero {
        grid-template-columns: 1fr;
    }
    .hero-copy {
        padding: 70px 0 0;
    }
    .hero-visual {
        height: 500px;
    }
    .hero-index {
        bottom: 20px;
    }
    .section {
        padding: 90px 0;
    }
    .demo-body {
        grid-template-columns: 1fr;
    }
    .demo-copy {
        border-right: 0;
        border-bottom: 1px solid #ced7c8;
    }
    .demo-copy p {
        min-height: 0;
    }
    .feature-grid {
        grid-template-columns: 1fr 1fr;
    }
    .feature-wide {
        grid-template-columns: 1fr 1fr;
    }
    .final-art {
        width: 40%;
    }
    .footer {
        flex-wrap: wrap;
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .footer>div {
        width: 100%;
        margin: 0;
    }
}
@media(max-width:600px) {
    .wrap {
        width: calc(100% - 36px);
    }
    .header {
        height: 75px;
    }
    .header-link {
        font-size: 11px;
    }
    .hero-copy {
        padding-top: 65px;
    }
    h1 {
        font-size: 55px;
    }
    .hero-copy>p {
        font-size: 15px;
    }
    .actions {
        align-items: flex-start;
        flex-direction: column;
    }
    .hero-meta {
        gap: 8px;
        font-size: 8px;
        margin-top: 35px;
    }
    .hero-meta span+span:before {
        margin-right: 8px;
    }
    .hero-visual {
        height: 390px;
    }
    .orbit {
        width: 320px;
        height: 320px;
        top: 30px;
    }
    .orbit-two {
        width: 250px;
        height: 250px;
        top: 65px;
    }
    .screen-back {
        top: 85px;
        height: 160px;
    }
    .screen-front {
        top: 150px;
        height: 190px;
    }
    .front-content {
        padding: 12px;
    }
    .front-content strong {
        font-size: 26px;
    }
    .connection-pill {
        top: 270px;
        font-size: 7px;
    }
    .top-label {
        top: 20px;
    }
    .bottom-label {
        bottom: 25px;
    }
    .hero-index {
        display: none;
    }
    .section-heading {
        display: block;
    }
    .section-heading>p {
        margin-top: 25px;
    }
    .section-heading h2 {
        font-size: 43px;
    }
    .demo-copy {
        padding: 35px 25px;
    }
    .demo-stage {
        min-height: 320px;
    }
    .stage-screen {
        height: 125px;
    }
    .stage-content {
        padding: 10px;
    }
    .stage-content>span {
        font-size: 24px;
    }
    .stage-link {
        font-size: 8px;
    }
    .stage-link b {
        padding: 6px;
    }
    .scene-caption {
        bottom: 25px;
    }
    .demo-footer {
        font-size: 7px;
        padding: 0 12px;
    }
    .feature-grid {
        grid-template-columns: 1fr;
    }
    .feature-wide {
        grid-column: auto;
        display: flex;
        min-height: 330px;
        align-items: stretch;
    }
    .feature-wide .feature-icon {
        margin: 45px 0 30px;
    }
    .feature-wide .feature-tag {
        text-align: left;
        padding-top: 30px;
    }
    .steps {
        grid-template-columns: 1fr;
    }
    .steps article,.steps article+article {
        padding: 25px 0;
        border-left: 0;
    }
    .steps article+article {
        border-top: 1px solid var(--line);
    }
    .steps h3 {
        margin: 25px 0 12px;
    }
    .final-inner {
        padding: 70px 0;
        min-height: 0;
    }
    .final-art {
        display: none;
    }
    .footer {
        display: block;
    }
    .footer p {
        margin: 20px 0;
    }
    .footer>div {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }
    .ticker span {
        padding: 0 20px;
    }
}
@media(prefers-reduced-motion:reduce) {
    *,*:before,*:after {
        animation-duration: .01ms!important;
        animation-iteration-count: 1!important;
        scroll-behavior: auto!important;
        transition-duration: .01ms!important;
    }
}
.arrange-section {
    background: #e5eadf;
}
.arrange-layout {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 9%;
    align-items: center;
}
.arrange-copy h2,.mobile-copy h2,.details-layout h2 {
    font-size: clamp(42px,4.8vw,68px);
    line-height: 1.03;
    margin: 25px 0;
}
.arrange-copy>p,.mobile-copy>p,.details-layout>div>p {
    max-width: 380px;
    color: #738071;
    font-size: 15px;
    line-height: 1.75;
}
.position-controls {
    display: flex;
    gap: 8px;
    margin: 35px 0 22px;
}
.position-controls button {
    border: 1px solid #c0ccba;
    background: transparent;
    padding: 14px 17px;
    color: #6d7c6b;
    cursor: pointer;
    min-width: 95px;
    text-align: left;
}
.position-controls button span {
    margin-left: 10px;
    font-size: 12px;
}
.position-controls button.active {
    background: #263b2c;
    color: #fff;
    border-color: #263b2c;
}
.arrange-copy>small,.mobile-copy>small {
    font-size: 9px;
    color: #91a08f;
    letter-spacing: .12em;
    font-weight: 700;
}
.arrange-board {
    background: #1c2b22;
    color: #dfe9d9;
    border: 1px solid #34483a;
    box-shadow: 20px 20px 0 #d4dece;
}
.board-top,.board-bottom {
    height: 55px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 22px;
    font-size: 9px;
    letter-spacing: .1em;
    font-weight: 700;
    color: #a5b8a4;
}
.board-top {
    border-bottom: 1px solid #415447;
}
.board-top i {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #bce86c;
    margin-left: 6px;
}
.board-canvas {
    position: relative;
    height: 385px;
    background-image: linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);
    background-size: 36px 36px;
}
.board-monitor {
    position: absolute;
    top: 32%;
    width: 33%;
    height: 42%;
    border: 1px solid #8aa788;
    background: #31483a;
    padding: 18px;
    display: flex;
    flex-direction: column;
    transition: left .45s,top .45s,background .45s;
}
.board-monitor:after {
    content: '';
    width: 35%;
    height: 8px;
    position: absolute;
    bottom: -9px;
    left: 32%;
    background: #91a990;
}
.board-monitor span {
    font: 700 11px 'Space Grotesk';
    color: #b4c9ae;
}
.board-monitor strong {
    font: 600 20px 'Space Grotesk';
    margin: auto 0 5px;
}
.board-monitor small {
    font-size: 8px;
    color: #a9beaa;
    letter-spacing: .09em;
}
.main-monitor {
    left: 13%;
    background: #c7ed82;
    color: #263b2c;
}
.main-monitor span,.main-monitor small {
    color: #657e52;
}
.second-monitor {
    left: 54%;
}
.board-path {
    position: absolute;
    top: 52%;
    left: 46%;
    width: 8%;
    border-top: 1px dashed #b0d09f;
    text-align: center;
    color: #c6ed91;
}
.board-path span {
    display: block;
    margin-top: -12px;
    background: #1c2b22;
}
.arrange-board[data-position=left] .main-monitor {
    left: 54%;
}
.arrange-board[data-position=left] .second-monitor {
    left: 13%;
}
.arrange-board[data-position=above] .main-monitor {
    left: 34%;
    top: 49%;
    height: 36%;
}
.arrange-board[data-position=above] .second-monitor {
    left: 34%;
    top: 5%;
    height: 36%;
}
.arrange-board[data-position=above] .board-path {
    transform: rotate(90deg);
    top: 45%;
    left: 46%;
}
.board-bottom {
    border-top: 1px solid #415447;
}
.mobile-section {
    background: #f1f1e9;
}
.mobile-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12%;
    align-items: center;
}
.phone-scene {
    min-height: 600px;
    background: #d8e3d0;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
}
.phone-scene:before,.phone-scene:after,.phone-orbit {
    content: '';
    position: absolute;
    border: 1px solid #b5c9ad;
    border-radius: 50%;
    width: 470px;
    height: 470px;
}
.phone-scene:after {
    width: 360px;
    height: 360px;
}
.phone-orbit {
    width: 560px;
    height: 560px;
}
.phone {
    width: 245px;
    height: 490px;
    border: 7px solid #26342a;
    border-radius: 35px;
    background: #26342a;
    box-shadow: 22px 30px 45px #4c62443d;
    z-index: 1;
    position: relative;
}
.phone-notch {
    position: absolute;
    width: 75px;
    height: 18px;
    border-radius: 0 0 12px 12px;
    background: #26342a;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    z-index: 2;
}
.phone-screen {
    height: 100%;
    border-radius: 28px;
    background: #eef2e8;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.phone-head {
    display: flex;
    justify-content: space-between;
    padding: 16px 18px 10px;
    font-size: 9px;
    font-weight: 700;
}
.phone-brand {
    font-weight: 700;
    font-size: 20px;
    padding: 20px 18px 12px;
}
.phone-brand span {
    font-size: 12px;
    margin-left: 4px;
}
.phone-content {
    padding: 12px 18px;
    flex: 1;
}
.phone-symbol {
    font-size: 34px;
    color: #74945f;
    margin: 12px 0;
}
.phone-content strong {
    font: 700 20px 'Space Grotesk';
    letter-spacing: -.04em;
}
.phone-content p {
    font-size: 11px;
    color: #849082;
    margin: 7px 0 20px;
}
.phone-preview {
    height: 135px;
    background: #293e30;
    border-radius: 5px;
    color: #d3ebc3;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.phone-preview span {
    font-size: 8px;
    letter-spacing: .1em;
}
.phone-preview b {
    font-size: 44px;
    align-self: center;
    font-weight: 400;
}
.phone-nav {
    display: flex;
    justify-content: space-around;
    border-top: 1px solid #d8dfd3;
    padding: 15px;
    font-size: 15px;
    color: #879583;
}
.phone-badge {
    position: absolute;
    right: 8%;
    bottom: 17%;
    background: #fff;
    padding: 15px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    z-index: 2;
    box-shadow: 0 12px 35px #53644c22;
}
.phone-badge .status-dot {
    margin-right: 8px;
}
.mobile-options {
    margin: 35px 0 22px;
}
.mobile-options button {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    padding: 20px 0;
    background: transparent;
    border: 0;
    border-top: 1px solid #d4dbcf;
    text-align: left;
    cursor: pointer;
    color: #8a9989;
}
.mobile-options button:last-child {
    border-bottom: 1px solid #d4dbcf;
}
.mobile-options button span {
    font-size: 10px;
}
.mobile-options button strong {
    flex: 1;
    color: #667565;
    font-size: 15px;
}
.mobile-options button b {
    font-size: 18px;
    font-weight: 400;
}
.mobile-options button.active strong,.mobile-options button.active b {
    color: #1c2a20;
}
.mobile-options button.active b {
    transform: translate(3px,-3px);
}
.details-section {
    background: #273b2e;
    color: #edf3e9;
    padding: 120px 0;
}
.details-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10%;
}
.details-layout h2 em {
    color: #9bb397;
}
.details-layout>div>p {
    color: #a9bbaa;
}
.detail-list article {
    display: flex;
    gap: 25px;
    padding: 25px 0;
    border-bottom: 1px solid #526655;
}
.detail-list article:first-child {
    border-top: 1px solid #526655;
}
.detail-list article>span {
    font-size: 10px;
    color: #9bb39c;
}
.detail-list article>div {
    flex: 1;
}
.detail-list h3 {
    font-size: 22px;
    margin-bottom: 8px;
}
.detail-list p {
    color: #afc0ae;
    font-size: 13px;
    line-height: 1.6;
}
.detail-list b {
    font-size: 18px;
    color: #badb98;
}
.app-section {
    padding-bottom: 40px;
}
.app-frame {
    background: #1b2720;
    padding: 12px;
    box-shadow: 20px 20px 0 #dce4d7;
}
.app-frame-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px 16px;
    color: #96a999;
    font-size: 9px;
    letter-spacing: .12em;
}
.app-frame img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #39433d;
}
.faq {
    margin-top: 100px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 30px;
}
.faq>h3 {
    font-size: 32px;
}
.faq details {
    border-top: 1px solid #cbd4c8;
}
.faq details:last-child {
    border-bottom: 1px solid #cbd4c8;
}
.faq summary {
    padding: 23px 30px 23px 0;
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    font-size: 14px;
    position: relative;
}
.faq summary::-webkit-details-marker {
    display: none;
}
.faq summary:after {
    content: '+';
    position: absolute;
    right: 0;
    font-size: 20px;
    font-weight: 400;
}
.faq details[open] summary:after {
    content: '−';
}
.faq details p {
    max-width: 600px;
    padding: 0 30px 25px 0;
    color: #738071;
    line-height: 1.7;
    font-size: 14px;
}
.download-meta {
    display: block;
    font-size: 9px;
    letter-spacing: .12em;
    color: #afc1ad;
    margin-top: 15px;
}
@media(max-width:900px) {
    .arrange-layout,.mobile-layout,.details-layout {
        grid-template-columns: 1fr;
        gap: 45px;
    }
    .arrange-board {
        max-width: 700px;
    }
    .mobile-copy {
        grid-row: 1;
    }
    .phone-scene {
        min-height: 560px;
    }
    .details-section {
        padding: 90px 0;
    }
    .faq {
        grid-template-columns: 1fr;
    }
}
@media(max-width:600px) {
    .position-controls button {
        min-width: 0;
        flex: 1;
    }
    .board-canvas {
        height: 280px;
    }
    .board-monitor {
        padding: 10px;
    }
    .board-monitor strong {
        font-size: 15px;
    }
    .board-monitor small {
        font-size: 6px;
    }
    .board-top,.board-bottom {
        font-size: 7px;
        padding: 0 12px;
    }
    .phone-scene {
        min-height: 550px;
    }
    .phone-badge {
        right: 3%;
        bottom: 10%;
    }
    .details-section {
        padding: 75px 0;
    }
    .app-frame {
        padding: 7px;
        box-shadow: 10px 10px 0 #dce4d7;
    }
    .faq {
        margin-top: 70px;
    }
}
.ticker {
    padding: 0;
}
.ticker-track {
    display: flex;
    width: max-content;
    animation: ticker-loop 48s linear infinite;
}
.ticker-group {
    display: flex;
    align-items: center;
    flex: none;
    white-space: nowrap;
}
.ticker-group span {
    padding: 18px 0;
    font-size: 10px;
    letter-spacing: .17em;
}
.ticker-group i {
    font-style: normal;
    padding: 0 36px;
    color: #91aa80;
}
@keyframes ticker-loop {
    to {
        transform: translateX(-50%);
    }
}
.header-link {
    white-space: nowrap;
}
.button.primary {
    justify-content: center;
}
.screen-wallpaper {
    padding: 20px;
    overflow: hidden;
}
.hero-desktop {
    height: 100%;
    background: #e6eedc;
    border-radius: 3px;
    box-shadow: 0 8px 20px #354a3830;
    overflow: hidden;
}
.hero-appbar {
    height: 19px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #d1dfc7;
    padding: 0 9px;
    color: #718b6b;
    font-size: 5px;
    letter-spacing: .08em;
}
.hero-app-body {
    display: flex;
    height: calc(100% - 19px);
}
.hero-sidebar {
    width: 22%;
    padding: 12px 8px;
    border-right: 1px solid #c6d5bd;
}
.hero-sidebar i {
    display: block;
    background: #b4c9aa;
    height: 3px;
    margin-bottom: 10px;
}
.hero-sidebar i:nth-child(2) {
    width: 65%;
}
.hero-sidebar i:nth-child(3) {
    width: 80%;
}
.hero-project {
    padding: 12px;
    width: 78%;
    color: #496047;
}
.hero-project-head {
    display: flex;
    justify-content: space-between;
    font-size: 5px;
    letter-spacing: .1em;
}
.hero-project>strong {
    display: block;
    font: 700 clamp(10px,1.1vw,16px) 'Space Grotesk';
    margin: 10px 0;
}
.hero-tiles {
    display: flex;
    gap: 5px;
    height: 30%;
}
.hero-tiles i {
    flex: 1;
    background: #b6d09f;
}
.hero-tiles i:nth-child(2) {
    background: #d0dfbc;
}
.hero-tiles i:nth-child(3) {
    background: #a5be99;
}
.hero-progress {
    margin-top: 10px;
    height: 3px;
    background: #d1dfc8;
}
.hero-progress span {
    display: block;
    width: 62%;
    height: 100%;
    background: #7b9b71;
}
.front-content {
    position: relative;
    overflow: hidden;
}
.hero-cursor {
    position: absolute;
    color: #24372b;
    text-shadow: -1px -1px #fff,1px 1px #fff,0 2px 3px #1d2a1e88;
    font-size: 23px;
    line-height: 1;
    transform: rotate(-45deg);
    pointer-events: none;
    z-index: 3;
}
.hero-cursor-front {
    top: 63%;
    left: 30%;
    animation: hero-source 6s ease-in-out infinite;
}
.hero-cursor-back {
    top: 43%;
    left: 10%;
    animation: hero-target 6s ease-in-out infinite;
}
@keyframes hero-source {
    0%,8% {
        opacity: 0;
        transform: translate(0,15px) rotate(-45deg);
    }
    15% {
        opacity: 1;
    }
    42% {
        opacity: 1;
        transform: translate(120px,-45px) rotate(-45deg);
    }
    45%,100% {
        opacity: 0;
        transform: translate(130px,-48px) rotate(-45deg);
    }
}
@keyframes hero-target {
    0%,44% {
        opacity: 0;
        transform: translate(0,15px) rotate(-45deg);
    }
    46% {
        opacity: 1;
    }
    73%,85% {
        opacity: 1;
        transform: translate(75px,-20px) rotate(-45deg);
    }
    92%,100% {
        opacity: 0;
        transform: translate(75px,-20px) rotate(-45deg);
    }
}
.demo-stage {
    display: block;
}
.stage-illustration {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}
.stage-screen {
    width: 33%;
    height: 200px;
    flex: none;
    position: relative;
    overflow: hidden;
    transition: transform .5s,border-radius .5s,box-shadow .5s;
}
.stage-content {
    position: relative;
    background: #b9d69f;
    padding: 0;
    overflow: hidden;
}
.stage-desktop {
    position: absolute;
    inset: 0;
    background: #b8d2a5;
    overflow: hidden;
}
.stage-right .stage-desktop {
    background: #91ac89;
}
.desktop-menu {
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    color: #5e765c;
    font-size: 6px;
    font-weight: 700;
    letter-spacing: .07em;
    background: #d8e7cb;
}
.desktop-window {
    position: absolute;
    left: 12%;
    top: 25%;
    width: 76%;
    height: 56%;
    background: #edf3e6;
    box-shadow: 0 5px 10px #3b523a20;
    padding: 10px;
    color: #486348;
}
.desktop-window small {
    display: block;
    font-size: 6px;
    letter-spacing: .08em;
}
.desktop-window strong {
    display: block;
    font: 700 clamp(10px,1.3vw,18px) 'Space Grotesk';
    margin: 8px 0;
}
.desktop-cards {
    display: flex;
    gap: 4px;
    height: 25%;
}
.desktop-cards i {
    flex: 1;
    background: #c1d7b1;
}
.desktop-cards i:nth-child(2) {
    background: #d6e5c9;
}
.desktop-cards i:nth-child(3) {
    background: #a7c49b;
}
.desktop-dock {
    position: absolute;
    bottom: 4px;
    left: 25%;
    width: 50%;
    text-align: center;
    border-radius: 4px;
    background: #314a38aa;
    color: #d8e9cc;
    font-size: 8px;
    padding: 3px;
}
.stage-bridge {
    width: 9%;
    height: 200px;
    position: relative;
    flex: none;
}
.bridge-line {
    position: absolute;
    top: 50%;
    width: 100%;
    border-top: 1px dashed #8da886;
}
.bridge-node {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    padding: 9px;
    background: #c1e998;
    color: #344e32;
    font-size: 13px;
}
.handoff-cursor {
    position: absolute;
    z-index: 4;
    color: #263b2d;
    text-shadow: -1px -1px white,1px 1px white,0 2px 3px #26382a88;
    font-size: 22px;
    line-height: 1;
    transform: rotate(-45deg);
}
.cursor-source {
    top: 65%;
    left: 30%;
    animation: source-cursor 5.5s ease-in-out infinite;
}
.cursor-target {
    top: 65%;
    left: 0;
    animation: target-cursor 5.5s ease-in-out infinite;
}
@keyframes source-cursor {
    0%,8% {
        opacity: 0;
        left: 30%;
    }
    15% {
        opacity: 1;
    }
    43% {
        opacity: 1;
        left: 96%;
    }
    44%,100% {
        opacity: 0;
        left: 100%;
    }
}
@keyframes target-cursor {
    0%,43% {
        opacity: 0;
        left: 0;
    }
    44% {
        opacity: 1;
        left: 0;
    }
    72%,83% {
        opacity: 1;
        left: 50%;
    }
    92%,100% {
        opacity: 0;
        left: 50%;
    }
}
.stage-mode-label {
    display: none;
    position: absolute;
    top: calc(50% + 125px);
    color: #728771;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
}
.control-label {
    display: block;
}
.stage-mode-label span {
    margin-left: 20px;
}
.share-file,.transfer-file {
    display: none;
}
.demo-stage[data-scene=display] .stage-screen {
    transform: none;
    box-shadow: 0 15px 30px #344b3020;
}
.demo-stage[data-scene=display] .stage-left {
    transform: translateX(4px);
}
.demo-stage[data-scene=display] .stage-right {
    transform: translateX(-4px);
}
.demo-stage[data-scene=display] .stage-bridge {
    width: 0;
    overflow: hidden;
}
.demo-stage[data-scene=display] .stage-right .stage-desktop {
    background: #b8d2a5;
}
.demo-stage[data-scene=display] .stage-right .desktop-menu {
    background: #d8e7cb;
}
.demo-stage[data-scene=display] .stage-right .desktop-window {
    left: -11%;
    width: 100%;
    background: #e7f0dc;
}
.demo-stage[data-scene=display] .handoff-cursor,.demo-stage[data-scene=share] .handoff-cursor {
    display: none;
}
.demo-stage[data-scene=display] .control-label,.demo-stage[data-scene=share] .control-label {
    display: none;
}
.demo-stage[data-scene=display] .display-label,.demo-stage[data-scene=share] .share-label {
    display: block;
}
.demo-stage[data-scene=share] .stage-left,.demo-stage[data-scene=share] .stage-right {
    transform: none;
}
.demo-stage[data-scene=share] .desktop-window {
    opacity: .35;
}
.demo-stage[data-scene=share] .share-file {
    display: flex;
    position: absolute;
    z-index: 2;
    top: 36%;
    left: 30%;
    width: 42%;
    padding: 9px;
    background: #f6f8f1;
    box-shadow: 0 5px 15px #2a3d2c26;
    align-items: center;
    gap: 6px;
    color: #49664a;
}
.share-file span {
    font-size: 24px;
}
.share-file small {
    font-size: 7px;
}
.demo-stage[data-scene=share] .target-file {
    animation: file-arrive 4s infinite;
}
.demo-stage[data-scene=share] .transfer-file {
    display: block;
    position: absolute;
    z-index: 3;
    top: 40%;
    left: 0;
    color: #405a41;
    background: #f4f8eb;
    padding: 5px;
    animation: file-transfer 4s ease-in-out infinite;
}
.demo-stage[data-scene=share] .bridge-node {
    opacity: .35;
}
@keyframes file-transfer {
    0%,15% {
        opacity: 0;
        left: -25%;
    }
    25% {
        opacity: 1;
    }
    70% {
        opacity: 1;
        left: 105%;
    }
    80%,100% {
        opacity: 0;
        left: 125%;
    }
}
@keyframes file-arrive {
    0%,65% {
        opacity: .25;
        transform: scale(.9);
    }
    80%,100% {
        opacity: 1;
        transform: scale(1);
    }
}
.board-monitor {
    padding: 5px;
    background: #26382c;
    border: 1px solid #607b65;
    border-radius: 5px;
    overflow: visible;
}
.board-monitor:after {
    height: 10px;
    bottom: -11px;
    background: #728e73;
    clip-path: polygon(30% 0,70% 0,78% 70%,100% 70%,100% 100%,0 100%,0 70%,22% 70%);
}
.board-screen {
    background: #c7ed82;
    height: 100%;
    padding: 12px;
    position: relative;
    overflow: hidden;
    color: #263b2c;
}
.second-monitor .board-screen {
    background: #56735b;
    color: #f0f6e9;
}
.board-screen>span:first-child {
    display: block;
    font-size: 9px;
    color: inherit;
}
.board-screen>span:first-child b {
    float: right;
    font-size: 7px;
    letter-spacing: 2px;
}
.board-screen strong {
    position: absolute;
    bottom: 27px;
    left: 12px;
    font-size: 17px;
}
.board-screen small {
    position: absolute;
    bottom: 12px;
    left: 12px;
    font-size: 7px;
    color: inherit;
    opacity: .7;
}
.board-window {
    position: absolute;
    right: 10px;
    top: 28px;
    width: 42%;
    height: 40%;
    padding: 7px;
    background: #eff8e1aa;
}
.second-monitor .board-window {
    background: #bdd3b3aa;
}
.board-window i {
    display: block;
    width: 80%;
    height: 2px;
    background: #74936d;
    margin: 4px 0;
}
.board-window i:nth-child(2) {
    width: 55%;
}
.board-window i:nth-child(3) {
    width: 70%;
}
.board-cursor {
    position: absolute;
    top: 45%;
    font-size: 18px;
    transform: rotate(-45deg);
    text-shadow: 1px 1px white;
    color: #213628!important;
}
.board-cursor-main {
    left: 20%;
    animation: board-source 5s infinite;
}
.board-cursor-second {
    left: 10%;
    animation: board-target 5s infinite;
}
@keyframes board-source {
    0%,10% {
        opacity: 0;
        left: 20%;
    }
    18% {
        opacity: 1;
    }
    45% {
        opacity: 1;
        left: 95%;
    }
    46%,100% {
        opacity: 0;
        left: 100%;
    }
}
@keyframes board-target {
    0%,45% {
        opacity: 0;
        left: 0;
    }
    46% {
        opacity: 1;
    }
    75%,85% {
        opacity: 1;
        left: 55%;
    }
    95%,100% {
        opacity: 0;
        left: 55%;
    }
}
.arrange-board[data-position=left] .board-cursor-main {
    animation-name: board-source-left;
}
.arrange-board[data-position=left] .board-cursor-second {
    animation-name: board-target-left;
}
@keyframes board-source-left {
    0%,10% {
        opacity: 0;
        left: 70%;
    }
    18% {
        opacity: 1;
    }
    45% {
        opacity: 1;
        left: 0;
    }
    46%,100% {
        opacity: 0;
        left: 0;
    }
}
@keyframes board-target-left {
    0%,45% {
        opacity: 0;
        left: 95%;
    }
    46% {
        opacity: 1;
    }
    75%,85% {
        opacity: 1;
        left: 45%;
    }
    95%,100% {
        opacity: 0;
        left: 45%;
    }
}
.arrange-board[data-position=above] .board-cursor-main {
    animation-name: board-source-up;
}
.arrange-board[data-position=above] .board-cursor-second {
    animation-name: board-target-up;
}
@keyframes board-source-up {
    0%,10% {
        opacity: 0;
        top: 70%;
        left: 50%;
    }
    18% {
        opacity: 1;
    }
    45% {
        opacity: 1;
        top: 0;
        left: 50%;
    }
    46%,100% {
        opacity: 0;
        top: 0;
        left: 50%;
    }
}
@keyframes board-target-up {
    0%,45% {
        opacity: 0;
        top: 90%;
        left: 50%;
    }
    46% {
        opacity: 1;
    }
    75%,85% {
        opacity: 1;
        top: 40%;
        left: 50%;
    }
    95%,100% {
        opacity: 0;
        top: 40%;
        left: 50%;
    }
}
.phone-preview {
    display: block;
    height: 150px;
    padding: 0;
    overflow: hidden;
    background: #293e30;
}
.phone-demo {
    display: none;
    height: 100%;
    position: relative;
}
.phone-preview[data-mobile-scene=remote] .phone-demo-remote,.phone-preview[data-mobile-scene=camera] .phone-demo-camera,.phone-preview[data-mobile-scene=share] .phone-demo-share,.phone-preview[data-mobile-scene=game] .phone-demo-game {
    display: block;
}
.phone-demo-bar {
    height: 24px;
    padding: 9px 10px 0;
    font-size: 7px;
    letter-spacing: .08em;
    color: #d2e4c9;
}
.phone-demo-bar span {
    float: right;
    color: #b9e77d;
}
.phone-mini-desktop {
    height: 86px;
    margin: 0 9px;
    background: #91ac89;
    position: relative;
    padding: 12px;
}
.mini-window {
    background: #e5efdc;
    width: 75%;
    height: 80%;
    padding: 8px;
}
.mini-window i {
    display: block;
    width: 80%;
    height: 3px;
    background: #b3cba8;
    margin-bottom: 6px;
}
.mini-window i:nth-child(2) {
    width: 55%;
}
.mini-cursor {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: rotate(-45deg);
    font-size: 20px;
    color: #25392a;
    text-shadow: 1px 1px white;
    animation: mini-move 3s ease-in-out infinite;
}
@keyframes mini-move {
    50% {
        transform: translate(25px,-15px) rotate(-45deg);
    }
}
.phone-control-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    color: #d5e6cd;
    font-size: 7px;
    letter-spacing: .06em;
}
.phone-control-row span:first-child,.phone-control-row span:last-child {
    font-size: 12px;
}
.camera-view {
    position: relative;
    margin: 0 9px;
    height: 86px;
    background: linear-gradient(135deg,#95b38a,#d5e3c7);
    overflow: hidden;
}
.camera-head {
    position: absolute;
    left: 43%;
    top: 18%;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #57765d;
}
.camera-body {
    position: absolute;
    left: 32%;
    top: 48%;
    width: 50px;
    height: 50px;
    border-radius: 50% 50% 0 0;
    background: #57765d;
}
.camera-corners {
    position: absolute;
    inset: 10px;
    border: 1px solid #f2f8eaa0;
}
.share-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 5px 9px;
    padding: 8px;
    background: #eef4e8;
    color: #3c5941;
    border-radius: 3px;
}
.share-preview>span {
    font-size: 19px;
}
.share-preview div {
    flex: 1;
}
.share-preview b,.share-preview small {
    display: block;
    font-size: 8px;
}
.share-preview small {
    font-size: 7px;
    color: #879b86;
    margin-top: 3px;
}
.share-preview strong {
    font-size: 14px;
}
.game-landscape {
    height: 86px;
    margin: 0 9px;
    background: linear-gradient(#a9c69a,#d7e8bf);
    position: relative;
    overflow: hidden;
}
.game-sun {
    position: absolute;
    top: 12px;
    right: 27px;
    width: 22px;
    height: 22px;
    background: #e9f6cc;
    border-radius: 50%;
}
.game-mountain {
    position: absolute;
    bottom: -35px;
    left: 0;
    width: 100%;
    height: 90px;
    background: #668d70;
    clip-path: polygon(0 75%,28% 20%,49% 62%,68% 5%,100% 70%,100% 100%,0 100%);
}
.game-landscape>span {
    position: absolute;
    top: 22px;
    left: 35px;
    color: white;
    font-size: 13px;
}
.phone-content {
    padding-top: 4px;
}
.phone-symbol {
    margin: 5px 0;
    font-size: 27px;
}
.phone-content p {
    margin: 5px 0 12px;
}
.phone-brand {
    padding-top: 14px;
    padding-bottom: 8px;
}
@media(max-width:600px) {
    .stage-screen {
        height: 140px;
    }
    .stage-bridge {
        height: 140px;
    }
    .stage-mode-label {
        top: calc(50% + 90px);
        font-size: 7px;
    }
    .desktop-window {
        padding: 5px;
    }
    .desktop-window strong {
        font-size: 10px;
        margin: 4px 0;
    }
    .desktop-menu {
        font-size: 5px;
    }
    .share-file small {
        display: none;
    }
    .hero-cursor {
        font-size: 17px;
    }
    .board-screen {
        padding: 7px;
    }
    .board-screen strong {
        font-size: 13px;
        bottom: 22px;
        left: 7px;
    }
    .board-screen small {
        font-size: 6px;
        bottom: 8px;
        left: 7px;
    }
    .board-window {
        right: 6px;
        top: 20px;
    }
    .board-cursor {
        font-size: 14px;
    }
}
@media(prefers-reduced-motion:reduce) {
    .hero-cursor-front,.cursor-source,.board-cursor-main {
        opacity: 1;
        animation: none;
    }
    .hero-cursor-back,.cursor-target,.board-cursor-second {
        opacity: 0;
        animation: none;
    }
    .ticker-track {
        animation: none;
    }
    .demo-stage[data-scene=share] .transfer-file {
        display: none;
    }
    .demo-stage[data-scene=share] .target-file {
        animation: none;
        opacity: 1;
    }
}
.ticker .ticker-track {
    animation: ticker-loop 48s linear infinite;
}
.ticker .ticker-group {
    animation: none;
    text-align: left;
    min-width: 0;
}
.ticker .ticker-group span {
    padding: 18px 0;
}
.stage-content>.handoff-cursor {
    font: 400 22px/1 'DM Sans',sans-serif;
    opacity: 1;
}
.stage-content>.cursor-source {
    animation: source-cursor 5.5s ease-in-out infinite;
}
.stage-content>.cursor-target {
    animation: target-cursor 5.5s ease-in-out infinite;
}
@media(prefers-reduced-motion:reduce) {
    .ticker .ticker-track {
        animation: none;
    }
    .stage-content>.cursor-source {
        animation: none;
        opacity: 1;
    }
    .stage-content>.cursor-target {
        animation: none;
        opacity: 0;
    }
}
.screen-wallpaper {
    position: relative;
}
@keyframes hero-source {
    0%,8% {
        opacity: 0;
        left: 30%;
        top: 63%;
        transform: rotate(-45deg);
    }
    15% {
        opacity: 1;
    }
    43% {
        opacity: 1;
        left: 100%;
        top: 44%;
        transform: rotate(-45deg);
    }
    44%,100% {
        opacity: 0;
        left: 100%;
        top: 44%;
        transform: rotate(-45deg);
    }
}
@keyframes hero-target {
    0%,43% {
        opacity: 0;
        left: 0;
        top: 44%;
        transform: rotate(-45deg);
    }
    44% {
        opacity: 1;
        left: 0;
        top: 44%;
        transform: rotate(-45deg);
    }
    73%,85% {
        opacity: 1;
        left: 42%;
        top: 30%;
        transform: rotate(-45deg);
    }
    92%,100% {
        opacity: 0;
        left: 42%;
        top: 30%;
        transform: rotate(-45deg);
    }
}