@charset "UTF-8";
:root {
    --bg:#111318;
    --sidebar:#101216;
    --surface:#181b22;
    --surface-hover:#1e222c;
    --line:#292d36;
    --text:#edf0f7;
    --muted:#9bA2b3;
    --quiet:#737c90;
    --accent:#a0b2ff;
    --accent-strong:#829cfc;
    --green:#8dc6aa;
    --radius:14px;
    font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:var(--text);
    background:var(--bg);
    font-synthesis:none
}

* {
    box-sizing:border-box
}

body {
    margin:0;
    font-size:14px;
    line-height:1.5
}

button,input,textarea,select {
    font:inherit
}

button,a,input,textarea,select {
    -webkit-tap-highlight-color:transparent
}

button {
    cursor:pointer
}

button,a {
    touch-action:manipulation
}

button {
    color:inherit;
    border:0;
    background:none
}

a {
    color:inherit;
    text-decoration:none
}

button:disabled {
    cursor:default
}

button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible {
    outline:2px solid var(--accent);
    outline-offset:4px
}

button {
    transition:background .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s
}

button:active {
    transform:translateY(1px)
}

h1,h2,h3,p {
    margin:0
}

h2 {
    font-size:15px;
    font-weight:620;
    letter-spacing:-.2px
}

h3 {
    font-weight:600
}

::selection {
    background:#435280;
    color:#fff
}

[hidden] {
    display:none!important
}

.icon {
    height:19px;
    width:19px;
    flex-shrink:0
}

.muted-icon {
    color:var(--quiet)
}

.app-shell {
    min-height:100vh
}

.sidebar {
    width:226px;
    position:fixed;
    inset:0 auto 0 0;
    border-right:1px solid #24272f;
    background:var(--sidebar);
    padding:31px 17px 0;
    z-index:30;
    display:flex;
    flex-direction:column
}

.brand {
    display:flex;
    align-items:center;
    gap:11px;
    font-size:20px;
    letter-spacing:-.8px;
    font-weight:620;
    margin:0 10px 49px
}

.brand-light {
    font-weight:390;
    color:#c8ccd8
}

.brand-mark {
    width:27px;
    height:27px;
    border:1px solid #8896bb;
    border-radius:8px;
    transform:rotate(-13deg);
    display:grid;
    place-items:center;
    box-shadow:0 0 18px #8198ff0d
}

.brand-mark span {
    width:11px;
    height:11px;
    border:1px solid #aabbec;
    border-radius:3px;
    transform:rotate(26deg)
}

.workspace-label {
    font-size:9px;
    font-weight:650;
    letter-spacing:1.55px;
    color:#798192;
    padding:0 13px;
    margin-bottom:15px
}

.primary-nav {
    display:flex;
    flex-direction:column;
    gap:5px
}

.nav-item {
    display:flex;
    align-items:center;
    gap:13px;
    width:100%;
    padding:11px 13px;
    border-radius:7px;
    color:#9fa6b7;
    text-align:left;
    font-size:13px;
    position:relative
}

.nav-item .icon {
    width:18px;
    height:18px;
    color:#7f879b
}

.nav-item:hover,.project-nav:hover {
    background:#1a1e27;
    color:var(--text)
}

.nav-item.active {
    background:linear-gradient(100deg,#29314588,#242a3b55);
    color:#d9e1ff
}

.nav-item.active:before {
    content:"";
    width:2px;
    height:18px;
    background:#96a9f8;
    position:absolute;
    left:-17px;
    border-radius:2px
}

.nav-item.active .icon {
    color:#a4b4f1
}

.nav-count {
    margin-left:auto;
    background:#232732;
    color:#a9b0c0;
    border:1px solid #303542;
    padding:0 6px;
    font-size:10px;
    line-height:18px;
    border-radius:4px
}

.sidebar-divider {
    height:1px;
    background:#23262e;
    margin:25px 12px
}

.project-label {
    display:flex;
    justify-content:space-between;
    margin-bottom:8px
}

.project-label span {
    letter-spacing:0;
    font-weight:400
}

.project-nav {
    display:flex;
    align-items:center;
    width:100%;
    gap:12px;
    padding:12px 13px;
    font-size:13px;
    border-radius:7px
}

.project-dot {
    height:7px;
    width:7px;
    background:#9eacf4;
    border-radius:50%;
    box-shadow:0 0 12px #9eacf433
}

.project-platform {
    font-size:10px;
    margin-left:auto;
    color:#80889b
}

.sidebar-bottom {
    margin-top:auto
}

.preview-note {
    margin:24px 12px 25px;
    font-size:11px;
    color:#a5acbc
}

.preview-note>.live-dot {
    width:5px;
    height:5px;
    margin-right:6px;
    background:#9caedf
}

.preview-note p {
    font-size:10px;
    color:#778092;
    margin:6px 0 0 13px
}

.profile {
    border-top:1px solid #252831;
    padding:21px 9px;
    display:flex;
    gap:10px;
    align-items:center
}

.avatar {
    width:33px;
    height:33px;
    display:grid;
    place-items:center;
    border:1px solid #363b48;
    background:#222631;
    border-radius:9px;
    font-size:10px;
    color:#bbc4dc;
    letter-spacing:.3px
}

.profile strong,.profile span {
    display:block
}

.profile strong {
    font-size:11px;
    font-weight:550
}

.profile div>span {
    font-size:10px;
    color:#7f889a;
    margin-top:2px
}

.profile-dot {
    width:5px;
    height:5px;
    background:#91b99f;
    border-radius:50%;
    margin-left:auto
}

.main-shell {
    margin-left:226px
}

.topbar {
    height:72px;
    border-bottom:1px solid #24272f;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 42px;
    background:#111318d9
}

.breadcrumb {
    display:flex;
    align-items:center;
    gap:15px;
    font-size:11px;
    color:#858ea0
}

.breadcrumb .icon {
    width:12px;
    height:12px;
    color:#525b6d
}

.breadcrumb strong {
    font-weight:500;
    color:#cbd0dc
}

.topbar-actions {
    display:flex;
    align-items:center;
    gap:18px
}

.local-badge {
    font-size:10px;
    color:#a0a9ba;
    display:flex;
    align-items:center;
    gap:7px
}

.live-dot {
    width:5px;
    height:5px;
    background:#94bea7;
    border-radius:50%;
    display:inline-block
}

.icon-button {
    width:33px;
    height:33px;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    border:1px solid transparent;
    border-radius:7px;
    color:#8a93a6
}

.icon-button:hover {
    background:#252b36;
    color:#d8e0f5;
    border-color:#333a4a
}

.icon-button .icon {
    width:16px;
    height:16px
}

.mobile-menu {
    display:none
}

main {
    max-width:1560px;
    margin:auto;
    padding:38px 42px 22px
}

.project-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin-bottom:30px
}

