/* Theme backgrounds and the rail share one workspace color. */
:root{--surface:#fafafa;--surface-soft:#f0f0f0;--ink:#171717;--muted:#686868;--line:#e3e3e3;--rail:#000000;--rail-ink:#ffffff;background:color-mix(in srgb,var(--bg),#000 9%)}
:root[data-appearance=dark]{--surface:#242424;--surface-soft:#303030;--ink:#f7f7f7;--muted:#bcbcbc;--line:#414141;--rail:#ffffff;--rail-ink:#000000;background:#0c0c0c}
body,.main{background:transparent}.app-shell,.welcome-shell{background:var(--bg)}.sidebar .nav{width:64px;background:var(--rail);padding:19px 0;border-radius:32px;gap:9px;isolation:isolate}.sidebar .nav-item{width:64px;height:46px;border-radius:0;background:transparent;color:var(--rail-ink);position:relative;overflow:visible;padding:0;margin:0;justify-content:center;z-index:1}.sidebar .nav-item:hover,.sidebar .nav-item:focus-visible{background:color-mix(in srgb,var(--rail),var(--rail-ink) 12%);color:var(--rail-ink);border-radius:16px}.sidebar .nav-item.active,.sidebar .nav-item.active:hover,.sidebar .nav-item.active:focus-visible{width:56px;margin-left:8px;background:var(--bg);color:var(--ink);border-radius:23px 0 0 23px;box-shadow:none}.sidebar .nav-item.active svg{transform:translateX(-4px)}.sidebar .nav-item::after,.sidebar .nav-item:hover::after,.sidebar .nav-item:focus-visible::after{display:none!important;content:none}.nav-join{display:none;position:absolute;right:0;width:20px;height:20px;pointer-events:none;background:transparent}.active .nav-join{display:block}.nav-join-top{top:-20px;border-radius:0 0 20px 0;box-shadow:0 10px 0 0 var(--bg)}.nav-join-bottom{bottom:-20px;border-radius:0 20px 0 0;box-shadow:0 -10px 0 0 var(--bg)}.sidebar .nav-item>.nav-label{display:none;position:absolute;left:77px;top:6px;background:var(--rail);color:var(--rail-ink);padding:10px 13px;border-radius:12px;font-size:11px;font-weight:500;line-height:1.4;white-space:nowrap;z-index:3;pointer-events:none}.sidebar .nav-item:hover>.nav-label,.sidebar .nav-item:focus-visible>.nav-label{display:block}.sidebar .nav-item.active>.nav-label{left:69px}.sidebar .nav-item .nav-count{display:none}.btn-primary{background:var(--rail);color:var(--rail-ink)}.btn-primary:hover{background:color-mix(in srgb,var(--rail),var(--rail-ink) 15%)}.tour-help{color:var(--ink)}.theme-options{grid-template-columns:repeat(2,minmax(0,1fr));max-width:550px}.theme-choice{background:var(--surface);border:1px solid var(--line);padding:15px}.theme-choice.selected{border:2px solid var(--ink);padding:14px;background:var(--surface-soft)}.theme-choice strong{font-size:14px;margin-top:13px}.theme-choice small{font-size:11px}.theme-thumbnail{height:85px;border-radius:13px}.theme-thumbnail.light{background:#fff;border-color:#dedede}.theme-thumbnail.light>i{background:#000}.theme-thumbnail.light b{background:#d5d5d5}.theme-thumbnail.light em{background:#ededed}.theme-thumbnail.dark{background:#171717;border-color:#555}.theme-thumbnail.dark>i{background:#fff}.theme-thumbnail.dark b{background:#555}.theme-thumbnail.dark em{background:#383838}.background-settings{margin-top:26px}.background-options{display:flex;flex-wrap:wrap;gap:16px;margin-top:15px}.background-choice{width:66px;padding:0;text-align:center}.background-choice>span{width:43px;height:43px;border-radius:50%;display:grid;place-items:center;color:#171717;border:1px solid #0002;margin:0 auto;font-size:15px}.background-choice.selected>span{outline:2px solid var(--ink);outline-offset:4px}.background-choice small{display:block;font-size:10px;color:var(--muted);margin-top:12px;line-height:1.5}.custom-background{display:flex;align-items:center;gap:13px;margin-top:25px;padding:16px;border:1px solid var(--line);border-radius:17px;cursor:pointer;background:var(--surface)}.gradient-picker{display:block;position:relative;width:48px;height:48px;border:1px solid #0002;border-radius:50%;background:conic-gradient(#f8dfec,#e8dfff,#dcecff,#dff5ec,#fff3d2,#f8dfec);flex-shrink:0}.gradient-picker:after{content:'+';position:absolute;inset:0;display:grid;place-items:center;color:#171717;font-size:24px;font-weight:400;pointer-events:none}.gradient-picker input{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;opacity:0;cursor:pointer}.custom-background strong{font-size:12px;font-weight:500;display:block}.custom-background small{font-size:10px;color:var(--muted);display:block;line-height:1.7;margin-top:4px}.theme-dark-help{margin-top:22px;max-width:500px}.personal-preview{background:var(--bg)}.personal-preview-top .badge{background:var(--surface);color:var(--ink)}.catalog-row.selected{background:var(--surface-soft)}.level-options button[aria-pressed=true]{background:var(--rail);border-color:var(--rail);color:var(--rail-ink)}.wizard-progress span.active{background:var(--ink)}.confidence-row input[type=range]{accent-color:var(--ink)}.tour-spotlight{border-color:var(--ink)}.tour-dots i.active{background:var(--ink)}.view-tabs button.active{background:var(--bg);color:var(--ink)}.check-btn.checked{background:var(--rail);color:var(--rail-ink)}
@media(max-width:700px){.sidebar{background:var(--bg)}.sidebar.mobile-open .nav{background:var(--rail);width:100%;padding:19px 0;border-radius:26px;gap:9px}.sidebar.mobile-open .nav-item{width:100%;padding:0 17px;margin-left:0;border-radius:0;justify-content:flex-start;gap:12px;color:var(--rail-ink)}.sidebar.mobile-open .nav-item.active,.sidebar.mobile-open .nav-item.active:hover,.sidebar.mobile-open .nav-item.active:focus-visible{background:var(--bg);color:var(--ink);width:calc(100% - 10px);margin-left:10px;border-radius:23px 0 0 23px;padding-left:17px}.sidebar.mobile-open .nav-item.active svg{transform:none}.sidebar.mobile-open .nav-item>.nav-label,.sidebar.mobile-open .nav-item:hover>.nav-label,.sidebar.mobile-open .nav-item:focus-visible>.nav-label{display:inline;position:static;padding:0;background:none;color:inherit;font-size:12px;line-height:inherit}.sidebar.mobile-open .nav-item:hover:not(.active){border-radius:16px}.sidebar.mobile-open .nav-item>i.nav-join{display:none}.sidebar.mobile-open .nav-item.active>i.nav-join{display:block}.theme-options{gap:10px}.theme-choice{padding:12px}.theme-choice.selected{padding:11px}.theme-choice strong{font-size:13px}.theme-choice small{font-size:10px}.theme-thumbnail{height:75px}.background-options{gap:16px 10px}.background-choice{width:60px}.background-choice>span{width:38px;height:38px}.background-choice small{font-size:9px}.custom-background{padding:13px;gap:12px}.custom-background small{font-size:10px}.background-settings{margin-top:24px}}
/* Leave enough straight rail above and below a selected end item for its joins. */
.sidebar .nav{padding-top:44px;padding-bottom:44px}.nav-join{width:12px;height:12px}.nav-join-top{top:-12px;border-radius:0 0 12px 0;box-shadow:0 6px 0 0 var(--bg)}.nav-join-bottom{bottom:-12px;border-radius:0 12px 0 0;box-shadow:0 -6px 0 0 var(--bg)}.gradient-picker:focus-within{outline:3px solid var(--ink);outline-offset:4px}
@media(max-width:700px){.sidebar.mobile-open .nav{padding-top:38px;padding-bottom:38px}}
@media(max-height:680px) and (min-width:701px){.sidebar .nav{padding-top:36px;padding-bottom:36px;border-radius:24px}.sidebar .nav-item{height:39px}.sidebar .nav-item.active,.sidebar .nav-item.active:hover,.sidebar .nav-item.active:focus-visible{border-radius:20px 0 0 20px}.sidebar .nav{gap:7px}}
.nav-join-top{border-radius:0;box-shadow:none;background:radial-gradient(circle at top left,transparent 12px,var(--bg) 12px)}.nav-join-bottom{border-radius:0;box-shadow:none;background:radial-gradient(circle at bottom left,transparent 12px,var(--bg) 12px)}