@font-face{font-family:Onest;src:url('./fonts/onest-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Onest;src:url('./fonts/onest-semibold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
:root{--paper:#e5e2ef;--ink:#24212c;--muted:#645f72;--violet:#5944ba;--line:#c7c2d4;--ease:cubic-bezier(.16,1,.3,1);font-family:Onest,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button{border:0}svg{display:block;flex-shrink:0}::selection{background:var(--violet);color:#fff}:focus-visible{outline:2px solid var(--violet);outline-offset:6px}html{scrollbar-color:var(--muted) var(--paper)}
.page{position:relative;display:grid;grid-template-rows:auto 1fr auto;min-height:100svh;overflow:clip}
.header{position:relative;z-index:3;display:flex;align-items:center;gap:40px}.brand{display:inline-flex;align-items:center;gap:7px;font-size:32px;line-height:1;font-weight:600;letter-spacing:-.04em}.brand-mark{width:32px;height:32px}.brand-description{font-size:11px;line-height:1.4;color:var(--muted)}nav{margin-left:auto;display:flex;align-items:center;gap:32px;font-size:12px}.text-link{text-decoration-line:underline;text-decoration-color:transparent;text-underline-offset:5px;transition:text-decoration-color .2s}.text-link:hover{text-decoration-color:currentColor}.account-link{display:flex;gap:14px;align-items:center;padding:10px 0}.account-link svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.5;transition:transform .3s var(--ease)}.account-link:hover svg{transform:translate(2px,-2px)}
.hero{position:relative;display:flex;align-items:center;min-height:620px}.hero-copy{position:relative;z-index:2;width:53%;padding:48px 0 70px;pointer-events:none}.hero-copy a{pointer-events:auto}h1{margin:0 0 30px;font-size:clamp(88px,10.8vw,172px);line-height:.88;font-weight:600;letter-spacing:-.04em}h1>span{display:inline-flex;align-items:baseline}.headline-dot{fill:var(--violet);width:.13em;height:.13em;margin-left:.045em}.intro p{margin:0;font-size:clamp(18px,1.65vw,24px);line-height:1.4;letter-spacing:-.025em}.intro p>span{color:var(--muted)}.intro .explanation{font-size:13px;line-height:1.65;letter-spacing:0;color:var(--muted);margin-top:14px;max-width:340px}.actions{display:flex;align-items:center;gap:25px;margin-top:28px}.connect{display:inline-flex;align-items:center;gap:28px;padding:7px 7px 7px 24px;min-height:58px;background:var(--ink);color:#fff;border-radius:8px;font-size:14px;transition:background .25s}.connect:hover{background:var(--violet)}.button-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:4px;background:#45414f}.button-icon svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.5;transition:transform .3s var(--ease)}.connect:hover svg{transform:translateX(3px)}.telegram{display:inline-flex;align-items:center;gap:9px;font-size:12px;min-height:44px}.telegram>svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.3;stroke-linejoin:round}.telegram span{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;transition:text-decoration-color .2s}.telegram:hover span{text-decoration-color:currentColor}
.art{position:absolute;width:72%;height:calc(100% + 50px);right:-7%;top:-35px;pointer-events:none}#route-art,.art-fallback{position:absolute;inset:0;width:100%;height:100%;display:block}.art-fallback{opacity:.45}.art.ready .art-fallback{display:none}.scene-caption{position:absolute;z-index:1;right:1%;top:20%;display:flex;align-items:flex-start;gap:12px;color:var(--muted);font-size:11px;line-height:1.5}.caption-line{width:34px;height:1px;margin-top:7px;background:var(--muted)}.scenarios{position:absolute;right:7%;bottom:28px;z-index:2;text-align:center}.scenario-list{display:flex;align-items:center;gap:4px;border:1px solid #bcb5cf;border-radius:40px;padding:5px;background:var(--paper)}.scenario{display:flex;align-items:center;justify-content:center;gap:7px;background:transparent;min-height:40px;padding:0 16px;border-radius:30px;font-size:11px;transition:background .25s,color .25s}.scenario svg{height:15px;width:15px;stroke:currentColor;stroke-width:1.3;stroke-linejoin:round}.scenario:hover{background:#d5cfe6}.scenario.active{background:var(--ink);color:#fff}.scenario-note{font-size:11px;color:var(--muted);margin:11px 0 0;min-height:17px}
.footer{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:14px;font-size:11px}.footer-line span{color:var(--muted)}.footer-end{display:flex;align-items:center;gap:24px}.copyright{color:var(--muted)}.motion-control{display:grid;place-items:center;background:transparent;border:1px solid var(--line);border-radius:50%;width:32px;height:32px}.motion-control[hidden]{display:none}.motion-control svg{width:15px;height:15px;fill:currentColor}.play-icon{display:none}.motion-control[aria-pressed=true] .pause-icon{display:none}.motion-control[aria-pressed=true] .play-icon{display:block}.footer-help{display:none}
@media(min-width:1700px){.hero{min-height:720px}.hero-copy{padding-bottom:90px}.scenarios{right:12%;bottom:8%}.scene-caption{right:5%}}
@media(min-width:901px) and (max-height:800px){.hero{min-height:520px}.hero-copy{padding:40px 0 52px}h1{font-size:clamp(86px,9.7vw,138px);margin-bottom:22px}.intro p{font-size:20px}.actions{margin-top:22px}.scenarios{bottom:16px}.art{top:-24px;height:calc(100% + 25px)}}
@media(max-width:1100px) and (min-width:701px){.header{gap:24px}nav{gap:22px}.hero-copy{width:57%}h1{font-size:11.5vw}.actions{gap:17px}.connect{padding-left:18px;gap:16px}.scenarios{right:1%}.scenario{padding:0 12px}.art{right:-12%;width:76%}.scene-caption{right:0;top:12%}}
@media(max-width:700px){.header{gap:0}.brand{font-size:26px}.brand-mark{width:26px;height:26px}.brand-description,.instruction-link{display:none}nav{font-size:11px}.account-link{gap:7px}.account-link svg{width:14px;height:14px}.hero{min-height:0;display:grid;grid-template-columns:1fr;align-content:center;padding:218px 0 18px}.art{width:110%;height:360px;right:-19%;top:-37px}.hero-copy{width:100%;padding:0;pointer-events:none}h1{font-size:clamp(78px,19vw,130px);line-height:.87;margin-bottom:22px;max-width:100%;position:relative}.intro p{font-size:18px;line-height:1.4}.intro .explanation{font-size:11px;line-height:1.55;margin-top:10px;max-width:290px}.desktop-break{display:none}.actions{gap:18px;margin-top:20px}.connect{min-height:52px;padding:6px 6px 6px 18px;gap:19px;font-size:12px}.button-icon{width:38px;height:38px}.telegram{font-size:11px;gap:7px}.telegram>svg{width:16px;height:16px}.scene-caption{right:auto;left:0;top:78px;font-size:10px;gap:8px}.caption-line{width:20px}.scenarios{position:relative;right:auto;bottom:auto;margin-top:25px;justify-self:start;text-align:left}.scenario-list{border:0;padding:0;background:transparent;gap:6px}.scenario{font-size:10px;min-height:34px;padding:0 12px;border:1px solid var(--line)}.scenario.active{border-color:var(--ink)}.scenario-note{margin-top:8px;font-size:10px}.footer{font-size:9px;padding-top:14px;align-items:center}.footer-line{max-width:145px;line-height:1.6}.footer-line span{display:block}.footer-end{gap:12px}.footer-help{display:block}.copyright{display:none}.motion-control{width:28px;height:28px}}
@media(max-width:700px) and (min-height:850px){.hero{padding-top:270px}.art{height:430px;top:-36px}.scene-caption{top:104px}}
@media(max-width:700px) and (max-height:740px){.hero{padding-top:160px}.art{height:290px;top:-48px}h1{font-size:clamp(70px,18vw,100px);margin-bottom:16px}.scene-caption{top:48px}.scenarios{margin-top:18px}.actions{margin-top:15px}}
@media(max-width:360px){.actions{gap:12px}.connect{padding-left:13px;gap:10px}.telegram{font-size:10px}.scenario{padding:0 9px}h1{font-size:19vw}}
@media(max-width:700px) and (min-height:741px) and (max-height:849px){.hero{padding-top:clamp(175px,23svh,200px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* A single sentence carries the explanation; the rest stays quiet. */
.intro p{color:var(--muted);font-size:clamp(17px,1.45vw,21px);line-height:1.5}
.footer{justify-content:flex-end}
.scenarios{bottom:44px}
@media(max-width:700px){.intro p{font-size:17px}.scenarios{bottom:auto}.footer{padding-top:10px}}
/* Routing is visible as a journey through JetFree, not an abstract object. */
.button-icon{background:transparent;border-radius:0;border-left:1px solid rgba(255,255,255,.22)}
.art{width:62%;right:-3%;height:78%;top:7%}
.route-source,.route-core,.route-destination{position:absolute;z-index:1;font-size:12px;line-height:1;white-space:nowrap}
.route-source{left:16%;top:50%;transform:translate(-50%,17px);color:var(--muted)}
.route-core{left:46%;top:48%;transform:translate(-50%,-50%);padding:14px 18px;border-radius:9px;background:var(--ink);color:#fff;font-size:18px;font-weight:600;letter-spacing:-.04em}
.route-destination{left:82%;transform:translate(15px,-50%);color:var(--muted);transition:color .3s}
.route-video{top:20%}.route-work{top:48%}.route-talk{top:76%}
.art[data-scene=video] .route-video,.art[data-scene=work] .route-work,.art[data-scene=talk] .route-talk{color:var(--violet)}
@media(max-width:1100px) and (min-width:701px){.art{width:65%;right:-7%}.route-destination{font-size:10px;transform:translate(11px,-50%)}.route-core{font-size:16px;padding:12px}}
@media(max-width:700px){.art{width:105%;height:255px;right:-2%;top:-12px}.route-core{font-size:15px;padding:11px 13px}.route-source,.route-destination{font-size:10px}.route-destination{transform:translate(10px,-50%)}}
@media(max-width:700px) and (max-height:740px){.art{height:195px;top:-12px}}
@media(max-width:700px) and (min-height:850px){.art{height:300px;top:-10px}}

/* Shared page frame: identical on the homepage and instructions. */
:root{--shell-inline:44px;--shell-top:30px;--shell-bottom:24px}
.site-shell{width:100%;max-width:none;margin:0;min-height:100svh;padding:var(--shell-top) var(--shell-inline) var(--shell-bottom)}
.header{line-height:normal}
@media(min-width:1700px){:root{--shell-inline:4vw}}
@media(min-width:901px) and (max-height:800px){:root{--shell-top:22px;--shell-bottom:18px}}
@media(max-width:1100px) and (min-width:701px){:root{--shell-inline:28px}}
@media(max-width:700px){:root{--shell-inline:22px;--shell-top:20px;--shell-bottom:18px}}
@media(max-width:700px) and (max-height:740px){:root{--shell-top:16px;--shell-bottom:12px}}
@media(max-width:360px){:root{--shell-inline:17px}}
/* Slow ambient color lives behind the content; controls and copy stay still. */
.ambient{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambient>div{position:absolute;aspect-ratio:1;animation-play-state:var(--ambient-play-state,running)}
.ambient-violet{width:min(80vw,1100px);right:-14%;top:-32%;background:radial-gradient(ellipse at center,rgba(155,126,232,.42) 0%,rgba(171,151,234,.24) 32%,rgba(181,163,235,0) 69%);animation:ambient-violet-drift 17s ease-in-out infinite alternate;animation-play-state:var(--ambient-play-state,running)}
.ambient-rose{width:min(70vw,980px);right:6%;bottom:-58%;background:radial-gradient(ellipse at center,rgba(233,163,202,.36) 0%,rgba(230,186,217,.18) 35%,rgba(230,186,217,0) 69%);animation:ambient-rose-drift 21s ease-in-out -8s infinite alternate;animation-play-state:var(--ambient-play-state,running)}
.ambient-light{width:min(48vw,640px);right:17%;top:2%;background:radial-gradient(ellipse at center,rgba(250,246,255,.62),rgba(246,240,255,0) 68%);animation:ambient-light-drift 13s ease-in-out -4s infinite alternate;animation-play-state:var(--ambient-play-state,running)}
.hero{z-index:1}
@keyframes ambient-violet-drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-14%,22%) scale(1.08)}100%{transform:translate(-28%,42%) scale(.94)}}
@keyframes ambient-rose-drift{0%{transform:translate(8%,4%) scale(1)}100%{transform:translate(-28%,-34%) scale(1.16)}}
@keyframes ambient-light-drift{0%{transform:translate(0,0) scale(.9)}100%{transform:translate(30%,48%) scale(1.2)}}
@media(max-width:700px){.ambient-violet{width:145vw;right:-65%;top:-17%}.ambient-rose{width:145vw;right:-65%;bottom:-12%;opacity:.65}.ambient-light{width:100vw;right:-25%;top:5%}}
/* Preserve the homepage's original frame independently of the reading layout. */
.page{padding:30px 44px 24px;grid-template-columns:minmax(0,1fr)}
.page>.hero,.page>.header{min-width:0}
@media(min-width:1700px){.page{padding-left:4vw;padding-right:4vw}}
@media(min-width:901px) and (max-height:800px){.page{padding-top:22px;padding-bottom:18px}}
@media(max-width:1100px) and (min-width:701px){.page{padding-left:28px;padding-right:28px}}
@media(max-width:700px){.page{padding:20px 22px 18px}}
@media(max-width:700px) and (max-height:740px){.page{padding-top:16px;padding-bottom:12px}}
@media(max-width:360px){.page{padding-left:17px;padding-right:17px}}
/* Destination controls are part of the route, not a second row of UI. */
.route-destination{display:flex;align-items:center;gap:9px;min-height:46px;padding:10px 15px;transform:translate(8px,-50%);border-radius:25px;border:1px solid rgba(118,100,164,.26);background:rgba(244,241,251,.8);color:var(--muted);pointer-events:auto;transition:color .25s,background .25s,border-color .25s,box-shadow .25s}
.route-destination svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.route-destination:hover{border-color:var(--violet);background:#f6f2ff;color:var(--violet)}
.art .route-destination.active{color:#fff;background:var(--violet);border-color:transparent;box-shadow:0 8px 20px -10px rgba(70,43,139,.45)}
.route-destination:active{background:#493598}
.route-core{padding:15px 19px;border-radius:11px;box-shadow:0 12px 28px -15px rgba(35,20,67,.5)}
@media(max-width:1100px) and (min-width:701px){.route-destination{font-size:11px;gap:6px;padding:9px 11px;min-height:42px;transform:translate(4px,-50%)}.route-destination svg{width:15px;height:15px}}
@media(max-width:700px){.route-destination{font-size:10px;gap:6px;min-height:40px;padding:8px 11px;transform:translate(-30%,-50%)}.route-destination svg{width:14px;height:14px}.route-core{padding:12px 14px}.hero-copy{padding-bottom:20px}}
@media(min-width:1101px){.route-destination{transform:translate(-20%,-50%)}}
@media(min-width:701px) and (max-width:1100px){.route-destination{transform:translate(-45%,-50%)}}
/* The exact two-stroke JetFree mark is the routing junction. */
.route-core{display:grid;place-items:center;width:100px;height:100px;padding:0;background:transparent;border-radius:0;box-shadow:none;color:var(--ink)}
.route-mark{width:100%;height:100%;overflow:visible}
.route-mark-first,.route-mark-second{fill:var(--ink)}
.route-mark-echo{fill:none;stroke:var(--violet);stroke-width:.35;opacity:0}
@media(max-width:1100px) and (min-width:701px){.route-core{width:84px;height:84px;padding:0}}
@media(max-width:700px){.route-core{width:68px;height:68px;padding:0}}