.project-identity {
    display:flex;
    align-items:center;
    gap:20px;
    min-width:0
}

.orbit-app-icon {
    width:74px;
    height:74px;
    position:relative;
    border-radius:20px;
    background:radial-gradient(circle at 35% 25%,#28385a,#141d30 70%);
    border:1px solid #3b456055;
    box-shadow:0 5px 24px #0002,0 0 35px #677ac509;
    flex-shrink:0;
    overflow:hidden
}

.app-planet {
    width:25px;
    height:25px;
    position:absolute;
    left:24px;
    top:24px;
    border-radius:50%;
    background:radial-gradient(circle at 25% 20%,#d3d9ff,#748bca 40%,#293d70 80%);
    box-shadow:0 0 18px #8b9dcd33
}

.app-orbit {
    width:55px;
    height:27px;
    position:absolute;
    border:1px solid #a9b8ed90;
    border-radius:50%;
    left:9px;
    top:22px;
    transform:rotate(-38deg)
}

.app-satellite {
    height:5px;
    width:5px;
    position:absolute;
    left:57px;
    top:22px;
    border-radius:50%;
    background:#c8d5ff;
    box-shadow:0 0 9px #a8bbff
}

.heading-eyebrow {
    display:flex;
    align-items:center;
    gap:12px;
    font-size:9px;
    letter-spacing:1.5px;
    color:#9aa5bf;
    font-weight:550;
    margin-bottom:4px
}

.demo-badge {
    font-size:9px;
    letter-spacing:0;
    font-weight:450;
    color:#8690a4;
    border:1px solid #2d3441;
    border-radius:4px;
    padding:1px 5px
}

h1 {
    font-size:33px;
    font-weight:600;
    line-height:1.3;
    letter-spacing:-1.2px;
    display:flex;
    align-items:center;
    gap:16px
}

.status-badge {
    font-size:10px;
    font-weight:450;
    letter-spacing:0;
    color:#aebce8;
    border:1px solid #43537a70;
    background:#25314a44;
    border-radius:5px;
    padding:3px 7px;
    display:inline-flex;
    align-items:center;
    gap:6px
}

.status-badge>span {
    width:4px;
    height:4px;
    background:#a4baff;
    border-radius:50%
}

.project-heading p {
    font-size:11px;
    color:#929bae;
    margin-top:5px
}

.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius:7px;
    padding:10px 14px;
    font-size:11px;
    font-weight:600;
    white-space:nowrap;
    border:1px solid transparent
}

.button .icon {
    width:15px;
    height:15px
}

.button-primary {
    color:#11182b;
    background:#b3c3ff;
    border-color:#c0cdff;
    box-shadow:0 1px 0 #e1e7ff33 inset,0 3px 18px #a1b5ff0b
}

.button-primary:hover {
    background:#c5d1ff;
    box-shadow:0 0 23px #97afff22;
    transform:translateY(-1px)
}

.button-secondary {
    background:#252b38;
    border-color:#394151;
    color:#d1d9ec
}

.button-secondary:hover {
    background:#30384a
}

.project-tabs {
    display:flex;
    gap:25px;
    border-bottom:1px solid #2a2e38;
    margin-bottom:27px;
    overflow-x:auto;
    scrollbar-width:none
}

.project-tabs::-webkit-scrollbar {
    display:none
}

.tab {
    position:relative;
    display:flex;
    align-items:center;
    gap:7px;
    padding:0 2px 16px;
    white-space:nowrap;
    color:#8f98ab;
    font-size:11px;
    font-weight:500
}

.tab:hover {
    color:#dae2f5
}

.tab.active {
    color:#c7d3ff
}

.tab.active:after {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:2px;
    background:#a8bbfc;
    content:"";
    box-shadow:0 -2px 12px #91a9ef30;
    border-radius:2px 2px 0 0
}

.tab-count {
    background:#272d39;
    border:1px solid #303748;
    border-radius:4px;
    font-size:9px;
    padding:0 4px;
    color:#a2acc2
}

.tab-panel {
    animation:panel-in .35s ease both;
    outline:none
}

.overview-grid {
    display:grid;
    grid-template-columns:minmax(0,1.56fr) minmax(290px,1fr);
    gap:20px
}

.panel {
    background:var(--surface);
    border:1px solid #2a2e39;
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:0 4px 20px #00000008
}

.panel-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px
}

.panel-heading p {
    font-size:10px;
    color:#8791a4;
    margin-top:5px
}

.release-hero {
    min-height:306px;
    position:relative;
    background:radial-gradient(ellipse at 85% 45%,#24314c66,transparent 66%),linear-gradient(125deg,#1d2230,#181d28 55%,#191f2c);
    padding:26px 28px 0
}

.hero-copy {
    position:relative;
    z-index:2;
    max-width:65%
}

.eyebrow {
    display:flex;
    align-items:center;
    gap:7px;
    color:#96a3c3;
    letter-spacing:1.6px;
    font-size:8px;
    font-weight:600
}

.little-line {
    height:1px;
    width:16px;
    background:#9eafd9
}

.hero-copy h2 {
    font-size:29px;
    line-height:1.23;
    letter-spacing:-1px;
    font-weight:530;
    margin-top:18px
}

.hero-copy h2>span {
    color:#b0bee7
}

.hero-copy p {
    font-size:11px;
    line-height:1.75;
    color:#9ba6bd;
    margin-top:13px
}

.text-button {
    display:inline-flex;
    align-items:center;
    gap:9px;
    color:#b7c6f3;
    font-size:10px;
    padding:0
}

.text-button .icon {
    width:14px;
    height:14px
}

.text-button:hover {
    color:#ecf1ff
}

.hero-link {
    margin-top:19px
}

.hero-link:hover .icon {
    transform:translateX(3px)
}

.hero-link .icon {
    transition:transform .2s
}

.hero-footer {
    position:relative;
    z-index:2;
    margin-top:24px;
    border-top:1px solid #65718d23;
    padding:12px 0;
    display:flex;
    justify-content:space-between;
    align-items:center
}

.hero-footer>span:first-child {
    display:flex;
    align-items:center;
    gap:7px;
    font-size:9px;
    color:#9ba7c0
}

.hero-footer .icon {
    width:12px;
    height:12px
}

.small-status {
    display:inline-flex;
    align-items:center;
    font-size:9px;
    color:#adbeef;
    background:#2b385550;
    border:1px solid #7085b62c;
    border-radius:4px;
    padding:2px 6px;
    white-space:nowrap
}

.orbital-art {
    position:absolute;
    inset:0 0 35px auto;
    width:49%;
    pointer-events:none;
    opacity:.94
}

.orbital-glow {
    position:absolute;
    width:220px;
    height:220px;
    border-radius:50%;
    background:radial-gradient(circle,#59699e28,transparent 67%);
    left:50%;
    top:50%;
    transform:translate(-50%,-50%)
}

.orbit-ring {
    position:absolute;
    left:54%;
    top:52%;
    transform:translate(-50%,-50%) rotate(-26deg);
    border:1px solid #8498cd26;
    border-radius:50%;
    aspect-ratio:1.22
}

.ring-outer {
    width:260px;
    border-color:#758aba17
}

.ring-middle {
    width:195px;
    border-color:#91a6da2e
}

.ring-inner {
    width:128px;
    border-color:#a2b5df44
}

.orbital-planet {
    width:92px;
    height:92px;
    position:absolute;
    left:54%;
    top:52%;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(circle at 28% 23%,#b7c5e3 0%,#7286b6 25%,#3c507c 53%,#1b2a49 77%,#14203a 100%);
    box-shadow:-5px -3px 20px #a4bbfa0c,15px 15px 25px #050a1740,inset -8px -7px 16px #0c173770
}

.satellite {
    position:absolute;
    border-radius:50%;
    background:#a9bce4;
    box-shadow:0 0 12px #9fb6ff40
}

.satellite-one {
    width:9px;
    height:9px;
    left:80%;
    top:25%;
    background:radial-gradient(circle at 30% 20%,#d8e2fa,#536e9f)
}

.satellite-two {
    width:5px;
    height:5px;
    left:18%;
    top:63%;
    background:#8499c1
}

.orbit-cross {
    position:absolute;
    color:#9baad349;
    font-size:13px;
    font-weight:200
}

.cross-one {
    left:25%;
    top:20%
}

.cross-two {
    right:15%;
    bottom:18%
}

.progress-panel {
    padding:25px 25px 0
}

.progress-panel .panel-heading h2 {
    font-size:13px
}

.progress-value {
    display:flex;
    align-items:baseline;
    gap:10px;
    margin-top:20px
}

.progress-value>strong {
    font-size:43px;
    letter-spacing:-2px;
    font-weight:480;
    line-height:1.15
}

.progress-value>strong>span {
    font-size:23px;
    font-weight:400;
    color:#9ba7c0;
    margin-left:3px;
    letter-spacing:-.5px
}

.progress-value>span {
    font-size:10px;
    color:#8893aa
}

.progress-track {
    height:5px;
    background:#303746;
    border-radius:4px;
    margin-top:19px;
    overflow:hidden
}

.progress-track>span {
    display:block;
    height:100%;
    background:linear-gradient(90deg,#899ecc,#becdf5);
    border-radius:4px;
    box-shadow:0 0 12px #b5caff44;
    transition:width .45s cubic-bezier(.2,.8,.2,1)
}

.progress-caption {
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:9px;
    margin-top:9px;
    color:#909bb0
}

.progress-caption strong {
    font-weight:550;
    color:#c7d0e3
}

.progress-caption>span:last-child {
    color:#79869e
}

.progress-stats {
    display:flex;
    gap:30px;
    margin-top:22px
}

.progress-stats>div {
    display:grid;
    grid-template-columns:5px auto;
    column-gap:8px;
    align-items:center
}

.stat-dot {
    width:5px;
    height:5px;
    border-radius:50%
}

.stat-dot-blue {
    background:#97a9dd
}

.stat-dot-gray {
    background:#69758e
}

.progress-stats strong {
    font-size:16px;
    font-weight:500;
    line-height:1
}

.progress-stats>div>span:last-child {
    grid-column:2;
    font-size:9px;
    color:#8d99ae;
    margin-top:5px
}

.release-meta {
    display:flex;
    align-items:center;
    gap:7px;
    color:#8591a7;
    font-size:9px;
    padding:15px 0;
    border-top:1px solid #2d3442;
    margin-top:20px
}

.release-meta .icon {
    width:13px;
    height:13px
}

.tasks-panel {
    padding:23px 23px 0
}

.quiet-button {
    font-size:10px;
    color:#9da9c4;
    display:flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
    padding:5px 0
}

.quiet-button .icon {
    height:13px;
    width:13px
}

.quiet-button:hover {
    color:#d6e1ff
}

.task-list {
    margin-top:14px
}

.task-row {
    display:flex;
    align-items:center;
    gap:12px;
    padding:15px 0;
    min-height:65px;
    border-bottom:1px solid #292f3b;
    animation:panel-in .25s ease
}

.task-row:last-child {
    border-bottom:0
}

.task-check {
    width:18px;
    height:18px;
    border:1px solid #566079;
    border-radius:5px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .2s,border-color .2s;
    padding:0
}

.task-check:hover {
    background:#3e4f7633;
    border-color:#a3b5e7
}

.task-check .icon {
    width:12px;
    height:12px;
    opacity:0
}

.task-check[aria-checked=true] {
    background:#34473d;
    border-color:#688e75;
    color:#c0e2c9
}

.task-check[aria-checked=true] .icon {
    opacity:1
}

.task-copy {
    min-width:0;
    flex:1
}

.task-title {
    font-size:11px;
    font-weight:450;
    color:#dce1ed;
    overflow-wrap:anywhere
}

.task-row.is-done .task-title {
    text-decoration:line-through;
    color:#839188
}

.task-subline {
    display:flex;
    align-items:center;
    gap:7px;
    font-size:9px;
    color:#8290a7;
    margin-top:5px
}

.task-subline>.bullet {
    color:#59647a;
    font-size:8px
}

.task-state {
    font-size:8px;
    padding:3px 6px;
    border-radius:4px;
    border:1px solid #3e48613b;
    color:#99a8c8;
    background:#222a3a55;
    white-space:nowrap
}

.task-state.todo {
    color:#9aa3b7;
    border-color:#3c425055;
    background:#24293444
}

.task-state.done {
    color:#96b59e;
    border-color:#3d5c4644;
    background:#23312955
}

.add-task-row {
    border-top:1px solid #2a303d;
    width:100%;
    display:flex;
    align-items:center;
    gap:9px;
    font-size:10px;
    color:#91a1c2;
    text-align:left;
    padding:16px 0
}

.add-task-row .icon {
    height:14px;
    width:14px
}

.add-task-row:hover {
    color:#d2dfff
}

.versions-panel {
    padding:23px 23px 14px
}

.timeline {
    margin:22px 0 0 5px
}

.timeline-item {
    padding:0 0 25px 21px;
    position:relative;
    border-left:1px solid #333b4c
}

.timeline-item:last-child {
    border-color:transparent;
    padding-bottom:0
}

.timeline-node {
    position:absolute;
    left:-4px;
    top:6px;
    width:7px;
    height:7px;
    background:#1b202a;
    border:1px solid #65718b;
    border-radius:50%
}

.current .timeline-node {
    background:#adbcf1;
    border-color:#adbcf1;
    box-shadow:0 0 0 4px #8092cb15,0 0 13px #b5c6ff24
}

.timeline-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px
}

.timeline-top strong {
    font-size:11px;
    font-weight:500
}

.timeline-item p {
    font-size:10px;
    color:#9aa6bd;
    margin-top:5px
}

.timeline-detail {
    font-size:9px;
    color:#738199;
    display:block;
    margin-top:5px
}

.muted-label {
    font-size:9px;
    color:#8290a7
}

.released .timeline-node {
    height:12px;
    width:12px;
    left:-6px;
    top:4px;
    background:#25382e;
    border-color:#496751;
    color:#b0cdbb;
    display:grid;
    place-items:center
}

.timeline-node .icon {
    height:8px;
    width:8px;
    stroke-width:2
}

.resources-panel {
    padding:23px 23px 5px
}

.resource-compact {
    display:flex;
    align-items:center;
    gap:13px;
    padding:18px 0;
    border-bottom:1px solid #2a303b
}

.resource-compact:last-child {
    border-bottom:0
}

.resource-type-icon {
    width:37px;
    height:39px;
    display:grid;
    place-items:center;
    border-radius:8px;
    background:#232b3a70;
    border:1px solid #414d6933;
    color:#92a5ce;
    flex-shrink:0
}

.resource-type-icon .icon {
    width:18px;
    height:18px
}

.resource-info {
    flex:1;
    min-width:0
}

.resource-info>strong {
    display:block;
    font-size:11px;
    font-weight:500
}

.resource-info>span {
    display:block;
    font-size:9px;
    color:#94a0b5;
    margin-top:2px
}

.resource-info>code {
    display:block;
    font-size:9px;
    color:#7788a7;
    margin-top:5px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-family:ui-monospace,SFMono-Regular,Consolas,monospace
}

.note-panel {
    padding:23px;
    display:flex;
    flex-direction:column;
    background:linear-gradient(140deg,#1c202b,#191d25)
}

.pinned-note {
    font-size:15px;
    line-height:1.85;
    letter-spacing:-.2px;
    color:#b9c3da;
    margin:22px 0 25px;
    font-weight:400
}

.note-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:auto
}

.note-footer>span {
    font-size:9px;
    color:#7d8ba4
}

.page-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-top:27px;
    padding:0 2px;
    font-size:9px;
    color:#6f7b91
}

.page-footer>span:first-child {
    display:flex;
    align-items:center;
    gap:7px
}

.footer-dot {
    height:4px;
    width:4px;
    background:#6f819f;
    border-radius:50%
}

.section-intro {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:12px 0 28px
}

.section-intro h2 {
    font-size:25px;
    font-weight:530;
    letter-spacing:-.8px;
    margin-top:10px
}

.section-intro p {
    font-size:12px;
    color:#909db6;
    margin-top:8px
}

.segmented-control {
    display:flex;
    padding:3px;
    border:1px solid #303747;
    border-radius:8px;
    background:#171d28
}

.segmented-control button {
    font-size:10px;
    color:#9daac3;
    padding:7px 10px;
    border-radius:5px
}

.segmented-control button.active {
    background:#313b50;
    color:#d4dff6;
    box-shadow:0 2px 4px #0002
}

.full-tasks {
    padding:24px
}

.full-tasks .task-row {
    min-height:76px
}

.full-tasks .task-title {
    font-size:13px
}

.full-tasks .task-subline {
    font-size:10px
}

.full-tasks .task-state {
    font-size:10px
}

.full-tasks .add-task-row {
    padding-bottom:0
}

.empty-tasks {
    font-size:12px;
    color:#96a6c4;
    padding:35px 10px;
    text-align:center
}

.inline-note {
    display:flex;
    align-items:flex-start;
    gap:11px;
    padding:24px 2px;
    color:#8e9eb9;
    font-size:11px;
    line-height:1.7
}

.inline-note .icon {
    height:17px;
    width:17px;
    flex-shrink:0;
    margin-top:1px
}

.release-cards {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px
}

.release-card {
    padding:25px;
    display:flex;
    flex-direction:column;
    min-height:385px
}

.featured-release {
    border-color:#50628b;
    background:linear-gradient(160deg,#232d42,#191f2b)
}

.release-card-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:30px;
    gap:10px
}

.version-number {
    font-size:32px;
    font-weight:400;
    letter-spacing:-1.5px
}

.neutral-badge,.success-badge {
    font-size:9px;
    white-space:nowrap;
    border:1px solid #45516a77;
    background:#252d3b66;
    color:#a8b7d0;
    padding:3px 7px;
    border-radius:5px
}

.success-badge {
    color:#9abfa7;
    background:#273a2f55;
    border-color:#43614e66
}

.release-card h3 {
    font-size:16px;
    letter-spacing:-.3px;
    margin-bottom:12px
}

.release-card p {
    font-size:11px;
    line-height:1.85;
    color:#a0adc5
}

.feature-list {
    padding:0;
    list-style:none;
    margin:25px 0;
    font-size:11px;
    line-height:1.75;
    color:#bdc8df
}

.feature-list li {
    margin:10px 0;
    padding-left:14px;
    position:relative
}

.feature-list li:before {
    content:"";
    height:4px;
    width:4px;
    background:#8496bd;
    position:absolute;
    left:0;
    top:8px;
    border-radius:50%
}

.release-card .button {
    align-self:flex-start;
    margin-top:auto
}

.release-card-bottom {
    margin-top:auto;
    font-size:10px;
    color:#8d9bb4;
    padding-top:12px
}

.resource-cards {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px
}

.resource-card {
    padding:25px
}

.resource-card-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:24px
}

.resource-card h3 {
    font-size:18px;
    margin-bottom:9px
}

.resource-card p {
    font-size:11px;
    color:#98a8c2;
    line-height:1.8
}

.resource-card dl {
    margin:23px 0
}

.resource-card dl>div {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:9px 0;
    font-size:11px;
    border-bottom:1px solid #2c3443
}

.resource-card dt {
    color:#8594ae
}

.resource-card dd {
    margin:0;
    color:#b7c4dc;
    text-align:right
}

.path-box {
    display:flex;
    align-items:center;
    gap:8px;
    padding:9px 12px;
    border:1px solid #334058;
    border-radius:7px;
    background:#131b29
}

.path-box code {
    font:10px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;
    color:#a0b5da;
    flex:1;
    min-width:0;
    overflow-wrap:anywhere
}

.path-box .icon-button {
    flex-shrink:0
}

.editor-panel {
    padding:28px
}

.editor-panel>label {
    display:block;
    font-size:14px;
    font-weight:500;
    margin-bottom:21px
}

.editor-panel textarea {
    width:100%;
    min-height:310px;
    resize:vertical;
    border:0;
    padding:0;
    color:#b4c2d9;
    background:transparent;
    font-size:13px;
    line-height:2;
    outline-offset:7px
}

.editor-footer {
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-top:1px solid #2f394a;
    padding-top:20px;
    margin-top:17px;
    gap:20px
}

.editor-footer>span {
    font-size:10px;
    color:#899ab8
}

.task-dialog {
    padding:29px;
    border:1px solid #414c64;
    border-radius:16px;
    width:min(490px,calc(100% - 32px));
    background:#1b2230;
    color:var(--text);
    box-shadow:0 40px 130px #0008
}

.task-dialog[open] {
    animation:dialog-in .2s ease
}

.task-dialog::backdrop {
    background:#060911aa;
    backdrop-filter:blur(5px)
}

.dialog-heading {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:15px;
    margin-bottom:27px
}

.dialog-heading h2 {
    font-size:24px;
    font-weight:500;
    letter-spacing:-.7px;
    margin-top:10px
}

.task-dialog label {
    display:block;
    font-size:11px;
    color:#aebdd8;
    margin-bottom:8px
}

.task-dialog input,.task-dialog select {
    width:100%;
    background:#121a28;
    border:1px solid #3a4760;
    color:#d9e2f3;
    border-radius:6px;
    padding:10px 12px;
    font-size:12px
}

.task-dialog input::placeholder {
    color:#6f81a2
}

.form-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-top:19px
}

.dialog-footer {
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:30px
}

.dialog-hint {
    font-size:9px;
    color:#889bb9;
    margin-top:16px;
    text-align:right
}

.toast {
    position:fixed;
    bottom:27px;
    left:calc(50% + 113px);
    transform:translate(-50%,12px);
    background:#29364c;
    border:1px solid #536681;
    color:#dce8fc;
    font-size:12px;
    padding:12px 18px;
    border-radius:9px;
    box-shadow:0 10px 35px #0005;
    z-index:100;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s,transform .2s;
    max-width:calc(100vw - 32px);
    width:max-content;
    text-align:center
}

.toast.visible {
    opacity:1;
    transform:translate(-50%,0)
}

.sidebar-overlay {
    position:fixed;
    inset:0;
    background:#03060abc;
    backdrop-filter:blur(3px);
    z-index:29
}

@keyframes panel-in {
    from {
        opacity:0;
        transform:translateY(5px)
    }
    to {
        opacity:1;
        transform:translateY(0)
    }
}

@keyframes dialog-in {
    from {
        opacity:0;
        transform:translateY(8px) scale(.985)
    }
    to {
        opacity:1;
        transform:translateY(0) scale(1)
    }
}

@media(min-width:1550px) {
    main {
        padding-top:45px
    }
    .project-heading {
        margin-bottom:38px
    }
    .overview-grid {
        gap:24px
    }
    .release-hero {
        min-height:325px;
        padding:30px 32px 0
    }
    .hero-copy h2 {
        font-size:34px
    }
    .hero-footer {
        margin-top:26px
    }
    .progress-panel {
        padding:29px 28px 0
    }
    .progress-value {
        margin-top:25px
    }
    .progress-stats {
        margin-top:27px
    }
    .task-row {
        min-height:74px
    }
    .task-title {
        font-size:12px
    }
    .panel-heading h2 {
        font-size:16px
    }
    .timeline-item {
        padding-bottom:31px
    }
    .pinned-note {
        font-size:17px
    }
    .orbital-planet {
        width:106px;
        height:106px
    }
    .ring-outer {
        width:315px
    }
    .ring-middle {
        width:233px
    }
    .ring-inner {
        width:151px
    }
}

@media(max-width:1180px) {
    .sidebar {
        width:205px
    }
    .main-shell {
        margin-left:205px
    }
    .brand {
        font-size:18px;
        margin-left:8px
    }
    .topbar {
        padding:0 28px
    }
    main {
        padding:30px 28px 22px
    }
    .overview-grid {
        grid-template-columns:minmax(0,1.35fr) minmax(260px,1fr);
        gap:16px
    }
    .release-hero {
        padding-left:23px;
        padding-right:23px
    }
    .hero-copy h2 {
        font-size:27px
    }
    .orbital-art {
        opacity:.7;
        right:-12px
    }
    .orbital-planet {
        width:72px;
        height:72px
    }
    .ring-outer {
        width:215px
    }
    .ring-middle {
        width:164px
    }
    .ring-inner {
        width:106px
    }
    .progress-panel {
        padding:24px 20px 0
    }
    .tasks-panel,.versions-panel,.resources-panel,.note-panel {
        padding-left:20px;
        padding-right:20px
    }
    .task-row {
        gap:9px
    }
    .task-state {
        font-size:7px;
        padding:2px 4px
    }
    .task-title {
        font-size:10px
    }
    .release-card {
        padding:20px
    }
    .release-cards {
        gap:14px
    }
    .release-card h3 {
        font-size:14px
    }
    .release-card-top {
        flex-wrap:wrap
    }
    .project-heading p {
        max-width:300px
    }
    .toast {
        left:calc(50% + 102px)
    }
}

@media(max-width:960px) {
    .sidebar {
        width:190px;
        padding-left:12px;
        padding-right:12px
    }
    .main-shell {
        margin-left:190px
    }
    .brand {
        font-size:17px;
        gap:9px
    }
    .brand-mark {
        height:23px;
        width:23px
    }
    .workspace-label {
        font-size:8px;
        letter-spacing:1.1px
    }
    .nav-item {
        font-size:12px
    }
    .nav-item.active:before {
        left:-12px
    }
    .project-platform {
        font-size:9px
    }
    .profile {
        padding-left:4px;
        padding-right:4px
    }
    .profile strong {
        font-size:10px
    }
    .profile div>span {
        font-size:9px
    }
    .preview-note {
        font-size:10px
    }
    .preview-note p {
        font-size:9px
    }
    .topbar {
        padding:0 23px
    }
    main {
        padding:28px 23px 20px
    }
    .project-heading {
        align-items:flex-start;
        gap:15px
    }
    .orbit-app-icon {
        height:62px;
        width:62px;
        border-radius:17px
    }
    .app-planet {
        left:18px;
        top:18px
    }
    .app-orbit {
        left:3px;
        top:16px
    }
    .app-satellite {
        left:51px;
        top:16px
    }
    .project-identity {
        gap:14px
    }
    .heading-eyebrow {
        font-size:8px;
        gap:7px
    }
    .demo-badge {
        font-size:8px
    }
    h1 {
        font-size:29px;
        gap:10px
    }
    .project-heading>.button {
        font-size:10px;
        padding:8px 10px;
        margin-top:22px
    }
    .project-heading p {
        max-width:255px;
        font-size:10px
    }
    .overview-grid {
        grid-template-columns:minmax(0,1fr);
        gap:17px
    }
    .release-hero {
        min-height:300px
    }
    .hero-copy h2 {
        font-size:32px
    }
    .orbital-art {
        width:46%;
        right:10px;
        opacity:.9
    }
    .orbital-planet {
        width:100px;
        height:100px
    }
    .ring-outer {
        width:290px
    }
    .ring-middle {
        width:215px
    }
    .ring-inner {
        width:142px
    }
    .progress-panel {
        display:grid;
        grid-template-columns:1fr 1fr;
        column-gap:26px;
        padding:22px 24px 0
    }
    .progress-panel>.panel-heading {
        grid-column:1/-1
    }
    .progress-value {
        grid-row:2 / 4;
        margin-top:15px
    }
    .progress-track {
        grid-column:2;
        grid-row:2;
        align-self:end
    }
    .progress-caption {
        grid-column:2;
        grid-row:3;
        margin-top:8px
    }
    .progress-stats {
        grid-column:1;
        grid-row:4;
        margin:18px 0
    }
    .release-meta {
        grid-row:4;
        grid-column:2;
        border-top:0;
        margin:0;
        font-size:9px
    }
    .tasks-panel {
        grid-row:3
    }
    .task-title {
        font-size:12px
    }
    .task-state {
        font-size:9px;
        padding:3px 6px
    }
    .task-row {
        min-height:72px
    }
    .timeline {
        margin-top:15px
    }
    .timeline-item {
        padding-bottom:25px
    }
    .resources-panel {
        grid-row:4
    }
    .release-cards {
        grid-template-columns:1fr
    }
    .release-card {
        min-height:0;
        padding:26px
    }
    .release-card-top {
        margin-bottom:18px
    }
    .release-card h3 {
        font-size:17px
    }
    .release-card p {
        font-size:12px
    }
    .feature-list {
        margin-top:15px
    }
    .release-card .button {
        margin-top:10px
    }
    .resource-cards {
        grid-template-columns:1fr
    }
    .page-footer {
        align-items:flex-start;
        flex-direction:column;
        gap:7px
    }
    .section-intro {
        align-items:flex-start;
        flex-wrap:wrap
    }
    .section-intro h2 {
        font-size:23px
    }
    .toast {
        left:calc(50% + 95px)
    }
}

@media(max-width:700px) {
    .sidebar {
        transform:translateX(-100%);
        transition:transform .22s ease;
        width:226px;
        padding:28px 17px 0
    }
    .sidebar.is-open {
        transform:translateX(0)
    }
    .sidebar .brand {
        font-size:20px;
        margin-left:10px
    }
    .sidebar .workspace-label {
        font-size:9px
    }
    .sidebar .nav-item {
        font-size:13px
    }
    .sidebar .nav-item.active:before {
        left:-17px
    }
    .main-shell {
        margin-left:0
    }
    .topbar {
        height:59px;
        padding:0 20px;
        gap:12px
    }
    .mobile-menu {
        display:inline-flex;
        margin-left:-7px
    }
    .breadcrumb {
        margin-right:auto;
        gap:10px;
        font-size:10px
    }
    .local-badge {
        font-size:9px;
        gap:5px
    }
    .topbar-actions {
        gap:9px
    }
    main {
        padding:26px 20px 20px
    }
    .project-heading {
        flex-wrap:wrap;
        margin-bottom:24px
    }
    .project-identity {
        gap:13px
    }
    .project-heading>.button {
        margin-top:0;
        padding:8px 12px
    }
    .project-heading p {
        max-width:none;
        font-size:10px
    }
    .project-tabs {
        gap:23px;
        margin-bottom:22px
    }
    .tab {
        font-size:10px;
        padding-bottom:13px
    }
    .overview-grid {
        gap:15px
    }
    .release-hero {
        min-height:293px;
        padding:24px 22px 0
    }
    .hero-copy h2 {
        font-size:30px
    }
    .hero-copy p {
        font-size:10px
    }
    .hero-link {
        font-size:9px
    }
    .hero-footer {
        margin-top:22px
    }
    .orbital-art {
        width:47%;
        right:-10px;
        opacity:.85
    }
    .orbital-planet {
        width:78px;
        height:78px
    }
    .ring-outer {
        width:235px
    }
    .ring-middle {
        width:176px
    }
    .ring-inner {
        width:116px
    }
    .progress-panel {
        padding:23px 22px 0;
        column-gap:16px
    }
    .task-title {
        font-size:11px
    }
    .panel-heading h2 {
        font-size:14px
    }
    .task-state {
        font-size:8px
    }
    .tasks-panel,.resources-panel,.note-panel,.versions-panel {
        padding-left:21px;
        padding-right:21px
    }
    .pinned-note {
        font-size:16px
    }
    .resources-panel .resource-info>code {
        font-size:8px
    }
    .full-tasks {
        padding:21px
    }
    .full-tasks .task-title {
        font-size:11px
    }
    .full-tasks .task-subline {
        font-size:9px
    }
    .full-tasks .task-state {
        font-size:8px
    }
    .editor-panel {
        padding:22px
    }
    .editor-panel textarea {
        font-size:12px;
        min-height:360px
    }
    .editor-footer {
        flex-wrap:wrap;
        gap:13px
    }
    .editor-footer .button {
        margin-left:auto
    }
    .section-intro h2 {
        font-size:24px
    }
    .toast {
        left:50%;
        bottom:18px
    }
    .form-grid {
        gap:12px
    }
    .task-dialog {
        padding:25px
    }
    .dialog-heading h2 {
        font-size:22px
    }
    .resource-card {
        padding:22px
    }
    .resource-card dd {
        font-size:10px
    }
    .preview-note p {
        font-size:10px
    }
    .profile strong {
        font-size:11px
    }
    .profile div>span {
        font-size:10px
    }
    .profile {
        padding:21px 9px
    }
}

@media(max-width:390px) {
    main {
        padding-left:15px;
        padding-right:15px
    }
    .topbar {
        padding-left:15px;
        padding-right:15px
    }
    .local-badge {
        font-size:8px
    }
    .project-identity {
        gap:10px
    }
    .orbit-app-icon {
        width:56px;
        height:56px;
        border-radius:15px
    }
    .app-planet {
        left:15px;
        top:15px
    }
    .app-orbit {
        left:0;
        top:13px
    }
    .app-satellite {
        left:48px;
        top:13px
    }
    .project-heading p {
        font-size:9px
    }
    .heading-eyebrow {
        letter-spacing:1px
    }
    .project-tabs {
        gap:19px
    }
    .hero-copy h2 {
        font-size:27px
    }
    .orbital-art {
        opacity:.65;
        right:-16px
    }
    .progress-panel {
        padding-left:19px;
        padding-right:19px
    }
    .progress-stats {
        gap:24px
    }
    .release-meta {
        font-size:8px;
        gap:5px
    }
    .task-state {
        max-width:63px;
        overflow:hidden;
        text-overflow:ellipsis
    }
    .task-row {
        gap:8px
    }
    .panel-heading h2 {
        font-size:13px
    }
    .quiet-button {
        font-size:9px
    }
    .task-title {
        font-size:10px
    }
    .resource-info>strong {
        font-size:10px
    }
    .resource-compact {
        gap:9px
    }
    .resource-type-icon {
        width:32px
    }
    .resource-info>span {
        font-size:8px
    }
    .resource-info>code {
        font-size:8px
    }
    .form-grid {
        grid-template-columns:1fr
    }
    .dialog-hint {
        text-align:left
    }
}

@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        animation:none!important;
        transition:none!important;
        scroll-behavior:auto!important
    }
}

/* Comfortable reading sizes for day-to-day project work. */
.breadcrumb,.local-badge,.project-heading p,.tab,.button,.text-button,.quiet-button,.add-task-row  {
    font-size:13px;
}

.heading-eyebrow,.demo-badge,.workspace-label,.eyebrow  {
    font-size:10px;
}

.panel-heading p,.hero-copy p,.progress-value>span,.progress-caption,.progress-stats>div>span:last-child,.release-meta,.hero-footer>span:first-child  {
    font-size:12px;
}

.task-title,.full-tasks .task-title,.resource-info>strong,.timeline-top>strong  {
    font-size:13px;
}

.task-subline,.full-tasks .task-subline,.task-state,.full-tasks .task-state,.resource-info>span,.timeline-item p,.timeline-detail,.small-status,.muted-label,.neutral-badge,.success-badge  {
    font-size:11px;
}

.task-state  {
    max-width:none;
}

.resource-info>code,.resources-panel .resource-info>code,.path-box code  {
    font-size:12px;
}

.note-footer>span,.page-footer,.editor-footer>span,.release-card-bottom,.dialog-hint  {
    font-size:11px;
}

.release-card p,.feature-list,.resource-card p,.resource-card dl>div,.resource-card dd,.inline-note  {
    font-size:13px;
}

.segmented-control button,.task-dialog label,.task-dialog input,.task-dialog select  {
    font-size:13px;
}

.editor-panel textarea  {
    font-size:14px;
}

@media(max-width:700px)  {
    .project-tabs  {
        gap:20px;
    }
    .tab  {
        font-size:12px;
    }
    .topbar .local-badge  {
        font-size:10px;
    }
    .project-heading p  {
        font-size:12px;
    }
    .hero-copy  {
        max-width:70%;
    }
    .release-meta,.progress-caption  {
        font-size:10px;
    }
    .progress-stats  {
        gap:20px;
    }
    .task-subline,.full-tasks .task-subline,.task-state,.full-tasks .task-state  {
        font-size:10px;
    }
    .resource-info>span  {
        font-size:11px;
    }
    .resource-info>code,.resources-panel .resource-info>code  {
        font-size:11px;
    }
    .task-dialog input,.task-dialog select,.editor-panel textarea  {
        font-size:16px;
    }
}